@threadlabs/looma 0.5.2 → 0.6.0-rc.1

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.vue

@@ -69,16 +69,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 +98,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;
 }
@@ -175,12 +175,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;
 }
 
@@ -242,7 +248,7 @@ const hostState = computed(() =>
 
 @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 +259,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 +274,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 +287,13 @@ 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)));
+  color: var(--ui-button-disabled-text, var(--ui-button-link-text, var(--ui-text-secondary)));
 }
 
 [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;

package/vue/UiDisclosure.vue

@@ -15,11 +15,13 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    density?: 'comfortable' | 'compact'
     disabled?: boolean
     open?: boolean
     summary?: string
   }>(),
   {
+    density: 'comfortable',
     disabled: false,
     open: false,
     summary: 'Details',
@@ -51,6 +53,7 @@ const contentId = ref('')
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    props.density && `density density=${props.density}`,
     internalOpen.value && 'internalOpen',
   ].filter(Boolean).join(' ')
 )
@@ -213,6 +216,19 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+/* Density resolves into the summary row's own values; the public tokens still override them. */
+[data-component~="ui-disclosure"] {
+  --_trigger-min-block-size: var(--ui-control-size);
+  --_trigger-padding-block: var(--ui-space-2);
+  --_trigger-padding-inline: var(--ui-space-3);
+}
+
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="density=compact"] {
+  --_trigger-min-block-size: var(--ui-control-size-sm);
+  --_trigger-padding-block: var(--ui-space-1);
+  --_trigger-padding-inline: var(--ui-space-2);
+}
+
 /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
  * select or combobox. Stacked disclosures share their dividers. */
 [data-component~="ui-disclosure"] {
@@ -229,16 +245,17 @@ onBeforeUnmount(() => {
   gap: var(--ui-space-3);
   align-items: center;
   inline-size: 100%;
-  min-block-size: 2.5rem;
-  padding: var(--ui-space-2) var(--ui-space-3);
+  min-block-size: var(--ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
+  padding: var(--ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
+    var(--ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
   border: 0;
   background: transparent;
   color: inherit;
   font: inherit;
-  font-weight: var(--ui-font-semibold, 600);
+  font-weight: var(--ui-font-semibold);
   text-align: start;
   cursor: pointer;
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
   transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 

package/vue/UiEditable.vue

@@ -277,11 +277,11 @@ onBeforeUnmount(() => {
 .input {
   grid-area: 1 / 1;
   box-sizing: border-box;
-  min-block-size: var(--ui-control-size-sm, 2rem);
+  min-block-size: var(--ui-control-size-sm);
   margin: 0;
   padding: var(--ui-space-1) var(--ui-space-2);
   border: 1px solid transparent;
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   font: inherit;
   line-height: var(--ui-line-height-md);
   color: inherit;
@@ -351,13 +351,13 @@ onBeforeUnmount(() => {
 }
 
 .actions button {
-  min-block-size: var(--ui-control-size-sm, 2rem);
+  min-block-size: var(--ui-control-size-sm);
   padding: 0 var(--ui-space-3);
   border: 1px solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-surface-elevated);
-  background-image: var(--ui-raised-highlight, none);
-  box-shadow: var(--ui-raised, none);
+  background-image: var(--ui-raised-highlight);
+  box-shadow: var(--ui-raised);
   color: inherit;
   font: inherit;
   font-size: var(--ui-font-size-sm);

package/vue/UiEditorInsertTableGrid.vue

@@ -205,17 +205,17 @@ onBeforeUnmount(() => {
 
 <style scoped>
 [data-component~="ui-editor-insert-table-grid"] {
-  padding: var(--ui-space-3, 12px);
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-md, 6px);
+  padding: var(--ui-space-3);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
 }
 
 .hint {
-  margin: 0 0 var(--ui-space-2, 8px);
-  font-size: var(--ui-text-sm, 0.875rem);
-  color: var(--ui-text-muted, #6b7280);
+  margin: 0 0 var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-text-muted);
 }
 
 .grid {
@@ -223,39 +223,39 @@ onBeforeUnmount(() => {
   grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
   grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
   gap: 2px;
-  margin-bottom: var(--ui-space-2, 8px);
+  margin-bottom: var(--ui-space-2);
 }
 
 .cell {
   width: 1.25rem;
   height: 1.25rem;
   padding: 0;
-  border: 1px solid var(--ui-border, #e5e7eb);
+  border: 1px solid var(--ui-border);
   border-radius: 2px;
-  background: var(--ui-surface, #fff);
+  background: var(--ui-surface);
   cursor: pointer;
 }
 
 .cell.selected {
-  background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-  border-color: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+  background: var(--ui-accent-solid, var(--ui-accent));
+  border-color: var(--ui-accent-solid, var(--ui-accent));
 }
 
 .header {
   display: block;
-  margin-bottom: var(--ui-space-2, 8px);
-  font-size: var(--ui-text-sm, 0.875rem);
+  margin-bottom: var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
   cursor: pointer;
 }
 
 [data-component~="ui-editor-insert-table-grid"] .insert {
   width: 100%;
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-sm, 4px);
-  background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-  color: var(--ui-accent-contrast, #fff);
-  font-size: var(--ui-text-sm, 0.875rem);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-accent-solid, var(--ui-accent));
+  color: var(--ui-accent-contrast);
+  font-size: var(--ui-font-size-sm);
   cursor: pointer;
 }