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

package/src/minimal/toolbar.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-toolbar] {
-  @apply bg-none bg-transparent;
+  @apply bg-transparent bg-none;
 }
 
 /* Position-based borders */
@@ -39,21 +39,21 @@
 }
 
 [data-style='minimal'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
-  @apply bg-none text-surface-z9;
+  @apply text-surface-z9 bg-none;
 }
 
 [data-style='minimal']
   [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
-  @apply bg-none text-surface-z9 ring-surface-z5 ring-1 outline-none;
+  @apply text-surface-z9 ring-surface-z5 bg-none ring-1 outline-none;
 }
 
 /* Active/pressed state */
 [data-style='minimal'] [data-toolbar-item][data-active='true'] {
-  @apply bg-none text-primary-z7;
+  @apply text-primary-z7 bg-none;
 }
 
 [data-style='minimal'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
-  @apply bg-none text-primary-z8;
+  @apply text-primary-z8 bg-none;
 }
 
 /* =============================================================================
@@ -77,9 +77,9 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-toolbar-separator] {
-  @apply bg-none bg-surface-z3;
+  @apply bg-surface-z3 bg-none;
 }
 
 [data-style='minimal'] [data-toolbar-divider] {
-  @apply bg-none bg-surface-z3;
+  @apply bg-surface-z3 bg-none;
 }

package/src/minimal/tree.css

@@ -21,7 +21,7 @@
 }
 
 [data-style='minimal'] [data-tree-toggle-btn]:hover {
-  @apply bg-none text-surface-z6;
+  @apply text-surface-z6 bg-none;
 }
 
 /* =============================================================================
@@ -34,7 +34,7 @@
 
 [data-style='minimal'] [data-tree-item-content]:hover:not(:disabled),
 [data-style='minimal'] [data-tree-item-content]:focus:not(:disabled) {
-  @apply bg-none text-surface-z9 outline-none;
+  @apply text-surface-z9 bg-none outline-none;
 }
 
 /* Focus visible for keyboard navigation */
@@ -56,7 +56,9 @@
   @apply bg-none;
 }
 
-[data-style='minimal'] [data-tree]:focus-within [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+[data-style='minimal']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']:hover:not(:disabled) {
   @apply bg-none;
 }
 
@@ -89,18 +91,24 @@
 }
 
 [data-style='minimal'] [data-tree-item-content] [data-item-badge] {
-  @apply bg-none text-surface-z6 border-surface-z4 border bg-transparent;
+  @apply text-surface-z6 border-surface-z4 border bg-transparent bg-none;
 }
 
 [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-badge] {
   @apply text-primary-z7 border-primary-z4;
 }
 
-[data-style='minimal'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] [data-item-badge] {
+[data-style='minimal']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
   @apply bg-none;
 }
 
-[data-style='minimal'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] [data-item-badge] {
+[data-style='minimal']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
   @apply bg-none;
 }
 

package/src/rokkit/avatar.css

@@ -0,0 +1,29 @@
+/**
+ * Avatar - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-avatar] {
+  @apply bg-surface-z4 text-surface-z8;
+}
+
+/* Status dot colors */
+[data-style='rokkit'] [data-avatar-status][data-status='online'] {
+  @apply bg-success-z5;
+}
+
+[data-style='rokkit'] [data-avatar-status][data-status='offline'] {
+  @apply bg-surface-z5;
+}
+
+[data-style='rokkit'] [data-avatar-status][data-status='away'] {
+  @apply bg-warning-z5;
+}
+
+[data-style='rokkit'] [data-avatar-status][data-status='busy'] {
+  @apply bg-error-z5;
+}
+
+/* Status dot border matches surrounding background — uses surface-z1 as a neutral */
+[data-style='rokkit'] [data-avatar-status] {
+  @apply border-surface-z1;
+}

package/src/rokkit/badge.css

@@ -0,0 +1,29 @@
+/**
+ * Badge - Rokkit Theme Styles
+ */
+
+/* Default variant */
+[data-style='rokkit'] [data-badge][data-variant='default'],
+[data-style='rokkit'] [data-badge]:not([data-variant]) {
+  @apply bg-surface-z5 text-surface-z1;
+}
+
+/* Primary */
+[data-style='rokkit'] [data-badge][data-variant='primary'] {
+  @apply bg-primary-z5 text-on-primary;
+}
+
+/* Success */
+[data-style='rokkit'] [data-badge][data-variant='success'] {
+  @apply bg-success-z5 text-on-success;
+}
+
+/* Warning */
+[data-style='rokkit'] [data-badge][data-variant='warning'] {
+  @apply bg-warning-z5 text-on-warning;
+}
+
+/* Error */
+[data-style='rokkit'] [data-badge][data-variant='error'] {
+  @apply bg-error-z5 text-on-error;
+}

package/src/rokkit/button.css

@@ -19,7 +19,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'] {
-  @apply from-primary-z5 to-secondary-z5 border-primary-z5 text-on-primary border bg-gradient-to-b;
+  @apply from-primary-z5 to-secondary-z5 border-primary-z5 text-on-primary border bg-gradient-to-r;
 }
 
 /* Secondary variant */

package/src/rokkit/chart.css

@@ -25,11 +25,11 @@
   @apply text-surface-z9;
 }
 
-[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;
 }
 

package/src/rokkit/divider.css

@@ -0,0 +1,26 @@
+/**
+ * Divider - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-divider][data-orientation='horizontal']::before,
+[data-style='rokkit'] [data-divider][data-orientation='horizontal']::after {
+  @apply bg-surface-z4;
+}
+
+[data-style='rokkit'] [data-divider][data-orientation='vertical']::before,
+[data-style='rokkit'] [data-divider][data-orientation='vertical']::after {
+  @apply bg-surface-z4;
+}
+
+/* No-label horizontal divider — color the element itself */
+[data-style='rokkit'] [data-divider][data-orientation='horizontal']:not(:has([data-divider-label])) {
+  @apply bg-surface-z4;
+}
+
+[data-style='rokkit'] [data-divider][data-orientation='vertical']:not(:has([data-divider-label])) {
+  @apply bg-surface-z4;
+}
+
+[data-style='rokkit'] [data-divider-label] {
+  @apply text-surface-z6;
+}

package/src/rokkit/index.css

@@ -30,5 +30,10 @@
 @import './card.css';
 @import './message.css';
 @import './status-list.css';
+@import './step-indicator.css';
 @import './chart.css';
 @import './swatch.css';
+@import './divider.css';
+@import './stack.css';
+@import './badge.css';
+@import './avatar.css';

package/src/rokkit/stack.css

@@ -0,0 +1,6 @@
+/**
+ * Stack - Rokkit Theme Styles
+ *
+ * Stack is purely structural — no color theming needed.
+ * All visual appearance comes from the base layout CSS.
+ */

package/src/rokkit/step-indicator.css

@@ -0,0 +1,41 @@
+/* StepIndicator — Rokkit theme (gradients + glows) */
+
+/* ── Number circles ── */
+
+[data-style='rokkit'] [data-step-item][data-step-state='complete'] [data-step-number] {
+  @apply bg-gradient-to-b from-primary-z5 to-secondary-z5 border-primary-z5 text-on-primary;
+}
+
+[data-style='rokkit'] [data-step-item][data-step-state='current'] [data-step-number] {
+  @apply bg-surface-z2 border-primary-z5 text-primary-z7;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #6366f1) 20%, transparent);
+}
+
+[data-style='rokkit'] [data-step-item][data-step-state='upcoming'] [data-step-number] {
+  @apply bg-surface-z1 border-surface-z3 text-surface-z5;
+}
+
+/* ── Labels ── */
+
+[data-style='rokkit'] [data-step-item][data-step-state='complete'] [data-step-label] {
+  @apply text-primary-z7;
+}
+
+[data-style='rokkit'] [data-step-item][data-step-state='current'] [data-step-label] {
+  @apply text-surface-z9 font-semibold;
+}
+
+[data-style='rokkit'] [data-step-item][data-step-state='upcoming'] [data-step-label] {
+  @apply text-surface-z5;
+}
+
+/* ── Connector lines ── */
+
+[data-style='rokkit'] [data-step-item][data-step-state='complete']::after {
+  @apply bg-primary-z5;
+}
+
+[data-style='rokkit'] [data-step-item][data-step-state='current']::after,
+[data-style='rokkit'] [data-step-item][data-step-state='upcoming']::after {
+  @apply bg-surface-z3;
+}

package/src/rokkit/swatch.css

@@ -7,8 +7,10 @@
   @apply from-primary-500 to-secondary-500 bg-gradient-to-br;
 }
 
-[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]) {
   @apply outline-primary-z4;
 }
 

package/src/rokkit/table.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-header] th {
-  @apply text-surface-z6 border-surface-z4 border-b;
+  @apply text-surface-z6 border-surface-z4 border-b bg-surface-z2;
 }
 
 [data-style='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
@@ -45,15 +45,15 @@
    ============================================================================= */
 
 [data-style='rokkit'] [data-table-row] {
-  @apply text-surface-z8 border-surface-z3 border-b;
+  @apply text-surface-z7 border-surface-z3 border-b;
 }
 
 [data-style='rokkit'] [data-table-row]:hover {
-  @apply from-surface-z3 to-surface-z2 bg-gradient-to-r;
+  @apply from-surface-z3 to-surface-z2 bg-gradient-to-b;
 }
 
 [data-style='rokkit'] [data-table-row]:focus {
-  @apply from-surface-z3 to-surface-z2 text-surface-z10 bg-gradient-to-r outline-none;
+  @apply from-surface-z3 to-surface-z2 text-surface-z10 bg-gradient-to-b outline-none;
 }
 
 [data-style='rokkit'] [data-table-row][data-selected='true'] {
@@ -64,8 +64,8 @@
    Striped
    ============================================================================= */
 
-[data-style='rokkit'] [data-striped='true'] [data-table-body] tr:nth-child(even) {
-  @apply bg-surface-z2;
+[data-style='rokkit'] [data-table-striped] [data-table-body] tr:nth-child(even) {
+  @apply bg-surface-z3;
 }
 
 /* =============================================================================
@@ -87,3 +87,22 @@
 [data-style='rokkit'] [data-table-row][data-selected='true'] [data-cell-icon] {
   @apply text-primary-z7;
 }
+
+/* =============================================================================
+   Responsive Card Layout
+   ============================================================================= */
+
+@media (max-width: 639px) {
+  [data-style='rokkit'] [data-table-responsive] [data-table-row] {
+    @apply bg-surface-z2 border-surface-z4 border;
+  }
+
+  [data-style='rokkit'] [data-table-responsive] [data-table-cell]::before {
+    @apply text-surface-z5;
+  }
+
+  /* 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;
+  }
+}

package/src/shadcn/button.css

@@ -12,27 +12,27 @@
 [data-style='shadcn'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='shadcn'] [data-button][data-style='default']:not([data-variant]),
 [data-style='shadcn'] [data-button]:not([data-style]):not([data-variant]) {
-  @apply bg-none bg-surface-z2 border-surface-z3 text-surface-z8 border rounded-md;
+  @apply bg-surface-z2 border-surface-z3 text-surface-z8 rounded-md border bg-none;
 }
 
 [data-style='shadcn'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='shadcn'] [data-button]:not([data-style])[data-variant='primary'] {
-  @apply bg-none bg-primary-z5 text-on-primary border-transparent rounded-md;
+  @apply bg-primary-z5 text-on-primary rounded-md border-transparent bg-none;
 }
 
 [data-style='shadcn'] [data-button][data-style='default'][data-variant='secondary'],
 [data-style='shadcn'] [data-button]:not([data-style])[data-variant='secondary'] {
-  @apply bg-none bg-secondary-z4 text-on-secondary border-transparent rounded-md;
+  @apply bg-secondary-z4 text-on-secondary rounded-md border-transparent bg-none;
 }
 
 [data-style='shadcn'] [data-button][data-style='default'][data-variant='accent'],
 [data-style='shadcn'] [data-button]:not([data-style])[data-variant='accent'] {
-  @apply bg-none bg-accent-z4 text-on-accent border-transparent rounded-md;
+  @apply bg-accent-z4 text-on-accent rounded-md border-transparent bg-none;
 }
 
 [data-style='shadcn'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='shadcn'] [data-button]:not([data-style])[data-variant='danger'] {
-  @apply bg-none bg-danger-z4 text-on-danger border-transparent rounded-md;
+  @apply bg-danger-z4 text-on-danger rounded-md border-transparent bg-none;
 }
 
 /* =============================================================================
@@ -41,23 +41,23 @@
 
 [data-style='shadcn'] [data-button][data-style='outline'][data-variant='default'],
 [data-style='shadcn'] [data-button][data-style='outline']:not([data-variant]) {
-  @apply border-surface-z3 text-surface-z7 border bg-transparent rounded-md;
+  @apply border-surface-z3 text-surface-z7 rounded-md border bg-transparent;
 }
 
 [data-style='shadcn'] [data-button][data-style='outline'][data-variant='primary'] {
-  @apply border-primary-z4 text-primary-z6 border bg-transparent rounded-md;
+  @apply border-primary-z4 text-primary-z6 rounded-md border bg-transparent;
 }
 
 [data-style='shadcn'] [data-button][data-style='outline'][data-variant='secondary'] {
-  @apply border-secondary-z4 text-secondary-z6 border bg-transparent rounded-md;
+  @apply border-secondary-z4 text-secondary-z6 rounded-md border bg-transparent;
 }
 
 [data-style='shadcn'] [data-button][data-style='outline'][data-variant='accent'] {
-  @apply border-accent-z4 text-accent-z6 border bg-transparent rounded-md;
+  @apply border-accent-z4 text-accent-z6 rounded-md border bg-transparent;
 }
 
 [data-style='shadcn'] [data-button][data-style='outline'][data-variant='danger'] {
-  @apply border-danger-z4 text-danger-z4 border bg-transparent rounded-md;
+  @apply border-danger-z4 text-danger-z4 rounded-md border bg-transparent;
 }
 
 /* =============================================================================
@@ -65,7 +65,7 @@
    ============================================================================= */
 
 [data-style='shadcn'] [data-button][data-style='ghost'] {
-  @apply border-transparent bg-transparent rounded-md;
+  @apply rounded-md border-transparent bg-transparent;
 }
 
 [data-style='shadcn'] [data-button][data-style='ghost'][data-variant='default'],
@@ -95,23 +95,23 @@
 
 [data-style='shadcn'] [data-button][data-style='gradient'][data-variant='default'],
 [data-style='shadcn'] [data-button][data-style='gradient']:not([data-variant]) {
-  @apply bg-none bg-surface-z3 text-surface-z10 rounded-md;
+  @apply bg-surface-z3 text-surface-z10 rounded-md bg-none;
 }
 
 [data-style='shadcn'] [data-button][data-style='gradient'][data-variant='primary'] {
-  @apply bg-none bg-primary-z5 text-on-primary rounded-md;
+  @apply bg-primary-z5 text-on-primary rounded-md bg-none;
 }
 
 [data-style='shadcn'] [data-button][data-style='gradient'][data-variant='secondary'] {
-  @apply bg-none bg-secondary-z4 text-on-secondary rounded-md;
+  @apply bg-secondary-z4 text-on-secondary rounded-md bg-none;
 }
 
 [data-style='shadcn'] [data-button][data-style='gradient'][data-variant='accent'] {
-  @apply bg-none bg-accent-z4 text-on-accent rounded-md;
+  @apply bg-accent-z4 text-on-accent rounded-md bg-none;
 }
 
 [data-style='shadcn'] [data-button][data-style='gradient'][data-variant='danger'] {
-  @apply bg-none bg-danger-z4 text-on-danger rounded-md;
+  @apply bg-danger-z4 text-on-danger rounded-md bg-none;
 }
 
 /* =============================================================================
@@ -147,15 +147,14 @@
    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]) {
-  @apply bg-none bg-surface-z3 border-surface-z4;
+  @apply bg-surface-z3 border-surface-z4 bg-none;
 }
 
 [data-style='shadcn']
   [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
-  @apply bg-none bg-surface-z2 border-surface-z4;
+  @apply bg-surface-z2 border-surface-z4 bg-none;
 }
 
 [data-style='shadcn'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
@@ -164,7 +163,7 @@
 
 [data-style='shadcn']
   [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
-  @apply bg-none bg-surface-z4;
+  @apply bg-surface-z4 bg-none;
 }
 
 /* =============================================================================

package/src/shadcn/card.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='shadcn'] [data-card] {
-  @apply bg-none bg-surface-z0 border-surface-z3 text-surface-z9 border rounded-md;
+  @apply bg-surface-z0 border-surface-z3 text-surface-z9 rounded-md border bg-none;
 }
 
 /* Interactive cards */
@@ -67,7 +67,7 @@
 
 /* Primary — solid primary fill */
 [data-style='shadcn'] [data-card][data-variant='primary'] {
-  @apply bg-none bg-primary-z5 border-primary-z6 text-on-primary border rounded-md;
+  @apply bg-primary-z5 border-primary-z6 text-on-primary rounded-md border bg-none;
 }
 
 [data-style='shadcn'] [data-card][data-variant='primary'] [data-card-header],
@@ -81,7 +81,7 @@
 
 /* Secondary — solid secondary fill */
 [data-style='shadcn'] [data-card][data-variant='secondary'] {
-  @apply bg-none bg-secondary-z4 border-secondary-z5 text-on-secondary border rounded-md;
+  @apply bg-secondary-z4 border-secondary-z5 text-on-secondary rounded-md border bg-none;
 }
 
 [data-style='shadcn'] [data-card][data-variant='secondary'] [data-card-header],
@@ -95,5 +95,5 @@
 
 /* Tertiary — recessed surface */
 [data-style='shadcn'] [data-card][data-variant='tertiary'] {
-  @apply bg-none bg-surface-z1 border-surface-z3 text-surface-z7 border shadow-none rounded-md;
+  @apply bg-surface-z1 border-surface-z3 text-surface-z7 rounded-md border bg-none shadow-none;
 }

package/src/shadcn/chart.css

@@ -25,10 +25,10 @@
   @apply text-surface-z8;
 }
 
-[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/src/shadcn/dropdown.css

@@ -5,11 +5,11 @@
  */
 
 [data-style='shadcn'] [data-dropdown-trigger] {
-  @apply bg-none border-surface-z3 text-surface-z7 border bg-transparent rounded-md;
+  @apply border-surface-z3 text-surface-z7 rounded-md border bg-transparent bg-none;
 }
 
 [data-style='shadcn'] [data-dropdown-trigger]:hover:not(:disabled) {
-  @apply bg-none bg-surface-z2 text-surface-z9 border-surface-z4;
+  @apply bg-surface-z2 text-surface-z9 border-surface-z4 bg-none;
 }
 
 [data-style='shadcn'] [data-dropdown-trigger]:focus-visible {
@@ -17,7 +17,7 @@
 }
 
 [data-style='shadcn'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
-  @apply bg-none border-surface-z5;
+  @apply border-surface-z5 bg-none;
 }
 
 [data-style='shadcn'] [data-dropdown-trigger] [data-dropdown-icon] {
@@ -29,7 +29,7 @@
 }
 
 [data-style='shadcn'] [data-dropdown-panel] {
-  @apply bg-none bg-surface-z0 border-surface-z3 border shadow-md rounded-md;
+  @apply bg-surface-z0 border-surface-z3 rounded-md border bg-none shadow-md;
 }
 
 [data-style='shadcn'] [data-dropdown-option] {
@@ -38,13 +38,13 @@
 
 [data-style='shadcn'] [data-dropdown-option]:hover:not(:disabled),
 [data-style='shadcn'] [data-dropdown-option]:focus:not(:disabled) {
-  @apply bg-none bg-surface-z3 text-surface-z9 outline-none;
+  @apply bg-surface-z3 text-surface-z9 bg-none outline-none;
 }
 
 [data-style='shadcn'] [data-dropdown-option][data-active='true'] {
-  @apply bg-none bg-primary-z2 text-primary-z8;
+  @apply bg-primary-z2 text-primary-z8 bg-none;
 }
 
 [data-style='shadcn'] [data-dropdown-separator] {
-  @apply bg-none bg-surface-z3;
+  @apply bg-surface-z3 bg-none;
 }

package/src/shadcn/floating-action.css

@@ -9,11 +9,11 @@
    ============================================================================= */
 
 [data-style='shadcn'] [data-fab-trigger] {
-  @apply bg-none bg-surface-z0 text-surface-z8 border-surface-z3 border rounded-md;
+  @apply bg-surface-z0 text-surface-z8 border-surface-z3 rounded-md border bg-none;
 }
 
 [data-style='shadcn'] [data-fab-trigger]:hover:not(:disabled) {
-  @apply bg-none bg-surface-z3 text-surface-z10 border-surface-z4;
+  @apply bg-surface-z3 text-surface-z10 border-surface-z4 bg-none;
 }
 
 [data-style='shadcn'] [data-fab-trigger]:focus-visible {
@@ -21,7 +21,7 @@
 }
 
 [data-style='shadcn'] [data-fab][data-open='true'] [data-fab-trigger] {
-  @apply bg-none bg-surface-z3 border-surface-z4;
+  @apply bg-surface-z3 border-surface-z4 bg-none;
   transform: rotate(45deg);
 }
 
@@ -34,11 +34,11 @@
    ============================================================================= */
 
 [data-style='shadcn'] [data-fab-item] {
-  @apply bg-none bg-surface-z0 text-surface-z7 border-surface-z3 border rounded-md;
+  @apply bg-surface-z0 text-surface-z7 border-surface-z3 rounded-md border bg-none;
 }
 
 [data-style='shadcn'] [data-fab-item]:hover:not(:disabled) {
-  @apply bg-none bg-surface-z3 text-surface-z9 border-surface-z4;
+  @apply bg-surface-z3 text-surface-z9 border-surface-z4 bg-none;
 }
 
 [data-style='shadcn'] [data-fab-item]:focus-visible {

package/src/shadcn/floating-navigation.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='shadcn'] [data-floating-nav] {
-  @apply bg-none bg-surface-z0 border-surface-z3 border rounded-md shadow-md;
+  @apply bg-surface-z0 border-surface-z3 rounded-md border bg-none shadow-md;
 }
 
 /* =============================================================================
@@ -41,11 +41,11 @@
 }
 
 [data-style='shadcn'] [data-floating-nav-item]:hover {
-  @apply bg-none bg-surface-z3 text-surface-z9;
+  @apply bg-surface-z3 text-surface-z9 bg-none;
 }
 
 [data-style='shadcn'] [data-floating-nav-item][data-active] {
-  @apply bg-none bg-primary-z2 text-primary-z8;
+  @apply bg-primary-z2 text-primary-z8 bg-none;
 }
 
 [data-style='shadcn'] [data-floating-nav-item]:focus-visible {
@@ -66,5 +66,5 @@
    ============================================================================= */
 
 [data-style='shadcn'] [data-floating-nav-indicator] {
-  @apply bg-none bg-primary-z5 rounded-full;
+  @apply bg-primary-z5 rounded-full bg-none;
 }

package/src/shadcn/index.css

@@ -31,4 +31,5 @@
 @import './card.css';
 @import './message.css';
 @import './status-list.css';
+@import './step-indicator.css';
 @import './chart.css';