@threadlabs/looma 0.16.2 → 0.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-button.css

@@ -67,6 +67,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-button-white-space {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-button"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
@@ -112,6 +116,8 @@
       font: inherit;
       font-weight: var(--ui-font-medium);
       text-decoration: none;
+      /* Unset, a button wraps as its container does. */
+      white-space: var(--ui-button-white-space, inherit);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
       background-image: var(--ui-raised-highlight);

package/styles/ui-form-field.css

@@ -3,10 +3,30 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-form-field-help-font-size {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-form-field-help-min-block-size {
       syntax: "*";
       inherits: false;
     }
+@property --ui-form-field-help-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-form-field-label-font-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-form-field-label-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-form-field-min-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-form-field"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
@@ -14,10 +34,14 @@
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-form-field-danger: var(--ui-form-field-danger);
       --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
+      --_ui-form-field-label-text: var(--ui-form-field-label-text);
+      --_ui-form-field-label-font-size: var(--ui-form-field-label-font-size);
+      --_ui-form-field-help-text: var(--ui-form-field-help-text);
+      --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
 
       display: grid;
       gap: var(--ui-space-2);
-      min-inline-size: 0;
+      min-inline-size: var(--ui-form-field-min-inline-size, 0);
       align-content: start;
       color: var(--ui-text-primary);
     }
@@ -31,8 +55,8 @@
     }
 
     .label {
-      color: var(--ui-text-secondary);
-      font-size: var(--ui-font-size-sm);
+      color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
+      font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
     }
 
     /* A label action, such as a small help button, sits after the label text in a box one line
@@ -55,8 +79,8 @@
     }
 
     .help {
-      color: var(--ui-text-muted);
-      font-size: var(--ui-font-size-sm);
+      color: var(--_ui-form-field-help-text, var(--ui-text-muted));
+      font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
       line-height: var(--ui-line-height-md);
     }
 

package/styles/ui-input.css

@@ -23,6 +23,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-input-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-input-invalid-border {
       syntax: "*";
       inherits: false;
@@ -54,7 +58,7 @@
     :scope {
       box-sizing: border-box;
       display: inline-block;
-      inline-size: 100%;
+      inline-size: var(--ui-input-inline-size, 100%);
       min-inline-size: 0;
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-md)));
       margin: 0;

package/styles/ui-nav-item.css

@@ -11,6 +11,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-nav-item-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-nav-item"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
@@ -26,7 +30,7 @@
       display: flex;
       align-items: center;
       gap: var(--ui-space-3);
-      inline-size: 100%;
+      inline-size: var(--ui-nav-item-inline-size, 100%);
       min-inline-size: 0;
       min-block-size: var(--ui-control-size, 2.5rem);
       margin: 0;

package/styles/ui-select.css

@@ -1,8 +1,24 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-select-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-select-border-hover {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-select-focus-border {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-select-focus-shadow {
       syntax: "*";
       inherits: false;
     }
+@property --ui-select-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-select-invalid-border {
       syntax: "*";
       inherits: false;
@@ -19,20 +35,24 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-select-surface {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-select"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
     :scope {
       box-sizing: border-box;
       display: inline-block;
-      inline-size: 100%;
+      inline-size: var(--ui-select-inline-size, 100%);
       min-inline-size: 0;
       min-block-size: var(--ui-control-size-md);
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
-      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border: 1px solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
-      background-color: var(--ui-control-surface, var(--ui-surface-elevated));
+      background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
       color-scheme: light dark;
       font: inherit;
@@ -59,11 +79,11 @@
     }
 
     :scope:hover:not(:focus):not(:disabled) {
-      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+      border-color: var(--ui-select-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }
 
     :scope:focus-visible {
-      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      border-color: var(--ui-select-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
       outline: none;
       box-shadow: var(--ui-select-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
     }

package/styles/ui-text.css

@@ -1,7 +1,8 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
 @scope ([data-component~="ui-text"]) to ([data-component], [data-slotted]) {
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
-       text of its own. The root is a paragraph unless as= names a span, div, small, strong, or label. */
+       text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
+       heading. */
     :scope {
       margin: 0;
       min-inline-size: 0;
@@ -9,6 +10,13 @@
       text-align: start;
     }
 
+    /* A heading drops the browser's heading size and weight, so size and weight set it as they set
+       any text, and inherit keeps the text around it. */
+    :scope:is(h2, h3, h4, h5, h6) {
+      font-size: inherit;
+      font-weight: inherit;
+    }
+
     :scope[data-ui-text-state~="size=xs"] {
       font-size: var(--ui-font-size-xs);
       line-height: var(--ui-line-height);
@@ -90,7 +98,11 @@
 }
 @scope ([data-component~="ui-text"]) to ([data-component]) {
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
-       text of its own. The root is a paragraph unless as= names a span, div, small, strong, or label. */
+       text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
+       heading. */
+
+    /* A heading drops the browser's heading size and weight, so size and weight set it as they set
+       any text, and inherit keeps the text around it. */
     /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
        in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
 

package/vanilla/UiInput.d.ts

@@ -11,7 +11,7 @@ export interface UiInputProps {
   readonly?: boolean | null;
   required?: boolean | null;
   size?: "sm" | "md" | "lg" | null;
-  value?: string | null;
+  value?: string | number | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiInput.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-input/ui-input.js";
 import "../styles/ui-input.css";
 
-const definition = {...{"contract":{"tag":"ui-input","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"input","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[]},"declarations":[],"root":{"kind":"native","element":"input","choices":["input"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-input","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":{"kind":"union","members":[{"kind":"terminal","name":"string"},{"kind":"terminal","name":"number"}]},"required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"input","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[]},"declarations":[],"root":{"kind":"native","element":"input","choices":["input"]}},source:{file:import.meta.url},css:""};
 
 export function createUiInput(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiText.d.ts

@@ -7,7 +7,7 @@ export interface UiTextElement extends HTMLElement {
 }
 export interface UiTextProps {
   align?: "start" | "center" | null;
-  as?: "p" | "span" | "div" | "small" | "strong" | "label" | null;
+  as?: "p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6" | null;
   size?: "inherit" | "xs" | "sm" | "md" | "lg" | null;
   tone?: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null;
   truncate?: boolean | null;

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":{"enum":["start","center"]},"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"enum":["p","span","div","small","strong","label"]},"required":false,"target":{"attribute":"as"},"default":"p"},"size":{"type":{"enum":["inherit","xs","sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"enum":["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":{"enum":["body","eyebrow","code"]},"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"enum":["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":"p","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"p","choices":["span","div","small","strong","label","p"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-text","props":{"align":{"type":{"enum":["start","center"]},"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"enum":["p","span","div","small","strong","label","h2","h3","h4","h5","h6"]},"required":false,"target":{"attribute":"as"},"default":"p"},"size":{"type":{"enum":["inherit","xs","sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"enum":["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":{"enum":["body","eyebrow","code"]},"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"enum":["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:""};
 
 export function createUiText(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -84,6 +84,81 @@ export function createUiText(options = {}) {
       }
     } else {
     }
+  } else if (root === 5) {
+    element = document.createElement("h2");
+    for (const [name, value] of Object.entries(attributes)) {
+      if (value === null || value === undefined || value === false) continue;
+      element.setAttribute(name, value === true ? "" : String(value));
+    }
+    element.setAttribute("data-component", "ui-text");
+    if (children.length > 0) {
+      for (const child of children) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        projected.push([node, ""]);
+        element.append(node);
+      }
+    } else {
+    }
+  } else if (root === 6) {
+    element = document.createElement("h3");
+    for (const [name, value] of Object.entries(attributes)) {
+      if (value === null || value === undefined || value === false) continue;
+      element.setAttribute(name, value === true ? "" : String(value));
+    }
+    element.setAttribute("data-component", "ui-text");
+    if (children.length > 0) {
+      for (const child of children) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        projected.push([node, ""]);
+        element.append(node);
+      }
+    } else {
+    }
+  } else if (root === 7) {
+    element = document.createElement("h4");
+    for (const [name, value] of Object.entries(attributes)) {
+      if (value === null || value === undefined || value === false) continue;
+      element.setAttribute(name, value === true ? "" : String(value));
+    }
+    element.setAttribute("data-component", "ui-text");
+    if (children.length > 0) {
+      for (const child of children) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        projected.push([node, ""]);
+        element.append(node);
+      }
+    } else {
+    }
+  } else if (root === 8) {
+    element = document.createElement("h5");
+    for (const [name, value] of Object.entries(attributes)) {
+      if (value === null || value === undefined || value === false) continue;
+      element.setAttribute(name, value === true ? "" : String(value));
+    }
+    element.setAttribute("data-component", "ui-text");
+    if (children.length > 0) {
+      for (const child of children) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        projected.push([node, ""]);
+        element.append(node);
+      }
+    } else {
+    }
+  } else if (root === 9) {
+    element = document.createElement("h6");
+    for (const [name, value] of Object.entries(attributes)) {
+      if (value === null || value === undefined || value === false) continue;
+      element.setAttribute(name, value === true ? "" : String(value));
+    }
+    element.setAttribute("data-component", "ui-text");
+    if (children.length > 0) {
+      for (const child of children) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        projected.push([node, ""]);
+        element.append(node);
+      }
+    } else {
+    }
   } else {
     element = document.createElement("p");
     for (const [name, value] of Object.entries(attributes)) {

package/vue/UiButton.vue

@@ -176,6 +176,10 @@ function attribute(value: unknown): any {
   syntax: "*";
   inherits: false;
 }
+@property --ui-button-white-space {
+  syntax: "*";
+  inherits: false;
+}
 
 [data-component~="ui-button"] {
   --_hue: var(--ui-accent);
@@ -219,6 +223,8 @@ function attribute(value: unknown): any {
   font: inherit;
   font-weight: var(--ui-font-medium);
   text-decoration: none;
+  /* Unset, a button wraps as its container does. */
+  white-space: var(--ui-button-white-space, inherit);
   line-height: var(--ui-line-height-tight);
   padding: var(--ui-space-2) var(--ui-space-3);
   background-image: var(--ui-raised-highlight);

package/vue/UiFormField.vue

@@ -60,19 +60,43 @@ useComponentHost(controllerModule.default, {
   syntax: "*";
   inherits: false;
 }
+@property --ui-form-field-help-font-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-form-field-help-min-block-size {
   syntax: "*";
   inherits: false;
 }
+@property --ui-form-field-help-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-form-field-label-font-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-form-field-label-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-form-field-min-inline-size {
+  syntax: "*";
+  inherits: false;
+}
 
 [data-component~="ui-form-field"] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-form-field-danger: var(--ui-form-field-danger);
   --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
+  --_ui-form-field-label-text: var(--ui-form-field-label-text);
+  --_ui-form-field-label-font-size: var(--ui-form-field-label-font-size);
+  --_ui-form-field-help-text: var(--ui-form-field-help-text);
+  --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
 
   display: grid;
   gap: var(--ui-space-2);
-  min-inline-size: 0;
+  min-inline-size: var(--ui-form-field-min-inline-size, 0);
   align-content: start;
   color: var(--ui-text-primary);
 }
@@ -86,8 +110,8 @@ useComponentHost(controllerModule.default, {
 }
 
 .label {
-  color: var(--ui-text-secondary);
-  font-size: var(--ui-font-size-sm);
+  color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
+  font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
 }
 
 /* A label action, such as a small help button, sits after the label text in a box one line
@@ -110,8 +134,8 @@ useComponentHost(controllerModule.default, {
 }
 
 .help {
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-sm);
+  color: var(--_ui-form-field-help-text, var(--ui-text-muted));
+  font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
   line-height: var(--ui-line-height-md);
 }
 

package/vue/UiInput.d.ts

@@ -4,8 +4,8 @@ type __VLS_Props = {
     readonly?: boolean;
     required?: boolean;
     size?: 'sm' | 'md' | 'lg';
-    value?: string;
-    modelValue?: string | null;
+    value?: string | number;
+    modelValue?: string | number | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/vue/UiInput.vue

@@ -13,8 +13,8 @@ const props = withDefaults(
     readonly?: boolean
     required?: boolean
     size?: 'sm' | 'md' | 'lg'
-    value?: string
-    modelValue?: string | null
+    value?: string | number
+    modelValue?: string | number | null
   }>(),
   {
     disabled: false,
@@ -91,6 +91,10 @@ useComponentHost(controllerModule.default, {
   syntax: "*";
   inherits: false;
 }
+@property --ui-input-inline-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-input-invalid-border {
   syntax: "*";
   inherits: false;
@@ -119,7 +123,7 @@ useComponentHost(controllerModule.default, {
 [data-component~="ui-input"] {
   box-sizing: border-box;
   display: inline-block;
-  inline-size: 100%;
+  inline-size: var(--ui-input-inline-size, 100%);
   min-inline-size: 0;
   min-block-size: var(
     --ui-input-min-block-size,

package/vue/UiNavItem.vue

@@ -87,6 +87,10 @@ function attribute(value: unknown): any {
   syntax: "*";
   inherits: false;
 }
+@property --ui-nav-item-inline-size {
+  syntax: "*";
+  inherits: false;
+}
 
 /* One destination in a side or rail navigation: an icon to find it by (leading), its name (the
    default slot), and an optional line under it (description), such as the record a section
@@ -100,7 +104,7 @@ function attribute(value: unknown): any {
   display: flex;
   align-items: center;
   gap: var(--ui-space-3);
-  inline-size: 100%;
+  inline-size: var(--ui-nav-item-inline-size, 100%);
   min-inline-size: 0;
   min-block-size: var(--ui-control-size, 2.5rem);
   margin: 0;

package/vue/UiSelect.vue

@@ -65,10 +65,26 @@ useComponentHost(controllerModule.default, {
 
 <style scoped>
 /* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-select-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-select-border-hover {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-select-focus-border {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-select-focus-shadow {
   syntax: "*";
   inherits: false;
 }
+@property --ui-select-inline-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-select-invalid-border {
   syntax: "*";
   inherits: false;
@@ -85,18 +101,22 @@ useComponentHost(controllerModule.default, {
   syntax: "*";
   inherits: false;
 }
+@property --ui-select-surface {
+  syntax: "*";
+  inherits: false;
+}
 
 [data-component~="ui-select"] {
   box-sizing: border-box;
   display: inline-block;
-  inline-size: 100%;
+  inline-size: var(--ui-select-inline-size, 100%);
   min-inline-size: 0;
   min-block-size: var(--ui-control-size-md);
   margin: 0;
   padding: var(--ui-space-2) var(--ui-space-3);
-  border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+  border: 1px solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
   border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
-  background-color: var(--ui-control-surface, var(--ui-surface-elevated));
+  background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
   color: var(--ui-text-primary);
   color-scheme: light dark;
   font: inherit;
@@ -123,11 +143,14 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-select"]:hover:not(:focus):not(:disabled) {
-  border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+  border-color: var(
+    --ui-select-border-hover,
+    var(--ui-control-border-hover, var(--ui-text-secondary))
+  );
 }
 
 [data-component~="ui-select"]:focus-visible {
-  border-color: var(--ui-control-focus, var(--ui-accent-solid));
+  border-color: var(--ui-select-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
   outline: none;
   box-shadow: var(
     --ui-select-focus-shadow,