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

package/dist/rokkit.css

@@ -26,7 +26,7 @@
 /* Primary variant */
 [data-style='rokkit'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='rokkit'] [data-button]:not([data-style])[data-variant='primary'] {
-  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--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 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));
+  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--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));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="primary"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="primary"]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--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);}
 
 /* Secondary variant */
@@ -1486,8 +1486,8 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-header] th {
-  border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
-}[data-mode="dark"][data-style="rokkit"] [data-table-header] th,[data-mode="dark"] [data-style="rokkit"] [data-table-header] th{--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));}
+  border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-table-header] th,[data-mode="dark"] [data-style="rokkit"] [data-table-header] th{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--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='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
   --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
@@ -1522,15 +1522,15 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-row] {
-  border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
-}[data-mode="dark"][data-style="rokkit"] [data-table-row],[data-mode="dark"] [data-style="rokkit"] [data-table-row]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
+  border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-table-row],[data-mode="dark"] [data-style="rokkit"] [data-table-row]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
 
 [data-style='rokkit'] [data-table-row]:hover {
-  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),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-surface-200),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));
+  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),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-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
 }[data-mode="dark"][data-style="rokkit"] [data-table-row]:hover,[data-mode="dark"] [data-style="rokkit"] [data-table-row]:hover{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),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-surface-800),1) var(--un-gradient-to-position);}
 
 [data-style='rokkit'] [data-table-row]:focus {
-  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),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-surface-200),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));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
+  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),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-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom 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-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
 }[data-mode="dark"][data-style="rokkit"] [data-table-row]:focus,[data-mode="dark"] [data-style="rokkit"] [data-table-row]:focus{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),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-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='rokkit'] [data-table-row][data-selected='true'] {
@@ -1541,9 +1541,9 @@
    Striped
    ============================================================================= */
 
-[data-style='rokkit'] [data-striped='true'] [data-table-body] tr:nth-child(even) {
-  --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
-}[data-mode="dark"][data-style="rokkit"] [data-striped="true"] [data-table-body] tr:nth-child(even),[data-mode="dark"] [data-style="rokkit"] [data-striped="true"] [data-table-body] tr:nth-child(even){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
+[data-style='rokkit'] [data-table-striped] [data-table-body] tr:nth-child(even) {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-table-striped] [data-table-body] tr:nth-child(even),[data-mode="dark"] [data-style="rokkit"] [data-table-striped] [data-table-body] tr:nth-child(even){--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
 
 /* =============================================================================
    Empty
@@ -1565,6 +1565,25 @@
   --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-table-row][data-selected="true"] [data-cell-icon],[data-mode="dark"] [data-style="rokkit"] [data-table-row][data-selected="true"] [data-cell-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
 
+/* =============================================================================
+   Responsive Card Layout
+   ============================================================================= */
+
+@media (max-width: 639px) {
+  [data-style='rokkit'] [data-table-responsive] [data-table-row] {
+    border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
+  }[data-mode="dark"] [data-style="rokkit"] [data-table-responsive] [data-table-row]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
+
+  [data-style='rokkit'] [data-table-responsive] [data-table-cell]::before {
+    --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
+  }[data-mode="dark"] [data-style="rokkit"] [data-table-responsive] [data-table-cell]::before{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
+
+  /* Disable striped alternating bg in card layout */
+  [data-style='rokkit'] [data-table-responsive][data-table-striped] [data-table-body] tr:nth-child(even) {
+    background: unset;
+  }
+}
+
 /**
  * SearchFilter - Rokkit Theme Styles
  *
@@ -2246,6 +2265,48 @@
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));font-weight:600;
 }[data-mode="dark"][data-style="rokkit"] [data-status-count],[data-mode="dark"] [data-style="rokkit"] [data-status-count]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
 
+/* StepIndicator — Rokkit theme (gradients + glows) */
+
+/* ── Number circles ── */
+
+[data-style='rokkit'] [data-step-item][data-step-state='complete'] [data-step-number] {
+  --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--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 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="rokkit"] [data-step-item][data-step-state="complete"] [data-step-number],[data-mode="dark"] [data-style="rokkit"] [data-step-item][data-step-state="complete"] [data-step-number]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--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='rokkit'] [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-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--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);
+}[data-mode="dark"][data-style="rokkit"] [data-step-item][data-step-state="current"] [data-step-number],[data-mode="dark"] [data-style="rokkit"] [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-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
+
+[data-style='rokkit'] [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));--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-step-item][data-step-state="upcoming"] [data-step-number],[data-mode="dark"] [data-style="rokkit"] [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));}
+
+/* ── Labels ── */
+
+[data-style='rokkit'] [data-step-item][data-step-state='complete'] [data-step-label] {
+  --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-step-item][data-step-state="complete"] [data-step-label],[data-mode="dark"] [data-style="rokkit"] [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='rokkit'] [data-step-item][data-step-state='current'] [data-step-label] {
+  --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));font-weight:600;
+}[data-mode="dark"][data-style="rokkit"] [data-step-item][data-step-state="current"] [data-step-label],[data-mode="dark"] [data-style="rokkit"] [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='rokkit'] [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-mode="dark"][data-style="rokkit"] [data-step-item][data-step-state="upcoming"] [data-step-label],[data-mode="dark"] [data-style="rokkit"] [data-step-item][data-step-state="upcoming"] [data-step-label]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
+
+/* ── Connector lines ── */
+
+[data-style='rokkit'] [data-step-item][data-step-state='complete']::after {
+  --un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-step-item][data-step-state="complete"]::after,[data-mode="dark"] [data-style="rokkit"] [data-step-item][data-step-state="complete"]::after{--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
+
+[data-style='rokkit'] [data-step-item][data-step-state='current']::after,
+[data-style='rokkit'] [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="rokkit"] [data-step-item][data-step-state="current"]::after,[data-mode="dark"] [data-style="rokkit"] [data-step-item][data-step-state="current"]::after,[data-mode="dark"][data-style="rokkit"] [data-step-item][data-step-state="upcoming"]::after,[data-mode="dark"] [data-style="rokkit"] [data-step-item][data-step-state="upcoming"]::after{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
+
 /**
  * Chart - Rokkit Theme Styles
  */
@@ -2273,11 +2334,11 @@
   --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-chart-legend-item]:hover,[data-mode="dark"] [data-style="rokkit"] [data-chart-legend-item]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
 
-[data-style='rokkit'] [data-plot-element="bar"][data-dimmed],
-[data-style='rokkit'] [data-plot-element="point"][data-dimmed],
-[data-style='rokkit'] [data-plot-element="arc"][data-dimmed],
-[data-style='rokkit'] [data-plot-element="line"][data-dimmed],
-[data-style='rokkit'] [data-plot-element="area"][data-dimmed] {
+[data-style='rokkit'] [data-plot-element='bar'][data-dimmed],
+[data-style='rokkit'] [data-plot-element='point'][data-dimmed],
+[data-style='rokkit'] [data-plot-element='arc'][data-dimmed],
+[data-style='rokkit'] [data-plot-element='line'][data-dimmed],
+[data-style='rokkit'] [data-plot-element='area'][data-dimmed] {
   opacity: 0.15;
 }
 
@@ -2294,8 +2355,10 @@
   --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));
 }
 
-[data-style='rokkit'] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
-[data-style='rokkit'] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
+[data-style='rokkit']
+  [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
+[data-style='rokkit']
+  [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
   --un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-400),var(--un-outline-color-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"] [data-style="rokkit"] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"][data-style="rokkit"] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"] [data-style="rokkit"] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]){--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-600),var(--un-outline-color-opacity));}
 
@@ -2304,3 +2367,97 @@
   outline-offset: 3px;
 }[data-mode="dark"][data-style="rokkit"] [data-swatch-item][data-selected]:focus-visible,[data-mode="dark"] [data-style="rokkit"] [data-swatch-item][data-selected]:focus-visible{--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-400),var(--un-outline-color-opacity));}
 
+/**
+ * Divider - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-divider][data-orientation='horizontal']::before,
+[data-style='rokkit'] [data-divider][data-orientation='horizontal']::after {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-divider][data-orientation="horizontal"]::before,[data-mode="dark"] [data-style="rokkit"] [data-divider][data-orientation="horizontal"]::before,[data-mode="dark"][data-style="rokkit"] [data-divider][data-orientation="horizontal"]::after,[data-mode="dark"] [data-style="rokkit"] [data-divider][data-orientation="horizontal"]::after{--un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));}
+
+[data-style='rokkit'] [data-divider][data-orientation='vertical']::before,
+[data-style='rokkit'] [data-divider][data-orientation='vertical']::after {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-divider][data-orientation="vertical"]::before,[data-mode="dark"] [data-style="rokkit"] [data-divider][data-orientation="vertical"]::before,[data-mode="dark"][data-style="rokkit"] [data-divider][data-orientation="vertical"]::after,[data-mode="dark"] [data-style="rokkit"] [data-divider][data-orientation="vertical"]::after{--un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));}
+
+/* No-label horizontal divider — color the element itself */
+[data-style='rokkit'] [data-divider][data-orientation='horizontal']:not(:has([data-divider-label])) {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-divider][data-orientation="horizontal"]:not(:has([data-divider-label])),[data-mode="dark"] [data-style="rokkit"] [data-divider][data-orientation="horizontal"]:not(:has([data-divider-label])){--un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));}
+
+[data-style='rokkit'] [data-divider][data-orientation='vertical']:not(:has([data-divider-label])) {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-divider][data-orientation="vertical"]:not(:has([data-divider-label])),[data-mode="dark"] [data-style="rokkit"] [data-divider][data-orientation="vertical"]:not(:has([data-divider-label])){--un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));}
+
+[data-style='rokkit'] [data-divider-label] {
+  --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-divider-label],[data-mode="dark"] [data-style="rokkit"] [data-divider-label]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
+
+/**
+ * Stack - Rokkit Theme Styles
+ *
+ * Stack is purely structural — no color theming needed.
+ * All visual appearance comes from the base layout CSS.
+ */
+
+/**
+ * Badge - Rokkit Theme Styles
+ */
+
+/* Default variant */
+[data-style='rokkit'] [data-badge][data-variant='default'],
+[data-style='rokkit'] [data-badge]:not([data-variant]) {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-500),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-badge]:not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-badge]:not([data-variant]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-500),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));}
+
+/* Primary */
+[data-style='rokkit'] [data-badge][data-variant='primary'] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="primary"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
+
+/* Success */
+[data-style='rokkit'] [data-badge][data-variant='success'] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-success-500),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="success"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="success"]{--un-bg-opacity:1;background-color:rgba(var(--color-success-500),var(--un-bg-opacity));}
+
+/* Warning */
+[data-style='rokkit'] [data-badge][data-variant='warning'] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-warning-500),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="warning"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="warning"]{--un-bg-opacity:1;background-color:rgba(var(--color-warning-500),var(--un-bg-opacity));}
+
+/* Error */
+[data-style='rokkit'] [data-badge][data-variant='error'] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-error-500),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="error"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="error"]{--un-bg-opacity:1;background-color:rgba(var(--color-error-500),var(--un-bg-opacity));}
+
+/**
+ * Avatar - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-avatar] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-avatar],[data-mode="dark"] [data-style="rokkit"] [data-avatar]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
+
+/* Status dot colors */
+[data-style='rokkit'] [data-avatar-status][data-status='online'] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-success-500),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-avatar-status][data-status="online"],[data-mode="dark"] [data-style="rokkit"] [data-avatar-status][data-status="online"]{--un-bg-opacity:1;background-color:rgba(var(--color-success-500),var(--un-bg-opacity));}
+
+[data-style='rokkit'] [data-avatar-status][data-status='offline'] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-500),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-avatar-status][data-status="offline"],[data-mode="dark"] [data-style="rokkit"] [data-avatar-status][data-status="offline"]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-500),var(--un-bg-opacity));}
+
+[data-style='rokkit'] [data-avatar-status][data-status='away'] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-warning-500),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-avatar-status][data-status="away"],[data-mode="dark"] [data-style="rokkit"] [data-avatar-status][data-status="away"]{--un-bg-opacity:1;background-color:rgba(var(--color-warning-500),var(--un-bg-opacity));}
+
+[data-style='rokkit'] [data-avatar-status][data-status='busy'] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-error-500),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-avatar-status][data-status="busy"],[data-mode="dark"] [data-style="rokkit"] [data-avatar-status][data-status="busy"]{--un-bg-opacity:1;background-color:rgba(var(--color-error-500),var(--un-bg-opacity));}
+
+/* Status dot border matches surrounding background — uses surface-z1 as a neutral */
+[data-style='rokkit'] [data-avatar-status] {
+  --un-border-opacity:1;border-color:rgba(var(--color-surface-100),var(--un-border-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-avatar-status],[data-mode="dark"] [data-style="rokkit"] [data-avatar-status]{--un-border-opacity:1;border-color:rgba(var(--color-surface-900),var(--un-border-opacity));}
+

package/dist/shadcn.css

@@ -155,8 +155,7 @@
    Hover States
    ============================================================================= */
 
-[data-style='shadcn']
-  [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
+[data-style='shadcn'] [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
 [data-style='shadcn'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
   --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));background-image:none;
 }[data-mode="dark"][data-style="shadcn"] [data-button][data-style="default"]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="shadcn"] [data-button][data-style="default"]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"][data-style="shadcn"] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="shadcn"] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]){--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
@@ -227,8 +226,7 @@
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
 }[data-mode="dark"][data-style="shadcn"] [data-toolbar-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="shadcn"] [data-toolbar-item]:hover:not(:disabled):not([data-disabled="true"]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
 
-[data-style='shadcn']
-  [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
+[data-style='shadcn'] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
   background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-offset-width:2px;--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
 }[data-mode="dark"][data-style="shadcn"] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="shadcn"] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled="true"]){--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
 
@@ -305,7 +303,9 @@
 [data-style='shadcn'] [data-tabs-trigger] {
   border-bottom-width:2px;border-bottom-color:transparent;border-radius:0;background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
   font-weight: 400;
-  transition: color 150ms ease, border-color 150ms ease;
+  transition:
+    color 150ms ease,
+    border-color 150ms ease;
 }[data-mode="dark"][data-style="shadcn"] [data-tabs-trigger],[data-mode="dark"] [data-style="shadcn"] [data-tabs-trigger]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
 
 [data-style='shadcn'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
@@ -338,7 +338,7 @@
 
 /* Horizontal after (tabs below content): top border */
 [data-style='shadcn'] [data-tabs][data-position='after'] [data-tabs-trigger] {
-  border-bottom-width:0px;border-top-width:2px;border-top-color:transparent;
+  border-top-width:2px;border-bottom-width:0px;border-top-color:transparent;
 }
 
 [data-style='shadcn']
@@ -361,7 +361,7 @@
 
 /* Vertical before (tabs on left): right border */
 [data-style='shadcn'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger] {
-  border-bottom-width:0px;border-right-width:2px;border-right-color:transparent;border-radius:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem;
+  border-right-width:2px;border-bottom-width:0px;border-right-color:transparent;border-radius:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem;
 }
 
 [data-style='shadcn']
@@ -379,19 +379,19 @@
 [data-style='shadcn']
   [data-tabs][data-orientation='vertical'][data-position='after']
   [data-tabs-trigger] {
-  border-top-width:0px;border-bottom-width:0px;border-right-width:0px;border-left-width:2px;border-left-color:transparent;border-radius:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;
+  border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:2px;border-left-color:transparent;border-radius:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;
 }
 
 [data-style='shadcn']
   [data-tabs][data-orientation='vertical'][data-position='after']
   [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
-  border-top-width:0px;border-bottom-width:0px;border-right-width:0px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-surface-400),var(--un-border-left-opacity));
+  border-top-width:0px;border-right-width:0px;border-bottom-width:0px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-surface-400),var(--un-border-left-opacity));
 }[data-mode="dark"][data-style="shadcn"] [data-tabs][data-orientation="vertical"][data-position="after"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="shadcn"] [data-tabs][data-orientation="vertical"][data-position="after"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]){--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-surface-600),var(--un-border-left-opacity));}
 
 [data-style='shadcn']
   [data-tabs][data-orientation='vertical'][data-position='after']
   [data-tabs-trigger][data-selected] {
-  border-top-width:0px;border-bottom-width:0px;border-right-width:0px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));
+  border-top-width:0px;border-right-width:0px;border-bottom-width:0px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));
   font-weight: 600;
 }[data-mode="dark"][data-style="shadcn"] [data-tabs][data-orientation="vertical"][data-position="after"] [data-tabs-trigger][data-selected],[data-mode="dark"] [data-style="shadcn"] [data-tabs][data-orientation="vertical"][data-position="after"] [data-tabs-trigger][data-selected]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));}
 
@@ -528,9 +528,7 @@
 }[data-mode="dark"][data-style="shadcn"] [data-list] a[data-list-item],[data-mode="dark"] [data-style="shadcn"] [data-list] a[data-list-item],[data-mode="dark"][data-style="shadcn"] [data-list] button[data-list-item],[data-mode="dark"] [data-style="shadcn"] [data-list] button[data-list-item]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
 /* Hover and focus (keyboard navigation) */
-[data-style='shadcn']
-  [data-list]
-  [data-list-item]:hover:not(:disabled):not([data-disabled='true']),
+[data-style='shadcn'] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled='true']),
 [data-style='shadcn']
   [data-list]
   [data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
@@ -685,7 +683,9 @@
   --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));background-image:none;
 }[data-mode="dark"][data-style="shadcn"] [data-tree]:focus-within [data-tree-item-content][data-active="true"],[data-mode="dark"] [data-style="shadcn"] [data-tree]:focus-within [data-tree-item-content][data-active="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));}
 
-[data-style='shadcn'] [data-tree]:focus-within [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+[data-style='shadcn']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']:hover:not(:disabled) {
   --un-bg-opacity:1;background-color:rgba(var(--color-primary-300),var(--un-bg-opacity));background-image:none;
 }[data-mode="dark"][data-style="shadcn"] [data-tree]:focus-within [data-tree-item-content][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="shadcn"] [data-tree]:focus-within [data-tree-item-content][data-active="true"]:hover:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-primary-700),var(--un-bg-opacity));}
 
@@ -725,11 +725,17 @@
   --un-border-opacity:1;border-color:rgba(var(--color-primary-300),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
 }[data-mode="dark"][data-style="shadcn"] [data-tree-item-content][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="shadcn"] [data-tree-item-content][data-active="true"] [data-item-badge]{--un-border-opacity:1;border-color:rgba(var(--color-primary-700),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
 
-[data-style='shadcn'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] [data-item-badge] {
+[data-style='shadcn']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
   background-image:none;
 }
 
-[data-style='shadcn'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] [data-item-badge] {
+[data-style='shadcn']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
   background-image:none;
 }
 
@@ -1141,7 +1147,9 @@
 [data-style='shadcn'] [data-input-root] {
   position:relative;display:flex;align-items:center;border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));border-radius:0.375rem;background-color:transparent;
   background-image: none;
-  transition: border-color 150ms ease, box-shadow 150ms ease;
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease;
 }[data-mode="dark"][data-style="shadcn"] [data-input-root],[data-mode="dark"] [data-style="shadcn"] [data-input-root]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));}
 
 /* Hover */
@@ -1338,9 +1346,9 @@
    Striped
    ============================================================================= */
 
-[data-style='shadcn'] [data-striped='true'] [data-table-body] tr:nth-child(even) {
+[data-style='shadcn'] [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="shadcn"] [data-striped="true"] [data-table-body] tr:nth-child(even),[data-mode="dark"] [data-style="shadcn"] [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="shadcn"] [data-table-striped] [data-table-body] tr:nth-child(even),[data-mode="dark"] [data-style="shadcn"] [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
@@ -2016,6 +2024,44 @@
   background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));font-weight:600;
 }[data-mode="dark"][data-style="shadcn"] [data-status-count],[data-mode="dark"] [data-style="shadcn"] [data-status-count]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
+/* StepIndicator — shadcn theme (flat rounded-md, ring focus) */
+
+[data-style='shadcn'] [data-step-item][data-step-state='complete'] [data-step-number] {
+  --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
+  border-radius: 0.375rem;
+}[data-mode="dark"][data-style="shadcn"] [data-step-item][data-step-state="complete"] [data-step-number],[data-mode="dark"] [data-style="shadcn"] [data-step-item][data-step-state="complete"] [data-step-number]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
+
+[data-style='shadcn'] [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));border-radius:0.375rem;--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-primary-700),var(--un-text-opacity));
+  border-radius: 0.375rem;
+}[data-mode="dark"][data-style="shadcn"] [data-step-item][data-step-state="current"] [data-step-number],[data-mode="dark"] [data-style="shadcn"] [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-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
+
+[data-style='shadcn'] [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));border-radius:0.375rem;background-color:transparent;background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
+  border-radius: 0.375rem;
+}[data-mode="dark"][data-style="shadcn"] [data-step-item][data-step-state="upcoming"] [data-step-number],[data-mode="dark"] [data-style="shadcn"] [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-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
+
+[data-style='shadcn'] [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="shadcn"] [data-step-item][data-step-state="complete"] [data-step-label],[data-mode="dark"] [data-style="shadcn"] [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='shadcn'] [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="shadcn"] [data-step-item][data-step-state="current"] [data-step-label],[data-mode="dark"] [data-style="shadcn"] [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='shadcn'] [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="shadcn"] [data-step-item][data-step-state="upcoming"] [data-step-label],[data-mode="dark"] [data-style="shadcn"] [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='shadcn'] [data-step-item][data-step-state='complete']::after {
+  --un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="shadcn"] [data-step-item][data-step-state="complete"]::after,[data-mode="dark"] [data-style="shadcn"] [data-step-item][data-step-state="complete"]::after{--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
+
+[data-style='shadcn'] [data-step-item][data-step-state='current']::after,
+[data-style='shadcn'] [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="shadcn"] [data-step-item][data-step-state="current"]::after,[data-mode="dark"] [data-style="shadcn"] [data-step-item][data-step-state="current"]::after,[data-mode="dark"][data-style="shadcn"] [data-step-item][data-step-state="upcoming"]::after,[data-mode="dark"] [data-style="shadcn"] [data-step-item][data-step-state="upcoming"]::after{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
+
 /**
  * Chart - shadcn Theme Styles
  */
@@ -2043,11 +2089,11 @@
   --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
 }[data-mode="dark"][data-style="shadcn"] [data-chart-legend-item]:hover,[data-mode="dark"] [data-style="shadcn"] [data-chart-legend-item]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
-[data-style='shadcn'] [data-plot-element="bar"][data-dimmed],
-[data-style='shadcn'] [data-plot-element="point"][data-dimmed],
-[data-style='shadcn'] [data-plot-element="arc"][data-dimmed],
-[data-style='shadcn'] [data-plot-element="line"][data-dimmed],
-[data-style='shadcn'] [data-plot-element="area"][data-dimmed] {
+[data-style='shadcn'] [data-plot-element='bar'][data-dimmed],
+[data-style='shadcn'] [data-plot-element='point'][data-dimmed],
+[data-style='shadcn'] [data-plot-element='arc'][data-dimmed],
+[data-style='shadcn'] [data-plot-element='line'][data-dimmed],
+[data-style='shadcn'] [data-plot-element='area'][data-dimmed] {
   opacity: 0.15;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.151",
+  "version": "1.0.0-next.152",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",
@@ -20,7 +20,7 @@
     "./dist/rokkit": "./dist/rokkit.css",
     "./dist/minimal": "./dist/minimal.css",
     "./dist/material": "./dist/material.css",
-    "./dist/glass": "./dist/glass.css",
+    "./dist/frosted": "./dist/frosted.css",
     "./dist/grada-ui": "./dist/grada-ui.css",
     "./dist/daisy-ui": "./dist/daisy-ui.css",
     "./dist/shadcn": "./dist/shadcn.css",
@@ -31,7 +31,7 @@
     "./rokkit.css": "./dist/rokkit.css",
     "./minimal.css": "./dist/minimal.css",
     "./material.css": "./dist/material.css",
-    "./glass.css": "./dist/glass.css",
+    "./frosted.css": "./dist/frosted.css",
     "./grada-ui.css": "./dist/grada-ui.css",
     "./daisy-ui.css": "./dist/daisy-ui.css",
     "./shadcn.css": "./dist/shadcn.css",
@@ -46,8 +46,8 @@
     "./minimal/*": "./src/minimal/*.css",
     "./material": "./src/material/index.css",
     "./material/*": "./src/material/*.css",
-    "./glass": "./src/glass/index.css",
-    "./glass/*": "./src/glass/*.css",
+    "./frosted": "./src/frosted/index.css",
+    "./frosted/*": "./src/frosted/*.css",
     "./grada-ui": "./src/grada-ui/index.css",
     "./grada-ui/*": "./src/grada-ui/*.css",
     "./daisy-ui": "./src/daisy-ui/index.css",