@oardi/css-utils 0.130.0 → 0.131.1

package/css-utils-manifest.json

@@ -1,6 +1,6 @@
 {
 	"package": "@oardi/css-utils",
-	"version": "0.130.0",
+	"version": "0.131.1",
 	"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
 	"lifecycle": {
 		"deprecated": [
@@ -253,12 +253,30 @@
 		"Grid": {
 			"families": [
 				{
-					"patterns": ["col-{breakpoint}-{value}", "col-{value}"],
+					"patterns": [
+						"col-end-{breakpoint}-{value}",
+						"col-end-{value}",
+						"col-start-{breakpoint}-{value}",
+						"col-start-{value}"
+					],
+					"values": ["1", "10", "11", "12", "13", "2", "3", "4", "5", "6", "7", "8", "9"]
+				},
+				{
+					"patterns": ["col-offset-{breakpoint}-{value}", "col-offset-{value}"],
+					"values": ["0", "1", "10", "11", "2", "3", "4", "5", "6", "7", "8", "9"]
+				},
+				{
+					"patterns": [
+						"col-{breakpoint}-{value}",
+						"col-{value}",
+						"row-span-{breakpoint}-{value}",
+						"row-span-{value}"
+					],
 					"values": ["1", "10", "11", "12", "2", "3", "4", "5", "6", "7", "8", "9"]
 				}
 			],
 			"patterns": [],
-			"classes": ["col", "grid"]
+			"classes": ["col", "grid", "grid-auto-fit"]
 		},
 		"Gap": {
 			"families": [

package/css-utils-reference.md

@@ -3,7 +3,7 @@
 > Generated automatically. Do not edit manually.
 
 - Package: `@oardi/css-utils`
-- Version: `0.130.0`
+- Version: `0.131.1`
 - Source: public SCSS entry point and utility configuration
 
 ## Usage guidance
@@ -215,15 +215,30 @@ Classes:
 
 ## Grid
 
+Values: `1` | `10` | `11` | `12` | `13` | `2` | `3` | `4` | `5` | `6` | `7` | `8` | `9`
+
+- `col-end-{breakpoint}-{value}`
+- `col-end-{value}`
+- `col-start-{breakpoint}-{value}`
+- `col-start-{value}`
+
+Values: `0` | `1` | `10` | `11` | `2` | `3` | `4` | `5` | `6` | `7` | `8` | `9`
+
+- `col-offset-{breakpoint}-{value}`
+- `col-offset-{value}`
+
 Values: `1` | `10` | `11` | `12` | `2` | `3` | `4` | `5` | `6` | `7` | `8` | `9`
 
 - `col-{breakpoint}-{value}`
 - `col-{value}`
+- `row-span-{breakpoint}-{value}`
+- `row-span-{value}`
 
 Classes:
 
 - `col`
 - `grid`
+- `grid-auto-fit`
 
 ## Gap
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.130.0",
+	"version": "0.131.1",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",

package/scss/components/card.scss

@@ -1,4 +1,5 @@
 @use '../layers.scss';
+@use '../mixins/action-surface' as action-surface;
 
 @layer components {
 	.card {
@@ -35,6 +36,14 @@
 			color: inherit;
 			text-decoration: none;
 
+			&:is(a, button) {
+				@include action-surface.native-action-surface;
+
+				display: block;
+				background-color: var(--card-bg-color);
+				border: var(--card-border-width) solid var(--card-border-color);
+			}
+
 			&:hover {
 				--bg-opacity-backdrop: var(--card-bg-hover-color);
 

package/scss/components/list.scss

@@ -1,4 +1,5 @@
 @use '../layers.scss';
+@use '../mixins/action-surface' as action-surface;
 
 @layer components {
 	.list {
@@ -49,6 +50,12 @@
 				cursor: pointer;
 				text-decoration: none;
 
+				&:is(a, button) {
+					@include action-surface.native-action-surface;
+
+					padding: var(--list-item-padding-y) var(--list-item-padding-x);
+				}
+
 				&:hover {
 					color: var(--list-item-hover-color);
 				}

package/scss/grid-responsive.scss

@@ -9,7 +9,31 @@
 		@media (min-width: #{$bp-value}) {
 			@for $i from 1 through 12 {
 				.col-#{$bp}-#{$i} {
-					grid-column: span $i;
+					grid-column: span $i / span $i;
+				}
+
+				.row-span-#{$bp}-#{$i} {
+					grid-row: span $i;
+				}
+			}
+
+			@for $i from 1 through 13 {
+				.col-start-#{$bp}-#{$i} {
+					grid-column-start: $i;
+				}
+
+				.col-end-#{$bp}-#{$i} {
+					grid-column-end: $i;
+				}
+			}
+
+			.col-offset-#{$bp}-0 {
+				grid-column-start: auto;
+			}
+
+			@for $i from 1 through 11 {
+				.col-offset-#{$bp}-#{$i} {
+					grid-column-start: $i + 1;
 				}
 			}
 		}

package/scss/grid.scss

@@ -3,6 +3,7 @@
 @layer utilities.grid {
 	.grid {
 		--grid-gap: var(--spacer-3);
+		--grid-min-column-width: 16rem;
 
 		display: grid;
 		grid-template-columns: repeat(12, minmax(0, 1fr));
@@ -10,13 +11,44 @@
 		gap: var(--grid-gap);
 	}
 
+	.grid-auto-fit {
+		grid-template-columns: repeat(
+			auto-fit,
+			minmax(min(100%, var(--grid-min-column-width)), 1fr)
+		);
+	}
+
 	.col {
-		grid-column: span 12;
+		grid-column: span 12 / span 12;
 	}
 
 	@for $i from 1 through 12 {
 		.col-#{$i} {
-			grid-column: span $i;
+			grid-column: span $i / span $i;
+		}
+
+		.row-span-#{$i} {
+			grid-row: span $i;
+		}
+	}
+
+	@for $i from 1 through 13 {
+		.col-start-#{$i} {
+			grid-column-start: $i;
+		}
+
+		.col-end-#{$i} {
+			grid-column-end: $i;
+		}
+	}
+
+	.col-offset-0 {
+		grid-column-start: auto;
+	}
+
+	@for $i from 1 through 11 {
+		.col-offset-#{$i} {
+			grid-column-start: $i + 1;
 		}
 	}
 }

package/scss/mixins/action-surface.scss

@@ -0,0 +1,10 @@
+@mixin native-action-surface {
+	-webkit-appearance: none;
+	appearance: none;
+	border: 0;
+	font: inherit;
+	line-height: inherit;
+	margin: 0;
+	padding: 0;
+	text-align: inherit;
+}

package/scss/utilities.scss

@@ -345,7 +345,7 @@ $-background-opacity-selectors: ();
 		top: 0;
 		right: 0;
 		left: 0;
-		z-index: 1030;
+		z-index: var(--z-index-header);
 	}
 
 	.overflow-y-scroll {