@vireo-ai/trellis-ui 0.1.61 → 0.1.63

package/THIRD_PARTY_NOTICES.md

@@ -40,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,17 +1,14 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "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",
@@ -19,8 +16,6 @@
     "README.md",
     "packages/client/types/**/*.d.ts",
     "packages/client/src/**/*.css",
-    "packages/server/trellis_ui/static/trellis_ui/assets/css/*.css",
-    "packages/server/trellis_ui/static/trellis_ui/assets/js/*.js",
     "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",
@@ -33,24 +28,22 @@
     "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/skills/compose-trellis-ui/**",
+    "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",
@@ -61,19 +54,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",
@@ -83,7 +69,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": {
@@ -94,7 +80,6 @@
     "@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",
@@ -124,14 +109,12 @@
     "prek": "uv run prek",
     "clean:types": "node scripts/build.mjs clean:types",
     "build:theme": "node scripts/build.mjs build:theme",
-    "build:docs-theme": "node scripts/build.mjs build:docs-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:css": "node scripts/build.mjs build:css",
     "build:package": "node scripts/build.mjs build:package",
     "build:docs": "node scripts/build.mjs build:docs",
     "build": "node scripts/build.mjs build",
@@ -142,9 +125,6 @@
     "publish:npm": "pnpm run check:release && pnpm publish dist/trellis-ui.tgz --access public --ignore-scripts",
     "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/skills/compose-trellis-ui/SKILL.md

@@ -0,0 +1,84 @@
+---
+name: compose-trellis-ui
+description: Create, revise, or audit Django screens and reusable Cotton compositions in applications using Trellis.
+---
+
+# Compose Trellis UI
+
+Focus on composition, spacing, content, and UI flow. Component documentation defines the APIs; `UI.md` records project composition conventions and direction; theme configuration owns parametric visual choices. Trust Trellis styling defaults, light/dark treatments, and built-in accessible interactions. Supply the labels, relationships, and reading order needed by the composition, preserving those component behaviors.
+
+## Read the project direction
+
+Read the application's `UI.md` before composing or auditing. If it is missing, bootstrap it from the codebase and running application using [Project UI guidance](references/project-ui.md). Read that reference also when recording a new convention or reconciling a changed preference with existing usage. Explicit user direction takes precedence over inferred conventions.
+
+## Design around the user's task
+
+- Establish what the person needs to understand or accomplish. Let that determine the content, actions, and hierarchy.
+- Every added element should help someone act, make a decision, understand content, or understand the current state. Omit elements without a clear purpose.
+- Do not invent dashboard metrics, summary cards, explanatory panels, badges, or secondary actions merely to fill out a screen. Add them when the brief or workflow establishes their value.
+- Present information where it becomes useful. Keep frequent actions accessible; disclose secondary details when needed without hiding essential context.
+- Use familiar patterns and consistent terminology. Reuse established application compositions before introducing another pattern.
+- Write labels and supporting text concisely. Avoid repeating information already clear from the page title, surrounding content, or control.
+- Use visual emphasis to communicate importance. Whitespace is acceptable; it does not need another component.
+- Preserve information and feedback people need to complete the task, including accessible labels, errors, and recovery actions.
+- Restraint must preserve substance. Remove unnecessary presentation without omitting information or actions needed for the task.
+
+These principles draw on [Apple's design principles](https://developer.apple.com/design/human-interface-guidelines/design-principles), applied here to Trellis application composition.
+
+## Component and styling rules
+
+- Preserve component styling defaults unless a visual change serves a clear purpose. Deliberately use padding, margin, gap, and other public spacing props or theme-backed layout utilities to establish consistent alignment, grouping, and room to breathe.
+- Verify props and slots in available documentation, contracts, and templates. Do not invent APIs or recreate component behavior.
+- Omit `as` unless behavior, accessibility, or document structure needs another element.
+- Components own internal typography, padding, states, and interactions. Give each label, action, gap, and surface boundary one owner; avoid duplicate content and stacked gap/margin rules.
+- Trust the Trellis styling system. Default to the public styling API through components and follow theme principles, including in new Cotton components.
+- If a new Cotton component needs styling beyond that API, theme-backed Tailwind utilities are an option for keeping styling co-located with markup.
+- Adding Tailwind overrides to existing components requires user approval. Custom CSS is a last resort and requires user approval, including for new Cotton components. Show the proposed styling change and explain why the existing API cannot express it before requesting approval. Existing explicit authorization covers the agreed change.
+
+## Create or revise
+
+1. Establish the task, reading order, relevant content states, and project direction. Read the relevant documentation guides, component examples, and public API. For an existing screen, inspect its current rendered behavior first; preserve routes, form behavior, data, and actions unless the requested change includes them.
+2. Build the structure through public props with deliberate spacing, representative content, and domain terminology. Check realistic content lengths, collection volumes, and relevant empty, loading, and error states. Preserve substantive content when simplifying.
+3. Render and inspect the affected composition, using screenshots to assess alignment, spacing, hierarchy, and wrapping. Refine through component choice, grouping, and justified props.
+4. Review by subtraction: remove or consolidate redundant content, competing actions, unnecessary containers, and decoration without purpose. Verify that the task remains understandable and usable.
+5. Apply the verification criteria below. Recheck after correcting observed defects.
+
+## Audit
+
+Read the relevant documentation and inspect the existing composition in source and rendered output. Use the same task, styling, and verification criteria as creation. An audit request produces findings; implement corrections when the user requests fixes.
+
+Report concrete problems with their location, evidence, effect on the task, and proposed correction. Distinguish observed defects from optional preferences or suggestions. Prioritize blocked tasks and unclear hierarchy before minor visual details. Avoid speculative findings when the relevant rendered state cannot be inspected; state the limitation. Report when there are no actionable findings.
+
+## Verification
+
+Verify that the task and primary action, where applicable, are clear; related content shares consistent alignment and spacing; text is readable; and content does not unexpectedly clip or overflow. Check that controls and relevant feedback remain usable.
+
+When working from a visual reference, compare the rendered composition against its alignment anchors, spacing relationships, and proportions; matching the same elements is insufficient. Reproduce those relationships through deliberate layout and spacing choices while retaining Trellis theme treatments.
+
+Judge the rendered result rather than assuming the source expresses the intended hierarchy. Name visible problems precisely, such as a detached action or inconsistent content edge, and re-inspect the affected state after correcting them. Automated checks supplement this review.
+
+Exercise viewport sizes, content lengths, and interaction states relevant to the change. Tokens handle light/dark; separate mode reviews are not required by this skill.
+
+Correct observed defects and verify again. Report anything that could not be checked; writing markup or taking a screenshot alone does not establish that these criteria are met.
+
+## Documentation
+
+The docs teach Trellis APIs and usage for humans and agents. Read only the topics needed for the task; use component examples and blocks as starting points, not required page recipes. Verify props, slots, transitions, and browser methods in the component reference rather than copying an explanation into this skill.
+
+Resolve these paths against the actual Trellis documentation origin supplied by the project, its tooling, or the running docs site. They are documentation paths, not routes to add to the consuming application. Do not invent a deployed hostname. If docs are unavailable, inspect the installed public contracts and templates and report the limitation.
+
+Start with `/llms.txt` to discover the current documentation, then fetch only the Markdown pages relevant to the task. Prefer these text endpoints for API and usage research; avoid loading rendered documentation into context by default.
+
+| Need | Markdown documentation path |
+| --- | --- |
+| Discover guides, blocks, components, and their Markdown URLs | [`/llms.txt`](/llms.txt) |
+| Understand Trellis and its application model | [`/pages/how-trellis-works.md`](/pages/how-trellis-works.md) |
+| Send hypermedia requests and return HTML updates or Python effects | [`/pages/requests.md`](/pages/requests.md) |
+| Render Django forms with Trellis controls | [`/pages/forms-bridge.md`](/pages/forms-bridge.md) |
+| Use local state, component methods, events, and transition hooks | [`/pages/working-with-alpine.md`](/pages/working-with-alpine.md) |
+| Understand theme configuration and visual relationships | [`/pages/theme-foundations.md`](/pages/theme-foundations.md) |
+| Configure a theme | [`/pages/theme.md`](/pages/theme.md) |
+
+Follow the component and block Markdown URLs listed in `/llms.txt`; component references use `/components/<slug>.md`, and blocks use `/pages/<slug>.md`. When visual understanding or interaction review is needed, open the corresponding rendered documentation page or linked demo in a browser; Markdown does not replace visual verification of the application being composed.
+
+Project conventions and `UI.md` bootstrap/migration guidance remain in [Project UI guidance](references/project-ui.md). Component facts and composition teaching belong in the docs.

package/packages/client/skills/compose-trellis-ui/references/project-ui.md

@@ -0,0 +1,40 @@
+# Project UI guidance
+
+`UI.md` is the application's persistent memory for composition choices and user direction. Read it at the application root or the user's chosen location. Keep its format free; follow the user's way of recording ideas.
+
+## What belongs here
+
+Record reusable decisions that spare the user from repeating instructions, with their scope and useful examples. These could include:
+
+- Use icon-only, full-radius button toolbars on application pages.
+- Use pill tabs with keyboard shortcuts and tooltips.
+- Use flush tables when they share a content edge with the surrounding section.
+- For marketing pages, prefer a narrow content window with substantial isometric animation, drawing on supplied Heroku or Linear references.
+
+These are examples of project preferences, not defaults for every Trellis application. Verify the actual component API before translating a preference into props or markup. Keep rough ideas and references without treating them as settled requirements.
+
+Keep accent colors, palettes, font settings, radius scales, light/dark values, and other parametric visual configuration in the theme. Do not duplicate them in `UI.md` or prescribe CSS to reproduce them. Component APIs and reusable Trellis usage guidance belong in the docs; this skill owns the agent workflow. Link to existing reusable compositions instead of copying their implementation.
+
+## Bootstrap a missing file
+
+Inspect before writing. A missing `UI.md` is a reason to gather project evidence, not to invent a design direction or block the requested task on a lengthy interview.
+
+1. Read application instructions, existing design notes, reusable Cotton components, representative templates, and relevant theme configuration. Use the theme to understand what it already controls; do not transcribe its values.
+2. Use focused subagents for independent investigations: recurring component usage and layout patterns; reusable compositions and their callers; representative application flows and states. Scale the split to the codebase, avoiding duplicate work. Ask for source locations, recurrence, exceptions, and uncertainty. If delegation is unavailable, perform those investigations directly.
+3. Use the running application to inspect representative screens and complete relevant flows. Capture screenshots that support the observed compositions, including narrow layouts or alternate content states where they affect the convention. Coordinate browser work so investigators do not operate the same session concurrently.
+4. Reconcile source findings with the rendered evidence. Repeated, consistent usage can establish an inferred convention without requiring separate approval for each finding. Note its scope and exceptions; an isolated occurrence or visible defect is not an application-wide rule.
+5. Write a concise initial `UI.md` in the application. Include useful inferred conventions, explicit user preferences already supplied, and unresolved questions where they matter. Identify which conclusions are inferred and retain source locations and screenshot references sufficient to review them. Summarize the starting point for the user and invite corrections while continuing the authorized task.
+
+If the application cannot be run, record source-backed observations as provisional and state that rendered verification is missing. Do not invent screenshots or visual conclusions. For a new application without existing compositions, record available user direction and let conventions emerge from actual work.
+
+Read an existing `UI.md` before changing it. Preserve unrelated content; if its purpose conflicts, propose another name or location. Do not create an application `UI.md` in the toolkit repository during skill maintenance. When deliberately testing this workflow against the docs site, treat that site as the application and scope findings to it.
+
+## Maintain conventions and migration scope
+
+- Explicit user instructions supersede inferred usage. Update the affected decision rather than accumulating contradictory rules, and keep named exceptions intact unless the user changes them.
+- Distinguish a local change from a convention change. A request to change one screen applies there; language such as “always,” “every page,” or “replace throughout” establishes broader scope.
+- When a new instruction changes a recorded convention, audit comparable instances and shared compositions to identify the affected scope. Prefer changing the shared composition when it owns the behavior.
+- If the user authorizes an application-wide migration, make the matching changes and verify representative callers. Do not ask for the same authorization again.
+- If migration scope is unclear, show the affected usages and a concrete migration proposal, then confirm before changing other screens. Complete the clearly authorized local work while that question is pending. Audit discovery alone does not authorize a wider migration.
+- Keep the record accurate during partial migrations: distinguish the desired convention from remaining older usage. Preserve the reason and scope when the user deliberately keeps an exception.
+- Record useful new composition decisions as they emerge. Keep unresolved ideas visibly tentative and remove superseded guidance. Do not turn every implementation detail into a rule.

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)),

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);