@vireo-ai/trellis-ui 0.1.60 → 0.1.62

package/README.md

@@ -1 +0,0 @@
-# Trellis UI

package/THIRD_PARTY_NOTICES.md

@@ -7,6 +7,8 @@ Trellis UI's morph engine adapts behavior and matching ideas from Alpine.js Morp
 - Alpine.js Morph — Copyright © 2019-2025 Caleb Porzio and contributors
 - Morphlex — Copyright © 2024 Joel Drapper
 - Datastar — Copyright © Star Federation
+- TypeBox (bundled in the Node theme CLI) — Copyright © 2017-2026 Haydn Paterson
+- Color.js (bundled in the Node theme CLI) — Copyright © 2021 Lea Verou, Chris Lilley
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -38,3 +40,12 @@ FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY
 DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN
 AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT
 OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+## Bundled fonts (SIL Open Font License 1.1)
+
+- Inter — Fontsource variable package 5.3.0; the combined `opsz` and `wght` font files.
+- Fira Code — Fontsource variable package 5.3.0.
+
+Font binaries, full copyright and license notices, and download provenance are checked in under
+`packages/theme-engine/fonts/` and included with the distributed font assets. These fonts are licensed
+separately from Trellis UI under the SIL Open Font License 1.1; see each font's `LICENSE` file.

package/package.json

@@ -1,53 +1,48 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.60",
+  "version": "0.1.62",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",
-  "main": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/index.js",
-  "module": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/index.js",
-  "style": "./packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.min.css",
-  "types": "./packages/client/types/index.d.ts",
+  "main": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/core.js",
+  "module": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/core.js",
+  "types": "./packages/client/types/core.d.ts",
   "sideEffects": [
-    "./packages/client/src/**/*.css",
-    "./packages/server/trellis_ui/static/trellis_ui/assets/css/*.css",
-    "./packages/server/trellis_ui/static/trellis_ui/assets/js/trellis*.js"
+    "./packages/client/src/**/*.css"
   ],
   "files": [
     "LICENSE",
     "THIRD_PARTY_NOTICES.md",
     "README.md",
     "packages/client/types/**/*.d.ts",
-    "packages/client/src/styles/**/*.css",
-    "packages/client/src/components/**/*.css",
-    "packages/client/src/directives/**/*.css",
-    "packages/client/src/runtime/**/*.css",
-    "packages/server/trellis_ui/static/trellis_ui/assets/css/*.css",
-    "packages/server/trellis_ui/static/trellis_ui/assets/js/*.js",
+    "packages/client/src/**/*.css",
     "packages/server/trellis_ui/static/trellis_ui/assets/js/esm/**/*.js",
     "packages/server/trellis_ui/static/trellis_ui/assets/js/esm/**/*.js.map",
     "packages/server/trellis_ui/static/trellis_ui/assets/js/esm/**/*.json",
-    "!packages/client/types/components/manifests.d.ts",
-    "!packages/client/types/components/styles.d.ts",
+    "!packages/client/types/components/manifests.generated.d.ts",
+    "!packages/client/types/components/styles.generated.d.ts",
     "!packages/client/types/components/**/manifest.d.ts",
-    "!packages/client/types/components/**/styles.d.ts"
+    "!packages/client/types/components/**/styles.d.ts",
+    "!packages/client/types/components/runtime-docs.generated.d.ts",
+    "packages/theme-engine/dist/trellis.js",
+    "packages/theme-engine/generated/schemas/*.json",
+    "packages/theme-engine/generated/knobs/v1/**/*.json",
+    "packages/theme-engine/skills/create-trellis-theme/**",
+    "packages/theme-engine/THEME_AUTHORING.md",
+    "packages/client/src/styles/fonts/**/*",
+    "packages/theme-engine/fonts/**/*"
   ],
   "exports": {
     ".": {
-      "types": "./packages/client/types/index.d.ts",
-      "import": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/index.js",
-      "default": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/index.js"
+      "types": "./packages/client/types/core.d.ts",
+      "import": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/core.js",
+      "default": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/core.js"
     },
     "./core": {
       "types": "./packages/client/types/core.d.ts",
       "import": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/core.js",
       "default": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/core.js"
     },
-    "./components": {
-      "types": "./packages/client/types/components/entry.generated.d.ts",
-      "import": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/index.js",
-      "default": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/index.js"
-    },
     "./components/*": {
       "types": "./packages/client/types/components/*/entry.generated.d.ts",
       "import": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/*.js",
@@ -58,19 +53,12 @@
       "import": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/capabilities/*.js",
       "default": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/capabilities/*.js"
     },
-    "./cdn": "./packages/server/trellis_ui/static/trellis_ui/assets/js/trellis.js",
-    "./cdn.min": "./packages/server/trellis_ui/static/trellis_ui/assets/js/trellis.min.js",
-    "./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",
-    "./cdn.min.css": "./packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.min.css",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./fonts.css": "./packages/client/src/styles/generated/theme-fonts.css"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^2.0.2",
@@ -80,7 +68,7 @@
     "@types/alpinejs": "^3.13.11",
     "cally": "^0.9.2",
     "clsx": "^2.1.1",
-    "motion": "^12.43.0",
+    "motion": "^14.3.0",
     "tabbable": "^6.5.0"
   },
   "peerDependencies": {
@@ -91,51 +79,51 @@
     "@microsoft/api-extractor": "^7.59.1",
     "@microsoft/api-extractor-model": "^7.33.12",
     "@playwright/test": "^1.63.0",
-    "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^25.9.8",
     "alpinejs": "^3.17.4",
     "jsdom": "^29.1.1",
+    "postcss": "8.5.28",
+    "postcss-value-parser": "4.2.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.3",
     "vite": "^8.3.0",
     "vitest": "^4.1.11"
   },
+  "bin": {
+    "trellis": "./packages/theme-engine/dist/trellis.js"
+  },
   "scripts": {
-    "generate:component-entries": "node scripts/generate_component_entries.mjs",
-    "analyze:runtime": "node scripts/analyze_runtime_build.mjs",
-    "check:runtime-boundary": "node scripts/generate_asset_registry.mjs --check && node scripts/check_runtime_boundary.mjs",
-    "verify:packed-consumer": "node scripts/verify_packed_consumer.mjs",
-    "typecheck": "pnpm run generate:component-entries && tsc --noEmit",
-    "test:unit": "pnpm run generate:component-entries && vitest run --configLoader runner --no-file-parallelism",
-    "test:python": "uv run pytest tests/server",
-    "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 --configLoader runner",
+    "generate:component-entries": "node scripts/build.mjs generate:component-entries",
+    "analyze:runtime": "node scripts/build.mjs analyze:runtime",
+    "check:runtime-boundary": "node scripts/build.mjs check:runtime-boundary",
+    "verify:packed-consumer": "node scripts/build.mjs verify:packed-consumer",
+    "typecheck": "node scripts/build.mjs typecheck",
+    "test:unit": "node scripts/build.mjs test:unit",
+    "test:python": "node scripts/build.mjs test:python",
+    "test:browser": "node scripts/build.mjs test:browser",
+    "test": "node scripts/build.mjs test",
+    "test:watch": "node scripts/build.mjs test:watch",
     "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 --configLoader runner && 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 --configLoader runner && api-extractor run --local && node scripts/generate_component_runtime_docs.mjs",
-    "build:types": "pnpm run generate:component-entries && pnpm run clean:types && tsc -p tsconfig.build.json && node scripts/rewrite_declaration_aliases.mjs",
-    "build:js": "pnpm run generate:component-entries && vite build --configLoader runner && node scripts/copy_minified_js_alias.mjs && node scripts/generate_static_asset_registry.mjs && vite build --config vite.esm.config.ts --configLoader runner && node scripts/generate_asset_registry.mjs && pnpm run analyze:runtime && 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 && node scripts/generate_static_asset_registry.mjs",
-    "build:package": "pnpm run build:css && pnpm run build:js",
-    "build:docs": "pnpm --dir docs run build",
-    "build": "pnpm run build:package && pnpm run build:docs",
-    "check": "pnpm run build:package && pnpm run generate:runtime-docs && pnpm run typecheck && pnpm test",
-    "check:packages": "pnpm --filter @vireo-ai/trellis-theme-engine run verify:package && pnpm run check:runtime-boundary && pnpm run verify:packed-consumer && uv build --sdist --wheel",
-    "check:release": "pnpm run check && pnpm run check:packages",
+    "clean:types": "node scripts/build.mjs clean:types",
+    "build:theme": "node scripts/build.mjs build:theme",
+    "build:sources": "node scripts/build.mjs build:sources",
+    "build:manifests": "node scripts/build.mjs build:manifests",
+    "build:runtime-docs": "node scripts/build.mjs build:runtime-docs",
+    "generate:runtime-docs": "node scripts/build.mjs generate:runtime-docs",
+    "build:types": "node scripts/build.mjs build:types",
+    "build:js": "node scripts/build.mjs build:js",
+    "build:package": "node scripts/build.mjs build:package",
+    "build:docs": "node scripts/build.mjs build:docs",
+    "build": "node scripts/build.mjs build",
+    "check": "node scripts/build.mjs check",
+    "check:packages": "node scripts/build.mjs check:packages",
+    "check:release": "node scripts/build.mjs check:release",
     "release": "node scripts/release.mjs",
     "publish:npm": "pnpm run check:release && pnpm publish dist/trellis-ui.tgz --access public --ignore-scripts",
-    "publish:pypi": "pnpm run build:package && uv build --sdist --wheel && uv publish dist/django_trellis-${npm_package_version}.tar.gz dist/django_trellis-${npm_package_version}-py3-none-any.whl",
+    "publish:pypi": "node scripts/build.mjs python:pack && uv publish dist/django_trellis-${npm_package_version}.tar.gz dist/django_trellis-${npm_package_version}-py3-none-any.whl",
     "publish:all": "pnpm run check:release && pnpm publish dist/trellis-ui.tgz --access public --ignore-scripts && uv publish dist/django_trellis-${npm_package_version}.tar.gz dist/django_trellis-${npm_package_version}-py3-none-any.whl",
-    "dev:css": "pnpm run build:sources && pnpm run \"/^dev:css:(compile|assets)$/\"",
-    "dev:css:compile": "tailwindcss -i ./packages/client/src/styles/static.css -o ./packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.min.css --minify --watch",
-    "dev:css:assets": "node scripts/generate_static_asset_registry.mjs --watch"
+    "build:cli": "node scripts/build.mjs build:cli"
   }
 }

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

@@ -1,16 +1,28 @@
 @layer components {
-  [data-ui-accordion-trigger][data-state="open"] [data-ui-accordion-icon] {
-    transform: rotate(180deg);
+  [data-ui-accordion],
+  [data-ui-accordion-trigger][data-icon-position="trailing"] {
+    --ui-accordion-icon-closed: 0deg;
+    --ui-accordion-icon-open: 180deg;
+    --ui-accordion-icon-order: 0;
   }
 
-  [data-ui-accordion-trigger][data-icon-position="leading"] [data-ui-accordion-icon],
-  [data-ui-accordion][data-icon-position="leading"] [data-ui-accordion-trigger][data-icon-position="inherit"] [data-ui-accordion-icon] {
-    order: -1;
-    transform: rotate(-90deg);
+  [data-ui-accordion][data-icon-position="leading"],
+  [data-ui-accordion-trigger][data-icon-position="leading"] {
+    --ui-accordion-icon-closed: -90deg;
+    --ui-accordion-icon-open: 0deg;
+    --ui-accordion-icon-order: -1;
   }
 
-  [data-ui-accordion-trigger][data-icon-position="leading"][data-state="open"] [data-ui-accordion-icon],
-  [data-ui-accordion][data-icon-position="leading"] [data-ui-accordion-trigger][data-icon-position="inherit"][data-state="open"] [data-ui-accordion-icon] {
-    transform: rotate(0deg);
+  [data-ui-accordion-trigger] {
+    --ui-accordion-icon-angle: var(--ui-accordion-icon-closed);
+  }
+
+  [data-ui-accordion-trigger][data-state="open"] {
+    --ui-accordion-icon-angle: var(--ui-accordion-icon-open);
+  }
+
+  [data-ui-accordion-icon] {
+    order: var(--ui-accordion-icon-order);
+    transform: rotate(var(--ui-accordion-icon-angle));
   }
 }

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

@@ -0,0 +1,12 @@
+@layer components {
+  [data-ui-badge-close]:hover,
+  [data-ui-badge-close]:focus-visible:not([data-ui-focus-indicator="suppressed"]) {
+    background-color: color-mix(in srgb, currentColor 12%, transparent);
+  }
+
+  [data-ui-badge-close] {
+    @variant focus-visible {
+      box-shadow: 0 0 0 1px currentColor;
+    }
+  }
+}

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

@@ -1,9 +1,4 @@
 @layer components {
-  [data-ui-button] {
-    isolation: isolate;
-    overflow: hidden;
-  }
-
   [data-ui-button][data-ui-loading] {
     cursor: wait;
   }
@@ -55,3 +50,34 @@
     border-bottom-left-radius: 0 !important;
   }
 }
+
+/* Match accessory edge space to the control's vertical breathing room. */
+@utility ui-button-padded {
+  --ui-button-padding-start: var(--ui-button-padding);
+  --ui-button-padding-end: var(--ui-button-padding);
+  --ui-button-padding-left: var(--ui-button-padding-start);
+  --ui-button-padding-right: var(--ui-button-padding-end);
+  padding-inline-start: var(--ui-button-padding-start);
+  padding-inline-end: var(--ui-button-padding-end);
+
+  &[data-variant="link"] {
+    padding-inline: 0;
+  }
+
+  &:dir(rtl) {
+    --ui-button-padding-left: var(--ui-button-padding-end);
+    --ui-button-padding-right: var(--ui-button-padding-start);
+  }
+
+  &:has(> [data-ui-button-content] > [data-ui-button-icon]:first-child) {
+    --ui-button-padding-start: calc((var(--ui-button-height) - var(--spacing-icon)) / 2);
+  }
+
+  &:has(> [data-ui-button-content] > [data-ui-button-icon="trailing"]) {
+    --ui-button-padding-end: calc((var(--ui-button-height) - var(--spacing-icon)) / 2);
+  }
+
+  &:has(> [data-ui-button-content] > [data-ui-button-trailing] > [data-ui-keybinding]:not([data-variant="plain"]):last-child) {
+    --ui-button-padding-end: calc((var(--ui-button-height) - var(--spacing-keybinding-key)) / 2);
+  }
+}

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

@@ -0,0 +1,16 @@
+@layer components {
+  @media (hover: hover) and (not (any-pointer: coarse)) {
+    [data-ui-card]:not(:hover):not(:focus-within) [data-ui-card-dismiss] {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  [data-ui-card][data-disabled] {
+    opacity: var(--opacity-interaction-disabled);
+  }
+
+  [data-ui-card-link][aria-disabled="true"] {
+    pointer-events: none;
+  }
+}

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

@@ -1,8 +1,3 @@
-[data-ui-checkbox-indicator][data-ui-selection-recipe="indicator"]:not([data-checked]):not([data-indeterminate]) {
-  --ui-selection-edge: var(--ui-surface-edge-strong);
-  background-color: transparent;
-}
-
 [data-ui-checkbox][data-variant="pills"]:is(
   [data-ui-interaction="tonal"],
   [data-ui-interaction="combined"]
@@ -10,3 +5,32 @@
   background-color: var(--ui-interaction-fill);
   background-image: none;
 }
+
+[data-ui-checkbox-group][data-variant="menu"] {
+  [data-ui-checkbox][data-selected]:not([data-disabled]) {
+    background: var(--ui-option-selected-background);
+  }
+
+  [data-ui-checkbox][data-selected]:not([data-disabled]):is(:hover, :active, :focus-visible, [data-active], [data-highlighted]) {
+    background: var(--ui-option-selected-background-hover);
+  }
+
+  > :is([data-ui-checkbox], [data-ui-field]):not([hidden], [data-disabled], [data-ui-menu-filtered]):not(:has([data-ui-checkbox]:is([hidden], [data-disabled], [data-ui-menu-filtered]))):has([data-ui-checkbox-input]:is([data-checked], [data-indeterminate])) {
+    &:has(
+      + [data-ui-checkbox][data-selected]:not([hidden], [data-disabled], [data-ui-menu-filtered]),
+      + [data-ui-field]:not([hidden]) > [data-ui-field-control] > [data-ui-checkbox][data-selected]:not([hidden], [data-disabled], [data-ui-menu-filtered])
+    ) {
+      &:is([data-ui-checkbox]), > [data-ui-field-control] > [data-ui-checkbox] {
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
+      }
+    }
+
+    & + :is([data-ui-checkbox], [data-ui-field]):not([hidden], [data-disabled], [data-ui-menu-filtered]):not(:has([data-ui-checkbox]:is([hidden], [data-disabled], [data-ui-menu-filtered]))):has([data-ui-checkbox-input]:is([data-checked], [data-indeterminate])) {
+      &:is([data-ui-checkbox]), > [data-ui-field-control] > [data-ui-checkbox] {
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+      }
+    }
+  }
+}

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

@@ -33,32 +33,15 @@
   }
 
   [data-ui-date-picker-panel]:not(:has([data-ui-date-picker-presets])) {
-    inline-size: max-content;
     grid-template-columns: auto !important;
   }
 
-  [data-ui-date-picker-panel]:not(:has([data-ui-date-picker-presets])):has([data-ui-date-picker-calendar][months="2"]) {
-    inline-size: max-content;
-  }
-
-  [data-ui-date-picker-panel]:not(:has([data-ui-date-picker-presets])):has([data-ui-date-picker-calendar][months="3"]) {
-    inline-size: max-content;
-  }
-
-  [data-ui-date-picker-panel]:has([data-ui-date-picker-presets]) {
-    inline-size: max-content;
-  }
-
   [data-ui-date-picker-calendar-wrap] {
     block-size: 100%;
     inline-size: 100%;
     max-inline-size: calc(100vw - 2rem);
   }
 
-  [data-ui-date-picker-calendar-wrap]:not(:has([data-ui-date-picker-presets])) {
-    inline-size: 100%;
-  }
-
   [data-ui-date-picker-calendar-today] {
     align-items: center;
     background-color: transparent;
@@ -402,4 +385,26 @@
       grid-template-columns: minmax(var(--ui-date-picker-month-min), 1fr);
     }
   }
+
+  [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);
+  }
 }

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

@@ -9,14 +9,14 @@
     color: var(--color-intent-danger-text, var(--color-intent-neutral-text));
   }
 
-  [data-ui-field][data-layout="grid"] > [data-ui-field-label] {
+  [data-ui-field][data-ui-layout-mode="grid"] > [data-ui-field-label] {
     grid-column: 1;
     grid-row: 1;
   }
 
-  [data-ui-field][data-layout="grid"] > [data-ui-field-description],
-  [data-ui-field][data-layout="grid"] > [data-ui-field-error],
-  [data-ui-field][data-layout="grid"] > [data-ui-field-control] {
+  [data-ui-field][data-ui-layout-mode="grid"] > [data-ui-field-description],
+  [data-ui-field][data-ui-layout-mode="grid"] > [data-ui-field-error],
+  [data-ui-field][data-ui-layout-mode="grid"] > [data-ui-field-control] {
     grid-column: 2;
   }
 }
@@ -36,12 +36,12 @@
     box-shadow: none;
   }
 
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active, :focus-within):not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]),
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"][data-ui-control-interaction="disclosure"]:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active, :focus-within):not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled):not(:is([data-invalid], [aria-invalid="true"], :has([aria-invalid="true"]))),
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"][data-ui-control-interaction="disclosure"]:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):not([data-disabled]):not(:disabled):not(:is([data-invalid], [aria-invalid="true"], :has([aria-invalid="true"]))) {
     background-color: var(--color-interaction-pressed);
   }
 
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"][data-ui-control-interaction="disclosure"][data-state="open"]:not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"][data-ui-control-interaction="disclosure"][data-state="open"]:not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled):not(:is([data-invalid], [aria-invalid="true"], :has([aria-invalid="true"]))) {
     background-color: color-mix(
       in oklch,
       var(--color-interaction-hover),
@@ -49,18 +49,18 @@
     );
   }
 
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not(:is([data-invalid], [aria-invalid="true"], :has([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"][data-variant="outline"]:focus-within:not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]),
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"][data-ui-control-interaction="disclosure"]:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:focus-within:not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled):not(:is([data-invalid], [aria-invalid="true"], :has([aria-invalid="true"]))),
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"][data-ui-control-interaction="disclosure"]:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):not([data-disabled]):not(:disabled):not(:is([data-invalid], [aria-invalid="true"], :has([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"][data-variant="outline"][data-ui-control-interaction="disclosure"][data-state="open"]:not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"][data-ui-control-interaction="disclosure"][data-state="open"]:not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled):not(:is([data-invalid], [aria-invalid="true"], :has([aria-invalid="true"]))) {
     box-shadow:
       0 0 0 var(--interaction-disclosure-expanded-focus-edge-width) var(--color-intent-accent-edge-strong),
       0 0 0 var(--interaction-disclosure-expanded-emphasis-edge-width) var(--ui-surface-edge-strong),
@@ -68,22 +68,22 @@
       0 0 0 var(--interaction-disclosure-expanded-accent-focus-width) var(--color-intent-accent-focus);
   }
 
-  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"], :has([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) {
+  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"], :has([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"]):focus-within:not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled),
-  [data-ui-control][data-ui-control-recipe="field"][data-ui-control-interaction="disclosure"]:is([data-invalid], [aria-invalid="true"]):is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):not([data-disabled]):not(:disabled) {
+  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"], :has([aria-invalid="true"])):focus-within:not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled),
+  [data-ui-control][data-ui-control-recipe="field"][data-ui-control-interaction="disclosure"]:is([data-invalid], [aria-invalid="true"], :has([aria-invalid="true"])):is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):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"][data-ui-control-interaction="disclosure"][data-state="open"]:is([data-invalid], [aria-invalid="true"]):not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled) {
+  [data-ui-control][data-ui-control-recipe="field"][data-ui-control-interaction="disclosure"][data-state="open"]:is([data-invalid], [aria-invalid="true"], :has([aria-invalid="true"])):not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled) {
     box-shadow:
       0 0 0 var(--interaction-disclosure-expanded-emphasis-edge-width) var(--color-intent-danger-edge-strong, var(--ui-surface-edge-strong)),
       0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge, var(--ui-surface-edge-strong)),
@@ -104,7 +104,8 @@
     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 {
+  /* Nested actions own their paired ink and disabled attenuation. */
+  [data-ui-control][data-ui-control-recipe="field"] :is(input, select, textarea, button):disabled:not([data-ui-action-recipe]) {
     color: inherit;
     opacity: 1;
     -webkit-text-fill-color: currentColor;

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

@@ -2,6 +2,7 @@
   [data-ui-input-group] > [data-ui-input-root],
   [data-ui-input-group] [data-ui-input-control] {
     display: contents !important;
+    font: inherit !important;
   }
 
   [data-ui-input-group] > :not([data-ui-input-root]):not([data-ui-input-control]) {

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

@@ -15,6 +15,9 @@
     padding-inline: var(--spacing-1);
     border-radius: var(--radius-control-md);
     line-height: 1;
+  }
+
+  [data-ui-keybinding][data-variant="outline"] > [data-ui-keybinding-key] {
     box-shadow:
       inset 0 0 0 var(--border-width-edge-control)
       var(--ui-keybinding-edge, var(--ui-keybinding-inherited-edge));
@@ -25,14 +28,18 @@
   }
 
   [data-ui-keybinding][data-variant="surface"] > [data-ui-keybinding-key] {
-    background-color: var(--color-interaction-hover);
+    background-color: var(--color-neutral-a3);
   }
 
   [data-ui-keybinding] > [data-ui-keybinding-key][data-pressed] {
     background-color: var(--color-interaction-pressed);
   }
 
-  [data-ui-keybinding]:not([data-variant="plain"]) > [data-ui-keybinding-key][data-pressed] {
+  [data-ui-keybinding][data-variant="surface"] > [data-ui-keybinding-key][data-pressed] {
+    background-color: var(--color-neutral-a4);
+  }
+
+  [data-ui-keybinding][data-variant="outline"] > [data-ui-keybinding-key][data-pressed] {
     box-shadow:
       inset 0 0 0 var(--border-width-edge-control)
       var(--ui-keybinding-edge-pressed, currentColor);

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

@@ -0,0 +1,13 @@
+@layer components {
+  [data-ui-menu-search-header] {
+    border-bottom: var(--border-width-edge-separator) solid var(--ui-surface-edge);
+  }
+
+  [data-ui-menu-filtered] {
+    display: none !important;
+  }
+
+  [data-ui-sortable][data-ui-menu] [data-ui-menu-item]:not([data-active="true"]):not([data-disabled]) {
+    background-color: transparent;
+  }
+}

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

@@ -1,3 +1,9 @@
+/* Local layout controls must not invalidate arbitrary component contents. */
+@property --ui-panel-preferred-size {
+  syntax: "*";
+  inherits: false;
+}
+
 @layer components {
   [data-ui-panels] {
     overflow: hidden;
@@ -55,7 +61,7 @@
   }
 
   [data-ui-panels]:is([data-orientation="horizontal"]:not([data-layout-orientation]), [data-layout-orientation="horizontal"]) > [data-ui-panel]:not([data-size="fill"]) {
-    flex: 0 1 var(--ui-panel-authored-size);
+    flex: 0 1 clamp(var(--ui-panel-authored-min), var(--ui-panel-preferred-size, var(--ui-panel-authored-size)), var(--ui-panel-authored-max));
     min-width: var(--ui-panel-authored-min);
     max-width: var(--ui-panel-authored-max);
   }
@@ -67,11 +73,15 @@
   }
 
   [data-ui-panels]:is([data-orientation="vertical"]:not([data-layout-orientation]), [data-layout-orientation="vertical"]) > [data-ui-panel]:not([data-size="fill"]) {
-    flex: 0 1 var(--ui-panel-authored-size);
+    flex: 0 1 clamp(var(--ui-panel-authored-min), var(--ui-panel-preferred-size, var(--ui-panel-authored-size)), var(--ui-panel-authored-max));
     min-height: var(--ui-panel-authored-min);
     max-height: var(--ui-panel-authored-max);
   }
 
+  [data-ui-panels][data-responsive-mode="stacked"] > [data-ui-panel]:not([data-size="fill"]):not([data-state="collapsed"]) {
+    flex-basis: var(--ui-panel-authored-size);
+  }
+
   [data-ui-panels][data-responsive-mode="stacked"] > [data-ui-panel][data-size="fill"]:not([data-state="collapsed"]) {
     min-height: 100%;
   }