@threadlabs/looma 0.1.23 → 0.1.25

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,47 @@
+: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%;
+}
+
+:host([data-size='sm']) {
+  --ui-chip-font-size: var(--ui-font-size-sm);
+}
+
+.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,67 @@
+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';
+    /** Compact typography size. */
+    size = 'xs';
+    render() {
+        return (h(Host, { key: '970cb48cf8d70c47feaab90fe428c09f0d052a03', "data-appearance": this.appearance, "data-size": this.size }, h("span", { key: '6d8c6104d2869520097a2a61bd2a887b363b4912', class: "chip__surface" }, h("slot", { key: 'b61c50a8060d8a2684aed6f87dc859b1c9e99858' }))));
+    }
+    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'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 'sm'",
+                    "resolved": "\"sm\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Compact typography size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'xs'"
+            }
+        };
+    }
+}

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

@@ -21,6 +21,8 @@ export class UICombobox {
     readOnly = false;
     required = false;
     size = 'md';
+    /** Keep the native label accessible while allowing compact composed controls. */
+    labelVisibility = 'visible';
     disclosure = false;
     clearable = false;
     /** Optional description shown by the connected question-mark button. */
@@ -242,8 +244,9 @@ export class UICombobox {
         }, reason === 'disclosure' ? 0 : Math.max(0, config.debounce ?? 200));
     }
     get canCreate() {
+        const candidates = this.config.options ? [...this.config.options, ...this.rows] : this.rows;
         return Boolean(this.config.allowCreate && this.raw.trim() && !this.loading && !this.lookupError
-            && !this.rows.some(row => row.label.toLocaleLowerCase() === this.raw.toLocaleLowerCase()));
+            && !candidates.some(row => row.label.toLocaleLowerCase() === this.raw.toLocaleLowerCase()));
     }
     format(timing) {
         if ((this.config.formatOn ?? 'blur') !== timing || !this.input)
@@ -428,19 +431,24 @@ export class UICombobox {
         catch { /* Aborted work never becomes current field state. */ }
         return this.validation;
     }
+    /** Focus the native editing input from a composed control. */
+    async focusInput() { this.input?.focus(); }
     render() {
         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: 'a33890c2824f29dfea5e22edddca4480a6d1d032', "data-size": this.size, "data-validation": this.validation.status, onFocusout: this.onFocusOut }, h("label", { key: 'c936530cf696c1d14245fd83895e9c58c908df12', htmlFor: "input", part: "label", class: this.labelVisibility === 'sr-only' ? 'sr-only' : undefined }, this.label, this.required ? ' *' : ''), h("div", { key: '0fe0ed9b15a3e256867e071ca7e4fa3abc66f27c', class: "field", part: "field", ref: element => this.field = element, onClick: event => {
+                if (!event.composedPath().some(node => node instanceof HTMLButtonElement))
+                    this.input?.focus();
+            } }, h("slot", { key: '9cc4c22eb7776e415792fbdf3c17c962c7107f70', name: "start" }), h("input", { key: '0898e8ec5af57c7ba8ad227164f7955ef4011729', 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: 'f9a49484ae9bcc4ace72a46d0c59202040ff39d8', 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: '597106eda4dcc68aa9fb2eaa99c1edad0d68a892', id: "help", type: "button", part: "affordance", "aria-label": `Help for ${this.label}`, disabled: this.disabled }, h("span", { key: 'd26085a52b16d65e26dc20ef8afacb5defec5f7b', "aria-hidden": "true" }, "?")), this.disclosure && h("button", { key: '391d1c987eb8e868b2846eafd0627cfc78ab7478', 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: '45678ce468fd7944306d4542e3c6af0fe211af14', "aria-hidden": "true" }, "\u2304"))), this.help && h("ui-tooltip", { key: 'a8dc037639a60aff5a12b4651ffa10fc5ccd33eb', id: "help-text", for: "help", toggleOnClick: true, onOpen: () => this.helpOpen = true, onClose: () => this.helpOpen = false }, this.help), h("div", { key: 'f13fc7a11c3d22995035b6701ea24637a048a5b8', class: "popup", part: "popup", hidden: !this.expanded, ref: element => this.popup = element }, h("div", { key: '9d2bdfcc558f8e7de87f2915ea5607a8f32c1762', 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: '9495fd43a721c84621b8083cb8eac776f843ab59', 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: 'f0407c5622dcf3b325985c136657f8b9ac8a4ab5', 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("slot", { key: 'efcaee3efb029a9e0bb4e033ab61b251331c1c93', name: "footer" })), h("div", { key: 'b44ccb319f94ebc9e6ac3204a8c1771d49485a58', id: "validation", class: "message", part: "validation", hidden: !this.validation.issues.length }, this.validation.issues.map(issue => h("div", null, issue.message))), h("div", { key: 'c3cb51dd4603734af4c7a02d8fe0bb42ac69083a', 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"; }
@@ -698,6 +706,26 @@ export class UICombobox {
                 "attribute": "size",
                 "defaultValue": "'md'"
             },
+            "labelVisibility": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'visible' | 'sr-only'",
+                    "resolved": "\"sr-only\" | \"visible\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keep the native label accessible while allowing compact composed controls."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-visibility",
+                "defaultValue": "'visible'"
+            },
             "disclosure": {
                 "type": "boolean",
                 "mutable": false,
@@ -948,6 +976,23 @@ export class UICombobox {
                     "text": "Validate for submission. Caller submits only non-pending, non-error output.",
                     "tags": []
                 }
+            },
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus the native editing input from a composed control.",
+                    "tags": []
+                }
             }
         };
     }

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: '171e647667bab4a9f905f2b531aa2db182fc426f', "data-open": this.internalOpen ? '' : undefined, "data-focus-trigger": this.internalOpen ? this.focusTrigger : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: 'f1a15e54ab3b14515553e05b4b3cf60ed7a99f8b', name: "trigger" }), h("div", { key: '450aaacf3f75a71ecce86300c0d824452ceec4a0', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: '667003b7c6ab3ccbaa888b25cb87d921036ab827', open: this.internalOpen }, h("slot", { key: 'c0731115bc3dbd02c4125ef8208269dd97e124bf' })))));
     }
     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: '6e12a287866c76305c791c0ae538dcde63da3044', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("dialog", { key: '99ba3815e8a8c70ce50ff08d9a8b162aa9c1011f', ref: (el) => (this.dialogRef = el), open: this.internalOpen, "aria-label": this.accessibleLabel }, h("slot", { key: 'e72b001877d2dfad1bcee9af87167c66d77fc952' }))));
     }
     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: '55f998f8e47ebe01fd5832d6c3dac310dda34b8d' }, h("slot", { key: '0d88728151901e1e412d7f5a3ae78b06aa7548fb' })));
     }
     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-editable/ui-editable.css

@@ -0,0 +1,2 @@
+:host { display: block; min-inline-size: 0; }
+[hidden] { display: none !important; }