@threadlabs/looma 0.1.22 → 0.1.24

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: '4db0d5b55ead41925aa682b1e383b5735b49bf56', "data-open": this.internalOpen ? '' : undefined, "data-focus-trigger": this.internalOpen ? this.focusTrigger : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: '462925d53db169c13e485789ae91e28b0abd3e40', name: "trigger" }), h("div", { key: 'cac8f3b11c4872d38e976f210ce9a43fd854b335', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: 'ba50f74e11466da2240f7568479d5d10a614b394', open: this.internalOpen }, h("slot", { key: '1fcb45bf124e2377ac6c7fc236d2babf0d9e3bae' })))));
+        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: 'c10f9063a1c2677caff3b8d1f26b37bf25978a77', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("dialog", { key: 'a7111bd363cab94f394cca526bf34ea8081e5228', ref: (el) => (this.dialogRef = el), open: this.internalOpen, "aria-label": this.label }, h("slot", { key: 'b0a9699fe0be09e331cfea81b6bbeaec11d48956' }))));
+        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: '7fbc83614f8e988a43d1baac0379a6dc8826b1d5' }, h("slot", { key: '6ef33ca7bce5c4d83ab65642f52a9d17febb794d' })));
+        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: '6f67f3967cf8883005f6c56747db515db5ebe1d0', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: 'deebb9261221c144b30bc3e41790158fc339cd14', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '3b045b69a4508c84dd5b7c8b3df0e6f3eded1c13' }))));
+        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.css

@@ -1,6 +1,8 @@
 :host {
   display: grid;
   gap: var(--ui-space-2);
+  min-inline-size: 0;
+  align-content: start;
   color: var(--ui-text-primary);
 }
 
@@ -10,8 +12,10 @@
 }
 
 ::slotted([data-slot='help']) {
+  min-block-size: var(--ui-form-field-help-min-block-size, 0);
   color: var(--ui-text-muted);
   font-size: 0.875rem;
+  line-height: var(--ui-line-height-md);
 }
 
 ::slotted([data-slot='error']),

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: 'c0a01ac28a7dd0e0b285e4b9f9763ef536a83a2e', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: 'b09be4482299d866a0651393e269299dedb0cbf4' })));
+        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: 'dd6149d96d534a641eedaf808df5348eef48f31f', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, h("button", { key: '3e1b83a3e01b724cb75ddb7243a1e85bd9eb3420', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: 'd280293841471ad37f556c73d86de3223e1f98e6' }))));
+        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.css

@@ -1,14 +1,16 @@
 :host {
   display: inline-flex;
+  min-inline-size: 0;
   color: var(--ui-text-primary);
 }
 
 ::slotted(input) {
   width: 100%;
   appearance: none;
-  border: 1px solid var(--ui-border-default);
+  min-block-size: var(--ui-control-min-block-size, 2.75rem);
+  border: 1px solid var(--ui-control-border, var(--ui-border-default));
   border-radius: var(--ui-radius-2);
-  background: var(--ui-surface-default);
+  background: var(--ui-control-surface, var(--ui-surface-default));
   color: inherit;
   font: inherit;
   line-height: var(--ui-line-height-md);
@@ -21,12 +23,12 @@
 }
 
 ::slotted(input:hover:not(:focus):not(:disabled)) {
-  border-color: var(--ui-border-strong);
+  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
 }
 
 ::slotted(input:focus) {
-  border-color: var(--ui-focus-ring);
-  box-shadow: 0 0 0 3px var(--ui-accent-soft);
+  border-color: var(--ui-control-focus, var(--ui-focus-ring));
+  box-shadow: 0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft));
 }
 
 :host([data-invalid='true'])::slotted(input),
@@ -35,7 +37,7 @@
 }
 
 ::slotted(input:disabled) {
-  background: var(--ui-surface-muted);
+  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }

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

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 import { eventToTrigger, dispatchDetail } from "../../utils/events";
 export class UIInput {
     host;
-    value = '';
+    value;
     defaultValue = '';
     disabled = false;
     invalid = false;
@@ -10,14 +10,19 @@ export class UIInput {
     internalValue = '';
     slotRef;
     syncFromProp() {
-        this.internalValue = this.value;
+        if (this.value !== undefined)
+            this.internalValue = this.value;
     }
     syncToInput() {
         const input = this.getInput();
         if (!input)
             return;
         this.host.dataset.invalid = this.invalid ? 'true' : '';
-        input.value = this.internalValue;
+        // When the host has no value prop, the slotted native control is
+        // intentionally uncontrolled. Frameworks such as Vue can then own its
+        // value without Looma resetting it during hydration or unrelated updates.
+        if (this.value !== undefined)
+            input.value = this.internalValue;
         input.defaultValue = this.defaultValue;
         input.disabled = this.disabled;
         input.readOnly = this.readOnly;
@@ -65,7 +70,7 @@ export class UIInput {
         });
     };
     render() {
-        return (h(Host, { key: '2b3b4f6862cf5c5e413aaefb349c53d4e66eb6d0', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '140dc656f13399b8ef05adb6cfa1d9a7e1373c2d', 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"; }
@@ -90,7 +95,7 @@ export class UIInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -98,8 +103,7 @@ export class UIInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
+                "attribute": "value"
             },
             "defaultValue": {
                 "type": "string",

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;
 }

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

@@ -2,10 +2,12 @@ import { Host, h } from "@stencil/core";
 import { eventToTrigger } from "../../utils/events";
 import { dispatchDetail } from "../../utils/events";
 import { closeOverlay, openOverlay, requestTopOverlayClose } from "../../overlay/manager";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 import { createAnchoredSurface, } from "../../overlay/positioning";
 export class UIMenu {
     host;
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     /** Id of the control that anchors this menu in the top layer. */
     for;
@@ -16,7 +18,8 @@ export class UIMenu {
     anchor = null;
     surface = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (isControlled(this.open))
+            this.internalOpen = this.open;
     }
     resetSurface() {
         this.setupSurface();
@@ -43,8 +46,7 @@ export class UIMenu {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
         this.host.addEventListener('click', this.onItemClick);
         this.host.addEventListener('keydown', this.onKeydown);
         this.setupSurface();
@@ -77,7 +79,8 @@ export class UIMenu {
     closeMenu(reason, trigger) {
         if (!this.internalOpen)
             return;
-        this.internalOpen = false;
+        if (!isControlled(this.open))
+            this.internalOpen = false;
         dispatchDetail(this.host, 'close', {
             open: false,
             reason: reason,
@@ -108,7 +111,8 @@ export class UIMenu {
             reason: 'action',
             trigger: eventToTrigger(e),
         });
-        this.internalOpen = false;
+        if (!isControlled(this.open))
+            this.internalOpen = false;
     };
     onKeydown = (e) => {
         if (e.key === 'Escape') {
@@ -131,7 +135,8 @@ export class UIMenu {
                     reason: 'action',
                     trigger: 'keyboard',
                 });
-                this.internalOpen = false;
+                if (!isControlled(this.open))
+                    this.internalOpen = false;
             }
             return;
         }
@@ -148,7 +153,7 @@ export class UIMenu {
         }
     };
     render() {
-        return (h(Host, { key: '06ad0750df843cb874bd4f257d8567157c855493', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: '50118ac749a2747ca06f4d483499c4cd20125a89' })));
+        return (h(Host, { key: 'c5af7acaf41b75165e9f7cf47d65b7a1dcd4d1c0', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("div", { key: '058fff9a00a1dcba26f6db425096e7a96d889896', class: "menu__surface" }, h("slot", { key: 'dbbf9eb4ba2a348b6d85049e229ed0562ee17318' }))));
     }
     static get is() { return "ui-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -173,16 +178,15 @@ export class UIMenu {
                     "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-menu-item/ui-menu-item.css

@@ -1,6 +1,12 @@
 :host {
   display: block;
   width: 100%;
+}
+
+.menu-item__surface {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
   padding: var(--ui-space-2) var(--ui-space-3);
   text-align: left;
   background: none;
@@ -15,12 +21,12 @@
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
-:host(:hover:not([aria-disabled='true']):not([disabled])) {
+:host(:hover:not([aria-disabled='true']):not([disabled])) .menu-item__surface {
   background: var(--ui-surface-subtle);
 }
 
-:host([aria-disabled='true']),
-:host([disabled]) {
+:host([aria-disabled='true']) .menu-item__surface,
+:host([disabled]) .menu-item__surface {
   opacity: 0.6;
   cursor: not-allowed;
 }

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

@@ -3,7 +3,7 @@ export class UIMenuItem {
     disabled = false;
     value = '';
     render() {
-        return (h(Host, { key: 'c0024d4bb84224019121b98a6fec36bfdad00864', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, h("slot", { key: '00eee7c496dfaf71e8ec158606ebc6641e2ef0d8' })));
+        return (h(Host, { key: 'f8a1721f8e516af04f901b53c3a66ce1de932608', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, h("span", { key: '6483d0b3ce1be06aed214f626b2d6a2963a44ade', class: "menu-item__surface" }, h("slot", { key: 'db470b1cbb54d56a14d05c0d7f72c43e37f4263e' }))));
     }
     static get is() { return "ui-menu-item"; }
     static get encapsulation() { return "shadow"; }