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

package/src/grada-ui/floating-action.css

@@ -5,12 +5,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;
   @apply shadow-lg;
   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) {
@@ -25,14 +32,14 @@
 }
 
 [data-style='grada-ui'] [data-fab][data-open='true'] [data-fab-trigger] {
-  @apply bg-none bg-surface-z4 text-surface-z10 shadow-lg;
+  @apply bg-surface-z4 text-surface-z10 bg-none shadow-lg;
   background: none;
   transform: rotate(45deg);
 }
 
 /* FAB Items */
 [data-style='grada-ui'] [data-fab-item] {
-  @apply bg-white text-surface-z8 shadow-md;
+  @apply text-surface-z8 bg-white shadow-md;
   border-radius: 20px;
 }
 

package/src/grada-ui/floating-navigation.css

@@ -60,6 +60,10 @@
 }
 
 [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;
 }

package/src/grada-ui/index.css

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

package/src/grada-ui/input.css

@@ -79,7 +79,7 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-field-state='pass'] [data-input-root] {
-  @apply border-l-4 border-success-z5;
+  @apply border-success-z5 border-l-4;
 }
 
 /* =============================================================================
@@ -87,7 +87,7 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-field-state='fail'] [data-input-root] {
-  @apply border-l-4 border-danger-z4;
+  @apply border-danger-z4 border-l-4;
 }
 
 [data-style='grada-ui'] [data-field-state='fail'] label {

package/src/grada-ui/list.css

@@ -67,7 +67,11 @@
 }
 
 [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;
 }
@@ -93,13 +97,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;
 }
 

package/src/grada-ui/menu.css

@@ -3,7 +3,7 @@
  */
 
 [data-style='grada-ui'] [data-menu-trigger] {
-  @apply bg-white text-surface-z8 border-surface-z4 border;
+  @apply text-surface-z8 border-surface-z4 border bg-white;
   border-radius: 3px;
 }
 
@@ -35,7 +35,7 @@
 
 /* Dropdown */
 [data-style='grada-ui'] [data-menu-dropdown] {
-  @apply bg-white border-surface-z3 border shadow-lg;
+  @apply border-surface-z3 border bg-white shadow-lg;
   border-radius: 3px;
 }
 

package/src/grada-ui/range.css

@@ -10,7 +10,11 @@
 }
 
 [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;
 }
 

package/src/grada-ui/search-filter.css

@@ -3,7 +3,7 @@
  */
 
 [data-style='grada-ui'] [data-search-input] {
-  @apply text-surface-z8 border-surface-z4 bg-white border;
+  @apply text-surface-z8 border-surface-z4 border bg-white;
   border-radius: 3px;
 }
 
@@ -26,7 +26,11 @@
 }
 
 [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;

package/src/grada-ui/select.css

@@ -6,7 +6,7 @@
 
 /* Trigger */
 [data-style='grada-ui'] [data-select-trigger] {
-  @apply bg-white text-surface-z8 border-surface-z4 border;
+  @apply text-surface-z8 border-surface-z4 border bg-white;
   border-radius: 3px;
 }
 
@@ -39,7 +39,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;
@@ -57,7 +61,7 @@
 
 /* Dropdown Panel */
 [data-style='grada-ui'] [data-select-dropdown] {
-  @apply bg-white border-surface-z3 border shadow-lg;
+  @apply border-surface-z3 border bg-white shadow-lg;
   border-radius: 3px;
 }
 
@@ -78,21 +82,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;
 }
 
@@ -103,7 +121,7 @@
 
 /* Checkbox */
 [data-style='grada-ui'] [data-select-checkbox] {
-  @apply bg-white border-surface-z5 border;
+  @apply border-surface-z5 border bg-white;
   border-radius: 2px;
 }
 
@@ -154,7 +172,7 @@
 }
 
 [data-style='grada-ui'] [data-select-filter-input] {
-  @apply text-surface-z8 border-surface-z4 bg-white border;
+  @apply text-surface-z8 border-surface-z4 border bg-white;
   border-radius: 3px;
 }
 

package/src/grada-ui/status-list.css

@@ -55,7 +55,11 @@
 }
 
 [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;

package/src/grada-ui/step-indicator.css

@@ -0,0 +1,37 @@
+/* StepIndicator — grada-ui theme (coral/purple gradient brand identity) */
+
+[data-style='grada-ui'] [data-step-item][data-step-state='complete'] [data-step-number] {
+  @apply bg-gradient-to-br from-primary-z5 to-secondary-z5 border-transparent text-on-primary;
+}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='current'] [data-step-number] {
+  @apply bg-transparent border-primary-z5 text-primary-z7 bg-none;
+  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-style='grada-ui'] [data-step-item][data-step-state='upcoming'] [data-step-number] {
+  @apply bg-surface-z1 border-surface-z3 text-surface-z5 bg-none;
+}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='complete'] [data-step-label] {
+  @apply text-primary-z7 bg-none;
+}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='current'] [data-step-label] {
+  @apply text-surface-z9 font-semibold bg-none;
+}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='upcoming'] [data-step-label] {
+  @apply text-surface-z5 bg-none;
+}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='complete']::after {
+  @apply bg-gradient-to-r from-primary-z5 to-secondary-z5;
+}
+
+[data-style='grada-ui'] [data-step-item][data-step-state='current']::after,
+[data-style='grada-ui'] [data-step-item][data-step-state='upcoming']::after {
+  @apply bg-surface-z3;
+}

package/src/grada-ui/switch.css

@@ -5,7 +5,7 @@
  */
 
 [data-style='grada-ui'] [data-switch-track] {
-  @apply bg-none bg-surface-z3;
+  @apply bg-surface-z3 bg-none;
 }
 
 [data-style='grada-ui'] [data-switch] [data-switch-thumb] {
@@ -13,12 +13,16 @@
 }
 
 [data-style='grada-ui'] [data-switch]:focus-visible [data-switch-track] {
-  @apply outline-2 outline-offset-2 outline outline-primary-z5;
+  @apply outline-primary-z5 outline outline-2 outline-offset-2;
 }
 
 /* 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;
 }
 

package/src/grada-ui/table.css

@@ -3,7 +3,7 @@
  */
 
 [data-style='grada-ui'] [data-table-header] th {
-  @apply text-surface-z6 border-b font-medium bg-surface-z1;
+  @apply text-surface-z6 bg-surface-z1 border-b font-medium;
   font-family: 'Montserrat', sans-serif;
   font-size: 0.625rem;
   text-transform: uppercase;
@@ -60,7 +60,7 @@
 }
 
 /* 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) {
   @apply bg-surface-z1;
 }
 

package/src/grada-ui/tabs.css

@@ -32,7 +32,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;
   @apply shadow-sm;

package/src/grada-ui/timeline.css

@@ -7,7 +7,11 @@
 }
 
 [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;
@@ -25,7 +29,11 @@
 }
 
 [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;
 }
 

package/src/grada-ui/toggle.css

@@ -5,7 +5,7 @@
  */
 
 [data-style='grada-ui'] [data-toggle] {
-  @apply bg-none bg-surface-z2;
+  @apply bg-surface-z2 bg-none;
   border-radius: 20px;
   @apply shadow-sm;
 }
@@ -17,12 +17,16 @@
 
 [data-style='grada-ui'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
 [data-style='grada-ui'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
-  @apply bg-none bg-surface-z3 text-surface-z8;
+  @apply bg-surface-z3 text-surface-z8 bg-none;
 }
 
 /* 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;

package/src/grada-ui/toolbar.css

@@ -48,13 +48,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;

package/src/grada-ui/tree.css

@@ -44,7 +44,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;
 }
@@ -72,7 +74,11 @@
 }
 
 [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;
 }

package/src/index.css

@@ -8,11 +8,11 @@
  * - rokkit: Default theme (no wrapper needed — gradients + borders)
  * - minimal: Use data-style="minimal" wrapper (clean + subtle)
  * - material: Use data-style="material" wrapper (elevation + shadows)
- * - glass: Use data-style="glass" wrapper (blur + transparency)
+ * - frosted: Use data-style="frosted" wrapper (frosted glass + blur)
  */
 
 @import './base/index.css';
 @import './rokkit/index.css';
 @import './minimal/index.css';
 @import './material/index.css';
-@import './glass/index.css';
+@import './frosted/index.css';

package/src/material/button.css

@@ -12,27 +12,27 @@
 [data-style='material'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='material'] [data-button][data-style='default']:not([data-variant]),
 [data-style='material'] [data-button]:not([data-style]):not([data-variant]) {
-  @apply bg-none bg-surface-z2 text-surface-z8 shadow-sm;
+  @apply bg-surface-z2 text-surface-z8 bg-none shadow-sm;
 }
 
 [data-style='material'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='material'] [data-button]:not([data-style])[data-variant='primary'] {
-  @apply bg-none bg-primary-z5 text-on-primary shadow-md;
+  @apply bg-primary-z5 text-on-primary bg-none shadow-md;
 }
 
 [data-style='material'] [data-button][data-style='default'][data-variant='secondary'],
 [data-style='material'] [data-button]:not([data-style])[data-variant='secondary'] {
-  @apply bg-none bg-secondary-z4 text-on-secondary shadow-md;
+  @apply bg-secondary-z4 text-on-secondary bg-none shadow-md;
 }
 
 [data-style='material'] [data-button][data-style='default'][data-variant='accent'],
 [data-style='material'] [data-button]:not([data-style])[data-variant='accent'] {
-  @apply bg-none bg-accent-z4 text-on-accent shadow-md;
+  @apply bg-accent-z4 text-on-accent bg-none shadow-md;
 }
 
 [data-style='material'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='material'] [data-button]:not([data-style])[data-variant='danger'] {
-  @apply bg-none bg-danger-z4 text-on-danger shadow-md;
+  @apply bg-danger-z4 text-on-danger bg-none shadow-md;
 }
 
 /* =============================================================================

package/src/material/card.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='material'] [data-card] {
-  @apply bg-none bg-surface-z1 border-surface-z4 text-surface-z9 border shadow-sm;
+  @apply bg-surface-z1 border-surface-z4 text-surface-z9 border bg-none shadow-sm;
 }
 
 /* Interactive cards (buttons) */
@@ -67,7 +67,7 @@
 
 /* Primary — tonal primary container (Material You style) */
 [data-style='material'] [data-card][data-variant='primary'] {
-  @apply bg-none bg-primary-z1 border-primary-z3 text-primary-z9 border shadow-sm;
+  @apply bg-primary-z1 border-primary-z3 text-primary-z9 border bg-none shadow-sm;
 }
 
 [data-style='material'] [data-card][data-variant='primary'] [data-card-header],
@@ -81,7 +81,7 @@
 
 /* Secondary — tonal secondary container */
 [data-style='material'] [data-card][data-variant='secondary'] {
-  @apply bg-none bg-secondary-z1 border-secondary-z3 text-secondary-z9 border shadow-sm;
+  @apply bg-secondary-z1 border-secondary-z3 text-secondary-z9 border bg-none shadow-sm;
 }
 
 [data-style='material'] [data-card][data-variant='secondary'] [data-card-header],
@@ -95,5 +95,5 @@
 
 /* Tertiary — elevated surface with no color accent */
 [data-style='material'] [data-card][data-variant='tertiary'] {
-  @apply bg-none bg-surface-z2 border-surface-z3 text-surface-z7 border shadow-none;
+  @apply bg-surface-z2 border-surface-z3 text-surface-z7 border bg-none shadow-none;
 }

package/src/material/chart.css

@@ -25,11 +25,11 @@
   @apply text-surface-z8;
 }
 
-[data-style='material'] [data-plot-element="bar"][data-dimmed],
-[data-style='material'] [data-plot-element="point"][data-dimmed],
-[data-style='material'] [data-plot-element="arc"][data-dimmed],
-[data-style='material'] [data-plot-element="line"][data-dimmed],
-[data-style='material'] [data-plot-element="area"][data-dimmed] {
+[data-style='material'] [data-plot-element='bar'][data-dimmed],
+[data-style='material'] [data-plot-element='point'][data-dimmed],
+[data-style='material'] [data-plot-element='arc'][data-dimmed],
+[data-style='material'] [data-plot-element='line'][data-dimmed],
+[data-style='material'] [data-plot-element='area'][data-dimmed] {
   opacity: 0.15;
 }
 

package/src/material/dropdown.css

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

package/src/material/floating-action.css

@@ -9,11 +9,11 @@
    ============================================================================= */
 
 [data-style='material'] [data-fab-trigger] {
-  @apply bg-none bg-primary-z5 text-white shadow-lg;
+  @apply bg-primary-z5 bg-none text-white shadow-lg;
 }
 
 [data-style='material'] [data-fab-trigger]:hover:not(:disabled) {
-  @apply bg-none bg-primary-z6 shadow-xl;
+  @apply bg-primary-z6 bg-none shadow-xl;
   transform: scale(1.05);
 }
 
@@ -22,7 +22,7 @@
 }
 
 [data-style='material'] [data-fab][data-open='true'] [data-fab-trigger] {
-  @apply bg-none bg-surface-z4 text-surface-z10 shadow-lg;
+  @apply bg-surface-z4 text-surface-z10 bg-none shadow-lg;
   transform: rotate(45deg);
 }
 
@@ -35,11 +35,11 @@
    ============================================================================= */
 
 [data-style='material'] [data-fab-item] {
-  @apply bg-none bg-surface-z1 text-surface-z8 shadow-md;
+  @apply bg-surface-z1 text-surface-z8 bg-none shadow-md;
 }
 
 [data-style='material'] [data-fab-item]:hover:not(:disabled) {
-  @apply bg-none bg-surface-z2 text-surface-z10 shadow-lg;
+  @apply bg-surface-z2 text-surface-z10 bg-none shadow-lg;
 }
 
 [data-style='material'] [data-fab-item]:focus-visible {