@threadlabs/looma 0.22.13 → 0.23.0

package/vanilla/UiNavItem.d.ts

@@ -8,9 +8,11 @@ export interface UiNavItemElement extends HTMLElement {
 export interface UiNavItemProps {
   as?: "button" | "a" | null;
   current?: "true" | "false" | "page" | "step" | "location" | null;
+  density?: "comfortable" | "compact" | null;
   href?: string | null;
   rel?: string | null;
   target?: string | null;
+  variant?: "surface" | "line" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiNavItem.js

@@ -2,7 +2,7 @@
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-nav-item.css";
 
-const definition = {...{"contract":{"tag":"ui-nav-item","props":{"as":{"type":{"kind":"terminal","name":"keyword"},"values":["button","a"],"required":false,"target":{"attribute":"as"},"default":"button"},"current":{"type":{"kind":"terminal","name":"keyword"},"values":["true","false","page","step","location"],"required":false,"target":{"attribute":"current"},"default":"false"},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"target":{"type":"string","required":false,"target":{"attribute":"target"}}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"attribute","name":"href","expression":"href","expressionPlan":{"source":"href","ast":{"kind":"id","name":"href"},"dependencies":["href"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-current","expression":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","expressionPlan":{"source":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"page"}},{"key":"false","value":{"kind":"literal","value":null}},{"key":"page","value":{"kind":"literal","value":"page"}},{"key":"step","value":{"kind":"literal","value":"step"}},{"key":"location","value":{"kind":"literal","value":"location"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"current"}]}},"dependencies":["current"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"}],"children":[{"kind":"slot","fallback":[],"name":"description"}]}]}],"flow":{"kind":"when","test":"as = 'a'","testPlan":{"source":"as = 'a'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"a"}},"dependencies":["as"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-current","expression":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","expressionPlan":{"source":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"page"}},{"key":"false","value":{"kind":"literal","value":null}},{"key":"page","value":{"kind":"literal","value":"page"}},{"key":"step","value":{"kind":"literal","value":"step"}},{"key":"location","value":{"kind":"literal","value":"location"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"current"}]}},"dependencies":["current"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"}],"children":[{"kind":"slot","fallback":[],"name":"description"}]}]}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"button","choices":["a","button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-nav-item","props":{"as":{"type":{"kind":"terminal","name":"keyword"},"values":["button","a"],"required":false,"target":{"attribute":"as"},"default":"button"},"current":{"type":{"kind":"terminal","name":"keyword"},"values":["true","false","page","step","location"],"required":false,"target":{"attribute":"current"},"default":"false"},"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"target":{"type":"string","required":false,"target":{"attribute":"target"}},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["surface","line"],"required":false,"target":{"attribute":"variant"},"default":"surface"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"attribute","name":"href","expression":"href","expressionPlan":{"source":"href","ast":{"kind":"id","name":"href"},"dependencies":["href"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-current","expression":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","expressionPlan":{"source":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"page"}},{"key":"false","value":{"kind":"literal","value":null}},{"key":"page","value":{"kind":"literal","value":"page"}},{"key":"step","value":{"kind":"literal","value":"step"}},{"key":"location","value":{"kind":"literal","value":"location"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"current"}]}},"dependencies":["current"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"}],"children":[{"kind":"slot","fallback":[],"name":"description"}]}]}],"flow":{"kind":"when","test":"as = 'a'","testPlan":{"source":"as = 'a'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"a"}},"dependencies":["as"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-current","expression":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","expressionPlan":{"source":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"page"}},{"key":"false","value":{"kind":"literal","value":null}},{"key":"page","value":{"kind":"literal","value":"page"}},{"key":"step","value":{"kind":"literal","value":"step"}},{"key":"location","value":{"kind":"literal","value":"location"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"current"}]}},"dependencies":["current"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"}],"children":[{"kind":"slot","fallback":[],"name":"description"}]}]}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"button","choices":["a","button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiNavItem(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiPopover.d.ts

@@ -11,6 +11,7 @@ export interface UiPopoverProps {
   for?: string | null;
   open?: boolean | null;
   placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null;
+  size?: "content" | "sm" | "md" | "lg" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiPopover.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-popover/ui-popover.js";
 import "../styles/ui-popover.css";
 
-const definition = {...{"contract":{"tag":"ui-popover","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"required":false,"target":{"attribute":"placement"},"default":"bottom-start"}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-popover","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"required":false,"target":{"attribute":"placement"},"default":"bottom-start"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["content","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"content"}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiPopover(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiScrollArea.d.ts

@@ -7,6 +7,7 @@ export interface UiScrollAreaElement extends HTMLDivElement {
 }
 export interface UiScrollAreaProps {
   orientation?: "vertical" | "horizontal" | null;
+  size?: "content" | "sm" | "md" | "lg" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiScrollArea.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-scroll-area/ui-scroll-area.js";
 import "../styles/ui-scroll-area.css";
 
-const definition = {...{"contract":{"tag":"ui-scroll-area","props":{"orientation":{"type":{"kind":"terminal","name":"keyword"},"values":["vertical","horizontal"],"required":false,"target":{"attribute":"orientation"},"default":"vertical"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}],"ref":"content"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-scroll-area","props":{"orientation":{"type":{"kind":"terminal","name":"keyword"},"values":["vertical","horizontal"],"required":false,"target":{"attribute":"orientation"},"default":"vertical"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["content","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"content"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}],"ref":"content"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiScrollArea(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiSearchResultRow.d.ts

@@ -6,6 +6,7 @@ export interface UiSearchResultRowElement extends HTMLButtonElement {
   removeEventListener<K extends keyof UiSearchResultRowEventMap>(type: K, listener: (this: UiSearchResultRowElement, event: UiSearchResultRowEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiSearchResultRowProps {
+  density?: "comfortable" | "compact" | null;
   disabled?: boolean | null;
   selected?: boolean | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiSearchResultRow.js

@@ -2,7 +2,7 @@
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-search-result-row.css";
 
-const definition = {...{"contract":{"tag":"ui-search-result-row","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-current"},"default":false}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-current","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"title"}],"children":[{"kind":"slot","fallback":[],"name":"title"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"meta"}],"children":[{"kind":"slot","fallback":[],"name":"meta"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"excerpt"}],"children":[{"kind":"slot","fallback":[],"name":"excerpt"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"trailing"}],"children":[{"kind":"slot","fallback":[],"name":"trailing"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-search-result-row","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-current"},"default":false}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-current","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"title"}],"children":[{"kind":"slot","fallback":[],"name":"title"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"meta"}],"children":[{"kind":"slot","fallback":[],"name":"meta"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"excerpt"}],"children":[{"kind":"slot","fallback":[],"name":"excerpt"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"trailing"}],"children":[{"kind":"slot","fallback":[],"name":"trailing"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSearchResultRow(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiStack.d.ts

@@ -7,7 +7,7 @@ export interface UiStackElement extends HTMLDivElement {
 }
 export interface UiStackProps {
   align?: "start" | "center" | "end" | "stretch" | null;
-  gap?: "xs" | "s" | "m" | "l" | "xl" | null;
+  gap?: "none" | "xs" | "s" | "m" | "l" | "xl" | null;
   justify?: "start" | "center" | "end" | "between" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiStack.js

@@ -25,7 +25,7 @@ export function createUiStack(options = {}) {
   }
   manageGeneratedProps(element, [
     { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch"], required: false },
-    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
+    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["none","xs","s","m","l","xl"], required: false },
     { name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start","center","end","between"], required: false },
   ]);
   return element;

package/vanilla/UiText.d.ts

@@ -8,11 +8,13 @@ export interface UiTextElement extends HTMLElement {
 export interface UiTextProps {
   align?: "start" | "center" | null;
   as?: "p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6" | null;
+  font?: "inherit" | "sans" | null;
   size?: "inherit" | "xs" | "sm" | "md" | "lg" | null;
   tone?: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null;
   truncate?: boolean | null;
   variant?: "body" | "eyebrow" | "code" | null;
   weight?: "inherit" | "normal" | "medium" | "semibold" | null;
+  wrap?: "normal" | "anywhere" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiText.js

@@ -2,7 +2,7 @@
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-text.css";
 
-const definition = {...{"contract":{"tag":"ui-text","props":{"align":{"type":{"kind":"terminal","name":"keyword"},"values":["start","center"],"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"kind":"terminal","name":"keyword"},"values":["p","span","div","small","strong","label","h2","h3","h4","h5","h6"],"required":false,"target":{"attribute":"as"},"default":"p"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","xs","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["default","secondary","muted","accent","danger","success","info","warning"],"required":false,"target":{"attribute":"tone"},"default":"default"},"truncate":{"type":"boolean","required":false,"target":{"attribute":"truncate"},"default":false},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["body","eyebrow","code"],"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","normal","medium","semibold"],"required":false,"target":{"attribute":"weight"},"default":"inherit"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'span'","testPlan":{"source":"as = 'span'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"span"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'div'","testPlan":{"source":"as = 'div'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"div"}},"dependencies":["as"]}}},{"kind":"element","name":"small","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'small'","testPlan":{"source":"as = 'small'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"small"}},"dependencies":["as"]}}},{"kind":"element","name":"strong","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'strong'","testPlan":{"source":"as = 'strong'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"strong"}},"dependencies":["as"]}}},{"kind":"element","name":"label","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'label'","testPlan":{"source":"as = 'label'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"label"}},"dependencies":["as"]}}},{"kind":"element","name":"h2","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h2'","testPlan":{"source":"as = 'h2'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h2"}},"dependencies":["as"]}}},{"kind":"element","name":"h3","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h3'","testPlan":{"source":"as = 'h3'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h3"}},"dependencies":["as"]}}},{"kind":"element","name":"h4","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h4'","testPlan":{"source":"as = 'h4'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h4"}},"dependencies":["as"]}}},{"kind":"element","name":"h5","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h5'","testPlan":{"source":"as = 'h5'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h5"}},"dependencies":["as"]}}},{"kind":"element","name":"h6","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h6'","testPlan":{"source":"as = 'h6'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h6"}},"dependencies":["as"]}}},{"kind":"element","name":"p","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"p","choices":["span","div","small","strong","label","h2","h3","h4","h5","h6","p"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-text","props":{"align":{"type":{"kind":"terminal","name":"keyword"},"values":["start","center"],"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"kind":"terminal","name":"keyword"},"values":["p","span","div","small","strong","label","h2","h3","h4","h5","h6"],"required":false,"target":{"attribute":"as"},"default":"p"},"font":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","sans"],"required":false,"target":{"attribute":"font"},"default":"inherit"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","xs","sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["default","secondary","muted","accent","danger","success","info","warning"],"required":false,"target":{"attribute":"tone"},"default":"default"},"truncate":{"type":"boolean","required":false,"target":{"attribute":"truncate"},"default":false},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["body","eyebrow","code"],"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"kind":"terminal","name":"keyword"},"values":["inherit","normal","medium","semibold"],"required":false,"target":{"attribute":"weight"},"default":"inherit"},"wrap":{"type":{"kind":"terminal","name":"keyword"},"values":["normal","anywhere"],"required":false,"target":{"attribute":"wrap"},"default":"normal"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'span'","testPlan":{"source":"as = 'span'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"span"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'div'","testPlan":{"source":"as = 'div'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"div"}},"dependencies":["as"]}}},{"kind":"element","name":"small","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'small'","testPlan":{"source":"as = 'small'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"small"}},"dependencies":["as"]}}},{"kind":"element","name":"strong","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'strong'","testPlan":{"source":"as = 'strong'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"strong"}},"dependencies":["as"]}}},{"kind":"element","name":"label","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'label'","testPlan":{"source":"as = 'label'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"label"}},"dependencies":["as"]}}},{"kind":"element","name":"h2","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h2'","testPlan":{"source":"as = 'h2'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h2"}},"dependencies":["as"]}}},{"kind":"element","name":"h3","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h3'","testPlan":{"source":"as = 'h3'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h3"}},"dependencies":["as"]}}},{"kind":"element","name":"h4","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h4'","testPlan":{"source":"as = 'h4'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h4"}},"dependencies":["as"]}}},{"kind":"element","name":"h5","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h5'","testPlan":{"source":"as = 'h5'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h5"}},"dependencies":["as"]}}},{"kind":"element","name":"h6","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'h6'","testPlan":{"source":"as = 'h6'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"h6"}},"dependencies":["as"]}}},{"kind":"element","name":"p","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"p","choices":["span","div","small","strong","label","h2","h3","h4","h5","h6","p"]}},source:{file:import.meta.url},css:""};
 
 export function createUiText(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiAvatar.vue

@@ -357,7 +357,7 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
   inline-size: 2.5rem;
   block-size: 2.5rem;
   border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
-  border: 1px solid
+  border: var(--ui-border-width) solid
     var(
       --ui-avatar-border,
       color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default))
@@ -399,8 +399,8 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
 /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
    outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
 [data-component~="ui-avatar"][data-ui-avatar-state~="active"] {
-  outline: 1px solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
-  outline-offset: 1px;
+  outline: var(--ui-border-width) solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
+  outline-offset: var(--ui-border-width);
 }
 
 .image,

package/vue/UiAvatarGroup.vue

@@ -285,7 +285,7 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
   inline-size: 2.5rem;
   block-size: 2.5rem;
   border-radius: var(--ui-radius-round);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow:

package/vue/UiBadge.vue

@@ -253,7 +253,8 @@ const hostState = computed(() =>
   max-width: 100%;
   padding: var(--ui-badge-padding-block, var(--ui-space-0-5))
     var(--ui-badge-padding-inline, var(--ui-space-2));
-  border: 1px solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
+  border: var(--ui-border-width) solid
+    var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
   border-radius: var(--ui-radius-round);
   background: var(--_badge-outline-surface);
   color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-text)));

package/vue/UiButton.vue

@@ -601,7 +601,7 @@ function attribute(value: unknown): any {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
-  border-width: 1px;
+  border-width: var(--ui-border-width);
   border-color: var(--ui-button-border, var(--_tone));
   border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
   background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
@@ -877,8 +877,8 @@ html[data-ui-input-modality="touch"]
 [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);
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiCallout.vue

@@ -243,9 +243,9 @@ const hostState = computed(() =>
   padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
   padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
   padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
-  border: var(--ui-callout-border-width, 1px) solid
+  border: var(--ui-callout-border-width, var(--ui-border-width)) solid
     color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
-  border-inline-start: var(--ui-callout-leading-border-width, 4px) solid
+  border-inline-start: var(--ui-callout-leading-border-width, var(--ui-accent-line-width)) solid
     var(--ui-callout-border, var(--_callout-border));
   border-radius: var(--ui-radius-md);
   background: var(--ui-callout-surface, var(--_callout-surface));

package/vue/UiCard.d.ts

@@ -15,7 +15,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     padding: {
-        type: PropType<"sm" | "md" | "lg" | null>;
+        type: PropType<"xs" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
+    size: {
+        type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
     };
     tone: {
@@ -32,7 +36,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     padding: {
-        type: PropType<"sm" | "md" | "lg" | null>;
+        type: PropType<"xs" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
+    size: {
+        type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
     };
     tone: {
@@ -44,10 +52,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
+    size: "sm" | "md" | "content" | "lg" | null;
     tone: "neutral" | "danger" | null;
     variant: "subtle" | "outlined" | "elevated" | null;
     as: "div" | "article" | "aside" | "section" | null;
-    padding: "sm" | "md" | "lg" | null;
+    padding: "xs" | "sm" | "md" | "lg" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiCard.vue

@@ -23,10 +23,19 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'padding' },
       description:
-        'The space inside the card: sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).',
-      values: ['sm', 'md', 'lg'],
+        'The space inside the card: xs is compact (0.5rem), sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).',
+      values: ['xs', 'sm', 'md', 'lg'],
       default: 'md',
     },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.',
+      values: ['content', 'sm', 'md', 'lg'],
+      default: 'content',
+    },
     tone: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -52,7 +61,11 @@ const props = defineProps({
     type: null as unknown as PropType<'div' | 'section' | 'article' | 'aside' | null>,
     default: 'div',
   },
-  padding: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
+  padding: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | 'lg' | null>, default: 'md' },
+  size: {
+    type: null as unknown as PropType<'content' | 'sm' | 'md' | 'lg' | null>,
+    default: 'content',
+  },
   tone: { type: null as unknown as PropType<'neutral' | 'danger' | null>, default: 'neutral' },
   variant: {
     type: null as unknown as PropType<'outlined' | 'subtle' | 'elevated' | null>,
@@ -62,6 +75,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   as: 'div',
   padding: 'md',
+  size: 'content',
   tone: 'neutral',
   variant: 'outlined',
 }
@@ -73,13 +87,20 @@ const checkedProps = computed(() => ({
     'as',
     acceptedProps,
   ) as 'div' | 'section' | 'article' | 'aside',
-  padding: checkedProp<'sm' | 'md' | 'lg'>(
+  padding: checkedProp<'xs' | 'sm' | 'md' | 'lg'>(
     props['padding'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'padding',
     acceptedProps,
-  ) as 'sm' | 'md' | 'lg',
+  ) as 'xs' | 'sm' | 'md' | 'lg',
+  size: checkedProp<'content' | 'sm' | 'md' | 'lg'>(
+    props['size'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'size',
+    acceptedProps,
+  ) as 'content' | 'sm' | 'md' | 'lg',
   tone: checkedProp<'neutral' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
@@ -166,6 +187,8 @@ const hostState = computed(() =>
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
     checkedProps.value.tone && 'tone',
     checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
+    checkedProps.value.size && 'size',
+    checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -178,6 +201,7 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
@@ -192,6 +216,7 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
@@ -206,6 +231,7 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
@@ -220,6 +246,7 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
@@ -239,12 +266,16 @@ const hostState = computed(() =>
   box-sizing: border-box;
   min-inline-size: 0;
   padding: var(--ui-space-5);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   background: var(--ui-surface-raised);
   color: var(--ui-text-primary);
 }
 
+[data-component~="ui-card"][data-ui-card-state~="padding=xs"] {
+  gap: var(--ui-space-1);
+  padding: var(--ui-space-2);
+}
 [data-component~="ui-card"][data-ui-card-state~="padding=sm"] {
   gap: var(--ui-space-2);
   padding: var(--ui-space-3);
@@ -266,10 +297,23 @@ const hostState = computed(() =>
 
 [data-component~="ui-card"][data-ui-card-state~="tone=danger"] {
   border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-  border-inline-start: 4px solid var(--ui-danger);
+  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
   background: var(--ui-danger-soft);
 }
 
+[data-component~="ui-card"][data-ui-card-state~="size=sm"] {
+  inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+}
+[data-component~="ui-card"][data-ui-card-state~="size=md"] {
+  inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+}
+[data-component~="ui-card"][data-ui-card-state~="size=lg"] {
+  inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-card"][hidden] {
   display: none;

package/vue/UiCheckbox.vue

@@ -384,7 +384,7 @@ input {
   inline-size: var(--_ui-checkbox-size, 1.125rem);
   block-size: var(--_ui-checkbox-size, 1.125rem);
   margin: 0.125em 0 0;
-  border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
   border-radius: var(--ui-radius-sm);
   background: var(--ui-control-surface, var(--ui-surface-default));
   box-shadow: var(--ui-control-inset);
@@ -461,8 +461,8 @@ input:hover:enabled {
 }
 
 input:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+  outline-offset: var(--ui-focus-width);
 }
 
 [data-component~="ui-checkbox"][data-ui-checkbox-state~="invalid"] input {

package/vue/UiCombobox.vue

@@ -1747,7 +1747,7 @@ label {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
-  border: 1px solid var(--ui-control-border, var(--ui-border-default));
+  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
   border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-control-surface, var(--ui-surface-default));
   box-shadow: var(--ui-control-inset);
@@ -1866,7 +1866,8 @@ button:hover:enabled {
 button:focus-visible {
   outline: none;
   background: var(--ui-surface-muted);
-  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+  box-shadow: inset 0 0 0 var(--ui-focus-width)
+    color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
 input:disabled, button:disabled {
   color: var(--ui-disabled-text);
@@ -1890,7 +1891,7 @@ input:disabled, button:disabled {
   overflow: auto;
   margin: 0;
   padding: var(--ui-space-1);
-  border: 1px solid
+  border: var(--ui-border-width) solid
     var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
   background: var(
@@ -1912,7 +1913,7 @@ input:disabled, button:disabled {
 }
 .primary {
   display: block;
-  color: var(--_ui-combobox-option-text, var(--ui-text-primary));
+  color: var(--_ui-combobox-option-text, inherit);
   font-weight: 500;
 }
 /* A row with a tag or a description: the label and its tag on one line, the description under them. */
@@ -2003,7 +2004,7 @@ input:disabled, button:disabled {
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
   input {
-  min-block-size: calc(var(--_row) - 2px - 2 * var(--ui-space-0-5));
+  min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
   padding: 0 var(--ui-space-1);
 }
 /* A large multiple field starts at the large control height, as sm starts at the small one. */
@@ -2013,7 +2014,9 @@ input:disabled, button:disabled {
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
   input {
-  min-block-size: calc(var(--ui-control-size-lg) - 2px - 2 * var(--ui-space-1));
+  min-block-size: calc(
+    var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1)
+  );
 }
 .item {
   appearance: none;
@@ -2031,8 +2034,8 @@ input:disabled, button:disabled {
   cursor: default;
 }
 .item:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 1px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-border-width);
 }
 .item:disabled {
   color: var(--ui-disabled-text);

package/vue/UiContextMenu.vue

@@ -245,7 +245,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
     --_ui-context-menu-surface,
     var(--ui-overlay-surface, var(--ui-surface-elevated))
   );
-  border: 1px solid
+  border: var(--ui-border-width) solid
     var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   box-shadow: var(
@@ -270,7 +270,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
   block-size: 0;
   margin: var(--ui-space-1) 0;
   border: 0;
-  border-block-start: 1px solid var(--ui-border-divider);
+  border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
 
 .menu:popover-open {