@oardi/css-utils 0.97.0 → 0.98.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.97.0",
+	"version": "0.98.0",
 	"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/stepper.scss

@@ -136,13 +136,6 @@
 			background: var(--stepper-current-bg);
 			color: var(--stepper-current-color);
 		}
-
-		> .stepper-content {
-			margin-block: calc(-1 * var(--stepper-content-padding) / 2);
-			padding: var(--stepper-content-padding);
-			border-radius: var(--stepper-content-radius);
-			background: var(--stepper-current-surface);
-		}
 	}
 
 	.stepper-item.is-error {
@@ -171,7 +164,9 @@
 			inline-size: 100%;
 
 			.stepper-item {
-				grid-template-columns: var(--stepper-marker-size) minmax(var(--stepper-gap), 1fr);
+				grid-template-columns: minmax(0, 1fr);
+				justify-items: center;
+				text-align: center;
 				grid-template-rows: var(--stepper-marker-size) auto;
 				gap: var(--spacer-2) var(--stepper-gap);
 				padding-block-end: 0;
@@ -181,26 +176,39 @@
 						(var(--stepper-marker-size) - var(--stepper-connector-width)) / 2
 					);
 					inset-block-end: auto;
-					inset-inline-start: calc(var(--stepper-marker-size) + var(--stepper-gap));
-					inset-inline-end: var(--stepper-gap);
+					inset-inline-start: calc(
+						50% + var(--stepper-marker-size) / 2 + var(--stepper-gap)
+					);
+					inset-inline-end: calc(
+						-50% + var(--stepper-marker-size) / 2 + var(--stepper-gap)
+					);
 					inline-size: auto;
 					block-size: var(--stepper-connector-width);
 				}
 			}
 
-			.stepper-content {
-				grid-column: 1 / -1;
-				padding-block: 0;
-				padding-inline-end: var(--stepper-gap);
+			.stepper-item:first-child {
+				justify-items: start;
+				text-align: start;
+
+				&::before {
+					inset-inline-start: calc(var(--stepper-marker-size) + var(--stepper-gap));
+				}
 			}
 
-			.stepper-item[aria-current='step'] > .stepper-content {
-				margin-block: 0;
-				padding: var(--stepper-content-padding);
+			.stepper-item:nth-last-child(2)::before {
+				inset-inline-end: calc(-100% + var(--stepper-marker-size) + var(--stepper-gap));
 			}
 
-			.stepper-item[aria-current='step']:not(:last-child) > .stepper-content {
-				margin-inline-end: var(--stepper-item-gap);
+			.stepper-item:last-child:not(:first-child) {
+				justify-items: end;
+				text-align: end;
+			}
+
+			.stepper-content {
+				grid-column: 1;
+				max-inline-size: 100%;
+				padding-block: 0;
 			}
 		}
 	}