@vireo-ai/trellis-ui 0.1.53 → 0.1.54

package/README.md

@@ -1 +1,23 @@
-# Trellis UI
+# Trellis UI
+
+## Sortable programmatic API
+
+Sortable state belongs to the Alpine runtime that registered the capability. In Alpine expressions, use
+`$ui.sortable`. Application modules can use the same registered service through `ui.sortable` after the Sortable
+capability has loaded:
+
+```ts
+import {ui} from "@vireo-ai/trellis-ui";
+
+ui.sortable.moveBefore({
+    scope: "board",
+    sourceId: "a",
+    anchorId: "c",
+    destinationGroupId: "doing",
+});
+```
+
+The former named `sortable` export has been removed. Replace calls on that shared singleton with `$ui.sortable` or
+`ui.sortable`. If you manually register the directive, capture the registry returned by
+`registerSortableDirective(Alpine)`. `createSortableRegistry()` creates a standalone registry; it does not control
+groups registered by the directive.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.53",
+  "version": "0.1.54",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",
@@ -128,7 +128,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 && uv build --sdist --wheel",
+    "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",
     "release": "node scripts/release.mjs",
     "publish:npm": "pnpm run check:release && pnpm publish dist/trellis-ui.tgz --access public --ignore-scripts",

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

@@ -1,14 +1,30 @@
 @layer components {
   [data-ui-keybinding-key] {
+    font: inherit;
+  }
+
+  [data-ui-keybinding]:not([data-presentation="plain"]) > [data-ui-keybinding-key] {
+    height: var(--spacing-keybinding-key);
+    min-width: var(--spacing-keybinding-key);
+    padding-inline: var(--spacing-1);
+    border-radius: var(--radius-control-md);
+    line-height: 1;
     box-shadow:
       inset 0 0 0 var(--border-width-edge-control)
-      color-mix(in oklab, currentColor var(--label-ink-emphasis), transparent);
+      var(--ui-keybinding-edge, color-mix(in oklab, currentColor var(--label-ink-emphasis), transparent));
+  }
+
+  [data-ui-keybinding]:not([data-presentation="plain"]) > [data-ui-keybinding-separator] {
+    opacity: 0.7;
   }
 
   [data-ui-keybinding-key][data-pressed] {
     background-color: var(--color-interaction-pressed);
+  }
+
+  [data-ui-keybinding]:not([data-presentation="plain"]) > [data-ui-keybinding-key][data-pressed] {
     box-shadow:
       inset 0 0 0 var(--border-width-edge-control)
-      currentColor;
+      var(--ui-keybinding-edge-pressed, currentColor);
   }
 }

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

@@ -0,0 +1,42 @@
+@layer components {
+  [data-ui-link] {
+    --ui-link-text-muted: var(--ui-surface-ink-muted);
+
+    color: var(--ui-intent-text);
+    text-decoration: none;
+  }
+
+  [data-ui-link][data-color="accent"] {
+    --ui-link-text-muted: var(--ui-intent-soft-ink-muted);
+  }
+
+  [data-ui-link]:hover {
+    color: var(--ui-intent-text-hover);
+  }
+
+  [data-ui-link][data-variant="subtle"] {
+    color: var(--ui-link-text-muted);
+  }
+
+  [data-ui-link][data-variant="subtle"]:is(:hover, :focus-visible) {
+    color: var(--ui-intent-text-hover);
+  }
+
+  [data-ui-link][data-variant="default"] [data-ui-link-label] {
+    text-decoration-line: underline;
+    text-decoration-color: color-mix(in oklab, currentColor 20%, transparent);
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.2em;
+  }
+
+  [data-ui-link][data-variant="default"]:is(:hover, :focus-visible) [data-ui-link-label] {
+    text-decoration-color: currentColor;
+  }
+
+  [data-ui-link][data-variant="ghost"]:is(:hover, :focus-visible) [data-ui-link-label] {
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.2em;
+  }
+}

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

@@ -7,17 +7,12 @@
     );
   }
 
-  [data-ui-tooltip-content] [data-ui-keybinding-key] {
-    box-shadow:
-      inset 0 0 0 var(--border-width-edge-control)
-      var(--ui-surface-edge);
+  [data-ui-tooltip-content] [data-ui-keybinding] {
+    --ui-keybinding-edge: var(--ui-surface-edge);
+    --ui-keybinding-edge-pressed: var(--ui-surface-edge-strong);
   }
 
   [data-ui-tooltip-content] [data-ui-keybinding-key][data-pressed] {
     color: var(--ui-semantic-surface-ink);
-    background-color: var(--color-interaction-pressed);
-    box-shadow:
-      inset 0 0 0 var(--border-width-edge-control)
-      var(--ui-surface-edge-strong);
   }
 }

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

@@ -6,6 +6,7 @@
   ::part(...), :has(...), native quirks, or child-order selectors.
 */
 
+@import "./layout-participation.css";
 @import "../components/brand/styles.css";
 @import "../components/app/styles.css";
 @import "../components/scroll-area/styles.css";
@@ -15,6 +16,7 @@
 @import "../components/checkbox/styles.css";
 @import "../components/date-picker/styles.css";
 @import "../components/button/styles.css";
+@import "../components/link/styles.css";
 @import "../components/accordion/styles.css";
 @import "../components/input/styles.css";
 @import "../components/sidebar/styles.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 5ae1b8bd284cb4e9; CSS 9bd56c40eb5861dd. */
+/* Theme fc84066faf886ebd; 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");

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

@@ -1,5 +1,5 @@
 /* Generated by packages/theme-engine/scripts/generate-default-css.mjs. */
-/* Theme 5ae1b8bd284cb4e9; CSS 5842c409a9e15f9e. */
+/* Theme fc84066faf886ebd; CSS ad17be1dd92e79eb. */
 @theme {
   --color-canvas: transparent;
   --color-accent-1: transparent;
@@ -648,6 +648,8 @@
   --spacing-slider-thumb-xlg: 20px;
   --spacing-scrollbar: 6px;
   --spacing-scrollbar-inset: 2px;
+  --spacing-keybinding-key: clamp(18px, calc(17.8571px + 0.0446vw), 18.5px);
+  --spacing-menu-min-width: 192px;
   --spacing-menu-item: var(--spacing-control-lg);
   --spacing-select-listbox: 256px;
   --spacing-panel-collapsed: 48px;
@@ -659,6 +661,8 @@
   --spacing-sidebar-max-width: 448px;
   --spacing-sidebar-min-height: 48px;
   --spacing-sidebar-max-height: 288px;
+  --container-3xs: 256px;
+  --container-2xs: 288px;
   --container-xs: 320px;
   --container-sm: 384px;
   --container-md: 448px;

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

@@ -1,5 +1,5 @@
 /* Generated by packages/theme-engine/scripts/generate-default-css.mjs. */
-/* Theme 5ae1b8bd284cb4e9; CSS b7ac22be3a42e190. */
+/* Theme fc84066faf886ebd; CSS ce102a5f6a7cd480. */
 @theme {
   --color-separator: transparent;
   --color-separator-muted: transparent;
@@ -3060,19 +3060,438 @@
   --ui-element-radius: var(--radius-full);
 }
 
-:where([data-ui-radius-owner]) {
+:where([data-ui-radius-owner]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
   --ui-owned-radius-start-start: var(--ui-element-radius);
   --ui-owned-radius-start-end: var(--ui-element-radius);
   --ui-owned-radius-end-start: var(--ui-element-radius);
   --ui-owned-radius-end-end: var(--ui-element-radius);
+  --ui-owned-inset-inline-start: 0px;
+  --ui-owned-inset-inline-end: 0px;
+  --ui-owned-inset-block-start: 0px;
+  --ui-owned-inset-block-end: 0px;
   border-radius: var(--ui-element-radius);
 }
 
+:where([data-ui-radius-owner][data-padding="0"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-0);
+  --ui-owned-inset-inline-end: var(--spacing-0);
+  --ui-owned-inset-block-start: var(--spacing-0);
+  --ui-owned-inset-block-end: var(--spacing-0);
+}
+
+:where([data-ui-radius-owner][data-padding="1"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-1);
+  --ui-owned-inset-inline-end: var(--spacing-1);
+  --ui-owned-inset-block-start: var(--spacing-1);
+  --ui-owned-inset-block-end: var(--spacing-1);
+}
+
+:where([data-ui-radius-owner][data-padding="2"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-2);
+  --ui-owned-inset-inline-end: var(--spacing-2);
+  --ui-owned-inset-block-start: var(--spacing-2);
+  --ui-owned-inset-block-end: var(--spacing-2);
+}
+
+:where([data-ui-radius-owner][data-padding="3"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-3);
+  --ui-owned-inset-inline-end: var(--spacing-3);
+  --ui-owned-inset-block-start: var(--spacing-3);
+  --ui-owned-inset-block-end: var(--spacing-3);
+}
+
+:where([data-ui-radius-owner][data-padding="4"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-4);
+  --ui-owned-inset-inline-end: var(--spacing-4);
+  --ui-owned-inset-block-start: var(--spacing-4);
+  --ui-owned-inset-block-end: var(--spacing-4);
+}
+
+:where([data-ui-radius-owner][data-padding="5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-5);
+  --ui-owned-inset-inline-end: var(--spacing-5);
+  --ui-owned-inset-block-start: var(--spacing-5);
+  --ui-owned-inset-block-end: var(--spacing-5);
+}
+
+:where([data-ui-radius-owner][data-padding="6"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-6);
+  --ui-owned-inset-inline-end: var(--spacing-6);
+  --ui-owned-inset-block-start: var(--spacing-6);
+  --ui-owned-inset-block-end: var(--spacing-6);
+}
+
+:where([data-ui-radius-owner][data-padding="7"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-7);
+  --ui-owned-inset-inline-end: var(--spacing-7);
+  --ui-owned-inset-block-start: var(--spacing-7);
+  --ui-owned-inset-block-end: var(--spacing-7);
+}
+
+:where([data-ui-radius-owner][data-padding="8"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-8);
+  --ui-owned-inset-inline-end: var(--spacing-8);
+  --ui-owned-inset-block-start: var(--spacing-8);
+  --ui-owned-inset-block-end: var(--spacing-8);
+}
+
+:where([data-ui-radius-owner][data-padding="9"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-9);
+  --ui-owned-inset-inline-end: var(--spacing-9);
+  --ui-owned-inset-block-start: var(--spacing-9);
+  --ui-owned-inset-block-end: var(--spacing-9);
+}
+
+:where([data-ui-radius-owner][data-padding="10"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-10);
+  --ui-owned-inset-inline-end: var(--spacing-10);
+  --ui-owned-inset-block-start: var(--spacing-10);
+  --ui-owned-inset-block-end: var(--spacing-10);
+}
+
+:where([data-ui-radius-owner][data-padding="11"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-11);
+  --ui-owned-inset-inline-end: var(--spacing-11);
+  --ui-owned-inset-block-start: var(--spacing-11);
+  --ui-owned-inset-block-end: var(--spacing-11);
+}
+
+:where([data-ui-radius-owner][data-padding="12"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-12);
+  --ui-owned-inset-inline-end: var(--spacing-12);
+  --ui-owned-inset-block-start: var(--spacing-12);
+  --ui-owned-inset-block-end: var(--spacing-12);
+}
+
+:where([data-ui-radius-owner][data-padding="0.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-0\.5);
+  --ui-owned-inset-inline-end: var(--spacing-0\.5);
+  --ui-owned-inset-block-start: var(--spacing-0\.5);
+  --ui-owned-inset-block-end: var(--spacing-0\.5);
+}
+
+:where([data-ui-radius-owner][data-padding="1.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-1\.5);
+  --ui-owned-inset-inline-end: var(--spacing-1\.5);
+  --ui-owned-inset-block-start: var(--spacing-1\.5);
+  --ui-owned-inset-block-end: var(--spacing-1\.5);
+}
+
+:where([data-ui-radius-owner][data-padding="2.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-2\.5);
+  --ui-owned-inset-inline-end: var(--spacing-2\.5);
+  --ui-owned-inset-block-start: var(--spacing-2\.5);
+  --ui-owned-inset-block-end: var(--spacing-2\.5);
+}
+
+:where([data-ui-radius-owner][data-padding="3.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-3\.5);
+  --ui-owned-inset-inline-end: var(--spacing-3\.5);
+  --ui-owned-inset-block-start: var(--spacing-3\.5);
+  --ui-owned-inset-block-end: var(--spacing-3\.5);
+}
+
+:where([data-ui-radius-owner][data-padding="4.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-4\.5);
+  --ui-owned-inset-inline-end: var(--spacing-4\.5);
+  --ui-owned-inset-block-start: var(--spacing-4\.5);
+  --ui-owned-inset-block-end: var(--spacing-4\.5);
+}
+
+:where([data-ui-radius-owner][data-padding="5.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-5\.5);
+  --ui-owned-inset-inline-end: var(--spacing-5\.5);
+  --ui-owned-inset-block-start: var(--spacing-5\.5);
+  --ui-owned-inset-block-end: var(--spacing-5\.5);
+}
+
+:where([data-ui-radius-owner][data-padding="6.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-6\.5);
+  --ui-owned-inset-inline-end: var(--spacing-6\.5);
+  --ui-owned-inset-block-start: var(--spacing-6\.5);
+  --ui-owned-inset-block-end: var(--spacing-6\.5);
+}
+
+:where([data-ui-radius-owner][data-padding="7.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-7\.5);
+  --ui-owned-inset-inline-end: var(--spacing-7\.5);
+  --ui-owned-inset-block-start: var(--spacing-7\.5);
+  --ui-owned-inset-block-end: var(--spacing-7\.5);
+}
+
+:where([data-ui-radius-owner][data-padding="8.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-8\.5);
+  --ui-owned-inset-inline-end: var(--spacing-8\.5);
+  --ui-owned-inset-block-start: var(--spacing-8\.5);
+  --ui-owned-inset-block-end: var(--spacing-8\.5);
+}
+
+:where([data-ui-radius-owner][data-padding="9.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-9\.5);
+  --ui-owned-inset-inline-end: var(--spacing-9\.5);
+  --ui-owned-inset-block-start: var(--spacing-9\.5);
+  --ui-owned-inset-block-end: var(--spacing-9\.5);
+}
+
+:where([data-ui-radius-owner][data-padding="10.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-10\.5);
+  --ui-owned-inset-inline-end: var(--spacing-10\.5);
+  --ui-owned-inset-block-start: var(--spacing-10\.5);
+  --ui-owned-inset-block-end: var(--spacing-10\.5);
+}
+
+:where([data-ui-radius-owner][data-padding="11.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-11\.5);
+  --ui-owned-inset-inline-end: var(--spacing-11\.5);
+  --ui-owned-inset-block-start: var(--spacing-11\.5);
+  --ui-owned-inset-block-end: var(--spacing-11\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="1"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-1);
+  --ui-owned-inset-inline-end: var(--spacing-1);
+}
+
+:where([data-ui-radius-owner][data-padding-x="2"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-2);
+  --ui-owned-inset-inline-end: var(--spacing-2);
+}
+
+:where([data-ui-radius-owner][data-padding-x="3"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-3);
+  --ui-owned-inset-inline-end: var(--spacing-3);
+}
+
+:where([data-ui-radius-owner][data-padding-x="4"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-4);
+  --ui-owned-inset-inline-end: var(--spacing-4);
+}
+
+:where([data-ui-radius-owner][data-padding-x="5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-5);
+  --ui-owned-inset-inline-end: var(--spacing-5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="6"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-6);
+  --ui-owned-inset-inline-end: var(--spacing-6);
+}
+
+:where([data-ui-radius-owner][data-padding-x="7"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-7);
+  --ui-owned-inset-inline-end: var(--spacing-7);
+}
+
+:where([data-ui-radius-owner][data-padding-x="8"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-8);
+  --ui-owned-inset-inline-end: var(--spacing-8);
+}
+
+:where([data-ui-radius-owner][data-padding-x="9"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-9);
+  --ui-owned-inset-inline-end: var(--spacing-9);
+}
+
+:where([data-ui-radius-owner][data-padding-x="10"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-10);
+  --ui-owned-inset-inline-end: var(--spacing-10);
+}
+
+:where([data-ui-radius-owner][data-padding-x="11"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-11);
+  --ui-owned-inset-inline-end: var(--spacing-11);
+}
+
+:where([data-ui-radius-owner][data-padding-x="12"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-12);
+  --ui-owned-inset-inline-end: var(--spacing-12);
+}
+
+:where([data-ui-radius-owner][data-padding-x="0.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-0\.5);
+  --ui-owned-inset-inline-end: var(--spacing-0\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="1.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-1\.5);
+  --ui-owned-inset-inline-end: var(--spacing-1\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="2.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-2\.5);
+  --ui-owned-inset-inline-end: var(--spacing-2\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="3.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-3\.5);
+  --ui-owned-inset-inline-end: var(--spacing-3\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="4.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-4\.5);
+  --ui-owned-inset-inline-end: var(--spacing-4\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="5.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-5\.5);
+  --ui-owned-inset-inline-end: var(--spacing-5\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="6.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-6\.5);
+  --ui-owned-inset-inline-end: var(--spacing-6\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="7.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-7\.5);
+  --ui-owned-inset-inline-end: var(--spacing-7\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="8.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-8\.5);
+  --ui-owned-inset-inline-end: var(--spacing-8\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="9.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-9\.5);
+  --ui-owned-inset-inline-end: var(--spacing-9\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="10.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-10\.5);
+  --ui-owned-inset-inline-end: var(--spacing-10\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-x="11.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-inline-start: var(--spacing-11\.5);
+  --ui-owned-inset-inline-end: var(--spacing-11\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="1"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-1);
+  --ui-owned-inset-block-end: var(--spacing-1);
+}
+
+:where([data-ui-radius-owner][data-padding-y="2"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-2);
+  --ui-owned-inset-block-end: var(--spacing-2);
+}
+
+:where([data-ui-radius-owner][data-padding-y="3"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-3);
+  --ui-owned-inset-block-end: var(--spacing-3);
+}
+
+:where([data-ui-radius-owner][data-padding-y="4"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-4);
+  --ui-owned-inset-block-end: var(--spacing-4);
+}
+
+:where([data-ui-radius-owner][data-padding-y="5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-5);
+  --ui-owned-inset-block-end: var(--spacing-5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="6"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-6);
+  --ui-owned-inset-block-end: var(--spacing-6);
+}
+
+:where([data-ui-radius-owner][data-padding-y="7"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-7);
+  --ui-owned-inset-block-end: var(--spacing-7);
+}
+
+:where([data-ui-radius-owner][data-padding-y="8"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-8);
+  --ui-owned-inset-block-end: var(--spacing-8);
+}
+
+:where([data-ui-radius-owner][data-padding-y="9"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-9);
+  --ui-owned-inset-block-end: var(--spacing-9);
+}
+
+:where([data-ui-radius-owner][data-padding-y="10"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-10);
+  --ui-owned-inset-block-end: var(--spacing-10);
+}
+
+:where([data-ui-radius-owner][data-padding-y="11"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-11);
+  --ui-owned-inset-block-end: var(--spacing-11);
+}
+
+:where([data-ui-radius-owner][data-padding-y="12"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-12);
+  --ui-owned-inset-block-end: var(--spacing-12);
+}
+
+:where([data-ui-radius-owner][data-padding-y="0.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-0\.5);
+  --ui-owned-inset-block-end: var(--spacing-0\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="1.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-1\.5);
+  --ui-owned-inset-block-end: var(--spacing-1\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="2.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-2\.5);
+  --ui-owned-inset-block-end: var(--spacing-2\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="3.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-3\.5);
+  --ui-owned-inset-block-end: var(--spacing-3\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="4.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-4\.5);
+  --ui-owned-inset-block-end: var(--spacing-4\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="5.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-5\.5);
+  --ui-owned-inset-block-end: var(--spacing-5\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="6.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-6\.5);
+  --ui-owned-inset-block-end: var(--spacing-6\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="7.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-7\.5);
+  --ui-owned-inset-block-end: var(--spacing-7\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="8.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-8\.5);
+  --ui-owned-inset-block-end: var(--spacing-8\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="9.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-9\.5);
+  --ui-owned-inset-block-end: var(--spacing-9\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="10.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-10\.5);
+  --ui-owned-inset-block-end: var(--spacing-10\.5);
+}
+
+:where([data-ui-radius-owner][data-padding-y="11.5"]:not([data-ui-concentric], [data-ui-radius-owner="surface-none"][data-ui-surface="inherit"][data-ui-elevation="none"])) {
+  --ui-owned-inset-block-start: var(--spacing-11\.5);
+  --ui-owned-inset-block-end: var(--spacing-11\.5);
+}
+
 :where([data-ui-concentric]) {
-  border-start-start-radius: max(0px, calc(var(--ui-owned-radius-start-start) - var(--ui-concentric-inset-start-start, var(--ui-concentric-inset, 0px))));
-  border-start-end-radius: max(0px, calc(var(--ui-owned-radius-start-end) - var(--ui-concentric-inset-start-end, var(--ui-concentric-inset, 0px))));
-  border-end-start-radius: max(0px, calc(var(--ui-owned-radius-end-start) - var(--ui-concentric-inset-end-start, var(--ui-concentric-inset, 0px))));
-  border-end-end-radius: max(0px, calc(var(--ui-owned-radius-end-end) - var(--ui-concentric-inset-end-end, var(--ui-concentric-inset, 0px))));
+  border-start-start-radius: max(0px, calc(var(--ui-owned-radius-start-start) - var(--ui-concentric-inset-inline-start, var(--ui-concentric-inset, var(--ui-owned-inset-inline-start, 0px))))) max(0px, calc(var(--ui-owned-radius-start-start) - var(--ui-concentric-inset-block-start, var(--ui-concentric-inset, var(--ui-owned-inset-block-start, 0px)))));
+  border-start-end-radius: max(0px, calc(var(--ui-owned-radius-start-end) - var(--ui-concentric-inset-inline-end, var(--ui-concentric-inset, var(--ui-owned-inset-inline-end, 0px))))) max(0px, calc(var(--ui-owned-radius-start-end) - var(--ui-concentric-inset-block-start, var(--ui-concentric-inset, var(--ui-owned-inset-block-start, 0px)))));
+  border-end-start-radius: max(0px, calc(var(--ui-owned-radius-end-start) - var(--ui-concentric-inset-inline-start, var(--ui-concentric-inset, var(--ui-owned-inset-inline-start, 0px))))) max(0px, calc(var(--ui-owned-radius-end-start) - var(--ui-concentric-inset-block-end, var(--ui-concentric-inset, var(--ui-owned-inset-block-end, 0px)))));
+  border-end-end-radius: max(0px, calc(var(--ui-owned-radius-end-end) - var(--ui-concentric-inset-inline-end, var(--ui-concentric-inset, var(--ui-owned-inset-inline-end, 0px))))) max(0px, calc(var(--ui-owned-radius-end-end) - var(--ui-concentric-inset-block-end, var(--ui-concentric-inset, var(--ui-owned-inset-block-end, 0px)))));
 }
 
 :where(:root, .light, .dark) :where([data-ui-grid][data-columns="1"], [data-ui-box][data-layout="grid"][data-columns="1"]) {