b211

Author: UnderlineWords

src/Modules/Elements/Grid/Grid.scss

@@ -24,7 +24,7 @@
 	.#{class('grid', 'row')} {
 		display              : grid;
 		grid-gap             : elements('grid', 'gap');
-		grid-template-columns: repeat($column-size, 1fr);
+		grid-template-columns: repeat($column-size, minmax(0, 1fr));
 		&> [class^="#{class('grid', 'column')}"] {
 			height    : fit-content;
 			padding   : elements('grid', 'columns', 'padding');

src/Modules/Utilities/helpers.scss

@@ -50,6 +50,7 @@
 	@include utils_with_specs(utils('margin'));
 	@include set_sides(utils('margin'));
 	@include set_utils('object-fit');
+	@include set_utils('object-position', true);
 	@include set_utils('order');
 	@include set_utils('outline-color', true);
 	@include set_utils('outline-offset');
@@ -68,6 +69,7 @@
 	@include set_utils('text-transform');
 	@include set_utils('text-wrap');
 	@include set_utils('user-select');
+	@include set_utils('vertical-align');
 	@include set_utils('width', true); 
 	@include set_utils('z-index');
 	@include other_helpers();	

src/Modules/Utilities/index.scss

@@ -894,19 +894,50 @@ $helpers: (
 	/// in a variety of ways; such as "preserve that aspect ratio"
 	/// or "stretch up and take up as much space as possible".
 	/// 
-	/// @example fit-cover
-	/// @example fit-scale-down
+	/// @example object-cover
+	/// @example object-scale-down
 	///
 	'object-fit': (
 		'enabled'    : true, // true or false
 		'property'   : 'object-fit', // css property name (don't change it !)
-		'prefix'     : 'fit-', // prefix of class name
+		'prefix'     : 'object-', // prefix of class name
 		'specificity': !important, // or null
 		'unit'       : null, // length units (px, rem, em, %, vh, vw etc)
 		'specs'      : null, // for extra variables
 		'values'     : (fill, contain, cover, none, scale-down)
 	),
 	/// 
+	/// Object Position
+	/// 
+	/// The object-position property is used together 
+	/// with object-fit to specify how an <img> or <video> 
+	/// should be positioned with x/y coordinates inside 
+	/// its "own content box".
+	/// 
+	/// @example object-left
+	/// @example object-left-bottom
+	///
+	'object-position': (
+		'enabled'    : true, // true or false
+		'property'   : 'object-position', // css property name (don't change it !)
+		'prefix'     : 'object-', // prefix of class name
+		'specificity': !important, // or null
+		'unit'       : null, // length units (px, rem, em, %, vh, vw etc)
+		'specs'      : null, // for extra variables
+		'values'     : (
+			// class name (suffix), value
+			("bottom", bottom),
+			("center", center),
+			("left", left),
+			("left-bottom", left bottom),
+			("left-top", left top),
+			("right", right),
+			("right-bottom", right bottom),
+			("right-top", right top),
+			("top", top)
+		)
+	),
+	/// 
 	/// Order
 	/// 
 	/// The order property specifies the order 
@@ -1260,6 +1291,23 @@ $helpers: (
 		'values'     : (none, auto, text, all)
 	),
 	/// 
+	/// Vertical Align
+	/// 
+	/// The vertical-align property sets 
+	/// the vertical alignment of an element.
+	/// 
+	/// @example align-middle
+	///
+	'vertical-align': (
+		'enabled'    : true, // true or false
+		'property'   : 'vertical-align', // css property name (don't change it !)
+		'prefix'     : 'align-', // prefix of class name
+		'specificity': !important, // or null
+		'unit'       : null, // length units (px, rem, em, %, vh, vw etc)
+		'specs'      : null, // for extra variables
+		'values'     : (baseline, top, middle, bottom, text-top, text-bottom, sub, super)
+	),
+	/// 
 	/// Width
 	/// 
 	/// The width property sets the width of an element.

src/Modules/Utilities/mixins.scss

@@ -151,12 +151,12 @@
 	$prefix : utils('border', 'prefix');
 
 	@if $enabled {
-		@each $class, $border in $borders {
-			.#{$prefix}-x-#{$class} {
+		@each $suffix, $border in $borders {
+			.#{$prefix}-x-#{$suffix} {
 				border-left-width: #{$border}#{$unit} !important;
 				border-right-width: #{$border}#{$unit} !important;
 			}
-			.#{$prefix}-y-#{$class} {
+			.#{$prefix}-y-#{$suffix} {
 				border-top-width: #{$border}#{$unit} !important;
 				border-bottom-width: #{$border}#{$unit} !important;
 			}

src/options.scss

@@ -921,8 +921,8 @@ $options: (
 			'align-items'     : center,
 			'justify-content' : center,
 			'font-family'     : inherit,
-			'font-size'       : 1.055em,
-			'font-weight'     : bold,
+			'font-size'       : 1rem,
+			'font-weight'     : normal,
 			'line-height'     : 1,
 			'text-align'      : center,
 			'text-decoration' : none,

src/punica.scss

@@ -7,12 +7,15 @@
 @use "Core/Global/Helpers" as *;
 @use "themes" as get;
 
-/// ======================================================
+////////////////////////////////////////////////////////////////
+///-------------------------------------------------------------
 	$active-theme: default;
-/// ======================================================
-	$theme-name: if(map.has-key(get.$themes, $active-theme), $active-theme, theme-not-found($active-theme));
+///-------------------------------------------------------------
+////////////////////////////////////////////////////////////////
+	$theme-name: if(map.has-key(get.$themes, $active-theme), 
+	$active-theme, theme-not-found($active-theme));
 	$theme     : map.get(get.$themes, $theme-name) !global;
-/// ======================================================
+////////////////////////////////////////////////////////////////
 
 /*! 
  * Punica CSS Framework - #{theme('name')}