@threadlabs/looma 0.1.23 → 0.1.24

package/dist/collection/components/ui-checkbox/ui-checkbox.js

@@ -1,8 +1,10 @@
 import { Host, h } from "@stencil/core";
 import { eventToTrigger, dispatchDetail } from "../../utils/events";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 export class UICheckbox {
     host;
-    checked = false;
+    /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
+    checked;
     defaultChecked = false;
     disabled = false;
     indeterminate = false;
@@ -11,7 +13,8 @@ export class UICheckbox {
     internalChecked = false;
     slotRef;
     syncFromProp() {
-        this.internalChecked = this.checked;
+        if (isControlled(this.checked))
+            this.internalChecked = this.checked;
     }
     syncToInput() {
         const input = this.getInput();
@@ -26,8 +29,7 @@ export class UICheckbox {
         input.value = this.value;
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalChecked = this.internalChecked || this.defaultChecked;
+        this.internalChecked = controlledOrDefault(this.checked, this.defaultChecked);
         this.slotRef?.addEventListener('slotchange', () => this.syncToInput());
         this.syncToInput();
         const input = this.getInput();
@@ -49,16 +51,20 @@ export class UICheckbox {
         const input = e.target;
         if (!input)
             return;
-        this.internalChecked = input.checked;
+        const checked = input.checked;
+        if (!isControlled(this.checked))
+            this.internalChecked = checked;
+        else
+            this.syncToInput();
         this.indeterminate = input.indeterminate;
         dispatchDetail(this.host, 'change', {
-            checked: this.internalChecked,
+            checked,
             value: this.value,
             trigger: eventToTrigger(e),
         });
     };
     render() {
-        return (h(Host, { key: '66b6708ae71c9eca6c03c63891b590bd050c2506', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: 'b5e168a9ff0c6e5e747fff6c6264c59744f10a56', ref: (el) => (this.slotRef = el) })));
+        return (h(Host, { key: 'eb46eb41a5ab871058960bd2aa1163a03144bc0f', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: 'ce18b1f1b63efebf048cd67b87064641cf4d915c', ref: (el) => (this.slotRef = el) })));
     }
     static get is() { return "ui-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -83,16 +89,15 @@ export class UICheckbox {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controlled checked state. Omit it to use defaultChecked and local interaction state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked",
-                "defaultValue": "false"
+                "attribute": "checked"
             },
             "defaultChecked": {
                 "type": "boolean",

package/dist/collection/components/ui-chip/ui-chip.css

@@ -0,0 +1,43 @@
+:host {
+  --ui-chip-surface: var(--ui-surface-subtle);
+  --ui-chip-text: var(--ui-text-secondary);
+  --ui-chip-border: var(--ui-border-default);
+  --ui-chip-font-size: var(--ui-font-size-xs);
+  --ui-chip-font-weight: var(--ui-font-normal);
+  --ui-chip-line-height: var(--ui-line-height-tight);
+  --ui-chip-padding-block: var(--ui-space-0-5);
+  --ui-chip-padding-inline: var(--ui-space-2);
+  --ui-chip-notch: var(--ui-space-1);
+
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.chip__surface {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  padding: var(--ui-chip-padding-block) var(--ui-chip-padding-inline);
+  border: 1px solid var(--ui-chip-border);
+  background: var(--ui-chip-surface);
+  /* The shared light-DOM reset establishes a baseline host color; the chip's
+     semantic text hook must remain authoritative for consumer color systems. */
+  color: var(--ui-chip-text) !important;
+  /* The shared light-DOM reset establishes inherited defaults; this compact
+     metadata primitive owns its own typography contract. */
+  font-family: var(--ui-font-family-sans) !important;
+  font-size: var(--ui-chip-font-size) !important;
+  font-weight: var(--ui-chip-font-weight) !important;
+  line-height: var(--ui-chip-line-height) !important;
+  white-space: nowrap;
+}
+
+:host([data-appearance='pill']) .chip__surface {
+  border-radius: var(--ui-radius-round);
+}
+
+:host([data-appearance='tag']) .chip__surface {
+  border: 0;
+  padding-inline-end: calc(var(--ui-chip-padding-inline) + var(--ui-chip-notch));
+  clip-path: polygon(0 0, calc(100% - var(--ui-chip-notch)) 0, 100% 50%, calc(100% - var(--ui-chip-notch)) 100%, 0 100%);
+}

package/dist/collection/components/ui-chip/ui-chip.js

@@ -0,0 +1,45 @@
+import { Host, h } from "@stencil/core";
+/** A compact, non-interactive metadata label. */
+export class UIChip {
+    /** `tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded. */
+    appearance = 'tag';
+    render() {
+        return (h(Host, { key: 'fe1246a1e698098f0ca9cb04e749d5adf233e50c', "data-appearance": this.appearance }, h("span", { key: 'a17237699b9eb20fb0a084adbd900a3aa9bc12b0', class: "chip__surface" }, h("slot", { key: '7f4e5dcc82d360083d4ded2617fa39a9dc1fd3ef' }))));
+    }
+    static get is() { return "ui-chip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-chip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-chip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'tag' | 'pill'",
+                    "resolved": "\"pill\" | \"tag\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "appearance",
+                "defaultValue": "'tag'"
+            }
+        };
+    }
+}

package/dist/collection/components/ui-combobox/ui-combobox.js

@@ -432,15 +432,15 @@ export class UICombobox {
         const description = [this.helpOpen ? 'help-text' : '', this.validation.issues.length ? 'validation' : ''].filter(Boolean).join(' ') || undefined;
         const status = this.loading ? 'Loading suggestions…' : this.lookupError || (this.expanded ? `${this.rows.length} suggestions available.` : '');
         const groups = [...new Set(this.rows.map(row => row.group ?? ''))];
-        return h(Host, { key: '2378bfd8473852642fef21898f4a756eb3b092ba', "data-size": this.size, "data-validation": this.validation.status, onFocusout: this.onFocusOut }, h("label", { key: '7aba65aeb336d490ddeaf5db9bba9db8ab8b9dbb', htmlFor: "input", part: "label" }, this.label, this.required ? ' *' : ''), h("div", { key: 'ee87156259d0fe1e2e56c4b36667e8daf5e1e2c1', class: "field", part: "field", ref: element => this.field = element }, h("input", { key: '35c5b85ff9a4bcba9bddaf85ff1f118a94aa077b', id: "input", ref: element => this.input = element, role: "combobox", "aria-autocomplete": "list", "aria-expanded": String(this.expanded), "aria-controls": "listbox", "aria-activedescendant": this.expanded && this.active >= 0 ? `option-${this.active}` : undefined, "aria-describedby": description, "aria-invalid": String(this.validation.status === 'error'), "aria-busy": String(this.validation.status === 'pending'), value: this.display, placeholder: this.placeholder, name: this.name || undefined, disabled: this.disabled, readOnly: this.readOnly, required: this.required, autoComplete: "off", part: "input", onInput: this.onInput, onKeyDown: this.onKeydown, onCompositionstart: () => this.composing = true, onCompositionend: () => { this.composing = false; this.onInput(new InputEvent('input')); } }), this.clearable && h("button", { key: '74e4f44836b751ab5e9f794a39b480602e0c106d', type: "button", part: "affordance", "aria-label": `Clear ${this.label}`, disabled: this.disabled || this.readOnly, onClick: () => { this.commit(null, '', null, 'clear', 'pointer'); this.close(); this.input?.focus(); } }, "\u00D7"), this.help && h("button", { key: 'c870ced139fb22baa50a1795ab78f14c38647d34', id: "help", type: "button", part: "affordance", "aria-label": `Help for ${this.label}`, disabled: this.disabled }, h("span", { key: 'ba3dc5128c1941b21b53a5ba78a27017b3df5ec8', "aria-hidden": "true" }, "?")), this.disclosure && h("button", { key: 'eced588e3fa7958dd6185173faaef01219c30243', type: "button", part: "affordance", "aria-label": `Suggestions for ${this.label}`, "aria-controls": "listbox", "aria-expanded": String(this.expanded), disabled: this.disabled || this.readOnly, onClick: () => {
+        return h(Host, { key: 'b485462943bef9e5cb0a4b42f82888024132ab3a', "data-size": this.size, "data-validation": this.validation.status, onFocusout: this.onFocusOut }, h("label", { key: '99db32d80b0a250ff4ebea8481dda94be53df2eb', htmlFor: "input", part: "label" }, this.label, this.required ? ' *' : ''), h("div", { key: '922adddf41c07215d3ec73947e8e3fe801c7ef89', class: "field", part: "field", ref: element => this.field = element }, h("input", { key: '557780297c5afee8112a5085984c5dd4ea1a02be', id: "input", ref: element => this.input = element, role: "combobox", "aria-autocomplete": "list", "aria-expanded": String(this.expanded), "aria-controls": "listbox", "aria-activedescendant": this.expanded && this.active >= 0 ? `option-${this.active}` : undefined, "aria-describedby": description, "aria-invalid": String(this.validation.status === 'error'), "aria-busy": String(this.validation.status === 'pending'), value: this.display, placeholder: this.placeholder, name: this.name || undefined, disabled: this.disabled, readOnly: this.readOnly, required: this.required, autoComplete: "off", part: "input", onInput: this.onInput, onKeyDown: this.onKeydown, onCompositionstart: () => this.composing = true, onCompositionend: () => { this.composing = false; this.onInput(new InputEvent('input')); } }), this.clearable && h("button", { key: 'ab180bacc7f5232eb517b7fed9bee0d62a4b1156', type: "button", part: "affordance", "aria-label": `Clear ${this.label}`, disabled: this.disabled || this.readOnly, onClick: () => { this.commit(null, '', null, 'clear', 'pointer'); this.close(); this.input?.focus(); } }, "\u00D7"), this.help && h("button", { key: 'b4ea9b44c9e22eb9ac259fb67b86368eede2b13f', id: "help", type: "button", part: "affordance", "aria-label": `Help for ${this.label}`, disabled: this.disabled }, h("span", { key: '36222d7a98a4f6abb12f785e9b4f28c2479a4e37', "aria-hidden": "true" }, "?")), this.disclosure && h("button", { key: '1d8757b7c817575b6915d0e8c164e20776df83e5', type: "button", part: "affordance", "aria-label": `Suggestions for ${this.label}`, "aria-controls": "listbox", "aria-expanded": String(this.expanded), disabled: this.disabled || this.readOnly, onClick: () => {
                 if (this.expanded)
                     this.close();
                 else
                     this.open('disclosure');
                 this.input?.focus();
-            } }, h("span", { key: '7cb9f7f2bb15246dcdd2348ea0ca656d1d0c8c33', "aria-hidden": "true" }, "\u2304"))), this.help && h("ui-tooltip", { key: 'b1b5d42ca457f9b951758bb5e816c8dbbcd1087d', id: "help-text", for: "help", toggleOnClick: true, onOpen: () => this.helpOpen = true, onClose: () => this.helpOpen = false }, this.help), h("div", { key: '9eca2df66c72917e6bfda21205c2a4ef97dd91d5', class: "popup", part: "popup", hidden: !this.expanded, ref: element => this.popup = element }, h("div", { key: '641e1f137c9cfef5d08ec99f6178e59487a20bf1', id: "listbox", role: "listbox", "aria-label": `${this.label} suggestions`, "aria-busy": String(this.loading) }, groups.map(group => h("div", { role: group ? 'group' : 'presentation', "aria-label": group || undefined }, group && h("div", { class: "group", part: "group" }, group), this.rows.map((row, index) => (row.group ?? '') !== group ? null : h("div", { id: `option-${index}`, role: "option", "aria-selected": String(this.selected === row.value), "aria-disabled": String(Boolean(row.disabled)), "data-active": this.active === index ? '' : undefined, part: "option", class: "option", onPointerDown: event => event.preventDefault(), onClick: () => this.choose(index, 'pointer') }, h("slot", { name: `option-${row.id}` }, h("span", { class: "primary", part: "option-primary" }, row.label), row.description && h("span", { class: "secondary", part: "option-secondary" }, row.description)))))), this.canCreate && h("div", { key: '38a3aa6b2ffae30e6f81e1f89d10c9966dd31b10', id: `option-${this.rows.length}`, role: "option", "aria-selected": "false", class: "option", part: "option", "data-active": this.active === this.rows.length ? '' : undefined, onPointerDown: event => event.preventDefault(), onClick: () => this.choose(this.rows.length, 'pointer') }, h("slot", { key: 'dd3e895ef363f6d30a0c25e4b5092a8feacc63e5', name: "create" }, "Create \u201C", this.raw, "\u201D"))), this.loading ? h("div", { class: "message" }, h("slot", { name: "loading" }, "Loading suggestions\u2026"))
+            } }, h("span", { key: 'cd2dad7694dc24104521a58d4182d6e866f54095', "aria-hidden": "true" }, "\u2304"))), this.help && h("ui-tooltip", { key: '5e0eecd828a0e82d94b0be5b5f3233cddca4a87b', id: "help-text", for: "help", toggleOnClick: true, onOpen: () => this.helpOpen = true, onClose: () => this.helpOpen = false }, this.help), h("div", { key: '694902d8c8f58664838a943e0e2c14c856be9a08', class: "popup", part: "popup", hidden: !this.expanded, ref: element => this.popup = element }, h("div", { key: '81b18e296151afde18c47492aa997bdd13d553bc', id: "listbox", role: "listbox", "aria-label": `${this.label} suggestions`, "aria-busy": String(this.loading) }, groups.map(group => h("div", { role: group ? 'group' : 'presentation', "aria-label": group || undefined }, group && h("div", { class: "group", part: "group" }, group), this.rows.map((row, index) => (row.group ?? '') !== group ? null : h("div", { id: `option-${index}`, role: "option", "aria-selected": String(this.selected === row.value), "aria-disabled": String(Boolean(row.disabled)), "data-active": this.active === index ? '' : undefined, part: "option", class: "option", onPointerDown: event => event.preventDefault(), onClick: () => this.choose(index, 'pointer') }, h("slot", { name: `option-${row.id}` }, h("span", { class: "primary", part: "option-primary" }, row.label), row.description && h("span", { class: "secondary", part: "option-secondary" }, row.description)))))), this.canCreate && h("div", { key: 'dbf87523b5c6f17aedf15295d9703557f2d31524', id: `option-${this.rows.length}`, role: "option", "aria-selected": "false", class: "option", part: "option", "data-active": this.active === this.rows.length ? '' : undefined, onPointerDown: event => event.preventDefault(), onClick: () => this.choose(this.rows.length, 'pointer') }, h("slot", { key: 'bd4bdd2b132de7f72c1e5450fb0c0d16254aeedb', name: "create" }, "Create \u201C", this.raw, "\u201D"))), this.loading ? h("div", { class: "message" }, h("slot", { name: "loading" }, "Loading suggestions\u2026"))
             : this.lookupError ? h("div", { class: "message" }, h("slot", { name: "error" }, this.lookupError))
-                : !this.rows.length && !this.canCreate ? h("div", { class: "message" }, h("slot", { name: "empty" }, "No suggestions.")) : null), h("div", { key: '9cf12a8fde7d9cfb9e2d2a77669ac4708c7fded6', id: "validation", class: "message", part: "validation", hidden: !this.validation.issues.length }, this.validation.issues.map(issue => h("div", null, issue.message))), h("div", { key: '1c7b1d3f658e500cbf5f5004a76a39511cc79c49', class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, status, " ", this.validation.status === 'pending' ? 'Checking value…' : this.validation.issues.map(issue => issue.message).join(' ')));
+                : !this.rows.length && !this.canCreate ? h("div", { class: "message" }, h("slot", { name: "empty" }, "No suggestions.")) : null), h("div", { key: '0d39fb1acb6d65307fabc3f502785a19710dc4af', id: "validation", class: "message", part: "validation", hidden: !this.validation.issues.length }, this.validation.issues.map(issue => h("div", null, issue.message))), h("div", { key: 'a83334d72b90ca0f411e6161a8bf5e2e8c2e33a8', class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, status, " ", this.validation.status === 'pending' ? 'Checking value…' : this.validation.issues.map(issue => issue.message).join(' ')));
     }
     static get is() { return "ui-combobox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-context-menu/ui-context-menu.js

@@ -212,7 +212,7 @@ export class UIContextMenu {
         this.closeMenu('action', 'pointer');
     };
     render() {
-        return (h(Host, { key: '641dd3aba6120cf4187f4503c64029eaf307dc4f', "data-open": this.internalOpen ? '' : undefined, "data-focus-trigger": this.internalOpen ? this.focusTrigger : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: '3f550349f9537b951b50a8c291f1951dd5a3b723', name: "trigger" }), h("div", { key: 'a612523f054986122638722340d8135c44a85399', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: '0711879d09900183e938d8942abb8b9032812a5f', open: this.internalOpen }, h("slot", { key: '8e088dd20a48d8fb81126f2dd020abb886e86e22' })))));
+        return (h(Host, { key: '5d927f41a72e680ad6d6d4a3fa0c913360cb8660', "data-open": this.internalOpen ? '' : undefined, "data-focus-trigger": this.internalOpen ? this.focusTrigger : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: 'e5b1ec05d96093671fb839e3b81ddefb730575e1', name: "trigger" }), h("div", { key: 'a0c4a8ca50bcca2b7d3ee53b4c26db054af93151', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: 'ac03b9dc3fa56d0cbb28115060726de4500a668b', open: this.internalOpen }, h("slot", { key: 'f2d8484cb9fb3956a3a5979795633a74d423577d' })))));
     }
     static get is() { return "ui-context-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-dialog/ui-dialog.js

@@ -1,19 +1,30 @@
 import { Host, h } from "@stencil/core";
 import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
 import { dispatchDetail } from "../../utils/events";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 export class UIDialog {
     host;
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     modal = true;
     dismissible = true;
     /** Accessible name forwarded to the native dialog surface. */
     label;
     internalOpen = false;
+    accessibleLabel = 'Dialog';
     overlayId = `ui-dialog-${Math.random().toString(36).slice(2, 11)}`;
     dialogRef;
+    contentObserver = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (isControlled(this.open))
+            this.internalOpen = this.open;
+    }
+    syncLabelFromProp() {
+        this.syncAccessibleLabel();
+    }
+    componentWillLoad() {
+        this.syncAccessibleLabel();
     }
     syncOpen() {
         if (this.dialogRef) {
@@ -34,20 +45,29 @@ export class UIDialog {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.contentObserver = new MutationObserver(this.syncAccessibleLabel);
+        this.contentObserver.observe(this.host, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+        });
+        this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
         this.dialogRef?.addEventListener('close', this.onDialogClose);
+        this.syncAccessibleLabel();
         this.syncOpen();
     }
     disconnectedCallback() {
         this.dialogRef?.removeEventListener('close', this.onDialogClose);
+        this.contentObserver?.disconnect();
+        this.contentObserver = null;
         closeOverlay(this.overlayId);
     }
     componentDidUpdate() {
         this.syncOpen();
     }
     handleRequestClose(reason, trigger) {
-        this.internalOpen = false;
+        if (!isControlled(this.open))
+            this.internalOpen = false;
         dispatchDetail(this.host, 'close', {
             open: false,
             reason: reason,
@@ -56,8 +76,13 @@ export class UIDialog {
     }
     onDialogClose = () => {
         if (this.internalOpen) {
-            this.internalOpen = false;
-            closeOverlay(this.overlayId);
+            if (!isControlled(this.open)) {
+                this.internalOpen = false;
+                closeOverlay(this.overlayId);
+            }
+            else {
+                requestAnimationFrame(() => this.syncOpen());
+            }
             dispatchDetail(this.host, 'close', {
                 open: false,
                 reason: 'programmatic',
@@ -70,8 +95,16 @@ export class UIDialog {
             requestTopOverlayClose('escape', 'keyboard');
         }
     };
+    syncAccessibleLabel = () => {
+        const explicitLabel = this.label?.trim();
+        const heading = this.host.querySelector('[slot="heading"], [data-ui-dialog-title], h1, h2, h3, h4, h5, h6');
+        const headingLabel = heading?.textContent?.trim();
+        const nextLabel = explicitLabel || headingLabel || 'Dialog';
+        if (this.accessibleLabel !== nextLabel)
+            this.accessibleLabel = nextLabel;
+    };
     render() {
-        return (h(Host, { key: '6e88afd3a595ab0eed3d82a046ffb15e1e167cdb', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("dialog", { key: '420e4d8de66245a5818a1284adb23a536ebcd907', ref: (el) => (this.dialogRef = el), open: this.internalOpen, "aria-label": this.label }, h("slot", { key: '10604688504f013f79b7a6ed5f9ed36bc9c6b48b' }))));
+        return (h(Host, { key: 'b7aa33e24a74527a58718b3fa2218f5a09e9e439', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("dialog", { key: 'f24455edc404581b5040c9c0090bf64141f9e296', ref: (el) => (this.dialogRef = el), open: this.internalOpen, "aria-label": this.accessibleLabel }, h("slot", { key: 'bad318e44b9c80dc0aae04ea5cdbb7b2ab472c35' }))));
     }
     static get is() { return "ui-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -96,16 +129,15 @@ export class UIDialog {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controlled open state. Omit it to use defaultOpen and local interaction state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "open",
-                "defaultValue": "false"
+                "attribute": "open"
             },
             "defaultOpen": {
                 "type": "boolean",
@@ -190,7 +222,8 @@ export class UIDialog {
     }
     static get states() {
         return {
-            "internalOpen": {}
+            "internalOpen": {},
+            "accessibleLabel": {}
         };
     }
     static get elementRef() { return "host"; }
@@ -198,6 +231,9 @@ export class UIDialog {
         return [{
                 "propName": "open",
                 "methodName": "syncFromProp"
+            }, {
+                "propName": "label",
+                "methodName": "syncLabelFromProp"
             }, {
                 "propName": "internalOpen",
                 "methodName": "syncOpen"

package/dist/collection/components/ui-disclosure/ui-disclosure.js

@@ -1,9 +1,11 @@
 import { Host, h } from "@stencil/core";
 import { createId } from "../../utils/id";
 import { eventToTrigger, isActivationKey, dispatchDetail } from "../../utils/events";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 export class UIDisclosure {
     host;
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     disabled = false;
     internalOpen = false;
@@ -11,7 +13,8 @@ export class UIDisclosure {
     trigger = null;
     content = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (isControlled(this.open))
+            this.internalOpen = this.open;
     }
     syncState() {
         if (this.trigger) {
@@ -23,8 +26,7 @@ export class UIDisclosure {
     }
     componentDidLoad() {
         this.resolveParts();
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
         this.syncState();
         this.trigger?.addEventListener('click', this.onTriggerClick);
         this.trigger?.addEventListener('keydown', this.onTriggerKeydown);
@@ -64,7 +66,8 @@ export class UIDisclosure {
     setOpen(next, action) {
         if (this.internalOpen === next)
             return;
-        this.internalOpen = next;
+        if (!isControlled(this.open))
+            this.internalOpen = next;
         dispatchDetail(this.host, next ? 'open' : 'close', {
             open: next,
             reason: action.reason,
@@ -85,7 +88,7 @@ export class UIDisclosure {
         this.setOpen(!this.internalOpen, { reason: 'action', trigger: 'keyboard' });
     };
     render() {
-        return (h(Host, { key: '3905d2d78a2d3d4ef36b582ba0f426be8e5e0f5e' }, h("slot", { key: '18547ff56457b73319264bba981f994fb947dffb' })));
+        return (h(Host, { key: '55a6fd71965104b96b55fd53870becce748a4116' }, h("slot", { key: '542727e10d335ff44fc7cf8250e80f045f89b8f2' })));
     }
     static get is() { return "ui-disclosure"; }
     static get encapsulation() { return "shadow"; }
@@ -110,16 +113,15 @@ export class UIDisclosure {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controlled open state. Omit it to use defaultOpen and local interaction state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "open",
-                "defaultValue": "false"
+                "attribute": "open"
             },
             "defaultOpen": {
                 "type": "boolean",

package/dist/collection/components/ui-floating-action-button/ui-floating-action-button.js

@@ -4,7 +4,7 @@ export class UIFloatingActionButton {
     mobileOnly = false;
     label = '';
     render() {
-        return (h(Host, { key: 'c9a7d8c9b6d6608566b21621a73d939f372c830d', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: '8eddccaf6be2f028bc02df967038843120045b84', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '0ea12efb9cb8ecec06238066827a734fb3b01e1e' }))));
+        return (h(Host, { key: 'b41f0aaabbcd23cb79ac06245e69fd8ecb9c9912', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: '36a023bd66d38845f1116874380d7a28bb46b5a2', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '412c41e4732cc230f84e7758bfc7faab7e0802e2' }))));
     }
     static get is() { return "ui-floating-action-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-form-field/ui-form-field.js

@@ -5,17 +5,62 @@ export class UIFormField {
     invalid = false;
     disabled = false;
     required = false;
+    observer = null;
+    activeInput = null;
+    ownedDescriptionIds = new Set();
+    wireQueued = false;
     componentDidLoad() {
+        this.observer = new MutationObserver(this.scheduleWire);
+        this.observer.observe(this.host, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['aria-describedby', 'data-slot', 'id', 'role'],
+        });
         this.wire();
     }
     componentDidUpdate() {
-        this.wire();
+        this.scheduleWire();
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+        this.observer = null;
+        this.removeOwnedDescriptions(this.activeInput);
+        this.activeInput = null;
+        this.ownedDescriptionIds.clear();
     }
+    descriptionIds(input) {
+        return Array.from(new Set((input.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean)));
+    }
+    removeOwnedDescriptions(input) {
+        if (!input || this.ownedDescriptionIds.size === 0)
+            return;
+        const remaining = this.descriptionIds(input)
+            .filter(id => !this.ownedDescriptionIds.has(id));
+        if (remaining.length > 0)
+            input.setAttribute('aria-describedby', remaining.join(' '));
+        else
+            input.removeAttribute('aria-describedby');
+    }
+    scheduleWire = () => {
+        if (this.wireQueued)
+            return;
+        this.wireQueued = true;
+        queueMicrotask(() => {
+            this.wireQueued = false;
+            this.wire();
+        });
+    };
     wire() {
         const label = this.host.querySelector('label');
         const input = this.host.querySelector('input, textarea, select');
         const help = this.host.querySelector('[data-slot="help"]');
         const error = this.host.querySelector('[data-slot="error"], [role="alert"]');
+        if (input !== this.activeInput) {
+            this.removeOwnedDescriptions(this.activeInput);
+            this.activeInput = input;
+            this.ownedDescriptionIds.clear();
+        }
         if (!input)
             return;
         if (!input.id) {
@@ -24,6 +69,9 @@ export class UIFormField {
         if (label && !label.getAttribute('for')) {
             label.setAttribute('for', input.id);
         }
+        const previousOwnedIds = this.ownedDescriptionIds;
+        const externalIds = this.descriptionIds(input)
+            .filter(id => !previousOwnedIds.has(id));
         const describedIds = [];
         if (help) {
             if (!help.id)
@@ -35,15 +83,22 @@ export class UIFormField {
                 error.id = createId('form-field-error');
             describedIds.push(error.id);
         }
-        if (describedIds.length) {
-            input.setAttribute('aria-describedby', describedIds.join(' '));
+        const nextOwnedIds = describedIds.filter(id => !externalIds.includes(id));
+        const nextDescribedIds = Array.from(new Set([...externalIds, ...describedIds]));
+        const nextDescribedBy = nextDescribedIds.join(' ');
+        if (input.getAttribute('aria-describedby') !== nextDescribedBy) {
+            if (nextDescribedBy)
+                input.setAttribute('aria-describedby', nextDescribedBy);
+            else
+                input.removeAttribute('aria-describedby');
         }
+        this.ownedDescriptionIds = new Set(nextOwnedIds);
         input.disabled = this.disabled;
         input.required = this.required;
         input.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
     }
     render() {
-        return (h(Host, { key: 'cdd06c6b16ac56f3547e64e7888d8766243392db', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: '7d545673a3485f8beee01b13ab56185b98ba8856' })));
+        return (h(Host, { key: '0b8fd5608631b5f9159fdf99d6eba918cc6587e4', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: '4ed78782bcc8b6699a40d8402994b486d71d730a', onSlotchange: this.scheduleWire })));
     }
     static get is() { return "ui-form-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-icon-button/ui-icon-button.js

@@ -7,7 +7,7 @@ export class UIIconButton {
     /** Reveals this control through a surrounding ui-affordance-scope. */
     anticipatory = false;
     render() {
-        return (h(Host, { key: '8616d7e52a03a7a42738b11f4cabed3eb38c8640', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, h("button", { key: 'fae1362a50a0d80e2fcb3ab41f63ff21cf5d939a', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: 'e548fc504e3b26e85263fe3fc8faac0887fee16b' }))));
+        return (h(Host, { key: 'fb4534d977b4812f402855f78176b8316ebace61', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, h("button", { key: 'b90d290870ad76ba18de88a6b6947a15040ff12a', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '88ded6ad90a4cfeffcd687990e5ba8b0c7d3bd30' }))));
     }
     static get is() { return "ui-icon-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-input/ui-input.js

@@ -70,7 +70,7 @@ export class UIInput {
         });
     };
     render() {
-        return (h(Host, { key: 'a2f2c108144a7acae0dfb1bef6ea1f38a4dcca9c', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '04284765a12089a8a1045056d72551a3494f00fc', ref: (el) => (this.slotRef = el) })));
+        return (h(Host, { key: 'fe125b4e8ec35e9ac0b0ca0434aa8439f515c51b', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'ec0609f9143435cf0436abb98488b9f30b71530b', ref: (el) => (this.slotRef = el) })));
     }
     static get is() { return "ui-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-menu/ui-menu.css

@@ -2,14 +2,25 @@
   --ui-menu-viewport-gap: var(--ui-space-2, 0.5rem);
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   inline-size: max-content;
   min-inline-size: min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));
   max-inline-size: calc(100vw - (var(--ui-menu-viewport-gap) * 2));
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: var(--ui-shadow-lg);
+}
+
+.menu__surface {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
   padding: var(--ui-space-1);
   background: var(--ui-surface-elevated);
   border: 1px solid var(--ui-border-default);
   border-radius: var(--ui-radius-3);
-  box-shadow: var(--ui-shadow-lg);
 }
 
 :host(:not([data-open])) {
@@ -54,26 +65,4 @@
 ::slotted(ui-menu-item) {
   display: block;
   width: 100%;
-  padding: var(--ui-space-2) var(--ui-space-3);
-  text-align: left;
-  background: none;
-  border: none;
-  border-radius: var(--ui-radius-2);
-  color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-md);
-  font-weight: var(--ui-font-medium, 500);
-  cursor: pointer;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
-::slotted(ui-menu-item:hover:not([aria-disabled='true']):not([disabled])) {
-  background: var(--ui-surface-subtle);
-}
-
-::slotted(ui-menu-item[aria-disabled='true']),
-::slotted(ui-menu-item[disabled]) {
-  opacity: 0.6;
-  cursor: not-allowed;
 }