@vireo-ai/trellis-ui 0.1.27 → 0.1.30

package/packages/client/src/styles/theme.css

@@ -57,9 +57,32 @@
   Tonal layers are painted over the element's existing surface with a background
   image, while edge layers join the composable state/elevation shadow stack.
 */
+[data-ui-selection-color],
+[data-ui-interaction] {
+  --ui-interaction-selected-fill: var(--background-interaction-selection-neutral);
+  --ui-interaction-selected-fill-hover: var(--background-interaction-selection-neutral-hover);
+  --ui-interaction-selected-ink: var(--color-interaction-selection-neutral-ink);
+  --ui-interaction-selected-edge: var(--color-intent-neutral-edge);
+  --ui-interaction-selected-edge-hover: var(--color-intent-neutral-edge-hover);
+  --ui-interaction-selected-edge-strong: var(--color-intent-neutral-edge-strong);
+  --ui-selection-solid: var(--color-intent-neutral-solid);
+  --ui-selection-solid-ink: var(--color-intent-neutral-solid-ink);
+}
+
+:is([data-ui-selection-color], [data-ui-interaction])[data-color="accent"] {
+  --ui-interaction-selected-fill: var(--background-interaction-selection-accent);
+  --ui-interaction-selected-fill-hover: var(--background-interaction-selection-accent-hover);
+  --ui-interaction-selected-ink: var(--color-interaction-selection-accent-ink);
+  --ui-interaction-selected-edge: var(--color-intent-accent-edge);
+  --ui-interaction-selected-edge-hover: var(--color-intent-accent-edge-hover);
+  --ui-interaction-selected-edge-strong: var(--color-intent-accent-edge-strong);
+  --ui-selection-solid: var(--color-intent-accent-solid);
+  --ui-selection-solid-ink: var(--color-intent-accent-solid-ink);
+}
+
 [data-ui-interaction] {
   --ui-interaction-fill: transparent;
-  --ui-interaction-edge: transparent;
+  --ui-interaction-edge: var(--ui-interaction-rest-edge, transparent);
 }
 
 :is([data-ui-interaction="tonal"], [data-ui-interaction="combined"]) {
@@ -71,6 +94,10 @@
     0 0 0 var(--border-width-edge-perimeter) var(--ui-interaction-edge);
 }
 
+:is([data-ui-interaction="edge"], [data-ui-interaction="combined"]):not([data-ui-elevation]) {
+  box-shadow: var(--ui-state-shadow-layers);
+}
+
 @media (hover: hover) {
   [data-ui-interaction]:hover {
     --ui-interaction-fill: var(--color-interaction-hover);
@@ -93,8 +120,21 @@
   [data-pressed],
   [aria-pressed="true"]
 ) {
-  --ui-interaction-fill: var(--color-interaction-selected);
-  --ui-interaction-edge: var(--color-interaction-edge-selected);
+  --ui-interaction-fill: var(--ui-interaction-selected-fill);
+  --ui-interaction-edge: var(--ui-interaction-selected-edge);
+}
+
+:is([data-ui-interaction="tonal"], [data-ui-interaction="combined"]):is(
+  [data-selected="true"],
+  [aria-selected="true"],
+  [data-current],
+  [aria-current]:not([aria-current="false"]),
+  [data-checked],
+  [aria-checked="true"],
+  [data-pressed],
+  [aria-pressed="true"]
+) {
+  color: var(--ui-interaction-selected-ink);
 }
 
 @media (hover: hover) {
@@ -108,8 +148,8 @@
     [data-pressed],
     [aria-pressed="true"]
   ):hover {
-    --ui-interaction-fill: var(--color-interaction-selected-hover);
-    --ui-interaction-edge: var(--color-interaction-edge-selected-hover);
+    --ui-interaction-fill: var(--ui-interaction-selected-fill-hover);
+    --ui-interaction-edge: var(--ui-interaction-selected-edge-hover);
   }
 }
 
@@ -237,720 +277,6 @@
   box-shadow: inset 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
 }
 
-@layer components {
-  /* Disabled is one terminal interaction treatment across every control anatomy. */
-  :is(
-    [data-ui-action-recipe]:is(:disabled, [aria-disabled="true"]):not([data-ui-loading]),
-    [data-ui-action-recipe][data-disabled],
-    [data-ui-control][data-ui-control-recipe]:is(
-      [data-disabled],
-      :disabled,
-      :has(:disabled):not(:has(:enabled))
-    ),
-    [data-ui-selection-root]:is([data-disabled], :has(:disabled):not(:has(:enabled)))
-  ) {
-    pointer-events: none;
-    opacity: var(--opacity-interaction-disabled);
-  }
-
-  /* Shared action treatment: Button and interactive Badge. */
-  [data-ui-action-recipe] {
-    --ui-action-text: var(--ui-surface-ink);
-    --ui-action-text-hover: var(--ui-surface-ink);
-    --ui-action-soft: var(--color-intent-neutral-soft);
-    --ui-action-soft-hover: var(--color-intent-neutral-soft-hover);
-    --ui-action-soft-pressed: var(--color-intent-neutral-soft-pressed);
-    --ui-action-soft-ink: var(--color-intent-neutral-soft-ink);
-    --ui-action-solid: var(--color-intent-neutral-solid);
-    --ui-action-solid-hover: var(--color-intent-neutral-solid-hover);
-    --ui-action-solid-pressed: var(--color-intent-neutral-solid-pressed);
-    --ui-action-solid-ink: var(--color-intent-neutral-solid-ink);
-    --ui-action-edge: var(--ui-surface-edge);
-    --ui-action-edge-hover: var(--ui-surface-edge-hover);
-    --ui-action-edge-strong: var(--ui-surface-edge-strong);
-    --ui-action-focus: var(--color-intent-neutral-focus);
-    --ui-action-focus-width: var(--color-intent-neutral-focus-width);
-  }
-
-  [data-ui-action-recipe][data-color="accent"] {
-    --ui-action-text: var(--color-intent-accent-text);
-    --ui-action-text-hover: var(--color-intent-accent-text-hover);
-    --ui-action-soft: var(--color-intent-accent-soft);
-    --ui-action-soft-hover: var(--color-intent-accent-soft-hover);
-    --ui-action-soft-pressed: var(--color-intent-accent-soft-pressed);
-    --ui-action-soft-ink: var(--color-intent-accent-soft-ink);
-    --ui-action-solid: var(--color-intent-accent-solid);
-    --ui-action-solid-hover: var(--color-intent-accent-solid-hover);
-    --ui-action-solid-pressed: var(--color-intent-accent-solid-pressed);
-    --ui-action-solid-ink: var(--color-intent-accent-solid-ink);
-    --ui-action-edge: var(--color-intent-accent-edge);
-    --ui-action-edge-hover: var(--color-intent-accent-edge-hover);
-    --ui-action-edge-strong: var(--color-intent-accent-edge-strong);
-    --ui-action-focus: var(--color-intent-accent-focus);
-    --ui-action-focus-width: var(--color-intent-accent-focus-width);
-  }
-
-  [data-ui-action-recipe][data-color="success"] {
-    --ui-action-text: var(--color-intent-success-text);
-    --ui-action-text-hover: var(--color-intent-success-text-hover);
-    --ui-action-soft: var(--color-intent-success-soft);
-    --ui-action-soft-hover: var(--color-intent-success-soft-hover);
-    --ui-action-soft-pressed: var(--color-intent-success-soft-pressed);
-    --ui-action-soft-ink: var(--color-intent-success-soft-ink);
-    --ui-action-solid: var(--color-intent-success-solid);
-    --ui-action-solid-hover: var(--color-intent-success-solid-hover);
-    --ui-action-solid-pressed: var(--color-intent-success-solid-pressed);
-    --ui-action-solid-ink: var(--color-intent-success-solid-ink);
-    --ui-action-edge: var(--color-intent-success-edge);
-    --ui-action-edge-hover: var(--color-intent-success-edge-hover);
-    --ui-action-edge-strong: var(--color-intent-success-edge-strong);
-    --ui-action-focus: var(--color-intent-success-focus);
-    --ui-action-focus-width: var(--color-intent-success-focus-width);
-  }
-
-  [data-ui-action-recipe][data-color="warning"] {
-    --ui-action-text: var(--color-intent-warning-text);
-    --ui-action-text-hover: var(--color-intent-warning-text-hover);
-    --ui-action-soft: var(--color-intent-warning-soft);
-    --ui-action-soft-hover: var(--color-intent-warning-soft-hover);
-    --ui-action-soft-pressed: var(--color-intent-warning-soft-pressed);
-    --ui-action-soft-ink: var(--color-intent-warning-soft-ink);
-    --ui-action-solid: var(--color-intent-warning-solid);
-    --ui-action-solid-hover: var(--color-intent-warning-solid-hover);
-    --ui-action-solid-pressed: var(--color-intent-warning-solid-pressed);
-    --ui-action-solid-ink: var(--color-intent-warning-solid-ink);
-    --ui-action-edge: var(--color-intent-warning-edge);
-    --ui-action-edge-hover: var(--color-intent-warning-edge-hover);
-    --ui-action-edge-strong: var(--color-intent-warning-edge-strong);
-    --ui-action-focus: var(--color-intent-warning-focus);
-    --ui-action-focus-width: var(--color-intent-warning-focus-width);
-  }
-
-  [data-ui-action-recipe][data-color="danger"] {
-    --ui-action-text: var(--color-intent-danger-text);
-    --ui-action-text-hover: var(--color-intent-danger-text-hover);
-    --ui-action-soft: var(--color-intent-danger-soft);
-    --ui-action-soft-hover: var(--color-intent-danger-soft-hover);
-    --ui-action-soft-pressed: var(--color-intent-danger-soft-pressed);
-    --ui-action-soft-ink: var(--color-intent-danger-soft-ink);
-    --ui-action-solid: var(--color-intent-danger-solid);
-    --ui-action-solid-hover: var(--color-intent-danger-solid-hover);
-    --ui-action-solid-pressed: var(--color-intent-danger-solid-pressed);
-    --ui-action-solid-ink: var(--color-intent-danger-solid-ink);
-    --ui-action-edge: var(--color-intent-danger-edge);
-    --ui-action-edge-hover: var(--color-intent-danger-edge-hover);
-    --ui-action-edge-strong: var(--color-intent-danger-edge-strong);
-    --ui-action-focus: var(--color-intent-danger-focus);
-    --ui-action-focus-width: var(--color-intent-danger-focus-width);
-  }
-
-  [data-ui-action-recipe]:where([data-variant="ghost"], [data-variant="link"]) {
-    color: var(--ui-action-text);
-    background-color: transparent;
-    box-shadow: none;
-  }
-
-  [data-ui-action-recipe][data-variant="soft"] {
-    color: var(--ui-action-soft-ink);
-    background-color: var(--ui-action-soft);
-    box-shadow: none;
-  }
-
-  /* Selected values need one more step of separation from their control surface than informational badges. */
-  [data-ui-select-chip][data-variant="soft"] {
-    background-color: var(--ui-action-soft-hover);
-  }
-
-  [data-ui-action-recipe][data-variant="surface"] {
-    color: var(--ui-action-text);
-    background-color: var(--color-interaction-hover);
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-action-edge);
-  }
-
-  [data-ui-action-recipe][data-variant="outline"] {
-    color: var(--ui-action-text);
-    background-color: transparent;
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-action-edge);
-  }
-
-  [data-ui-action-recipe][data-variant="solid"] {
-    color: var(--ui-action-solid-ink);
-    background-color: var(--ui-action-solid);
-    box-shadow: var(--shadow-elevation-1);
-  }
-
-  :is([data-ui-button], [data-ui-badge][data-interactive]):focus-visible {
-    box-shadow: 0 0 0 var(--ui-action-focus-width) var(--ui-action-focus);
-  }
-
-  :is([data-ui-button], [data-ui-badge][data-interactive]):where([data-variant="surface"], [data-variant="outline"]):hover:not(:disabled):not([aria-disabled="true"]) {
-    color: var(--ui-action-text-hover);
-    background-color: var(--color-interaction-hover);
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-action-edge-hover);
-  }
-
-  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="ghost"]:hover:not(:disabled):not([aria-disabled="true"]) {
-    color: var(--ui-action-text-hover);
-    background-color: var(--color-interaction-hover);
-  }
-
-  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="link"]:hover:not(:disabled):not([aria-disabled="true"]) {
-    color: var(--ui-action-text-hover);
-  }
-
-  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="soft"]:hover:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--ui-action-soft-hover);
-  }
-
-  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="solid"]:hover:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--ui-action-solid-hover);
-  }
-
-  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="soft"]:active:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--ui-action-soft-pressed);
-  }
-
-  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="solid"]:active:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--ui-action-solid-pressed);
-  }
-
-  :is([data-ui-button], [data-ui-badge][data-interactive]):where([data-variant="ghost"], [data-variant="surface"], [data-variant="outline"]):active:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--color-interaction-pressed);
-  }
-
-  [data-ui-badge-close]:hover,
-  [data-ui-badge-close]:focus-visible {
-    background-color: color-mix(in srgb, currentColor 12%, transparent);
-  }
-
-  [data-ui-badge-close]:focus-visible {
-    box-shadow: 0 0 0 1px currentColor;
-  }
-
-  /* Feedback surface treatment: Toast. */
-  [data-ui-toast-recipe] {
-    --ui-toast-text: var(--ui-surface-ink);
-    --ui-toast-soft: var(--color-intent-neutral-soft);
-    --ui-toast-soft-ink: var(--color-intent-neutral-soft-ink);
-    --ui-toast-soft-ink-muted: var(--color-intent-neutral-soft-ink-muted);
-    --ui-toast-solid: var(--color-intent-neutral-solid);
-    --ui-toast-solid-ink: var(--color-intent-neutral-solid-ink);
-    --ui-toast-edge: var(--ui-surface-edge);
-    --ui-toast-edge-strong: var(--ui-surface-edge-strong);
-    --ui-toast-focus: var(--color-intent-neutral-focus);
-    --ui-toast-focus-width: var(--color-intent-neutral-focus-width);
-    --ui-toast-ink: var(--ui-surface-ink);
-    --ui-toast-ink-muted: var(--ui-surface-ink-muted);
-    color: var(--ui-toast-ink);
-    background-color: var(--ui-surface-color);
-  }
-
-  [data-ui-toast-recipe][data-color="accent"] {
-    --ui-toast-text: var(--color-intent-accent-text);
-    --ui-toast-soft: var(--color-intent-accent-soft);
-    --ui-toast-soft-ink: var(--color-intent-accent-soft-ink);
-    --ui-toast-soft-ink-muted: var(--color-intent-accent-soft-ink-muted);
-    --ui-toast-solid: var(--color-intent-accent-solid);
-    --ui-toast-solid-ink: var(--color-intent-accent-solid-ink);
-    --ui-toast-edge: var(--color-intent-accent-edge);
-    --ui-toast-edge-strong: var(--color-intent-accent-edge-strong);
-    --ui-toast-focus: var(--color-intent-accent-focus);
-    --ui-toast-focus-width: var(--color-intent-accent-focus-width);
-  }
-
-  [data-ui-toast-recipe][data-color="success"] {
-    --ui-toast-text: var(--color-intent-success-text);
-    --ui-toast-soft: var(--color-intent-success-soft);
-    --ui-toast-soft-ink: var(--color-intent-success-soft-ink);
-    --ui-toast-soft-ink-muted: var(--color-intent-success-soft-ink-muted);
-    --ui-toast-solid: var(--color-intent-success-solid);
-    --ui-toast-solid-ink: var(--color-intent-success-solid-ink);
-    --ui-toast-edge: var(--color-intent-success-edge);
-    --ui-toast-edge-strong: var(--color-intent-success-edge-strong);
-    --ui-toast-focus: var(--color-intent-success-focus);
-    --ui-toast-focus-width: var(--color-intent-success-focus-width);
-  }
-
-  [data-ui-toast-recipe][data-color="warning"] {
-    --ui-toast-text: var(--color-intent-warning-text);
-    --ui-toast-soft: var(--color-intent-warning-soft);
-    --ui-toast-soft-ink: var(--color-intent-warning-soft-ink);
-    --ui-toast-soft-ink-muted: var(--color-intent-warning-soft-ink-muted);
-    --ui-toast-solid: var(--color-intent-warning-solid);
-    --ui-toast-solid-ink: var(--color-intent-warning-solid-ink);
-    --ui-toast-edge: var(--color-intent-warning-edge);
-    --ui-toast-edge-strong: var(--color-intent-warning-edge-strong);
-    --ui-toast-focus: var(--color-intent-warning-focus);
-    --ui-toast-focus-width: var(--color-intent-warning-focus-width);
-  }
-
-  [data-ui-toast-recipe][data-color="danger"] {
-    --ui-toast-text: var(--color-intent-danger-text);
-    --ui-toast-soft: var(--color-intent-danger-soft);
-    --ui-toast-soft-ink: var(--color-intent-danger-soft-ink);
-    --ui-toast-soft-ink-muted: var(--color-intent-danger-soft-ink-muted);
-    --ui-toast-solid: var(--color-intent-danger-solid);
-    --ui-toast-solid-ink: var(--color-intent-danger-solid-ink);
-    --ui-toast-edge: var(--color-intent-danger-edge);
-    --ui-toast-edge-strong: var(--color-intent-danger-edge-strong);
-    --ui-toast-focus: var(--color-intent-danger-focus);
-    --ui-toast-focus-width: var(--color-intent-danger-focus-width);
-  }
-
-  [data-ui-toast-recipe][data-variant="soft"] {
-    --ui-toast-ink: var(--ui-toast-soft-ink);
-    --ui-toast-ink-muted: var(--ui-toast-soft-ink-muted);
-    color: var(--ui-toast-ink);
-    background-color: var(--ui-toast-soft);
-  }
-
-  [data-ui-toast-recipe][data-variant="surface"] {
-    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-toast-edge);
-  }
-
-  [data-ui-toast-recipe][data-variant="outline"] {
-    --ui-toast-ink: var(--ui-toast-text);
-    --ui-toast-ink-muted: var(--ui-toast-text);
-    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-toast-edge-strong);
-    color: var(--ui-toast-ink);
-    background-color: transparent;
-  }
-
-  [data-ui-toast-recipe][data-variant="solid"] {
-    --ui-toast-ink: var(--ui-toast-solid-ink);
-    --ui-toast-ink-muted: var(--ui-toast-solid-ink);
-    color: var(--ui-toast-ink);
-    background-color: var(--ui-toast-solid);
-  }
-
-  [data-ui-toast-marker] {
-    background-color: var(--ui-toast-solid);
-  }
-
-  [data-ui-toast-title] {
-    color: var(--ui-toast-ink);
-  }
-
-  [data-ui-toast-description] {
-    color: var(--ui-toast-ink-muted);
-  }
-
-  [data-ui-toast-close] {
-    color: var(--ui-toast-ink-muted);
-  }
-
-  [data-ui-toast-close]:hover {
-    color: var(--ui-toast-ink);
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
-  }
-
-  [data-ui-toast-close]:focus-visible {
-    color: var(--ui-toast-ink);
-    box-shadow: 0 0 0 var(--ui-toast-focus-width) var(--ui-toast-focus);
-  }
-
-  /* Selection navigation treatment: Tabs. */
-  [data-ui-tabs-list] {
-    color: var(--ui-surface-ink);
-  }
-
-  [data-ui-tabs-list][data-variant="line"] {
-    box-shadow: inset 0 calc(var(--border-width-edge-separator) * -1) 0 var(--ui-surface-separator);
-  }
-
-  [data-ui-tabs-list][data-variant="line"][data-orientation="vertical"] {
-    box-shadow: inset var(--border-width-edge-separator) 0 0 var(--ui-surface-separator);
-  }
-
-  [data-ui-tabs-list][data-variant="segmented"] {
-    background-color: var(--color-interaction-hover);
-    box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
-  }
-
-  [data-ui-tabs-tab] {
-    color: var(--ui-surface-ink-muted);
-  }
-
-  [data-ui-tabs-tab]:hover:not([data-disabled]) {
-    color: var(--ui-surface-ink);
-  }
-
-  [data-ui-tabs-tab][data-selected] {
-    color: var(--ui-surface-ink);
-  }
-
-  [data-ui-tabs-tab]:focus-visible {
-    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
-  }
-
-  [data-ui-tabs-tab][data-disabled] {
-    color: var(--color-interaction-disabled-ink);
-  }
-
-  [data-ui-tabs-list][data-variant="subtle"] [data-ui-tabs-indicator],
-  [data-ui-tabs-list][data-variant="pills"] [data-ui-tabs-indicator] {
-    background-color: var(--color-interaction-selected);
-  }
-
-  [data-ui-tabs-list][data-variant="line"] [data-ui-tabs-indicator] {
-    background-color: var(--color-intent-accent-solid);
-  }
-
-  [data-ui-tabs-list][data-variant="segmented"] [data-ui-tabs-indicator] {
-    background-color: transparent;
-  }
-
-  [data-ui-tabs-list][data-variant="segmented"] [data-ui-tabs-indicator]::before {
-    position: absolute;
-    inset: var(--border-width-edge-control);
-    border-radius: inherit;
-    background-color: var(--ui-surface-color);
-    box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
-    content: "";
-  }
-
-  [data-ui-tabs-panel] {
-    color: var(--ui-surface-ink);
-  }
-
-  [data-ui-tabs-panel]:focus-visible {
-    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
-  }
-
-  /* Collection option treatment: Menu, Select, Date Picker, and Sidebar. */
-  [data-ui-option-recipe] {
-    --ui-option-text: var(--ui-surface-ink);
-    --ui-option-hover: var(--color-interaction-hover);
-    --ui-option-active: var(--color-interaction-pressed);
-    --ui-option-selected-background: var(--background-interaction-selection-neutral);
-    --ui-option-selected-background-hover: var(--background-interaction-selection-neutral-hover);
-    --ui-option-selected-ink: var(--ui-surface-ink);
-    color: var(--ui-option-text);
-    background-color: transparent;
-  }
-
-  [data-ui-option-recipe][data-color="accent"] {
-    --ui-option-text: var(--color-intent-accent-text);
-    --ui-option-hover: var(--color-intent-accent-soft);
-    --ui-option-active: var(--color-intent-accent-soft-pressed);
-    --ui-option-selected-background: var(--background-interaction-selection-accent);
-    --ui-option-selected-background-hover: var(--background-interaction-selection-accent-hover);
-    --ui-option-selected-ink: var(--color-interaction-selection-accent-ink);
-  }
-
-  [data-ui-option-recipe][data-color="success"] {
-    --ui-option-text: var(--color-intent-success-text);
-    --ui-option-hover: var(--color-intent-success-soft);
-    --ui-option-active: var(--color-intent-success-soft-pressed);
-    --ui-option-selected-background: var(--background-interaction-selection-success);
-    --ui-option-selected-background-hover: var(--background-interaction-selection-success-hover);
-    --ui-option-selected-ink: var(--color-interaction-selection-success-ink);
-  }
-
-  [data-ui-option-recipe][data-color="warning"] {
-    --ui-option-text: var(--color-intent-warning-text);
-    --ui-option-hover: var(--color-intent-warning-soft);
-    --ui-option-active: var(--color-intent-warning-soft-pressed);
-    --ui-option-selected-background: var(--background-interaction-selection-warning);
-    --ui-option-selected-background-hover: var(--background-interaction-selection-warning-hover);
-    --ui-option-selected-ink: var(--color-interaction-selection-warning-ink);
-  }
-
-  [data-ui-option-recipe][data-color="danger"] {
-    --ui-option-text: var(--color-intent-danger-text);
-    --ui-option-hover: var(--background-interaction-selection-danger);
-    --ui-option-active: var(--background-interaction-selection-danger-hover);
-    --ui-option-selected-background: var(--background-interaction-selection-danger);
-    --ui-option-selected-background-hover: var(--background-interaction-selection-danger-hover);
-    --ui-option-selected-ink: var(--color-interaction-selection-danger-ink);
-  }
-
-  [data-ui-option-recipe][data-variant="subtle"] {
-    background-color: var(--ui-option-hover);
-  }
-
-  [data-ui-option-recipe][data-variant="filled"] {
-    background-color: var(--ui-option-active);
-  }
-
-  [data-ui-option-recipe]:hover:not([data-disabled]),
-  [data-ui-option-recipe][data-selected]:hover:not([data-disabled]) {
-    color: var(--ui-option-text);
-    background-color: var(--ui-option-hover);
-  }
-
-  [data-ui-option-recipe]:is(:active, :focus-visible, [data-active], [data-highlighted]):not([data-disabled]) {
-    color: var(--ui-option-text);
-    background-color: var(--ui-option-active);
-  }
-
-  [data-ui-option-recipe]:is([data-selected], [data-current], [aria-current]:not([aria-current="false"])):not([data-disabled]) {
-    color: var(--ui-option-selected-ink);
-    background: var(--ui-option-selected-background);
-  }
-
-  [data-ui-option-recipe]:is([data-selected], [data-current], [aria-current]:not([aria-current="false"])):hover:not([data-disabled]) {
-    background: var(--ui-option-selected-background-hover);
-  }
-
-  [data-ui-option-recipe][data-disabled] {
-    pointer-events: none;
-    color: var(--color-interaction-disabled-ink);
-    background-color: transparent;
-  }
-
-  [data-ui-select-option-indicator] {
-    color: var(--color-intent-accent-text);
-  }
-
-  :is([data-ui-menu-label], [data-ui-select-label]) {
-    color: var(--ui-surface-ink-muted);
-  }
-
-  [data-ui-select-search] {
-    box-shadow: inset 0 calc(var(--border-width-edge-separator) * -1) 0 var(--ui-surface-separator);
-  }
-
-  [data-ui-select-create],
-  [data-ui-date-picker-footer] {
-    box-shadow: inset 0 var(--border-width-edge-separator) 0 var(--ui-surface-separator);
-  }
-
-  @media (min-width: 40rem) {
-    [data-ui-date-picker-presets][data-position="left"] {
-      box-shadow: inset calc(var(--border-width-edge-separator) * -1) 0 0 var(--ui-surface-separator);
-    }
-
-    [data-ui-date-picker-presets][data-position="right"] {
-      box-shadow: inset var(--border-width-edge-separator) 0 0 var(--ui-surface-separator);
-    }
-  }
-
-  [data-ui-date-picker-presets][data-position="top"] {
-    box-shadow: inset 0 calc(var(--border-width-edge-separator) * -1) 0 var(--ui-surface-separator);
-  }
-
-  [data-ui-date-picker-presets][data-position="bottom"] {
-    box-shadow: inset 0 var(--border-width-edge-separator) 0 var(--ui-surface-separator);
-  }
-
-  :is([data-ui-menu-separator], [data-ui-select-separator]) > [role="separator"],
-  [data-ui-select-separator] > div {
-    background-color: var(--ui-surface-separator);
-  }
-
-  /* Field and dropzone control treatments. */
-  [data-ui-control][data-ui-control-recipe="field"] {
-    color: inherit;
-    background-color: transparent;
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"] {
-    background-color: var(--color-interaction-hover);
-    box-shadow: none;
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
-    background-color: var(--color-interaction-pressed);
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-hover);
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"]:is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
-    box-shadow:
-      0 0 0 var(--border-width-edge-control) var(--color-intent-accent-edge-strong),
-      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]) {
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge, var(--ui-surface-edge-strong));
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled) {
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-hover, var(--ui-surface-edge-strong));
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled) {
-    box-shadow:
-      0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-strong, var(--ui-surface-edge-strong)),
-      0 0 0 var(--color-intent-danger-focus-width, var(--color-intent-accent-focus-width)) var(--color-intent-danger-focus, var(--color-intent-accent-focus));
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"] :is(input, textarea)::placeholder {
-    color: var(--ui-surface-ink-muted);
-    opacity: 1;
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"]:not([data-disabled]):not(:disabled) [data-ui-control-action]:hover {
-    color: inherit;
-    background-color: var(--color-interaction-hover);
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"]:not([data-disabled]):not(:disabled) [data-ui-control-action]:focus-visible {
-    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"] :is(input, select, textarea, button):disabled {
-    color: inherit;
-    opacity: 1;
-    -webkit-text-fill-color: currentColor;
-  }
-
-  [data-ui-control][data-ui-control-recipe="field"][data-disabled] :is(input, textarea):disabled::placeholder {
-    color: var(--ui-surface-ink-muted);
-    opacity: 1;
-    -webkit-text-fill-color: currentColor;
-  }
-
-  [data-ui-select-native]:disabled + [data-ui-select-native-icon] {
-    opacity: var(--opacity-interaction-disabled);
-  }
-
-  [data-ui-control][data-ui-control-recipe="dropzone"] {
-    color: inherit;
-    background-color: transparent;
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
-  }
-
-  [data-ui-control][data-ui-control-recipe="dropzone"]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]):not([data-invalid]) {
-    background-color: var(--color-interaction-hover);
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-hover);
-  }
-
-  [data-ui-control][data-ui-control-recipe="dropzone"]:is(:focus-within, [data-dragging]):not([data-disabled]):not([data-invalid]) {
-    background-color: var(--color-intent-accent-soft);
-    box-shadow:
-      0 0 0 var(--border-width-edge-control) var(--color-intent-accent-edge-strong),
-      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
-  }
-
-  [data-ui-control][data-ui-control-recipe="dropzone"][data-invalid] {
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge);
-  }
-
-  [data-ui-control][data-ui-control-recipe="dropzone"][data-invalid]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]) {
-    background-color: var(--color-interaction-hover);
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-hover);
-  }
-
-  [data-ui-control][data-ui-control-recipe="dropzone"][data-invalid]:is(:focus-within, [data-dragging]):not([data-disabled]) {
-    background-color: var(--color-intent-accent-soft);
-    box-shadow:
-      0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-strong),
-      0 0 0 var(--color-intent-danger-focus-width) var(--color-intent-danger-focus);
-  }
-
-  [data-ui-control][data-ui-control-recipe="dropzone"] [data-ui-file-upload-browse] {
-    color: var(--color-intent-neutral-soft-ink);
-    background-color: var(--color-intent-neutral-soft);
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
-  }
-
-  [data-ui-file-upload-item] {
-    color: inherit;
-    background-color: transparent;
-    box-shadow: 0 0 0 var(--border-width-edge-perimeter) var(--ui-surface-edge);
-  }
-
-  [data-ui-file-upload-item]:hover {
-    box-shadow: 0 0 0 var(--border-width-edge-perimeter) var(--ui-surface-edge-hover);
-  }
-
-  [data-ui-file-upload-item][data-invalid] {
-    background-color: var(--color-intent-danger-soft);
-    box-shadow: 0 0 0 var(--border-width-edge-perimeter) var(--color-intent-danger-edge);
-  }
-
-  [data-ui-file-upload-remove]:hover {
-    color: inherit;
-    background-color: var(--color-interaction-hover);
-  }
-
-  [data-ui-file-upload-remove]:focus-visible {
-    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
-  }
-
-  /* Native selection treatment: Checkbox, Radio, Switch, and Slider. */
-  [data-ui-selection-root] {
-    color: inherit;
-  }
-
-  [data-ui-selection-recipe="indicator"],
-  [data-ui-selection-recipe="switch-track"],
-  [data-ui-selection-recipe="slider-track"] {
-    --ui-selection-edge: var(--ui-surface-edge);
-    color: var(--color-intent-accent-solid-ink);
-    background-color: var(--ui-surface-color);
-    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-selection-edge);
-  }
-
-  [data-ui-selection-recipe="indicator"]:is([data-checked], [data-indeterminate]),
-  [data-ui-selection-recipe="switch-track"][data-checked] {
-    --ui-selection-edge: var(--color-intent-accent-edge);
-    color: var(--color-intent-accent-solid-ink);
-    background-color: var(--color-intent-accent-solid);
-  }
-
-  [data-ui-selection-recipe="switch-thumb"],
-  [data-ui-selection-recipe="slider-thumb"] {
-    background-color: var(--ui-surface-color);
-  }
-
-  [data-ui-selection-recipe="switch-track"],
-  [data-ui-selection-recipe="slider-track"] {
-    background-color: var(--color-intent-neutral-soft);
-  }
-
-  [data-ui-selection-recipe="switch-thumb"][data-checked] {
-    &::after {
-      position: absolute;
-      inset: 0;
-      border-radius: inherit;
-      background-color: var(--color-intent-accent-solid-ink);
-      content: "";
-    }
-  }
-
-  [data-ui-selection-recipe="slider-range"] {
-    background-color: var(--color-intent-accent-solid);
-  }
-
-  [data-ui-selection-recipe][data-invalid] {
-    --ui-selection-edge: var(--color-intent-danger-edge-strong);
-  }
-
-  [data-ui-selection-root]:has(input:focus-visible) [data-ui-selection-recipe="indicator"],
-  [data-ui-selection-root]:has(input:focus-visible) [data-ui-selection-recipe="switch-track"],
-  [data-ui-selection-recipe="slider-thumb"][data-focus] {
-    box-shadow:
-      0 0 0 var(--border-width-edge-control) var(--ui-selection-edge, var(--ui-surface-edge)),
-      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
-  }
-
-  [data-ui-selection-recipe="slider-thumb"][data-focus] {
-    box-shadow:
-      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus),
-      var(--shadow-elevation-1);
-  }
-
-  [data-ui-selection-root][data-invalid]:has(input:focus-visible) [data-ui-selection-recipe="indicator"],
-  [data-ui-selection-root][data-invalid]:has(input:focus-visible) [data-ui-selection-recipe="switch-track"],
-  [data-ui-selection-recipe="slider-thumb"][data-invalid][data-focus] {
-    box-shadow:
-      0 0 0 var(--border-width-edge-control) var(--ui-selection-edge, var(--color-intent-danger-edge-strong)),
-      0 0 0 var(--color-intent-danger-focus-width) var(--color-intent-danger-focus);
-  }
-
-  [data-ui-selection-recipe="slider-thumb"][data-invalid][data-focus] {
-    box-shadow:
-      0 0 0 var(--color-intent-danger-focus-width) var(--color-intent-danger-focus),
-      var(--shadow-elevation-1);
-  }
-
-}
 
 .dark {
   color-scheme: dark;