@threadlabs/looma 0.5.2 → 0.6.0-rc.2

package/vanilla/UiMenu.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-menu/ui-menu.js";
 import "../styles/ui-menu.css";
 
-const definition = {...{"contract":{"tag":"ui-menu","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"bottom-start"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-orientation","value":"vertical"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-menu","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"bottom-start"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-orientation","value":"vertical"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiMenu(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vanilla/UiTabs.d.ts

@@ -7,6 +7,7 @@ export interface UiTabsElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiTabsEventMap>(type: K, listener: (this: UiTabsElement, event: UiTabsEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiTabsProps {
+  density?: "comfortable" | "compact" | null;
   label?: string | null;
   orientation?: "horizontal" | "vertical" | null;
   stretch?: boolean | null;

package/vanilla/UiTabs.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tabs/ui-tabs.js";
 import "../styles/ui-tabs.css";
 
-const definition = {...{"contract":{"tag":"ui-tabs","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Tabs"},"orientation":{"type":{"enum":["horizontal","vertical"]},"required":false,"target":{"attribute":"aria-orientation"},"default":"horizontal"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"list"},{"kind":"literal","name":"role","value":"tablist"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-orientation","expression":"orientation","expressionPlan":{"source":"orientation","ast":{"kind":"id","name":"orientation"},"dependencies":["orientation"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"tab"},{"kind":"attribute","name":"id","expression":"format('%s-tab', tab.id)","expressionPlan":{"source":"format('%s-tab', tab.id)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-tab"},{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"}]},"dependencies":["tab.id"]}},{"kind":"attribute","name":"value","expression":"tab.id","expressionPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}},{"kind":"attribute","name":"aria-controls","expression":"tab.id","expressionPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}},{"kind":"attribute","name":"aria-selected","expression":"tab.id = internalValue","expressionPlan":{"source":"tab.id = internalValue","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"right":{"kind":"id","name":"internalValue"}},"dependencies":["internalValue","tab.id"]}},{"kind":"directive","name":"value","expression":"tab.label","expressionPlan":{"source":"tab.label","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"label"},"dependencies":["tab.label"]}}],"children":[],"flow":{"kind":"each","item":"tab","list":"tabs","listPlan":{"source":"tabs","ast":{"kind":"id","name":"tabs"},"dependencies":["tabs"]},"key":"tab.id","keyPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}}}],"ref":"list"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panels"}],"children":[{"kind":"slot"}],"ref":"panels"}]},"declarations":[{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"tabs","type":"list(object({ id: string, label: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-tabs","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Tabs"},"orientation":{"type":{"enum":["horizontal","vertical"]},"required":false,"target":{"attribute":"aria-orientation"},"default":"horizontal"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"list"},{"kind":"literal","name":"role","value":"tablist"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-orientation","expression":"orientation","expressionPlan":{"source":"orientation","ast":{"kind":"id","name":"orientation"},"dependencies":["orientation"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"tab"},{"kind":"attribute","name":"id","expression":"format('%s-tab', tab.id)","expressionPlan":{"source":"format('%s-tab', tab.id)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-tab"},{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"}]},"dependencies":["tab.id"]}},{"kind":"attribute","name":"value","expression":"tab.id","expressionPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}},{"kind":"attribute","name":"aria-controls","expression":"tab.id","expressionPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}},{"kind":"attribute","name":"aria-selected","expression":"tab.id = internalValue","expressionPlan":{"source":"tab.id = internalValue","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"right":{"kind":"id","name":"internalValue"}},"dependencies":["internalValue","tab.id"]}},{"kind":"directive","name":"value","expression":"tab.label","expressionPlan":{"source":"tab.label","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"label"},"dependencies":["tab.label"]}}],"children":[],"flow":{"kind":"each","item":"tab","list":"tabs","listPlan":{"source":"tabs","ast":{"kind":"id","name":"tabs"},"dependencies":["tabs"]},"key":"tab.id","keyPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}}}],"ref":"list"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panels"}],"children":[{"kind":"slot"}],"ref":"panels"}]},"declarations":[{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"tabs","type":"list(object({ id: string, label: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTabs(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vanilla/UiTree.d.ts

@@ -8,6 +8,7 @@ export interface UiTreeElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiTreeEventMap>(type: K, listener: (this: UiTreeElement, event: UiTreeEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiTreeProps {
+  density?: "comfortable" | "compact" | null;
   hoverExpandDelay?: number | null;
   label?: string | null;
   maxDepth?: number | null;

package/vanilla/UiTree.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tree/ui-tree.js";
 import "../styles/ui-tree.css";
 
-const definition = {...{"contract":{"tag":"ui-tree","props":{"hoverExpandDelay":{"type":"number","required":false,"target":{"attribute":"hoverexpanddelay"},"default":700},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Tree"},"maxDepth":{"type":"number","required":false,"target":{"attribute":"maxdepth"},"default":0}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"tree"}],"children":[{"kind":"slot"}]},"declarations":[{"kind":"event","name":"reorder","type":"object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"reorder-rejected","type":"object({ sourceId: string, targetId: string, position: before | inside | after, reason: max-depth, maxDepth: integer, resultingDepth: integer, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-tree","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"hoverExpandDelay":{"type":"number","required":false,"target":{"attribute":"hoverexpanddelay"},"default":700},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Tree"},"maxDepth":{"type":"number","required":false,"target":{"attribute":"maxdepth"},"default":0}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"tree"}],"children":[{"kind":"slot"}]},"declarations":[{"kind":"event","name":"reorder","type":"object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"reorder-rejected","type":"object({ sourceId: string, targetId: string, position: before | inside | after, reason: max-depth, maxDepth: integer, resultingDepth: integer, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTree(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vue/UiButton.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     stretch?: boolean;
+    tone?: 'neutral' | 'accent';
     variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link';
 };
 declare var __VLS_1: {};
@@ -10,6 +11,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tone: "neutral" | "accent";
     variant: "outline" | "solid" | "danger" | "ghost" | "link";
     align: "center" | "start";
     disabled: boolean;

package/vue/UiButton.vue

@@ -10,6 +10,7 @@ const props = withDefaults(
     disabled?: boolean
     size?: 'sm' | 'md' | 'lg'
     stretch?: boolean
+    tone?: 'neutral' | 'accent'
     variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link'
   }>(),
   {
@@ -17,6 +18,7 @@ const props = withDefaults(
     disabled: false,
     size: 'md',
     stretch: false,
+    tone: 'neutral',
     variant: 'outline',
   },
 )
@@ -28,6 +30,7 @@ const hostState = computed(() =>
     props.align && `align align=${props.align}`,
     props.stretch && 'stretch',
     props.size && `size size=${props.size}`,
+    props.tone && `tone tone=${props.tone}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -69,16 +72,16 @@ const hostState = computed(() =>
 
 [data-component~="ui-button"] {
   appearance: none;
-  min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md, 2.5rem));
+  min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border: 1px solid var(--ui-button-border, var(--ui-border-strong));
-  border-radius: var(--ui-button-radius, var(--ui-radius-2));
+  border-radius: var(--ui-button-radius, var(--ui-radius-md));
   background: var(--ui-button-surface, var(--ui-surface-elevated));
   color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
   font: inherit;
-  font-weight: var(--ui-font-medium, 500);
+  font-weight: var(--ui-font-medium);
   line-height: var(--ui-line-height-tight);
   padding: var(--ui-space-2) var(--ui-space-3);
-  background-image: var(--ui-raised-highlight, none);
+  background-image: var(--ui-raised-highlight);
   box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
   cursor: pointer;
   transition:
@@ -98,13 +101,13 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-button"][data-ui-button-state~="size=sm"] {
-  min-block-size: var(--ui-control-size-sm, 2rem);
+  min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.875rem;
 }
 
 [data-component~="ui-button"][data-ui-button-state~="size=lg"] {
-  min-block-size: var(--ui-control-size-lg, 3rem);
+  min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: 1rem;
 }
@@ -166,6 +169,26 @@ const hostState = computed(() =>
   transform: translateY(0);
 }
 
+/* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
+   Solid and danger already carry their own intent. */
+[data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"] {
+  border-color: var(--ui-button-accent-border, var(--ui-accent));
+  background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
+  color: var(--ui-button-accent-text, var(--ui-accent-active));
+}
+
+[data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"]:hover:enabled {
+  border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
+  background: var(
+    --ui-button-accent-hover-surface,
+    color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface))
+  );
+}
+
+[data-component~="ui-button"][data-ui-button-state~="tone=accent"]:is([data-component~="ui-button"][data-ui-button-state~="variant=ghost"], [data-component~="ui-button"][data-ui-button-state~="variant=link"]) {
+  color: var(--ui-button-accent-text, var(--ui-accent-active));
+}
+
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"] {
   border-color: transparent;
   background: transparent;
@@ -175,12 +198,18 @@ const hostState = computed(() =>
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:hover:enabled {
-  background: var(--ui-button-ghost-hover, color-mix(in srgb, currentColor 8%, transparent));
+  background: var(
+    --ui-button-ghost-hover-surface,
+    color-mix(in srgb, currentColor 8%, transparent)
+  );
   border-color: transparent;
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:enabled {
-  background: var(--ui-button-ghost-active, color-mix(in srgb, currentColor 14%, transparent));
+  background: var(
+    --ui-button-ghost-active-surface,
+    color-mix(in srgb, currentColor 14%, transparent)
+  );
   border-color: transparent;
 }
 
@@ -200,49 +229,34 @@ const hostState = computed(() =>
 
 /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
 [data-component~="ui-button"]:disabled {
-  opacity: var(--ui-button-disabled-opacity, 0.6);
+  opacity: var(--ui-button-disabled-opacity, 1);
   cursor: not-allowed;
-  border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
-  background-color: var(
-    --ui-button-disabled-surface,
-    var(--ui-button-surface, var(--ui-surface-elevated))
-  );
-  color: var(
-    --ui-button-disabled-text,
-    var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)))
-  );
+  border-color: var(--ui-button-disabled-border, var(--ui-border));
+  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
+  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:disabled {
-  border-color: var(
-    --ui-button-disabled-border,
-    var(--ui-action-primary-surface, var(--ui-accent-solid))
-  );
-  background-color: var(
-    --ui-button-disabled-surface,
-    var(--ui-action-primary-surface, var(--ui-accent-solid))
-  );
-  color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
+  border-color: var(--ui-button-disabled-border, var(--ui-border));
+  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
+  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=danger"]:disabled {
-  border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
-  background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
-  color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
+  border-color: var(--ui-button-disabled-border, var(--ui-border));
+  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
+  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
+  background: none;
   border-color: transparent;
-  background-color: transparent;
-  color: var(
-    --ui-button-disabled-text,
-    var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)))
-  );
+  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 @media (pointer: coarse) {
   [data-component~="ui-button"] {
-    min-block-size: var(--ui-control-min-block-size, 2.75rem);
+    min-block-size: var(--ui-control-min-block-size);
   }
 }
 
@@ -253,11 +267,11 @@ const hostState = computed(() =>
   min-block-size: 0;
   padding: 0;
   border: 0;
-  border-radius: var(--ui-radius-sm, 4px);
+  border-radius: var(--ui-radius-sm);
   background: none;
   box-shadow: none;
   font: inherit;
-  color: var(--ui-button-link-color, var(--ui-text-secondary));
+  color: var(--ui-button-link-text, var(--ui-text-secondary));
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
   text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
@@ -268,7 +282,7 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=link"]:hover:enabled {
-  color: var(--ui-button-link-hover-color, var(--ui-text-primary));
+  color: var(--ui-button-link-hover-text, var(--ui-text-primary));
   text-decoration-color: currentColor;
   background: none;
   transform: none;
@@ -281,13 +295,14 @@ const hostState = computed(() =>
 
 [data-component~="ui-button"][data-ui-button-state~="variant=link"]:disabled {
   background: none;
-  color: var(--ui-button-disabled-text, var(--ui-button-link-color, var(--ui-text-secondary)));
+  border-color: transparent;
+  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=link"]:focus-visible {
   box-shadow: none;
   /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
-  outline: 2px solid var(--ui-focus-ring, currentColor);
+  outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
 

package/vue/UiCallout.vue

@@ -113,7 +113,7 @@ const hostState = computed(() =>
     color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
   border-inline-start: var(--ui-callout-leading-border-width, 4px) solid
     var(--ui-callout-border, var(--_callout-border));
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-callout-surface, var(--_callout-surface));
   color: var(--ui-callout-text, var(--ui-text-primary));
   font-family: var(--ui-font-family-sans);

package/vue/UiCheckbox.vue

@@ -212,7 +212,7 @@ input {
   block-size: var(--ui-checkbox-size, 1.125rem);
   margin: 0.125em 0 0;
   border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
   background: var(--ui-control-surface, var(--ui-surface-default));
   box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 8%, transparent);
   cursor: pointer;

package/vue/UiCluster.vue

@@ -26,7 +26,7 @@ const hostState = computed(() =>
 
 <style scoped>
 [data-component~="ui-cluster"] {
-  --_layout-gap: var(--ui-space-3, 0.75rem);
+  --_layout-gap: var(--ui-space-3);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -37,19 +37,19 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"] {
-  --_layout-gap: var(--ui-space-2, 0.5rem);
+  --_layout-gap: var(--ui-space-2);
 }
 [data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"] {
-  --_layout-gap: var(--ui-space-3, 0.75rem);
+  --_layout-gap: var(--ui-space-3);
 }
 [data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"] {
-  --_layout-gap: var(--ui-space-4, 1rem);
+  --_layout-gap: var(--ui-space-4);
 }
 [data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"] {
-  --_layout-gap: var(--ui-space-5, 1.5rem);
+  --_layout-gap: var(--ui-space-5);
 }
 [data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"] {
-  --_layout-gap: var(--ui-space-6, 2rem);
+  --_layout-gap: var(--ui-space-6);
 }
 [data-component~="ui-cluster"][data-ui-cluster-state~="align=start"] {
   align-items: flex-start;

package/vue/UiCombobox.vue

@@ -858,15 +858,15 @@ defineExpose({
   font: inherit;
 }
 label {
-  color: var(--ui-field-label-color, var(--ui-text-primary));
-  font-size: var(--ui-field-label-size, 0.875rem);
-  font-weight: var(--ui-field-label-weight, 500);
+  color: var(--ui-combobox-label-text, var(--ui-text-primary));
+  font-size: var(--ui-combobox-label-font-size, 0.875rem);
+  font-weight: 500;
 }
 .field {
   display: flex;
   min-inline-size: 0;
   border: 1px solid var(--ui-control-border, var(--ui-border-default));
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-control-surface, var(--ui-surface-default));
   box-shadow: var(--ui-control-inset);
   transition:
@@ -887,7 +887,7 @@ input {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
-  min-block-size: calc(var(--ui-control-size-md, 2.5rem) - 2px);
+  min-block-size: calc(var(--ui-control-size-md) - 2px);
   box-sizing: border-box;
   border: 0;
   border-radius: inherit;
@@ -900,7 +900,7 @@ input {
   outline: none;
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input {
-  min-block-size: calc(var(--ui-field-compact-size, var(--ui-control-size-sm, 2rem)) - 2px);
+  min-block-size: calc(var(--ui-control-size-sm) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
 }
 button {
@@ -909,19 +909,19 @@ button {
   place-items: center;
   align-self: stretch;
   border: 0;
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: transparent;
-  color: var(--ui-field-affordance-color, var(--ui-text-secondary));
+  color: var(--ui-combobox-affordance-text, var(--ui-text-secondary));
   font: inherit;
-  font-weight: var(--ui-field-affordance-weight, 400);
+  font-weight: 400;
   min-inline-size: 2rem;
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
 .affordance-icon {
   display: block;
-  inline-size: var(--ui-icon-size-sm, 1rem);
-  block-size: var(--ui-icon-size-sm, 1rem);
+  inline-size: var(--ui-icon-size-sm);
+  block-size: var(--ui-icon-size-sm);
 }
 button:hover:enabled {
   background: var(--ui-surface-muted);
@@ -951,7 +951,7 @@ input:disabled, button:disabled {
   margin: 0;
   padding: var(--ui-space-1);
   border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
@@ -961,13 +961,13 @@ input:disabled, button:disabled {
 }
 .option {
   padding: var(--ui-space-2) var(--ui-space-3);
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
   cursor: pointer;
   overflow-wrap: anywhere;
 }
 .option:hover, .option.active {
   background: var(--ui-surface-muted);
-  outline: 1px solid var(--ui-focus-ring, currentColor);
+  outline: 1px solid var(--ui-focus-ring);
   outline-offset: -1px;
 }
 .option[aria-disabled="true"] {
@@ -976,12 +976,12 @@ input:disabled, button:disabled {
 }
 .primary {
   display: block;
-  color: var(--ui-option-primary-color, var(--ui-text-primary));
-  font-weight: var(--ui-option-primary-weight, 500);
+  color: var(--ui-combobox-option-text, var(--ui-text-primary));
+  font-weight: 500;
 }
 .message, .group {
-  color: var(--ui-field-message-color, var(--ui-text-secondary));
-  font-weight: var(--ui-field-message-weight, 400);
+  color: var(--ui-combobox-message-text, var(--ui-text-secondary));
+  font-weight: 400;
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
   overflow-wrap: anywhere;
@@ -1017,11 +1017,11 @@ input:disabled, button:disabled {
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-1);
-  min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem);
+  min-block-size: var(--ui-combobox-item-min-block-size, 2.5rem);
   padding: var(--ui-space-1);
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input {
-  flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);
+  flex: 1 0 var(--ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
   padding: var(--ui-space-0-5) var(--ui-space-1);
@@ -1030,18 +1030,18 @@ input:disabled, button:disabled {
   appearance: none;
   display: inline-flex;
   min-inline-size: 0;
-  max-inline-size: min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));
+  max-inline-size: min(100%, var(--ui-combobox-item-item-max-inline-size, 12rem));
   overflow: hidden;
   padding: 0;
   border: 0;
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
   background: transparent;
   color: inherit;
   font: inherit;
   cursor: default;
 }
 .item:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, currentColor);
+  outline: 2px solid var(--ui-focus-ring);
   outline-offset: 1px;
 }
 .item:disabled {

package/vue/UiContainer.vue

@@ -31,7 +31,7 @@ const hostState = computed(() =>
 <style scoped>
 [data-component~="ui-container"] {
   --_container-measure: 65ch;
-  --_container-gutters: var(--ui-space-4, 1rem);
+  --_container-gutters: var(--ui-space-4);
   display: block;
   inline-size: 100%;
   max-inline-size: var(--ui-container-measure, var(--_container-measure));
@@ -46,13 +46,13 @@ const hostState = computed(() =>
   --_container-measure: 80ch;
 }
 [data-component~="ui-container"][data-ui-container-state~="gutters=s"] {
-  --_container-gutters: var(--ui-space-3, 0.75rem);
+  --_container-gutters: var(--ui-space-3);
 }
 [data-component~="ui-container"][data-ui-container-state~="gutters=m"] {
-  --_container-gutters: var(--ui-space-4, 1rem);
+  --_container-gutters: var(--ui-space-4);
 }
 [data-component~="ui-container"][data-ui-container-state~="gutters=l"] {
-  --_container-gutters: var(--ui-space-5, 1.5rem);
+  --_container-gutters: var(--ui-space-5);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiContextMenu.vue

@@ -210,11 +210,11 @@ onBeforeUnmount(() => {
   padding: var(--ui-space-1);
   background: var(--ui-surface-elevated);
   border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-3);
+  border-radius: var(--ui-radius-lg);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
   outline: 0;
   overflow: auto;
-  z-index: var(--ui-z-overlay, 1000);
+  z-index: var(--ui-context-menu-z-index, 1000);
   min-width: 12rem;
   opacity: 0;
   transform: translateY(-4px) scale(0.99);

package/vue/UiDialog.vue

@@ -182,11 +182,11 @@ onBeforeUnmount(() => {
   inset: 0;
   box-sizing: border-box;
   inline-size: min(
-    calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2),
+    calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
     var(--ui-dialog-max-width, 440px)
   );
   max-inline-size: none;
-  max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2);
+  max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
   margin: auto;
   padding: 0;
   overflow: hidden;
@@ -235,8 +235,8 @@ header {
   border: 0;
   color: var(--ui-text-primary);
   letter-spacing: normal;
-  font-size: var(--ui-font-size-lg, 1.125rem);
-  font-weight: var(--ui-font-semibold, 600);
+  font-size: var(--ui-font-size-lg);
+  font-weight: var(--ui-font-semibold);
   line-height: var(--ui-line-height-tight);
 }
 
@@ -245,11 +245,11 @@ header {
   place-items: center;
   flex: none;
   margin-inline-start: auto;
-  inline-size: var(--ui-control-size-sm, 2rem);
-  block-size: var(--ui-control-size-sm, 2rem);
+  inline-size: var(--ui-control-size-sm);
+  block-size: var(--ui-control-size-sm);
   padding: 0;
   border: 0;
-  border-radius: var(--ui-radius-round, 999px);
+  border-radius: var(--ui-radius-round);
   background: transparent;
   color: var(--ui-text-secondary);
   cursor: pointer;
@@ -280,21 +280,21 @@ header {
 }
 
 .close:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, currentColor);
+  outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
 
 /* A touch target, like Button on coarse pointers. */
 @media (pointer: coarse) {
   .close {
-    inline-size: var(--ui-control-min-block-size, 2.75rem);
-    block-size: var(--ui-control-min-block-size, 2.75rem);
+    inline-size: var(--ui-control-min-block-size);
+    block-size: var(--ui-control-min-block-size);
   }
 }
 
 html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close {
-  inline-size: var(--ui-control-min-block-size, 2.75rem);
-  block-size: var(--ui-control-min-block-size, 2.75rem);
+  inline-size: var(--ui-control-min-block-size);
+  block-size: var(--ui-control-min-block-size);
 }
 
 .body {

package/vue/UiDisclosure.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    density?: 'comfortable' | 'compact';
     disabled?: boolean;
     open?: boolean;
     summary?: string;
@@ -35,6 +36,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     summary: string;
     disabled: boolean;
     open: boolean;
+    density: "comfortable" | "compact";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;