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

package/src/base/list.css

@@ -44,9 +44,11 @@ a[data-list-item],
 button[data-list-item] {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.375rem 0.75rem;
+  gap: var(--density-spacing-md);
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
+  line-height: var(--density-line-height);
   text-decoration: none;
   cursor: pointer;
   transition:
@@ -80,9 +82,11 @@ button[data-list-item] {
 [data-list]:not([data-size]) a[data-list-item],
 [data-list][data-size='md'] button[data-list-item],
 [data-list]:not([data-size]) button[data-list-item] {
-  gap: 0.625rem;
-  padding: 0.375rem 0.75rem;
+  gap: var(--density-spacing-md);
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
+  line-height: var(--density-line-height);
 }
 
 [data-list][data-size='lg'] [data-list-item],
@@ -105,8 +109,8 @@ button[data-list-item] {
   display: flex;
   align-items: center;
   width: 100%;
-  gap: 0.5rem;
-  padding-block: 0.25rem;
+  gap: var(--density-spacing-sm);
+  padding-block: var(--density-spacing-xs);
   font-size: 0.75rem;
   font-weight: 600;
   text-align: left;
@@ -131,7 +135,8 @@ button[data-list-item] {
 }
 [data-list][data-size='md'] [data-list-group],
 [data-list]:not([data-size]) [data-list-group] {
-  padding: 0.375rem 0.75rem;
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
 }
 [data-list][data-size='lg'] [data-list-group] {
   padding: 0.5rem 1rem;

package/src/base/menu.css

@@ -55,8 +55,8 @@
 
 [data-menu][data-size='md'] [data-menu-trigger],
 [data-menu]:not([data-size]) [data-menu-trigger] {
-  height: 2rem;
-  padding-inline: 0.625rem;
+  height: calc(var(--density-icon-size) + var(--density-spacing-xs) * 2);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
 }
 
@@ -199,8 +199,9 @@
 
 [data-menu][data-size='md'] [data-menu-item],
 [data-menu]:not([data-size]) [data-menu-item] {
-  gap: 0.625rem;
-  padding: 0.5rem 0.75rem;
+  gap: var(--density-spacing-md);
+  padding-block: var(--density-spacing-sm);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
 }
 
@@ -237,7 +238,8 @@
 }
 [data-menu][data-size='md'] [data-menu-group],
 [data-menu]:not([data-size]) [data-menu-group] {
-  padding: 0.375rem 0.75rem;
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
 }
 [data-menu][data-size='lg'] [data-menu-group] {
   padding: 0.5rem 1rem;

package/src/base/stack.css

@@ -0,0 +1,76 @@
+/* Stack — base structural styles */
+
+[data-stack] {
+  display: flex;
+}
+
+[data-stack][data-direction='vertical'] {
+  flex-direction: column;
+}
+
+[data-stack][data-direction='horizontal'] {
+  flex-direction: row;
+}
+
+/* Gap sizes */
+[data-stack][data-gap='none'] {
+  gap: 0;
+}
+
+[data-stack][data-gap='xs'] {
+  gap: 0.25rem;
+}
+
+[data-stack][data-gap='sm'] {
+  gap: 0.5rem;
+}
+
+[data-stack][data-gap='md'] {
+  gap: 1rem;
+}
+
+[data-stack][data-gap='lg'] {
+  gap: 1.5rem;
+}
+
+[data-stack][data-gap='xl'] {
+  gap: 2rem;
+}
+
+/* Alignment */
+[data-stack][data-align='start'] {
+  align-items: flex-start;
+}
+
+[data-stack][data-align='center'] {
+  align-items: center;
+}
+
+[data-stack][data-align='end'] {
+  align-items: flex-end;
+}
+
+[data-stack][data-align='stretch'] {
+  align-items: stretch;
+}
+
+/* Justification */
+[data-stack][data-justify='start'] {
+  justify-content: flex-start;
+}
+
+[data-stack][data-justify='center'] {
+  justify-content: center;
+}
+
+[data-stack][data-justify='end'] {
+  justify-content: flex-end;
+}
+
+[data-stack][data-justify='between'] {
+  justify-content: space-between;
+}
+
+[data-stack][data-justify='around'] {
+  justify-content: space-around;
+}

package/src/base/step-indicator.css

@@ -0,0 +1,74 @@
+/* StepIndicator — base structural styles */
+
+[data-step-indicator] {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  align-items: flex-start;
+}
+
+[data-step-item] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+/* Connector line between steps */
+[data-step-item]:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 1.25rem; /* vertically centered with the 2.5rem number circle */
+  left: 50%;
+  width: 100%;
+  height: 2px;
+}
+
+/* Reset button element when used as step-number (complete steps) */
+button[data-step-number] {
+  appearance: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+[data-step-number] {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  border-width: 2px;
+  border-style: solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.875rem;
+  position: relative;
+  z-index: 1;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+[data-step-label] {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  text-align: center;
+  max-width: 6rem;
+  line-height: 1.3;
+  transition: color 0.2s ease;
+}
+
+/* Interaction affordances */
+[data-step-item][data-step-state='complete'] {
+  cursor: pointer;
+}
+
+[data-step-item][data-step-state='current'],
+[data-step-item][data-step-state='upcoming'] {
+  cursor: default;
+}

package/src/base/swatch.css

@@ -10,7 +10,9 @@
 /* Button: padding creates the ring gap; background is the gradient ring */
 [data-swatch-item] {
   @apply cursor-pointer border-0 bg-transparent p-0.5 leading-none;
-  transition: background 120ms ease, outline-color 120ms ease;
+  transition:
+    background 120ms ease,
+    outline-color 120ms ease;
   outline: 2px solid transparent;
   outline-offset: 0;
 }
@@ -27,7 +29,11 @@
 /* ── Selected: gradient shows through the padding gap as a ring ────────────── */
 
 [data-swatch-item][data-selected] {
-  background: linear-gradient(135deg, var(--swatch-fill, currentColor), var(--swatch-stroke, currentColor));
+  background: linear-gradient(
+    135deg,
+    var(--swatch-fill, currentColor),
+    var(--swatch-stroke, currentColor)
+  );
 }
 
 /* ── Hover + keyboard focus: same visual treatment ────────────────────────── */
@@ -59,21 +65,21 @@
 }
 
 [data-swatch-square] {
-  @apply w-6 h-6 rounded-sm;
+  @apply h-6 w-6 rounded-sm;
 }
 
 [data-swatch-circle] {
-  @apply w-6 h-6 rounded-full;
+  @apply h-6 w-6 rounded-full;
 }
 
 /* ── Size variants ─────────────────────────────────────────────────────────── */
 
 [data-swatch][data-swatch-size='sm'] [data-swatch-square],
 [data-swatch][data-swatch-size='sm'] [data-swatch-circle] {
-  @apply w-5 h-5;
+  @apply h-5 w-5;
 }
 
 [data-swatch][data-swatch-size='lg'] [data-swatch-square],
 [data-swatch][data-swatch-size='lg'] [data-swatch-circle] {
-  @apply w-8 h-8;
+  @apply h-8 w-8;
 }

package/src/base/table.css

@@ -40,6 +40,9 @@
    ============================================================================= */
 
 [data-table-header] th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
   text-align: left;
   font-weight: 600;
   white-space: nowrap;
@@ -81,6 +84,10 @@
   transition: background-color 150ms ease;
 }
 
+[data-table][data-selectable='false'] [data-table-row] {
+  cursor: default;
+}
+
 [data-table-row]:focus {
   outline: none;
 }
@@ -120,12 +127,12 @@
 
 [data-table][data-size='sm'] [data-table-header-cell],
 [data-table][data-size='sm'] [data-table-cell] {
-  padding: 0.25rem 0.5rem;
+  padding: 0.375rem 0.625rem;
   font-size: 0.75rem;
 }
 
 [data-table][data-size='sm'] [data-table-caption] {
-  padding: 0.25rem 0.5rem;
+  padding: 0.375rem 0.625rem;
   font-size: 0.75rem;
 }
 
@@ -157,3 +164,46 @@
 [data-table-empty] {
   padding: 1.5rem 0.75rem;
 }
+
+/* =============================================================================
+   Responsive Card Layout (mobile < 640px)
+   ============================================================================= */
+
+@media (max-width: 639px) {
+  [data-table-responsive] table {
+    display: block;
+  }
+
+  [data-table-responsive] thead {
+    display: none;
+  }
+
+  [data-table-responsive] tbody {
+    display: block;
+  }
+
+  [data-table-responsive] [data-table-row] {
+    display: block;
+    padding: 0.75rem;
+    margin-bottom: 0.5rem;
+    border-radius: 0.5rem;
+    border-bottom: none !important;
+  }
+
+  [data-table-responsive] [data-table-cell] {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.2rem 0 !important;
+    text-align: left !important;
+    border: none;
+  }
+
+  [data-table-responsive] [data-table-cell]::before {
+    content: attr(data-label);
+    font-weight: 600;
+    font-size: 0.75rem;
+    min-width: 7rem;
+    flex-shrink: 0;
+  }
+}

package/src/bits-ui/button.css

@@ -12,27 +12,27 @@
 [data-style='bits-ui'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='bits-ui'] [data-button][data-style='default']:not([data-variant]),
 [data-style='bits-ui'] [data-button]:not([data-style]):not([data-variant]) {
-  @apply bg-none bg-surface-z2 border-surface-z3 text-surface-z8 border rounded-lg shadow-sm;
+  @apply bg-surface-z2 border-surface-z3 text-surface-z8 rounded-lg border bg-none shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='bits-ui'] [data-button]:not([data-style])[data-variant='primary'] {
-  @apply bg-none bg-primary-z5 text-on-primary border-transparent rounded-lg shadow-sm;
+  @apply bg-primary-z5 text-on-primary rounded-lg border-transparent bg-none shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='default'][data-variant='secondary'],
 [data-style='bits-ui'] [data-button]:not([data-style])[data-variant='secondary'] {
-  @apply bg-none bg-secondary-z4 text-on-secondary border-transparent rounded-lg shadow-sm;
+  @apply bg-secondary-z4 text-on-secondary rounded-lg border-transparent bg-none shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='default'][data-variant='accent'],
 [data-style='bits-ui'] [data-button]:not([data-style])[data-variant='accent'] {
-  @apply bg-none bg-accent-z4 text-on-accent border-transparent rounded-lg shadow-sm;
+  @apply bg-accent-z4 text-on-accent rounded-lg border-transparent bg-none shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='bits-ui'] [data-button]:not([data-style])[data-variant='danger'] {
-  @apply bg-none bg-danger-z4 text-on-danger border-transparent rounded-lg shadow-sm;
+  @apply bg-danger-z4 text-on-danger rounded-lg border-transparent bg-none shadow-sm;
 }
 
 /* =============================================================================
@@ -41,23 +41,23 @@
 
 [data-style='bits-ui'] [data-button][data-style='outline'][data-variant='default'],
 [data-style='bits-ui'] [data-button][data-style='outline']:not([data-variant]) {
-  @apply border-surface-z3 text-surface-z7 border bg-transparent rounded-lg shadow-sm;
+  @apply border-surface-z3 text-surface-z7 rounded-lg border bg-transparent shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='outline'][data-variant='primary'] {
-  @apply border-primary-z4 text-primary-z6 border bg-transparent rounded-lg shadow-sm;
+  @apply border-primary-z4 text-primary-z6 rounded-lg border bg-transparent shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='outline'][data-variant='secondary'] {
-  @apply border-secondary-z4 text-secondary-z6 border bg-transparent rounded-lg shadow-sm;
+  @apply border-secondary-z4 text-secondary-z6 rounded-lg border bg-transparent shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='outline'][data-variant='accent'] {
-  @apply border-accent-z4 text-accent-z6 border bg-transparent rounded-lg shadow-sm;
+  @apply border-accent-z4 text-accent-z6 rounded-lg border bg-transparent shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='outline'][data-variant='danger'] {
-  @apply border-danger-z4 text-danger-z4 border bg-transparent rounded-lg shadow-sm;
+  @apply border-danger-z4 text-danger-z4 rounded-lg border bg-transparent shadow-sm;
 }
 
 /* =============================================================================
@@ -65,7 +65,7 @@
    ============================================================================= */
 
 [data-style='bits-ui'] [data-button][data-style='ghost'] {
-  @apply border-transparent bg-transparent rounded-lg;
+  @apply rounded-lg border-transparent bg-transparent;
 }
 
 [data-style='bits-ui'] [data-button][data-style='ghost'][data-variant='default'],
@@ -95,23 +95,23 @@
 
 [data-style='bits-ui'] [data-button][data-style='gradient'][data-variant='default'],
 [data-style='bits-ui'] [data-button][data-style='gradient']:not([data-variant]) {
-  @apply from-surface-z3 to-surface-z1 text-surface-z10 bg-gradient-to-br rounded-lg shadow-sm;
+  @apply from-surface-z3 to-surface-z1 text-surface-z10 rounded-lg bg-gradient-to-br shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='gradient'][data-variant='primary'] {
-  @apply from-primary-z5 to-primary-z3 text-on-primary bg-gradient-to-br rounded-lg shadow-sm;
+  @apply from-primary-z5 to-primary-z3 text-on-primary rounded-lg bg-gradient-to-br shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='gradient'][data-variant='secondary'] {
-  @apply from-secondary-z5 to-secondary-z3 text-on-secondary bg-gradient-to-br rounded-lg shadow-sm;
+  @apply from-secondary-z5 to-secondary-z3 text-on-secondary rounded-lg bg-gradient-to-br shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='gradient'][data-variant='accent'] {
-  @apply from-accent-z5 to-accent-z3 text-on-accent bg-gradient-to-br rounded-lg shadow-sm;
+  @apply from-accent-z5 to-accent-z3 text-on-accent rounded-lg bg-gradient-to-br shadow-sm;
 }
 
 [data-style='bits-ui'] [data-button][data-style='gradient'][data-variant='danger'] {
-  @apply from-danger-z5 to-danger-z3 text-on-danger bg-gradient-to-br rounded-lg shadow-sm;
+  @apply from-danger-z5 to-danger-z3 text-on-danger rounded-lg bg-gradient-to-br shadow-sm;
 }
 
 [data-style='bits-ui']
@@ -155,12 +155,12 @@
 [data-style='bits-ui']
   [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
 [data-style='bits-ui'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
-  @apply bg-none bg-surface-z3 border-surface-z4 shadow-md;
+  @apply bg-surface-z3 border-surface-z4 bg-none shadow-md;
 }
 
 [data-style='bits-ui']
   [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
-  @apply bg-none bg-surface-z1 border-surface-z4 shadow-md;
+  @apply bg-surface-z1 border-surface-z4 bg-none shadow-md;
 }
 
 [data-style='bits-ui'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {

package/src/bits-ui/card.css

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

package/src/bits-ui/chart.css

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

package/src/bits-ui/dropdown.css

@@ -5,11 +5,11 @@
  */
 
 [data-style='bits-ui'] [data-dropdown-trigger] {
-  @apply bg-none border-surface-z3 text-surface-z7 border bg-surface-z1 rounded-lg shadow-sm;
+  @apply border-surface-z3 text-surface-z7 bg-surface-z1 rounded-lg border bg-none shadow-sm;
 }
 
 [data-style='bits-ui'] [data-dropdown-trigger]:hover:not(:disabled) {
-  @apply bg-none text-surface-z9 border-surface-z4 shadow-md;
+  @apply text-surface-z9 border-surface-z4 bg-none shadow-md;
 }
 
 [data-style='bits-ui'] [data-dropdown-trigger]:focus-visible {
@@ -17,7 +17,7 @@
 }
 
 [data-style='bits-ui'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
-  @apply bg-none border-surface-z5 ring-primary-z3 ring-2;
+  @apply border-surface-z5 ring-primary-z3 bg-none ring-2;
 }
 
 [data-style='bits-ui'] [data-dropdown-trigger] [data-dropdown-icon] {
@@ -29,7 +29,7 @@
 }
 
 [data-style='bits-ui'] [data-dropdown-panel] {
-  @apply bg-none bg-surface-z1 border-surface-z3 border shadow-lg rounded-xl;
+  @apply bg-surface-z1 border-surface-z3 rounded-xl border bg-none shadow-lg;
 }
 
 [data-style='bits-ui'] [data-dropdown-option] {
@@ -46,5 +46,5 @@
 }
 
 [data-style='bits-ui'] [data-dropdown-separator] {
-  @apply bg-none bg-surface-z3;
+  @apply bg-surface-z3 bg-none;
 }

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

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

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

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='bits-ui'] [data-floating-nav] {
-  @apply bg-none bg-surface-z1 border-surface-z3 border rounded-xl shadow-sm;
+  @apply bg-surface-z1 border-surface-z3 rounded-xl border bg-none shadow-sm;
 }
 
 /* =============================================================================
@@ -66,5 +66,5 @@
    ============================================================================= */
 
 [data-style='bits-ui'] [data-floating-nav-indicator] {
-  @apply bg-none bg-primary-z5 rounded-lg;
+  @apply bg-primary-z5 rounded-lg bg-none;
 }

package/src/bits-ui/index.css

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

package/src/bits-ui/input.css

@@ -6,7 +6,7 @@
 
 /* Input root: rounded border, subtle background */
 [data-style='bits-ui'] [data-input-root] {
-  @apply border-surface-z3 relative flex items-center border bg-surface-z1 rounded-lg shadow-sm;
+  @apply border-surface-z3 bg-surface-z1 relative flex items-center rounded-lg border shadow-sm;
   background-image: none;
   transition:
     background-color 150ms ease,
@@ -24,7 +24,9 @@
 [data-style='bits-ui'] [data-input-root]:focus-within {
   @apply border-primary-z4 bg-surface-z1;
   background-image: none;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 2px var(--color-primary-z3, rgba(0,0,0,0.08));
+  box-shadow:
+    inset 0 1px 3px rgba(0, 0, 0, 0.06),
+    0 0 0 2px var(--color-primary-z3, rgba(0, 0, 0, 0.08));
 }
 
 /* Inputs inside wrapper */
@@ -45,7 +47,7 @@
 
 /* Select inside input-root: match text input appearance */
 [data-style='bits-ui'] [data-input-root] [data-select-trigger] {
-  @apply text-surface-z9 border-none bg-transparent px-3 shadow-none ring-0 focus:outline-none rounded-lg;
+  @apply text-surface-z9 rounded-lg border-none bg-transparent px-3 shadow-none ring-0 focus:outline-none;
   font-size: 0.875rem;
   background-image: none;
   transition: color 150ms ease;
@@ -105,7 +107,9 @@
 }
 
 [data-style='bits-ui'] [data-field-state='fail'] [data-input-root]:focus-within {
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 2px var(--color-danger-z3, rgba(0,0,0,0.08));
+  box-shadow:
+    inset 0 1px 3px rgba(0, 0, 0, 0.06),
+    0 0 0 2px var(--color-danger-z3, rgba(0, 0, 0, 0.08));
 }
 
 /* Pass state */