@vireo-ai/trellis-ui 0.1.27 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.27",
+  "version": "0.1.30",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",
@@ -54,6 +54,11 @@
       "import": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/*.js",
       "default": "./packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/*.js"
     },
+    "./capabilities/*": {
+      "types": "./packages/client/types/capabilities/*.entry.generated.d.ts",
+      "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",
@@ -118,7 +123,7 @@
     "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 run check:runtime-boundary && pnpm run verify:packed-consumer && pnpm pack --dry-run && uv build --sdist --wheel && python3 scripts/check_python_package_artifacts.py",
+    "check:packages": "pnpm run check:runtime-boundary && pnpm run verify:packed-consumer && uv build --sdist --wheel",
     "check:release": "pnpm run check && pnpm run check:packages",
     "release": "node scripts/release.mjs",
     "publish:npm": "pnpm run check:release && pnpm publish --access public",

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

@@ -0,0 +1,7 @@
+[data-ui-checkbox][data-variant="pills"]:is(
+  [data-ui-interaction="tonal"],
+  [data-ui-interaction="combined"]
+) {
+  background-color: var(--ui-interaction-fill);
+  background-image: none;
+}

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

@@ -20,3 +20,74 @@
     grid-column: 2;
   }
 }
+@layer components {
+  /* Field control treatment. */
+[data-ui-control][data-ui-control-recipe="field"] {
+    color: inherit;
+    background-color: transparent;
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"] {
+    background-color: var(--color-interaction-hover);
+    box-shadow: none;
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+    background-color: var(--color-interaction-pressed);
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-hover);
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"]:is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--color-intent-accent-edge-strong),
+      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]) {
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge, var(--ui-surface-edge-strong));
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled) {
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-hover, var(--ui-surface-edge-strong));
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled) {
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-strong, var(--ui-surface-edge-strong)),
+      0 0 0 var(--color-intent-danger-focus-width, var(--color-intent-accent-focus-width)) var(--color-intent-danger-focus, var(--color-intent-accent-focus));
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"] :is(input, textarea)::placeholder {
+    color: var(--ui-surface-ink-muted);
+    opacity: 1;
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"]:not([data-disabled]):not(:disabled) [data-ui-control-action]:hover {
+    color: inherit;
+    background-color: var(--color-interaction-hover);
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"]:not([data-disabled]):not(:disabled) [data-ui-control-action]:focus-visible {
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"] :is(input, select, textarea, button):disabled {
+    color: inherit;
+    opacity: 1;
+    -webkit-text-fill-color: currentColor;
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"][data-disabled] :is(input, textarea):disabled::placeholder {
+    color: var(--ui-surface-ink-muted);
+    opacity: 1;
+    -webkit-text-fill-color: currentColor;
+  }
+
+  [data-ui-select-native]:disabled + [data-ui-select-native-icon] {
+    opacity: var(--opacity-interaction-disabled);
+  }
+}

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

@@ -0,0 +1,68 @@
+
+
+@layer components {
+  /* Dropzone and file-item treatment. */
+[data-ui-control][data-ui-control-recipe="dropzone"] {
+    color: inherit;
+    background-color: transparent;
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]):not([data-invalid]) {
+    background-color: var(--color-interaction-hover);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-hover);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"]:is(:focus-within, [data-dragging]):not([data-disabled]):not([data-invalid]) {
+    background-color: var(--color-intent-accent-soft);
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--color-intent-accent-edge-strong),
+      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"][data-invalid] {
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"][data-invalid]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]) {
+    background-color: var(--color-interaction-hover);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-hover);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"][data-invalid]:is(:focus-within, [data-dragging]):not([data-disabled]) {
+    background-color: var(--color-intent-accent-soft);
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-strong),
+      0 0 0 var(--color-intent-danger-focus-width) var(--color-intent-danger-focus);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"] [data-ui-file-upload-browse] {
+    color: var(--color-intent-neutral-soft-ink);
+    background-color: var(--color-intent-neutral-soft);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
+  }
+
+  [data-ui-file-upload-item] {
+    color: inherit;
+    background-color: transparent;
+    box-shadow: 0 0 0 var(--border-width-edge-perimeter) var(--ui-surface-edge);
+  }
+
+  [data-ui-file-upload-item]:hover {
+    box-shadow: 0 0 0 var(--border-width-edge-perimeter) var(--ui-surface-edge-hover);
+  }
+
+  [data-ui-file-upload-item][data-invalid] {
+    background-color: var(--color-intent-danger-soft);
+    box-shadow: 0 0 0 var(--border-width-edge-perimeter) var(--color-intent-danger-edge);
+  }
+
+  [data-ui-file-upload-remove]:hover {
+    color: inherit;
+    background-color: var(--color-interaction-hover);
+  }
+
+  [data-ui-file-upload-remove]:focus-visible {
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+}

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

@@ -33,14 +33,8 @@
   }
 
   [data-ui-radio][data-variant="pills"][data-checked] {
-    background-color: var(--color-intent-accent-solid);
-    color: var(--color-intent-accent-solid-ink) !important;
-    box-shadow: var(--shadow-elevation-1);
-  }
-
-  [data-ui-radio][data-variant="pills"][data-checked]:hover:not([data-disabled]) {
-    background-color: var(--color-intent-accent-solid-hover);
-    box-shadow: var(--shadow-elevation-1);
+    background-color: transparent;
+    color: var(--ui-surface-ink);
   }
 
   [data-ui-radio][data-variant="pills"] [data-ui-radio-indicator] {

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

@@ -197,3 +197,76 @@
     }
   }
 }
+@layer components {
+  /* Selection navigation treatment: Tabs. */
+  [data-ui-tabs-list] {
+    color: var(--ui-surface-ink);
+  }
+
+  [data-ui-tabs-list][data-variant="line"] {
+    box-shadow: inset 0 calc(var(--border-width-edge-separator) * -1) 0 var(--ui-surface-separator);
+  }
+
+  [data-ui-tabs-list][data-variant="line"][data-orientation="vertical"] {
+    box-shadow: inset var(--border-width-edge-separator) 0 0 var(--ui-surface-separator);
+  }
+
+  [data-ui-tabs-list][data-variant="segmented"] {
+    background-color: var(--color-interaction-hover);
+    box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
+  }
+
+  [data-ui-tabs-tab] {
+    color: var(--ui-surface-ink-muted);
+  }
+
+  [data-ui-tabs-tab]:hover:not([data-disabled]) {
+    color: var(--ui-surface-ink);
+  }
+
+  [data-ui-tabs-tab][data-selected] {
+    color: var(--ui-surface-ink);
+  }
+
+  [data-ui-tabs-list]:where([data-variant="subtle"], [data-variant="pills"]) [data-ui-tabs-tab][data-selected] {
+    color: var(--ui-interaction-selected-ink);
+  }
+
+  [data-ui-tabs-tab]:focus-visible {
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+
+  [data-ui-tabs-tab][data-disabled] {
+    color: var(--color-interaction-disabled-ink);
+  }
+
+  [data-ui-tabs-list][data-variant="subtle"] [data-ui-tabs-indicator],
+  [data-ui-tabs-list][data-variant="pills"] [data-ui-tabs-indicator] {
+    background-color: transparent;
+  }
+
+  [data-ui-tabs-list][data-variant="line"] [data-ui-tabs-indicator] {
+    background-color: var(--ui-selection-solid);
+  }
+
+  [data-ui-tabs-list][data-variant="segmented"] [data-ui-tabs-indicator] {
+    background-color: transparent;
+  }
+
+  [data-ui-tabs-list][data-variant="segmented"] [data-ui-tabs-indicator]::before {
+    position: absolute;
+    inset: var(--border-width-edge-control);
+    border-radius: inherit;
+    background-color: var(--ui-surface-color);
+    box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge);
+    content: "";
+  }
+
+  [data-ui-tabs-panel] {
+    color: var(--ui-surface-ink);
+  }
+
+  [data-ui-tabs-panel]:focus-visible {
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+}

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

@@ -48,3 +48,126 @@
 [data-ui-toast-outlet][data-stack="collapsed"][data-stack-expanded="true"] > [data-ui-toast] {
   height: auto;
 }
+@layer components {
+  /* Feedback surface treatment: Toast. */
+  [data-ui-toast-recipe] {
+    --ui-toast-text: var(--ui-surface-ink);
+    --ui-toast-soft: var(--color-intent-neutral-soft);
+    --ui-toast-soft-ink: var(--color-intent-neutral-soft-ink);
+    --ui-toast-soft-ink-muted: var(--color-intent-neutral-soft-ink-muted);
+    --ui-toast-solid: var(--color-intent-neutral-solid);
+    --ui-toast-solid-ink: var(--color-intent-neutral-solid-ink);
+    --ui-toast-edge: var(--ui-surface-edge);
+    --ui-toast-edge-strong: var(--ui-surface-edge-strong);
+    --ui-toast-focus: var(--color-intent-neutral-focus);
+    --ui-toast-focus-width: var(--color-intent-neutral-focus-width);
+    --ui-toast-ink: var(--ui-surface-ink);
+    --ui-toast-ink-muted: var(--ui-surface-ink-muted);
+    color: var(--ui-toast-ink);
+    background-color: var(--ui-surface-color);
+  }
+
+  [data-ui-toast-recipe][data-color="accent"] {
+    --ui-toast-text: var(--color-intent-accent-text);
+    --ui-toast-soft: var(--color-intent-accent-soft);
+    --ui-toast-soft-ink: var(--color-intent-accent-soft-ink);
+    --ui-toast-soft-ink-muted: var(--color-intent-accent-soft-ink-muted);
+    --ui-toast-solid: var(--color-intent-accent-solid);
+    --ui-toast-solid-ink: var(--color-intent-accent-solid-ink);
+    --ui-toast-edge: var(--color-intent-accent-edge);
+    --ui-toast-edge-strong: var(--color-intent-accent-edge-strong);
+    --ui-toast-focus: var(--color-intent-accent-focus);
+    --ui-toast-focus-width: var(--color-intent-accent-focus-width);
+  }
+
+  [data-ui-toast-recipe][data-color="success"] {
+    --ui-toast-text: var(--color-intent-success-text);
+    --ui-toast-soft: var(--color-intent-success-soft);
+    --ui-toast-soft-ink: var(--color-intent-success-soft-ink);
+    --ui-toast-soft-ink-muted: var(--color-intent-success-soft-ink-muted);
+    --ui-toast-solid: var(--color-intent-success-solid);
+    --ui-toast-solid-ink: var(--color-intent-success-solid-ink);
+    --ui-toast-edge: var(--color-intent-success-edge);
+    --ui-toast-edge-strong: var(--color-intent-success-edge-strong);
+    --ui-toast-focus: var(--color-intent-success-focus);
+    --ui-toast-focus-width: var(--color-intent-success-focus-width);
+  }
+
+  [data-ui-toast-recipe][data-color="warning"] {
+    --ui-toast-text: var(--color-intent-warning-text);
+    --ui-toast-soft: var(--color-intent-warning-soft);
+    --ui-toast-soft-ink: var(--color-intent-warning-soft-ink);
+    --ui-toast-soft-ink-muted: var(--color-intent-warning-soft-ink-muted);
+    --ui-toast-solid: var(--color-intent-warning-solid);
+    --ui-toast-solid-ink: var(--color-intent-warning-solid-ink);
+    --ui-toast-edge: var(--color-intent-warning-edge);
+    --ui-toast-edge-strong: var(--color-intent-warning-edge-strong);
+    --ui-toast-focus: var(--color-intent-warning-focus);
+    --ui-toast-focus-width: var(--color-intent-warning-focus-width);
+  }
+
+  [data-ui-toast-recipe][data-color="danger"] {
+    --ui-toast-text: var(--color-intent-danger-text);
+    --ui-toast-soft: var(--color-intent-danger-soft);
+    --ui-toast-soft-ink: var(--color-intent-danger-soft-ink);
+    --ui-toast-soft-ink-muted: var(--color-intent-danger-soft-ink-muted);
+    --ui-toast-solid: var(--color-intent-danger-solid);
+    --ui-toast-solid-ink: var(--color-intent-danger-solid-ink);
+    --ui-toast-edge: var(--color-intent-danger-edge);
+    --ui-toast-edge-strong: var(--color-intent-danger-edge-strong);
+    --ui-toast-focus: var(--color-intent-danger-focus);
+    --ui-toast-focus-width: var(--color-intent-danger-focus-width);
+  }
+
+  [data-ui-toast-recipe][data-variant="soft"] {
+    --ui-toast-ink: var(--ui-toast-soft-ink);
+    --ui-toast-ink-muted: var(--ui-toast-soft-ink-muted);
+    color: var(--ui-toast-ink);
+    background-color: var(--ui-toast-soft);
+  }
+
+  [data-ui-toast-recipe][data-variant="surface"] {
+    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-toast-edge);
+  }
+
+  [data-ui-toast-recipe][data-variant="outline"] {
+    --ui-toast-ink: var(--ui-toast-text);
+    --ui-toast-ink-muted: var(--ui-toast-text);
+    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-toast-edge-strong);
+    color: var(--ui-toast-ink);
+    background-color: transparent;
+  }
+
+  [data-ui-toast-recipe][data-variant="solid"] {
+    --ui-toast-ink: var(--ui-toast-solid-ink);
+    --ui-toast-ink-muted: var(--ui-toast-solid-ink);
+    color: var(--ui-toast-ink);
+    background-color: var(--ui-toast-solid);
+  }
+
+  [data-ui-toast-marker] {
+    background-color: var(--ui-toast-solid);
+  }
+
+  [data-ui-toast-title] {
+    color: var(--ui-toast-ink);
+  }
+
+  [data-ui-toast-description] {
+    color: var(--ui-toast-ink-muted);
+  }
+
+  [data-ui-toast-close] {
+    color: var(--ui-toast-ink-muted);
+  }
+
+  [data-ui-toast-close]:hover {
+    color: var(--ui-toast-ink);
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  [data-ui-toast-close]:focus-visible {
+    color: var(--ui-toast-ink);
+    box-shadow: 0 0 0 var(--ui-toast-focus-width) var(--ui-toast-focus);
+  }
+}

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

@@ -10,15 +10,26 @@
 @import "../components/app/styles.css";
 @import "../components/scroll-area/styles.css";
 @import "../components/select/styles.css";
-@import "../components/field/styles.css";
 @import "../components/radio/styles.css";
+@import "../components/checkbox/styles.css";
 @import "../components/date-picker/styles.css";
-@import "../components/file-upload/styles.css";
 @import "../components/button/styles.css";
 @import "../components/accordion/styles.css";
-@import "../components/toast/styles.css";
 @import "../components/input/styles.css";
 @import "../components/sidebar/styles.css";
 @import "../components/panels/styles.css";
-@import "../components/tabs/styles.css";
 @import "../directives/sortable.css";
+
+/*
+  Treatment recipes are ordered from shared state and action foundations through
+  component-specific surfaces and controls. Keep this order stable: every file
+  participates in the same components layer in the compiled stylesheet.
+*/
+@import "./recipes/disabled.css";
+@import "./recipes/action.css";
+@import "../components/toast/styles.css";
+@import "../components/tabs/styles.css";
+@import "./recipes/option.css";
+@import "../components/field/styles.css";
+@import "../components/file-upload/styles.css";
+@import "./recipes/selection.css";

package/packages/client/src/styles/generated/theme-fonts.css

@@ -1,5 +1,5 @@
 /* Generated by packages/theme-engine/scripts/generate-default-css.mjs. */
-/* Theme fa53e5e7500664ca; CSS 9bd56c40eb5861dd. */
+/* Theme df3d56b092a0a62a; CSS 9bd56c40eb5861dd. */
 @import url("https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap");
 
 @import url("https://fonts.bunny.net/css?family=fira-code:400,500,600,700&display=swap");