@rokkit/themes 1.0.0-next.150 → 1.0.0-next.152

package/dist/grada-ui.css

@@ -48,7 +48,9 @@
   text-transform: uppercase;
   font-size: 0.625rem;
   font-weight: 700;
-  transition: filter 0.15s ease, box-shadow 0.15s ease;
+  transition:
+    filter 0.15s ease,
+    box-shadow 0.15s ease;
 }
 
 /* =============================================================================
@@ -65,7 +67,11 @@
 
 [data-style='grada-ui'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='grada-ui'] [data-button]:not([data-style])[data-variant='primary'] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
   border-radius: 20px;
@@ -166,7 +172,11 @@
 
 [data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='primary'],
 [data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='secondary'] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
   border-radius: 20px;
@@ -174,7 +184,11 @@
 }
 
 [data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='accent'] {
-  background-image: linear-gradient(to right, rgba(var(--color-accent-500), 1), rgba(var(--color-accent-400), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-accent-500), 1),
+    rgba(var(--color-accent-400), 1)
+  );
   background-color: transparent;
   color: white;
   border-radius: 20px;
@@ -472,13 +486,21 @@
 
 /* Active */
 [data-style='grada-ui'] [data-toolbar-item][data-active='true'] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
 }
 
 [data-style='grada-ui'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   filter: brightness(1.08);
   color: white;
@@ -540,7 +562,11 @@
 /* Selected — primary→secondary gradient */
 [data-style='grada-ui'] [data-tabs-trigger][data-selected],
 [data-style='grada-ui'] [data-tabs-list]:focus-within [data-tabs-trigger][data-selected] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
   --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
@@ -586,7 +612,11 @@
 
 /* Selected state — gradient */
 [data-style='grada-ui'] [data-toggle-option][data-selected='true'] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
   border-radius: 20px;
@@ -626,7 +656,11 @@
 
 /* On state — gradient track */
 [data-style='grada-ui'] [data-switch][aria-checked='true'] [data-switch-track] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
 }
 
@@ -707,7 +741,11 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-list] [data-list-item] [data-item-badge],[data-mode="dark"] [data-style="grada-ui"] [data-list] [data-list-item] [data-item-badge]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
 }
@@ -733,13 +771,21 @@
 
 /* Multi-Selection */
 [data-style='grada-ui'] [data-list] [data-list-item][data-selected='true'] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
 }
 
 [data-style='grada-ui'] [data-list]:focus-within [data-list-item][data-selected='true'] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
 }
 
@@ -797,7 +843,9 @@
   border-left: 3px solid rgba(var(--color-primary-500), 1);
 }
 
-[data-style='grada-ui'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
+[data-style='grada-ui']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true'] {
   border-left: 3px solid rgba(var(--color-primary-500), 1);
   opacity: 0.8;
 }
@@ -825,7 +873,11 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-tree-item-content] [data-item-badge],[data-mode="dark"] [data-style="grada-ui"] [data-tree-item-content] [data-item-badge]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-tree-item-content][data-active='true'] [data-item-badge] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
 }
@@ -887,7 +939,11 @@
 
 /* Tags (MultiSelect) */
 [data-style='grada-ui'] [data-select-tag] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
   border-radius: 20px;
@@ -926,21 +982,35 @@
 
 /* Selected option — gradient background */
 [data-style='grada-ui'] [data-select-option][data-selected='true'] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
 }
 
 [data-style='grada-ui'] [data-select-option][data-selected='true']:hover:not(:disabled),
 [data-style='grada-ui'] [data-select-option][data-selected='true']:focus:not(:disabled) {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   filter: brightness(1.1);
   color: white;
 }
 
-[data-style='grada-ui'] [data-select-dropdown]:focus-within [data-select-option][data-selected='true'] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+[data-style='grada-ui']
+  [data-select-dropdown]:focus-within
+  [data-select-option][data-selected='true'] {
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
 }
 
@@ -1147,7 +1217,11 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-dropdown-option]:hover:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-dropdown-option]:hover:not(:disabled),[data-mode="dark"][data-style="grada-ui"] [data-dropdown-option]:focus:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-dropdown-option]:focus:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-dropdown-option][data-active='true'] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
 }
@@ -1163,12 +1237,19 @@
  */
 
 [data-style='grada-ui'] [data-fab-trigger] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
   --un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
   border-radius: 50%;
-  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+  transition:
+    filter 0.15s ease,
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
 }
 
 [data-style='grada-ui'] [data-fab-trigger]:hover:not(:disabled) {
@@ -1278,9 +1359,9 @@
 }
 
 /* Striped */
-[data-style='grada-ui'] [data-striped='true'] [data-table-body] tr:nth-child(even) {
+[data-style='grada-ui'] [data-table-striped] [data-table-body] tr:nth-child(even) {
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));
-}[data-mode="dark"][data-style="grada-ui"] [data-striped="true"] [data-table-body] tr:nth-child(even),[data-mode="dark"] [data-style="grada-ui"] [data-striped="true"] [data-table-body] tr:nth-child(even){--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
+}[data-mode="dark"][data-style="grada-ui"] [data-table-striped] [data-table-body] tr:nth-child(even),[data-mode="dark"] [data-style="grada-ui"] [data-table-striped] [data-table-body] tr:nth-child(even){--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
 
 /* Empty */
 [data-style='grada-ui'] [data-table-empty] {
@@ -1324,7 +1405,11 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-search-clear]:hover,[data-mode="dark"] [data-style="grada-ui"] [data-search-clear]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-search-tag] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
   border-radius: 20px;
@@ -1352,7 +1437,11 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-range-bar],[data-mode="dark"] [data-style="grada-ui"] [data-range-bar]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
 
 [data-style='grada-ui'] [data-range-selected] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
 }
 
@@ -1405,7 +1494,11 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-timeline-circle],[data-mode="dark"] [data-style="grada-ui"] [data-timeline-circle]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-timeline-item][data-completed] [data-timeline-circle] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   border-color: rgba(var(--color-primary-500), 1);
   color: white;
@@ -1423,7 +1516,11 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-timeline-connector],[data-mode="dark"] [data-style="grada-ui"] [data-timeline-connector]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
 
 [data-style='grada-ui'] [data-timeline-item][data-completed] [data-timeline-connector] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
 }
 
@@ -1497,7 +1594,11 @@
 }
 
 [data-style='grada-ui'] [data-floating-nav-indicator] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
 }
 
@@ -1540,7 +1641,9 @@
 
 [data-style='grada-ui'] [data-card][data-card-interactive] {
   cursor: pointer;
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 }
 
 [data-style='grada-ui'] [data-card][data-card-interactive]:hover {
@@ -1592,7 +1695,11 @@
 
 [data-style='grada-ui'] [data-card][data-variant='primary'] {
   border-width:0px;--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   border-radius: 3px;
 }[data-mode="dark"][data-style="grada-ui"] [data-card][data-variant="primary"],[data-mode="dark"] [data-style="grada-ui"] [data-card][data-variant="primary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));}
@@ -1723,12 +1830,54 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-status-item][data-status="success"],[data-mode="dark"] [data-style="grada-ui"] [data-status-item][data-status="success"]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-status-count] {
-  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
   background-color: transparent;
   color: white;
   font-weight: 600;
 }
 
+/* StepIndicator — grada-ui theme (coral/purple gradient brand identity) */
+
+[data-style='grada-ui'] [data-step-item][data-step-state='complete'] [data-step-number] {
+  border-color:transparent;--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-step-item][data-step-state="complete"] [data-step-number],[data-mode="dark"] [data-style="grada-ui"] [data-step-item][data-step-state="complete"] [data-step-number]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='current'] [data-step-number] {
+  --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));background-color:transparent;background-image:none;--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--color-primary-500, #6366f1) 20%, transparent),
+    0 0 8px color-mix(in srgb, var(--color-secondary-500, #ec4899) 15%, transparent);
+}[data-mode="dark"][data-style="grada-ui"] [data-step-item][data-step-state="current"] [data-step-number],[data-mode="dark"] [data-style="grada-ui"] [data-step-item][data-step-state="current"] [data-step-number]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='upcoming'] [data-step-number] {
+  --un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-step-item][data-step-state="upcoming"] [data-step-number],[data-mode="dark"] [data-style="grada-ui"] [data-step-item][data-step-state="upcoming"] [data-step-number]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='complete'] [data-step-label] {
+  background-image:none;--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-step-item][data-step-state="complete"] [data-step-label],[data-mode="dark"] [data-style="grada-ui"] [data-step-item][data-step-state="complete"] [data-step-label]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='current'] [data-step-label] {
+  background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));font-weight:600;
+}[data-mode="dark"][data-style="grada-ui"] [data-step-item][data-step-state="current"] [data-step-label],[data-mode="dark"] [data-style="grada-ui"] [data-step-item][data-step-state="current"] [data-step-label]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='upcoming'] [data-step-label] {
+  background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-step-item][data-step-state="upcoming"] [data-step-label],[data-mode="dark"] [data-style="grada-ui"] [data-step-item][data-step-state="upcoming"] [data-step-label]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='complete']::after {
+  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}[data-mode="dark"][data-style="grada-ui"] [data-step-item][data-step-state="complete"]::after,[data-mode="dark"] [data-style="grada-ui"] [data-step-item][data-step-state="complete"]::after{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='current']::after,
+[data-style='grada-ui'] [data-step-item][data-step-state='upcoming']::after {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-step-item][data-step-state="current"]::after,[data-mode="dark"] [data-style="grada-ui"] [data-step-item][data-step-state="current"]::after,[data-mode="dark"][data-style="grada-ui"] [data-step-item][data-step-state="upcoming"]::after,[data-mode="dark"] [data-style="grada-ui"] [data-step-item][data-step-state="upcoming"]::after{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
+
 /**
  * Chart - Grada UI Theme Styles
  */
@@ -1756,11 +1905,11 @@
   --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
 }[data-mode="dark"][data-style="grada-ui"] [data-chart-legend-item]:hover,[data-mode="dark"] [data-style="grada-ui"] [data-chart-legend-item]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
-[data-style='grada-ui'] [data-plot-element="bar"][data-dimmed],
-[data-style='grada-ui'] [data-plot-element="point"][data-dimmed],
-[data-style='grada-ui'] [data-plot-element="arc"][data-dimmed],
-[data-style='grada-ui'] [data-plot-element="line"][data-dimmed],
-[data-style='grada-ui'] [data-plot-element="area"][data-dimmed] {
+[data-style='grada-ui'] [data-plot-element='bar'][data-dimmed],
+[data-style='grada-ui'] [data-plot-element='point'][data-dimmed],
+[data-style='grada-ui'] [data-plot-element='arc'][data-dimmed],
+[data-style='grada-ui'] [data-plot-element='line'][data-dimmed],
+[data-style='grada-ui'] [data-plot-element='area'][data-dimmed] {
   opacity: 0.15;
 }