@vireo-ai/trellis-ui 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",
@@ -50,11 +50,12 @@
     "alpinejs": "^3.14.8",
     "cally": "^0.9.2",
     "clsx": "^2.1.1",
-    "event-source-plus": "^0.1.15",
     "motion": "^12.42.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.3",
+    "@microsoft/api-extractor": "^7.58.9",
+    "@microsoft/api-extractor-model": "^7.33.8",
     "@playwright/test": "^1.61.0",
     "@tailwindcss/cli": "^4.0.0",
     "@tailwindcss/vite": "^4.3.2",
@@ -76,14 +77,17 @@
     "test:watch": "vitest",
     "prek": "uv run prek",
     "clean:types": "node -e \"require('node:fs').rmSync('packages/client/types', { recursive: true, force: true })\"",
-    "build:sources": "pnpm run build:manifests",
+    "build:theme": "pnpm --filter @vireo-ai/trellis-theme-engine run build && node packages/theme-engine/scripts/generate-default-css.mjs",
+    "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",
+    "generate:runtime-docs": "vite build --config vite.runtime-docs.config.ts && api-extractor run --local && node scripts/generate_component_runtime_docs.mjs",
     "build:types": "pnpm run clean:types && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:js": "vite build && node scripts/copy_minified_js_alias.mjs && vite build --config vite.esm.config.ts && pnpm run build:types",
     "build:css": "pnpm run build:sources && tailwindcss -i ./packages/client/src/styles/static.css -o ./packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.css && tailwindcss -i ./packages/client/src/styles/static.css -o ./packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.min.css --minify",
     "build:package": "pnpm run build:css && pnpm run build:js",
     "build": "pnpm run build:package",
-    "check": "pnpm run build:package && pnpm run typecheck && pnpm test",
+    "check": "pnpm run build:package && pnpm run generate:runtime-docs && pnpm run typecheck && pnpm test",
     "check:packages": "pnpm pack --dry-run && uv build --sdist --wheel",
     "check:release": "pnpm run check && pnpm run check:packages",
     "release": "node scripts/release.mjs",

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

@@ -1,30 +1 @@
-[data-ui-app] {
-  grid-template-areas:
-    "header"
-    "main"
-    "footer";
-}
-
-@media (min-width: 1024px) {
-  [data-ui-app][data-sidebar="left"],
-  [data-ui-app][data-sidebar="both"] {
-    grid-template-areas:
-      "sidebar header aside"
-      "sidebar main aside"
-      "sidebar footer aside";
-  }
-
-  [data-ui-app][data-sidebar="right"] {
-    grid-template-areas:
-      "header sidebar aside"
-      "main sidebar aside"
-      "footer sidebar aside";
-  }
-
-  [data-ui-app][data-sidebar="none"] {
-    grid-template-areas:
-      "header"
-      "main"
-      "footer";
-  }
-}
+/* App shell structure is generated from the theme composition axis. */

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

@@ -4,123 +4,6 @@
     overflow: hidden;
   }
 
-  [data-ui-button]::before {
-    background: var(--_ui-button-overlay, transparent);
-    border-radius: inherit;
-    content: "";
-    inset: 0;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    z-index: 0;
-  }
-
-  [data-ui-button]:hover:not(:disabled, [aria-disabled="true"], [data-ui-loading])::before {
-    opacity: 1;
-  }
-
-  [data-ui-button]:active:not(:disabled, [aria-disabled="true"], [data-ui-loading])::before {
-    background: var(--_ui-button-overlay-active, var(--_ui-button-overlay, transparent));
-    opacity: 1;
-  }
-
-  [data-ui-button] > * {
-    position: relative;
-    z-index: 1;
-  }
-
-  [data-ui-button][data-variant="surface"],
-  [data-ui-button][data-variant="outline"] {
-    --_ui-button-overlay: var(--color-base-a2);
-    --_ui-button-overlay-active: var(--color-base-a3);
-  }
-
-  [data-ui-button][data-variant="surface"]:hover,
-  [data-ui-button][data-variant="surface"]:active {
-    background-color: var(--ui-control-bg) !important;
-  }
-
-  [data-ui-button][data-variant="outline"]:hover,
-  [data-ui-button][data-variant="outline"]:active {
-    background-color: transparent !important;
-  }
-
-  [data-ui-button][data-variant="solid"] {
-    --_ui-button-overlay: rgb(255 255 255 / 0.10);
-    --_ui-button-overlay-active: rgb(255 255 255 / 0.16);
-    --_ui-button-highlight: rgb(255 255 255 / 0.18);
-    box-shadow:
-      inset 0 1px var(--_ui-button-highlight),
-      var(--shadow-1) !important;
-  }
-
-  [data-ui-button][data-variant="solid"][data-color="neutral"]:hover,
-  [data-ui-button][data-variant="solid"][data-color="neutral"]:active {
-    background-color: var(--color-base-12) !important;
-  }
-
-  [data-ui-button][data-variant="solid"][data-color="accent"]:hover,
-  [data-ui-button][data-variant="solid"][data-color="accent"]:active {
-    background-color: var(--color-accent-solid) !important;
-  }
-
-  [data-ui-button][data-variant="soft"][data-color="neutral"] {
-    --_ui-button-overlay: var(--color-base-a3);
-    --_ui-button-overlay-active: var(--color-base-a4);
-  }
-
-  [data-ui-button][data-variant="soft"][data-color="neutral"]:hover,
-  [data-ui-button][data-variant="soft"][data-color="neutral"]:active {
-    background-color: var(--color-base-a2) !important;
-  }
-
-  [data-ui-button][data-variant="soft"][data-color="accent"] {
-    --_ui-button-overlay: var(--color-accent-a3);
-    --_ui-button-overlay-active: var(--color-accent-a4);
-  }
-
-  [data-ui-button][data-variant="soft"][data-color="accent"]:hover,
-  [data-ui-button][data-variant="soft"][data-color="accent"]:active {
-    background-color: var(--color-accent-surface) !important;
-  }
-
-  [data-ui-button][data-variant="soft"][data-color="danger"] {
-    --_ui-button-overlay: var(--color-danger-a3);
-    --_ui-button-overlay-active: var(--color-danger-a4);
-  }
-
-  [data-ui-button][data-variant="soft"][data-color="danger"]:hover,
-  [data-ui-button][data-variant="soft"][data-color="danger"]:active {
-    background-color: var(--color-danger-surface) !important;
-  }
-
-  [data-ui-button][data-variant="ghost"] {
-    --_ui-button-overlay: var(--color-base-a3);
-    --_ui-button-overlay-active: var(--color-base-a4);
-  }
-
-  [data-ui-button][data-variant="ghost"]:hover,
-  [data-ui-button][data-variant="ghost"]:active {
-    background-color: transparent !important;
-  }
-
-  [data-ui-button][data-variant="ghost"][data-color="accent"],
-  [data-ui-button][data-variant="outline"][data-color="accent"] {
-    --_ui-button-overlay: var(--color-accent-a3);
-    --_ui-button-overlay-active: var(--color-accent-a4);
-  }
-
-  [data-ui-button][data-variant="ghost"][data-color="danger"],
-  [data-ui-button][data-variant="outline"][data-color="danger"] {
-    --_ui-button-overlay: var(--color-danger-a3);
-    --_ui-button-overlay-active: var(--color-danger-a4);
-  }
-
-  [data-ui-button][data-variant="solid"][data-color="danger"]:hover,
-  [data-ui-button][data-variant="solid"][data-color="danger"]:active {
-    background-color: var(--color-danger-solid) !important;
-  }
-
   [data-ui-button][data-ui-loading] {
     cursor: wait;
   }
@@ -130,10 +13,6 @@
     pointer-events: none;
   }
 
-  [data-ui-button]:is(:disabled, [aria-disabled="true"]):not([data-ui-loading]) {
-    opacity: 0.5;
-  }
-
   [data-ui-button] [data-ui-button-loading-indicator] {
     opacity: 0;
   }
@@ -159,7 +38,7 @@
   }
 
   [data-ui-button-group] > [data-ui-button]:not(:first-child) {
-    margin-left: -1px;
+    margin-left: calc(var(--border-width-edge-control) * -1);
   }
 
   [data-ui-button-group] > [data-ui-button]:first-child:not(:last-child) {

package/packages/client/src/components/date-picker/styles.css

@@ -1,10 +1,10 @@
 @layer components {
   [data-ui-date-picker] {
-    --ui-date-picker-selected-bg: var(--color-base-12);
-    --ui-date-picker-selected-bg-hover: var(--color-base-12);
-    --ui-date-picker-selected-fg: var(--color-surface-inverse-fg);
-    --ui-date-picker-range-bg: var(--color-base-a3);
-    --ui-date-picker-range-bg-hover: var(--color-base-a4);
+    --ui-date-picker-selected-bg: var(--color-intent-neutral-solid);
+    --ui-date-picker-selected-bg-hover: var(--color-intent-neutral-solid-hover);
+    --ui-date-picker-selected-fg: var(--color-intent-neutral-solid-ink);
+    --ui-date-picker-range-bg: var(--color-intent-neutral-soft);
+    --ui-date-picker-range-bg-hover: var(--color-intent-neutral-soft-hover);
     --ui-date-picker-month-heading-size: 1.75rem;
     --ui-date-picker-month-min: 16.25rem;
     --ui-date-picker-week-gap: 0.125rem;
@@ -12,48 +12,17 @@
   }
 
   [data-ui-date-picker][data-color="accent"] {
-    --ui-date-picker-selected-bg: var(--color-accent-solid);
-    --ui-date-picker-selected-bg-hover: var(--color-accent-solid-hover);
-    --ui-date-picker-selected-fg: var(--color-accent-contrast);
-    --ui-date-picker-range-bg: var(--color-accent-surface);
-    --ui-date-picker-range-bg-hover: var(--color-accent-surface-hover);
-  }
-
-  [data-ui-date-picker-native]:disabled {
-    --ui-control-bg: var(--ui-control-bg-disabled);
-    --ui-control-bg-hover: var(--ui-control-bg-disabled);
-    --ui-control-bg-active: var(--ui-control-bg-disabled);
-    --ui-control-fg: var(--ui-control-fg-disabled);
-    --ui-control-placeholder: var(--ui-control-placeholder-disabled);
-    --ui-control-shadow: var(--ui-control-shadow-disabled);
-  }
-
-  [data-ui-date-picker-native]:is(:hover, :active):not(:focus):not(:disabled):not([aria-invalid="true"]) {
-    --ui-control-shadow: var(--ui-control-shadow-hover);
-  }
-
-  [data-ui-date-picker-native]:focus:not([aria-invalid="true"]) {
-    --ui-control-shadow: var(--ui-control-shadow-focus);
-    box-shadow: var(--shadow-control), var(--shadow-focus);
-  }
-
-  [data-ui-date-picker-native][aria-invalid="true"] {
-    --ui-control-shadow: var(--ui-control-shadow-invalid);
-  }
-
-  [data-ui-date-picker-native][aria-invalid="true"]:is(:hover, :active):not(:focus):not(:disabled) {
-    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
-  }
-
-  [data-ui-date-picker-native][aria-invalid="true"]:focus {
-    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
-    box-shadow: var(--shadow-danger-focus);
+    --ui-date-picker-selected-bg: var(--color-intent-accent-solid);
+    --ui-date-picker-selected-bg-hover: var(--color-intent-accent-solid-hover);
+    --ui-date-picker-selected-fg: var(--color-intent-accent-solid-ink);
+    --ui-date-picker-range-bg: var(--color-intent-accent-soft);
+    --ui-date-picker-range-bg-hover: var(--color-intent-accent-soft-hover);
   }
 
   [data-ui-date-picker-calendar] {
     --color-accent: var(--ui-date-picker-selected-bg);
     --color-text-on-accent: var(--ui-date-picker-selected-fg);
-    color: var(--color-foreground);
+    color: var(--ui-surface-ink);
     inline-size: max-content;
     max-inline-size: none;
   }
@@ -94,8 +63,8 @@
     align-items: center;
     background-color: transparent;
     border: 0;
-    border-radius: var(--radius-2);
-    color: var(--color-foreground-muted);
+    border-radius: var(--radius-control-sm);
+    color: var(--ui-surface-ink-muted);
     display: inline-flex;
     block-size: 1.75rem;
     inline-size: 1.75rem;
@@ -109,7 +78,7 @@
 
   [data-ui-date-picker-today-day] {
     align-items: center;
-    color: var(--color-foreground);
+    color: var(--ui-surface-ink);
     display: flex;
     font-size: 0.5625rem;
     font-weight: var(--font-weight-semibold);
@@ -124,7 +93,7 @@
   [data-ui-date-picker-today-icon] {
     block-size: 1.125rem;
     border: 1.5px solid currentColor;
-    border-radius: var(--radius-2);
+    border-radius: var(--radius-control-sm);
     display: block;
     inline-size: 1.125rem;
     overflow: hidden;
@@ -150,12 +119,12 @@
   }
 
   [data-ui-date-picker-calendar-today]:hover {
-    background-color: var(--color-base-a2);
-    color: var(--color-foreground);
+    background-color: var(--color-interaction-hover);
+    color: var(--ui-surface-ink);
   }
 
   [data-ui-date-picker-calendar-today]:focus-visible {
-    box-shadow: var(--shadow-focus);
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
     outline: none;
   }
 
@@ -175,7 +144,7 @@
 
   [data-ui-date-picker-calendar]::part(heading) {
     align-items: center;
-    color: var(--color-foreground);
+    color: var(--ui-surface-ink);
     display: flex;
     font-size: var(--text-sm);
     font-weight: var(--font-weight-semibold);
@@ -189,8 +158,8 @@
     align-items: center;
     background: transparent;
     border: 0;
-    border-radius: var(--radius-2);
-    color: var(--color-foreground-muted);
+    border-radius: var(--radius-control-sm);
+    color: var(--ui-surface-ink-muted);
     display: inline-flex;
     block-size: 1.75rem;
     inline-size: 1.75rem;
@@ -210,17 +179,17 @@
   }
 
   [data-ui-date-picker-calendar]::part(button):hover {
-    background-color: var(--color-base-a2);
-    color: var(--color-foreground);
+    background-color: var(--color-interaction-hover);
+    color: var(--ui-surface-ink);
   }
 
   [data-ui-date-picker-calendar]::part(button):focus-visible {
-    box-shadow: var(--shadow-focus);
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
   }
 
   [data-ui-date-picker-calendar]::part(disabled) {
     cursor: not-allowed;
-    opacity: 0.4;
+    color: var(--color-interaction-disabled-ink);
   }
 
   [data-ui-date-picker-calendar]::part(months) {
@@ -233,7 +202,7 @@
   }
 
   [data-ui-date-picker-calendar] [data-ui-date-picker-calendar-icon] {
-    color: var(--color-foreground-muted);
+    color: var(--ui-surface-ink-muted);
     display: block;
     pointer-events: none;
   }
@@ -271,7 +240,7 @@
   }
 
   [data-ui-date-picker-calendar] calendar-month::part(heading) {
-    color: var(--color-foreground);
+    color: var(--ui-surface-ink);
     font-size: var(--text-sm);
     font-weight: var(--font-weight-medium);
     line-height: var(--text-sm--line-height);
@@ -297,7 +266,7 @@
 
   [data-ui-date-picker-calendar] calendar-month::part(weekday) {
     align-items: center;
-    color: var(--color-foreground-subtle);
+    color: var(--ui-surface-ink-muted);
     display: inline-flex;
     font-size: var(--text-xs);
     font-weight: var(--font-weight-medium);
@@ -311,8 +280,8 @@
     align-items: center;
     background: transparent;
     border: 0;
-    border-radius: var(--radius-3);
-    color: var(--color-foreground);
+    border-radius: var(--radius-control-md);
+    color: var(--ui-surface-ink);
     display: inline-flex;
     block-size: 2rem;
     inline-size: 2rem;
@@ -325,20 +294,20 @@
   }
 
   [data-ui-date-picker-calendar] calendar-month::part(day) {
-    border-radius: var(--radius-3);
+    border-radius: var(--radius-control-md);
   }
 
   [data-ui-date-picker-calendar] calendar-month::part(button):hover {
-    background-color: var(--color-base-a2);
-    color: var(--color-foreground);
+    background-color: var(--color-interaction-hover);
+    color: var(--ui-surface-ink);
   }
 
   [data-ui-date-picker-calendar] calendar-month::part(button):focus-visible {
-    box-shadow: var(--shadow-focus);
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
   }
 
   [data-ui-date-picker-calendar] calendar-month::part(outside) {
-    color: var(--color-foreground-subtle);
+    color: var(--ui-surface-ink-muted);
   }
 
   [data-ui-date-picker-calendar] calendar-month::part(today) {
@@ -362,7 +331,7 @@
   [data-ui-date-picker-calendar] calendar-month::part(range-inner) {
     background-color: var(--ui-date-picker-range-bg);
     border-radius: 0;
-    color: var(--color-foreground);
+    color: var(--ui-surface-ink);
     inline-size: 100%;
     margin-inline: 0;
     width: 100%;
@@ -370,7 +339,7 @@
 
   [data-ui-date-picker-calendar] calendar-month::part(range-inner):hover {
     background-color: var(--ui-date-picker-range-bg-hover);
-    color: var(--color-foreground);
+    color: var(--ui-surface-ink);
   }
 
   [data-ui-date-picker-calendar] calendar-month::part(range-start) {
@@ -390,7 +359,7 @@
   }
 
   [data-ui-date-picker-calendar] calendar-month::part(range-start range-end) {
-    border-radius: var(--radius-3);
+    border-radius: var(--radius-control-md);
   }
 
   [data-ui-date-picker-calendar] calendar-select-month::part(label),
@@ -401,12 +370,12 @@
   [data-ui-date-picker-calendar] calendar-select-month::part(select),
   [data-ui-date-picker-calendar] calendar-select-year::part(select) {
     appearance: auto;
-    background-color: var(--color-base-a2);
-    border: 1px solid transparent;
-    border-radius: var(--radius-3);
-    box-shadow: none;
+    background-color: var(--color-interaction-hover);
+    border: 0;
+    border-radius: var(--radius-control-md);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge);
     block-size: var(--ui-control-height-md);
-    color: var(--color-foreground);
+    color: var(--ui-surface-ink);
     font-size: var(--text-sm);
     font-weight: var(--font-weight-medium);
     line-height: var(--text-sm--line-height);
@@ -418,13 +387,14 @@
 
   [data-ui-date-picker-calendar] calendar-select-month::part(select):hover,
   [data-ui-date-picker-calendar] calendar-select-year::part(select):hover {
-    background-color: var(--color-base-a3);
-    border-color: transparent;
+    background-color: var(--color-interaction-pressed);
   }
 
   [data-ui-date-picker-calendar] calendar-select-month::part(select):focus-visible,
   [data-ui-date-picker-calendar] calendar-select-year::part(select):focus-visible {
-    box-shadow: var(--shadow-focus);
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge-strong),
+      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
   }
 
   @media (max-width: 40rem) {

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

@@ -1,4 +1,14 @@
 @layer components {
+  [data-ui-field-label-badge] {
+    color: var(--ui-surface-ink-muted);
+    background-color: var(--color-interaction-hover);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge);
+  }
+
+  [data-ui-field-error] {
+    color: var(--color-intent-danger-text, var(--color-intent-neutral-text));
+  }
+
   [data-ui-field][data-layout="grid"] > [data-ui-field-label] {
     grid-column: 1;
     grid-row: 1;

package/packages/client/src/components/file-upload/styles.css

@@ -1,28 +0,0 @@
-@layer components {
-  [data-ui-file-upload-dropzone]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]):not([data-invalid]) {
-    --ui-control-shadow: var(--ui-control-shadow-hover);
-  }
-
-  [data-ui-file-upload-dropzone]:focus-within:not([data-invalid]) {
-    --ui-control-shadow: var(--ui-control-shadow-focus);
-    box-shadow: var(--shadow-control), var(--shadow-focus);
-  }
-
-  [data-ui-file-upload-dropzone][data-dragging]:not([data-invalid]) {
-    --ui-control-shadow: var(--ui-control-shadow-focus);
-  }
-
-  [data-ui-file-upload-dropzone][data-invalid] {
-    --ui-control-shadow: var(--ui-control-shadow-invalid);
-  }
-
-  [data-ui-file-upload-dropzone][data-invalid]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]) {
-    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
-  }
-
-  [data-ui-file-upload-dropzone][data-invalid]:focus-within:not([data-disabled]),
-  [data-ui-file-upload-dropzone][data-invalid][data-dragging]:not([data-disabled]) {
-    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
-    box-shadow: var(--shadow-danger-focus);
-  }
-}

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

@@ -0,0 +1,43 @@
+@layer components {
+  [data-ui-panels][data-orientation="horizontal"] > [data-ui-panel][data-divider]:not(:last-child) {
+    border-inline-end: var(--border-width-edge-divider) solid var(--color-separator);
+  }
+
+  [data-ui-panels][data-orientation="vertical"] > [data-ui-panel][data-divider]:not(:last-child) {
+    border-block-end: var(--border-width-edge-divider) solid var(--color-separator);
+  }
+
+  [data-ui-panel-resize-handle][data-orientation="horizontal"][data-resize-edge="start"] {
+    inset-inline-start: 0;
+    transform: translateX(-50%);
+    border-inline-start-width: var(--border-width-edge-divider);
+  }
+
+  [data-ui-panel-resize-handle][data-orientation="horizontal"][data-resize-edge="end"] {
+    inset-inline-end: 0;
+    transform: translateX(50%);
+    border-inline-end-width: var(--border-width-edge-divider);
+  }
+
+  [data-ui-panel-resize-handle][data-orientation="vertical"][data-resize-edge="start"] {
+    inset-block-start: 0;
+    transform: translateY(-50%);
+    border-block-start-width: var(--border-width-edge-divider);
+  }
+
+  [data-ui-panel-resize-handle][data-orientation="vertical"][data-resize-edge="end"] {
+    inset-block-end: 0;
+    transform: translateY(50%);
+    border-block-end-width: var(--border-width-edge-divider);
+  }
+
+  @media (pointer: coarse) {
+    [data-ui-panel-resize-handle][data-orientation="horizontal"] {
+      width: var(--spacing-panel-resize-handle-coarse);
+    }
+
+    [data-ui-panel-resize-handle][data-orientation="vertical"] {
+      height: var(--spacing-panel-resize-handle-coarse);
+    }
+  }
+}

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

@@ -1,14 +1,17 @@
 @layer components {
-  [data-ui-radio]:has([data-ui-radio-input]:focus-visible) {
-    box-shadow: var(--shadow-focus);
+  [data-ui-radio][data-variant="pills"]:has([data-ui-radio-input]:focus-visible),
+  [data-ui-radio][data-variant="cards"][data-indicator="false"]:has([data-ui-radio-input]:focus-visible) {
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+
+  [data-ui-radio][data-invalid][data-variant="pills"]:has([data-ui-radio-input]:focus-visible),
+  [data-ui-radio][data-invalid][data-variant="cards"][data-indicator="false"]:has([data-ui-radio-input]:focus-visible) {
+    box-shadow: 0 0 0 var(--color-intent-danger-focus-width) var(--color-intent-danger-focus);
   }
 
-  [data-ui-radio-group][data-variant="cards"] > [data-ui-radio],
   [data-ui-radio][data-variant="cards"] {
     align-items: flex-start !important;
-    background-color: var(--color-surface-panel);
-    border-radius: var(--radius-4) !important;
-    box-shadow: var(--shadow-border);
+    border-radius: var(--radius-surface-md) !important;
     display: flex !important;
     flex: 1 1 0;
     gap: var(--spacing-3);
@@ -16,13 +19,12 @@
     width: auto !important;
   }
 
-  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio],
   [data-ui-radio][data-variant="pills"] {
     align-items: center !important;
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    background-color: var(--color-intent-neutral-soft);
     border-radius: var(--radius-full) !important;
     box-shadow: none;
-    color: var(--color-foreground-muted);
+    color: var(--ui-surface-ink-muted);
     display: inline-flex !important;
     flex: 0 0 auto;
     min-height: var(--ui-control-height-md);
@@ -30,28 +32,31 @@
     width: auto !important;
   }
 
-  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio][data-checked],
   [data-ui-radio][data-variant="pills"][data-checked] {
-    background-color: var(--color-base-12);
-    color: var(--color-base-1) !important;
-    box-shadow: var(--shadow-1);
+    background-color: var(--color-intent-accent-solid);
+    color: var(--color-intent-accent-solid-ink) !important;
+    box-shadow: var(--shadow-elevation-1);
   }
 
-  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio][data-checked]:hover:not([data-disabled]),
   [data-ui-radio][data-variant="pills"][data-checked]:hover:not([data-disabled]) {
-    background-color: var(--color-base-12);
-    box-shadow: var(--shadow-1);
+    background-color: var(--color-intent-accent-solid-hover);
+    box-shadow: var(--shadow-elevation-1);
   }
 
-  [data-ui-radio-group][data-variant="pills"] [data-ui-radio-indicator],
   [data-ui-radio][data-variant="pills"] [data-ui-radio-indicator] {
     display: none !important;
   }
 
-  [data-ui-radio-group][data-variant="cards"] > [data-ui-radio][data-invalid],
-  [data-ui-radio][data-variant="cards"][data-invalid] {
-    background-color: var(--color-danger-surface);
-    box-shadow: 0 0 0 1px var(--color-danger-border);
+  [data-ui-radio][data-variant="cards"][data-invalid],
+  [data-ui-radio][data-variant="pills"][data-invalid] {
+    background-color: var(--color-intent-danger-soft);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge);
+  }
+
+  [data-ui-radio]:where([data-variant="cards"], [data-variant="pills"])[data-disabled] {
+    background-color: var(--color-interaction-disabled);
+    color: var(--color-interaction-disabled-ink) !important;
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-interaction-disabled-edge);
   }
 
   [data-ui-radio-group][data-indicator="false"] [data-ui-radio-indicator],

package/packages/client/src/components/scroll-area/styles.css

@@ -1,8 +1,4 @@
 @layer components {
-  [data-ui-scroll-area][data-size="md"] {
-    --ui-scrollbar-size: 0.5rem;
-  }
-
   [data-ui-scroll-area-viewport] {
     max-height: inherit;
     max-width: inherit;