@vireo-ai/trellis-ui 0.1.51 → 0.1.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.51",
+  "version": "0.1.52",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",
@@ -64,6 +64,9 @@
     "./cdn.js": "./packages/server/trellis_ui/static/trellis_ui/assets/js/trellis.js",
     "./cdn.min.js": "./packages/server/trellis_ui/static/trellis_ui/assets/js/trellis.min.js",
     "./theme.css": "./packages/client/src/styles/theme.css",
+    "./theme-support.css": "./packages/client/src/styles/theme-support.css",
+    "./components.css": "./packages/client/src/styles/components.css",
+    "./sources.css": "./packages/client/src/styles/generated-sources.css",
     "./styles.css": "./packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.css",
     "./styles.min.css": "./packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.min.css",
     "./cdn.css": "./packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.css",
@@ -109,9 +112,11 @@
     "test:browser": "playwright test",
     "test": "pnpm run test:unit && pnpm run test:python && pnpm run test:browser",
     "test:watch": "pnpm run generate:component-entries && vitest",
+    "trellis": "node packages/theme-engine/dist/cli.js",
     "prek": "uv run prek",
     "clean:types": "node -e \"require('node:fs').rmSync('packages/client/types', { recursive: true, force: true })\"",
     "build:theme": "pnpm --filter @vireo-ai/trellis-theme-engine run build && node packages/theme-engine/scripts/generate-default-css.mjs && node packages/theme-engine/scripts/generate-theme-knobs.mjs",
+    "build:docs-theme": "pnpm trellis theme build docs/trellis/themes/default/theme.json",
     "build:sources": "pnpm run build:theme && pnpm run build:manifests",
     "build:manifests": "vite build --config vite.manifests.config.ts && python3 scripts/generate_ui_events.py",
     "build:runtime-docs": "pnpm run build:manifests && pnpm run build:types && pnpm run generate:runtime-docs",

package/packages/client/src/components/select/styles.css

@@ -4,9 +4,28 @@
   }
 
   [data-ui-select-virtualizer] > [data-ui-scroll-area] {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
     max-height: var(--ui-select-listbox-max-height, var(--spacing-select-listbox));
   }
 
+  [data-ui-select-options],
+  [data-ui-select-virtualizer],
+  [data-ui-select-virtualizer] [data-ui-scroll-area-content],
+  [data-ui-select-virtualizer] [data-ui-virtualizer-spacer],
+  [data-ui-select-virtualizer] [data-ui-virtualizer-block] {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  [data-ui-select-virtualizer] [data-ui-virtualizer-block] {
+    padding-inline-end: calc(
+      var(--spacing-popover-padding) + var(--ui-scrollbar-size) + var(--ui-scrollbar-inset)
+    );
+  }
+
   [data-ui-select-virtualizer] > [data-ui-scroll-area] > [data-ui-scroll-area-viewport] > [data-ui-scroll-area-content] {
     padding-block: var(--spacing-popover-padding);
   }

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

@@ -0,0 +1,267 @@
+@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
+@custom-variant ui-interactive (&:is([data-ui-interactive]));
+@custom-variant ui-active (&:is(:active, :focus-visible, [data-active], [data-highlighted]));
+@custom-variant ui-selected (&: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"]));
+
+/* Keep the core authored palette available to custom components in the precompiled package. */
+@source inline("{bg,text,border,ring,fill,stroke}-{neutral,accent}-{1..12}");
+@source inline("{bg,text,border,ring,fill,stroke}-{neutral,accent}-a{1..12}");
+@source inline("bg-canvas {bg,border,ring,fill,stroke}-surface-{0..8}");
+@source inline("text-surface-{0..8}-{ink,ink-muted} shadow-elevation-{0..8}");
+@source inline("rounded-{1..6} rounded-{control,surface,overlay} rounded-{control,surface,overlay}-{xs,sm,md,lg}");
+@source inline("{rounded-t,rounded-r,rounded-b,rounded-l}-{control,surface,overlay}-{xs,sm,md,lg}");
+@source inline("rounded-{none,full,circle}");
+@source inline("gap-control-gap px-control-padding-{xs,sm,md,lg,xlg} px-badge-padding-{xs,sm,md,lg,xlg}");
+@source inline("p-popover-padding px-menu-item-padding-inline");
+@source inline("text-{1..13} text-{body,heading,code,label,description,metadata,menu-item}");
+@source inline("text-{control,badge}-{xs,sm,md,lg,xlg}");
+@source inline("font-{body,heading,code,control,badge,label,description,metadata,menu-item}");
+@source inline("min-h-control-multiline-{xs,sm,md,lg,xlg}");
+@source inline("size-{brand-logo,badge-close,checkbox-indicator,radio-indicator,radio-dot,slider-thumb}-{xs,sm,md,lg,xlg}");
+@source inline("h-switch-track-height-{xs,sm,md,lg,xlg} w-switch-track-width-{xs,sm,md,lg,xlg} size-switch-thumb-{xs,sm,md,lg,xlg}");
+@source inline("p-switch-inset data-checked:translate-x-switch-travel-{xs,sm,md,lg,xlg}");
+@source inline("{h,w}-slider-track-{xs,sm,md,lg,xlg} max-w-modal-{sm,md,lg,xl}");
+@source inline("border-{0..3} border-edge-{perimeter,control,separator,divider}");
+@source inline("{border-t,border-r,border-b,border-l}-edge-{perimeter,control,separator,divider}");
+
+@media (hover: hover) {
+  [data-ui-elevation][data-ui-interactive="surface"]:hover {
+    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-surface-edge-hover);
+  }
+}
+
+[data-ui-elevation][data-ui-interactive="surface"]: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"]
+) {
+  --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--color-intent-accent-edge);
+}
+
+[data-ui-elevation][data-ui-interactive="surface"]:is(:focus-visible, :has(:focus-visible)) {
+  --ui-state-shadow-layers: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+}
+
+/*
+  Shared interaction treatments keep state independent from its visual channels.
+  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: var(--ui-interaction-rest-edge, transparent);
+}
+
+:is([data-ui-interaction="tonal"], [data-ui-interaction="combined"]) {
+  background-image: linear-gradient(var(--ui-interaction-fill), var(--ui-interaction-fill));
+}
+
+:is([data-ui-interaction="edge"], [data-ui-interaction="combined"]) {
+  --ui-state-shadow-layers:
+    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);
+    --ui-interaction-edge: var(--ui-surface-edge-hover);
+  }
+}
+
+[data-ui-interaction]:active {
+  --ui-interaction-fill: var(--color-interaction-pressed);
+  --ui-interaction-edge: var(--ui-surface-edge-strong);
+}
+
+[data-ui-interaction]: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"]
+) {
+  --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) {
+  [data-ui-interaction]: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"]
+  ):hover {
+    --ui-interaction-fill: var(--ui-interaction-selected-fill-hover);
+    --ui-interaction-edge: var(--ui-interaction-selected-edge-hover);
+  }
+}
+
+[data-ui-interaction]:is(:focus-visible, :has(:focus-visible)) {
+  --ui-state-shadow-layers:
+    0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+}
+
+/*
+  Root theme for the Trellis UI component system.
+
+  Token layers:
+  1. Generated primitives: 1–12 color families, alpha families, surfaces, and elevation.
+  2. Generated relationships: intent roles, interaction states, paired inks, and scrim.
+  3. Authored recipes: local component variables and state composition.
+
+  Theme config regenerates the first two layers. Component recipes consume their
+  relationships; custom UI may use the registered Tailwind palette directly.
+
+  CSS ownership:
+  - TypeScript style recipes own class composition, variants, sizes, and parts.
+  - This file owns imports, Tailwind source hints and variants, tokens, utilities,
+    global theme rules, and generic reusable behavior.
+  - Colocated component CSS owns selector-only styling that recipes cannot
+    express cleanly, such as pseudo-elements, ::part(...), :has(...), native
+    quirks, and child-order selectors.
+*/
+
+@theme {
+  --radius-scrollbar-thumb: var(--ui-scrollbar-thumb-radius);
+  --container-reading: var(--container-prose);
+  --z-index-popover: 50;
+  --z-index-dialog: 60;
+  --z-index-toast: 70;
+}
+
+@theme inline {
+  --color-surface: var(--ui-surface-color);
+  --color-surface-ink: var(--ui-surface-ink);
+  --color-surface-ink-muted: var(--ui-surface-ink-muted);
+  --color-label-ink: var(--ui-label-ink);
+  --color-icon: var(--ui-surface-ink-muted);
+  --color-separator: var(--ui-surface-separator);
+  --color-separator-muted: var(--ui-surface-separator-muted);
+  --color-scrollbar-thumb: var(--ui-surface-edge);
+  --color-scrollbar-thumb-hover: var(--ui-surface-edge-hover);
+}
+
+:root,
+.light,
+.dark {
+  color-scheme: light;
+
+  --ui-label-ink: color-mix(
+    in oklab,
+    var(--ui-surface-ink-muted),
+    var(--ui-surface-ink) var(--label-ink-emphasis)
+  );
+
+  --ui-control-height-xs: var(--spacing-control-xs);
+  --ui-control-height-sm: var(--spacing-control-sm);
+  --ui-control-height-md: var(--spacing-control-md);
+  --ui-control-height-lg: var(--spacing-control-lg);
+  --ui-control-height-xlg: var(--spacing-control-xlg);
+  --ui-popover-radius: var(--radius-overlay-sm);
+  --ui-popover-padding: var(--spacing-popover-padding);
+
+  --ui-icon-size-xs: var(--spacing-icon-xs);
+  --ui-icon-size-sm: var(--spacing-icon-sm);
+  --ui-icon-size: var(--spacing-icon);
+  --ui-icon-size-lg: var(--spacing-icon-lg);
+  --ui-scrollbar-size: var(--spacing-scrollbar);
+  --ui-scrollbar-inset: var(--spacing-scrollbar-inset);
+  --ui-scrollbar-thumb-radius: var(--radius-full);
+}
+
+.light {
+  color-scheme: light;
+}
+
+@utility max-h-xs {
+  max-height: var(--container-xs);
+}
+
+@utility max-h-sm {
+  max-height: var(--container-sm);
+}
+
+@utility max-h-md {
+  max-height: var(--container-md);
+}
+
+@utility max-h-lg {
+  max-height: var(--container-lg);
+}
+
+@utility max-h-xl {
+  max-height: var(--container-xl);
+}
+
+@utility max-h-prose {
+  max-height: 65ch;
+}
+
+@utility ui-edge {
+  box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
+}
+
+@utility ui-focus-ring {
+  box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+}
+
+@utility ui-focus-ring-inset {
+  box-shadow: inset 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+}
+
+
+.dark {
+  color-scheme: dark;
+}

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

@@ -2,271 +2,4 @@
 @import "./generated/theme-runtime.css";
 @import "./components.css";
 @import "./generated-sources.css";
-
-@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
-@custom-variant ui-interactive (&:is([data-ui-interactive]));
-@custom-variant ui-active (&:is(:active, :focus-visible, [data-active], [data-highlighted]));
-@custom-variant ui-selected (&: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"]));
-
-/* Keep the core authored palette available to custom components in the precompiled package. */
-@source inline("{bg,text,border,ring,fill,stroke}-{neutral,accent}-{1..12}");
-@source inline("{bg,text,border,ring,fill,stroke}-{neutral,accent}-a{1..12}");
-@source inline("bg-canvas {bg,border,ring,fill,stroke}-surface-{0..8}");
-@source inline("text-surface-{0..8}-{ink,ink-muted} shadow-elevation-{0..8}");
-@source inline("rounded-{1..6} rounded-{control,surface,overlay} rounded-{control,surface,overlay}-{xs,sm,md,lg}");
-@source inline("{rounded-t,rounded-r,rounded-b,rounded-l}-{control,surface,overlay}-{xs,sm,md,lg}");
-@source inline("rounded-{none,full,circle}");
-@source inline("gap-control-gap px-control-padding-{xs,sm,md,lg,xlg} px-badge-padding-{xs,sm,md,lg,xlg}");
-@source inline("p-popover-padding px-menu-item-padding-inline");
-@source inline("text-{1..13} text-{body,heading,code,label,description,metadata,menu-item}");
-@source inline("text-{control,badge}-{xs,sm,md,lg,xlg}");
-@source inline("font-{body,heading,code,control,badge,label,description,metadata,menu-item}");
-@source inline("min-h-control-multiline-{xs,sm,md,lg,xlg}");
-@source inline("size-{brand-logo,badge-close,checkbox-indicator,radio-indicator,radio-dot,slider-thumb}-{xs,sm,md,lg,xlg}");
-@source inline("h-switch-track-height-{xs,sm,md,lg,xlg} w-switch-track-width-{xs,sm,md,lg,xlg} size-switch-thumb-{xs,sm,md,lg,xlg}");
-@source inline("p-switch-inset data-checked:translate-x-switch-travel-{xs,sm,md,lg,xlg}");
-@source inline("{h,w}-slider-track-{xs,sm,md,lg,xlg} max-w-modal-{sm,md,lg,xl}");
-@source inline("border-{0..3} border-edge-{perimeter,control,separator,divider}");
-@source inline("{border-t,border-r,border-b,border-l}-edge-{perimeter,control,separator,divider}");
-
-@media (hover: hover) {
-  [data-ui-elevation][data-ui-interactive="surface"]:hover {
-    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-surface-edge-hover);
-  }
-}
-
-[data-ui-elevation][data-ui-interactive="surface"]: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"]
-) {
-  --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--color-intent-accent-edge);
-}
-
-[data-ui-elevation][data-ui-interactive="surface"]:is(:focus-visible, :has(:focus-visible)) {
-  --ui-state-shadow-layers: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
-}
-
-/*
-  Shared interaction treatments keep state independent from its visual channels.
-  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: var(--ui-interaction-rest-edge, transparent);
-}
-
-:is([data-ui-interaction="tonal"], [data-ui-interaction="combined"]) {
-  background-image: linear-gradient(var(--ui-interaction-fill), var(--ui-interaction-fill));
-}
-
-:is([data-ui-interaction="edge"], [data-ui-interaction="combined"]) {
-  --ui-state-shadow-layers:
-    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);
-    --ui-interaction-edge: var(--ui-surface-edge-hover);
-  }
-}
-
-[data-ui-interaction]:active {
-  --ui-interaction-fill: var(--color-interaction-pressed);
-  --ui-interaction-edge: var(--ui-surface-edge-strong);
-}
-
-[data-ui-interaction]: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"]
-) {
-  --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) {
-  [data-ui-interaction]: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"]
-  ):hover {
-    --ui-interaction-fill: var(--ui-interaction-selected-fill-hover);
-    --ui-interaction-edge: var(--ui-interaction-selected-edge-hover);
-  }
-}
-
-[data-ui-interaction]:is(:focus-visible, :has(:focus-visible)) {
-  --ui-state-shadow-layers:
-    0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
-}
-
-/*
-  Root theme for the Trellis UI component system.
-
-  Token layers:
-  1. Generated primitives: 1–12 color families, alpha families, surfaces, and elevation.
-  2. Generated relationships: intent roles, interaction states, paired inks, and scrim.
-  3. Authored recipes: local component variables and state composition.
-
-  Theme config regenerates the first two layers. Component recipes consume their
-  relationships; custom UI may use the registered Tailwind palette directly.
-
-  CSS ownership:
-  - TypeScript style recipes own class composition, variants, sizes, and parts.
-  - This file owns imports, Tailwind source hints and variants, tokens, utilities,
-    global theme rules, and generic reusable behavior.
-  - Colocated component CSS owns selector-only styling that recipes cannot
-    express cleanly, such as pseudo-elements, ::part(...), :has(...), native
-    quirks, and child-order selectors.
-*/
-
-@theme {
-  --radius-scrollbar-thumb: var(--ui-scrollbar-thumb-radius);
-  --container-reading: var(--container-prose);
-  --z-index-popover: 50;
-  --z-index-dialog: 60;
-  --z-index-toast: 70;
-}
-
-@theme inline {
-  --color-surface: var(--ui-surface-color);
-  --color-surface-ink: var(--ui-surface-ink);
-  --color-surface-ink-muted: var(--ui-surface-ink-muted);
-  --color-label-ink: var(--ui-label-ink);
-  --color-icon: var(--ui-surface-ink-muted);
-  --color-separator: var(--ui-surface-separator);
-  --color-separator-muted: var(--ui-surface-separator-muted);
-  --color-scrollbar-thumb: var(--ui-surface-edge);
-  --color-scrollbar-thumb-hover: var(--ui-surface-edge-hover);
-}
-
-:root,
-.light,
-.dark {
-  color-scheme: light;
-
-  --ui-label-ink: color-mix(
-    in oklab,
-    var(--ui-surface-ink-muted),
-    var(--ui-surface-ink) var(--label-ink-emphasis)
-  );
-
-  --ui-control-height-xs: var(--spacing-control-xs);
-  --ui-control-height-sm: var(--spacing-control-sm);
-  --ui-control-height-md: var(--spacing-control-md);
-  --ui-control-height-lg: var(--spacing-control-lg);
-  --ui-control-height-xlg: var(--spacing-control-xlg);
-  --ui-popover-radius: var(--radius-overlay-sm);
-  --ui-popover-padding: var(--spacing-popover-padding);
-
-  --ui-icon-size-xs: var(--spacing-icon-xs);
-  --ui-icon-size-sm: var(--spacing-icon-sm);
-  --ui-icon-size: var(--spacing-icon);
-  --ui-icon-size-lg: var(--spacing-icon-lg);
-  --ui-scrollbar-size: var(--spacing-scrollbar);
-  --ui-scrollbar-inset: var(--spacing-scrollbar-inset);
-  --ui-scrollbar-thumb-radius: var(--radius-full);
-}
-
-.light {
-  color-scheme: light;
-}
-
-@utility max-h-xs {
-  max-height: var(--container-xs);
-}
-
-@utility max-h-sm {
-  max-height: var(--container-sm);
-}
-
-@utility max-h-md {
-  max-height: var(--container-md);
-}
-
-@utility max-h-lg {
-  max-height: var(--container-lg);
-}
-
-@utility max-h-xl {
-  max-height: var(--container-xl);
-}
-
-@utility max-h-prose {
-  max-height: 65ch;
-}
-
-@utility ui-edge {
-  box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
-}
-
-@utility ui-focus-ring {
-  box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
-}
-
-@utility ui-focus-ring-inset {
-  box-shadow: inset 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
-}
-
-
-.dark {
-  color-scheme: dark;
-}
+@import "./theme-support.css";

package/packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.css

@@ -9334,8 +9334,19 @@
     max-height: var(--ui-select-listbox-max-height, var(--spacing-select-listbox));
   }
   [data-ui-select-virtualizer] > [data-ui-scroll-area] {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
     max-height: var(--ui-select-listbox-max-height, var(--spacing-select-listbox));
   }
+  [data-ui-select-options], [data-ui-select-virtualizer], [data-ui-select-virtualizer] [data-ui-scroll-area-content], [data-ui-select-virtualizer] [data-ui-virtualizer-spacer], [data-ui-select-virtualizer] [data-ui-virtualizer-block] {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
+  [data-ui-select-virtualizer] [data-ui-virtualizer-block] {
+    padding-inline-end: calc( var(--spacing-popover-padding) + var(--ui-scrollbar-size) + var(--ui-scrollbar-inset) );
+  }
   [data-ui-select-virtualizer] > [data-ui-scroll-area] > [data-ui-scroll-area-viewport] > [data-ui-scroll-area-content] {
     padding-block: var(--spacing-popover-padding);
   }