@threadlabs/looma 0.1.22 → 0.1.24

package/dist/cjs/ui-dialog.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
-var manager = require('./manager-C9j3HZay.js');
+var index = require('./index-BHG9Rpil.js');
+var manager = require('./manager-Ce25WRtl.js');
 var events = require('./events-TcQIzpNv.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 
 const uiDialogCss = () => `:host{display:block}:host:not([data-open]){display:none}:host dialog{--ui-dialog-duration:var(--ui-motion-base);--ui-dialog-viewport-gap:var(--ui-space-4, 1rem);position:fixed;inset:0;inline-size:min(     calc(100% - (var(--ui-dialog-viewport-gap) * 2)),     var(--ui-dialog-max-width, 440px)   );max-inline-size:none;max-block-size:calc(100dvh - (var(--ui-dialog-viewport-gap) * 2));margin:auto;padding:var(--ui-space-4);overflow:auto;background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-dialog);box-shadow:var(--ui-shadow-dialog);visibility:hidden;pointer-events:none;opacity:0;transform:scale(0.96);transition:opacity var(--ui-dialog-duration) var(--ui-motion-ease),     transform var(--ui-dialog-duration) var(--ui-motion-ease),     visibility var(--ui-dialog-duration),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]{visibility:visible;pointer-events:auto;opacity:1;transform:scale(1);animation:ui-dialog-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-enter{from{opacity:0;transform:scale(0.96)}}:host dialog::backdrop{background-color:transparent;transition:background-color var(--ui-dialog-duration) var(--ui-motion-ease),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]::backdrop{background-color:var(--ui-overlay-backdrop);animation:ui-dialog-backdrop-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-backdrop-enter{from{background-color:transparent}}`;
 
@@ -11,17 +12,27 @@ const UIDialog = class {
         index.registerInstance(this, hostRef);
     }
     get host() { return index.getElement(this); }
-    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 (controlledState.isControlled(this.open))
+            this.internalOpen = this.open;
+    }
+    syncLabelFromProp() {
+        this.syncAccessibleLabel();
+    }
+    componentWillLoad() {
+        this.syncAccessibleLabel();
     }
     syncOpen() {
         if (this.dialogRef) {
@@ -42,20 +53,29 @@ const UIDialog = class {
         }
     }
     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 = controlledState.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;
         manager.closeOverlay(this.overlayId);
     }
     componentDidUpdate() {
         this.syncOpen();
     }
     handleRequestClose(reason, trigger) {
-        this.internalOpen = false;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = false;
         events.dispatchDetail(this.host, 'close', {
             open: false,
             reason: reason,
@@ -64,8 +84,13 @@ const UIDialog = class {
     }
     onDialogClose = () => {
         if (this.internalOpen) {
-            this.internalOpen = false;
-            manager.closeOverlay(this.overlayId);
+            if (!controlledState.isControlled(this.open)) {
+                this.internalOpen = false;
+                manager.closeOverlay(this.overlayId);
+            }
+            else {
+                requestAnimationFrame(() => this.syncOpen());
+            }
             events.dispatchDetail(this.host, 'close', {
                 open: false,
                 reason: 'programmatic',
@@ -78,13 +103,24 @@ const UIDialog = class {
             manager.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 (index.h(index.Host, { key: 'c10f9063a1c2677caff3b8d1f26b37bf25978a77', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("dialog", { key: 'a7111bd363cab94f394cca526bf34ea8081e5228', ref: (el) => (this.dialogRef = el), open: this.internalOpen, "aria-label": this.label }, index.h("slot", { key: 'b0a9699fe0be09e331cfea81b6bbeaec11d48956' }))));
+        return (index.h(index.Host, { key: 'b7aa33e24a74527a58718b3fa2218f5a09e9e439', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("dialog", { key: 'f24455edc404581b5040c9c0090bf64141f9e296', ref: (el) => (this.dialogRef = el), open: this.internalOpen, "aria-label": this.accessibleLabel }, index.h("slot", { key: 'bad318e44b9c80dc0aae04ea5cdbb7b2ab472c35' }))));
     }
     static get watchers() { return {
         "open": [{
                 "syncFromProp": 0
             }],
+        "label": [{
+                "syncLabelFromProp": 0
+            }],
         "internalOpen": [{
                 "syncOpen": 0
             }]

package/dist/cjs/ui-disclosure.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
+var index = require('./index-BHG9Rpil.js');
 var id = require('./id-CYbKpaYr.js');
 var events = require('./events-TcQIzpNv.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 
 const uiDisclosureCss = () => `:host{display:block}::slotted([hidden]){display:none !important}`;
 
@@ -11,7 +12,8 @@ const UIDisclosure = class {
         index.registerInstance(this, hostRef);
     }
     get host() { return index.getElement(this); }
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     disabled = false;
     internalOpen = false;
@@ -19,7 +21,8 @@ const UIDisclosure = class {
     trigger = null;
     content = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (controlledState.isControlled(this.open))
+            this.internalOpen = this.open;
     }
     syncState() {
         if (this.trigger) {
@@ -31,8 +34,7 @@ const UIDisclosure = class {
     }
     componentDidLoad() {
         this.resolveParts();
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledState.controlledOrDefault(this.open, this.defaultOpen);
         this.syncState();
         this.trigger?.addEventListener('click', this.onTriggerClick);
         this.trigger?.addEventListener('keydown', this.onTriggerKeydown);
@@ -72,7 +74,8 @@ const UIDisclosure = class {
     setOpen(next, action) {
         if (this.internalOpen === next)
             return;
-        this.internalOpen = next;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = next;
         events.dispatchDetail(this.host, next ? 'open' : 'close', {
             open: next,
             reason: action.reason,
@@ -93,7 +96,7 @@ const UIDisclosure = class {
         this.setOpen(!this.internalOpen, { reason: 'action', trigger: 'keyboard' });
     };
     render() {
-        return (index.h(index.Host, { key: '7fbc83614f8e988a43d1baac0379a6dc8826b1d5' }, index.h("slot", { key: '6ef33ca7bce5c4d83ab65642f52a9d17febb794d' })));
+        return (index.h(index.Host, { key: '55a6fd71965104b96b55fd53870becce748a4116' }, index.h("slot", { key: '542727e10d335ff44fc7cf8250e80f045f89b8f2' })));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/ui-floating-action-button.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
+var index = require('./index-BHG9Rpil.js');
 
 const uiFloatingActionButtonCss = () => `:host{position:fixed;inset-block-end:calc(     var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom)   );inset-inline-end:max(     var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),     env(safe-area-inset-right)   );inline-size:var(--ui-floating-action-button-size, 56px);block-size:var(--ui-floating-action-button-size, 56px);display:inline-flex;z-index:var(--ui-floating-action-button-z-index, 100)}button{appearance:none;inline-size:100%;block-size:100%;border:none;border-radius:999px;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--ui-floating-action-button-bg, var(--ui-accent-solid));color:var(--ui-floating-action-button-color, var(--ui-text-on-accent));box-shadow:var(     --ui-floating-action-button-shadow,     0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)   );cursor:pointer;transition:background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),     transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),     box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease)}button:hover:enabled{background:var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));box-shadow:var(     --ui-floating-action-button-hover-shadow,     0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)   )}button:active:enabled{transform:scale(var(--ui-floating-action-button-active-scale, 0.94))}button:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:2px}button:disabled,:host([disabled]){opacity:0.6;cursor:not-allowed}::slotted(svg){inline-size:var(--ui-floating-action-button-icon-size, 24px);block-size:var(--ui-floating-action-button-icon-size, 24px);flex-shrink:0}@media (min-width: 768px){:host([mobile-only]){display:none}}`;
 
@@ -12,7 +12,7 @@ const UIFloatingActionButton = class {
     mobileOnly = false;
     label = '';
     render() {
-        return (index.h(index.Host, { key: '6f67f3967cf8883005f6c56747db515db5ebe1d0', "data-disabled": this.disabled ? '' : undefined }, index.h("button", { key: 'deebb9261221c144b30bc3e41790158fc339cd14', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, index.h("slot", { key: '3b045b69a4508c84dd5b7c8b3df0e6f3eded1c13' }))));
+        return (index.h(index.Host, { key: 'b41f0aaabbcd23cb79ac06245e69fd8ecb9c9912', "data-disabled": this.disabled ? '' : undefined }, index.h("button", { key: '36a023bd66d38845f1116874380d7a28bb46b5a2', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, index.h("slot", { key: '412c41e4732cc230f84e7758bfc7faab7e0802e2' }))));
     }
 };
 UIFloatingActionButton.style = uiFloatingActionButtonCss();

package/dist/cjs/ui-form-field.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
+var index = require('./index-BHG9Rpil.js');
 var id = require('./id-CYbKpaYr.js');
 
-const uiFormFieldCss = () => `:host{display:grid;gap:var(--ui-space-2);color:var(--ui-text-primary)}::slotted(label){color:var(--ui-text-secondary);font-size:0.95rem}::slotted([data-slot='help']){color:var(--ui-text-muted);font-size:0.875rem}::slotted([data-slot='error']),::slotted([role='alert']){color:var(--ui-accent-active);font-size:0.875rem}`;
+const uiFormFieldCss = () => `:host{display:grid;gap:var(--ui-space-2);min-inline-size:0;align-content:start;color:var(--ui-text-primary)}::slotted(label){color:var(--ui-text-secondary);font-size:0.95rem}::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']),::slotted([role='alert']){color:var(--ui-accent-active);font-size:0.875rem}`;
 
 const UIFormField = class {
     constructor(hostRef) {
@@ -13,17 +13,62 @@ const UIFormField = class {
     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) {
@@ -32,6 +77,9 @@ const UIFormField = class {
         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)
@@ -43,15 +91,22 @@ const UIFormField = class {
                 error.id = 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 (index.h(index.Host, { key: 'c0a01ac28a7dd0e0b285e4b9f9763ef536a83a2e', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, index.h("slot", { key: 'b09be4482299d866a0651393e269299dedb0cbf4' })));
+        return (index.h(index.Host, { key: '0b8fd5608631b5f9159fdf99d6eba918cc6587e4', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, index.h("slot", { key: '4ed78782bcc8b6699a40d8402994b486d71d730a', onSlotchange: this.scheduleWire })));
     }
 };
 UIFormField.style = uiFormFieldCss();

package/dist/cjs/ui-icon-button.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
+var index = require('./index-BHG9Rpil.js');
 
 const uiIconButtonCss = () => `:host{display:inline-flex;color:var(--ui-text-secondary)}:host([anticipatory]){position:relative}:host([anticipatory])::before{content:'';position:absolute;inset:50% auto auto 50%;z-index:1;inline-size:var(--ui-affordance-guide-size, 0.25rem);block-size:var(--ui-affordance-guide-size, 0.25rem);border-radius:var(--ui-radius-round, 999px);background:var(--ui-affordance-guide-color, var(--ui-border-strong));opacity:var(--ui-affordance-guide-opacity, 0.42);transform:translate(-50%, -50%);transition:opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);pointer-events:none}:host([anticipatory]) button{opacity:0;transform:scale(0.72);pointer-events:none}:host([anticipatory][data-ui-proximity='near'])::before,:host([anticipatory]:focus-within)::before,:host([anticipatory]:hover)::before,:host([anticipatory][variant='solid'])::before{opacity:0}:host([anticipatory][data-ui-proximity='near']) button,:host([anticipatory]:focus-within) button,:host([anticipatory]:hover) button,:host([anticipatory][variant='solid']) button{opacity:1;transform:scale(1);pointer-events:auto}button{appearance:none;inline-size:var(--ui-icon-button-size, 2.5rem);block-size:var(--ui-icon-button-size, 2.5rem);min-inline-size:var(--ui-icon-button-size, 2.5rem);min-block-size:var(--ui-icon-button-size, 2.5rem);padding:0;margin:0;border:1px solid transparent;border-radius:var(--ui-icon-button-radius, var(--ui-radius-2));background:var(--ui-icon-button-bg, transparent);color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     border-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease)}@media (hover: none), (pointer: coarse){:host([anticipatory])::before{opacity:0}:host([anticipatory]) button{opacity:1;transform:none;pointer-events:auto}}:host([size='sm']) button{inline-size:var(--ui-icon-button-size-sm, 2rem);block-size:var(--ui-icon-button-size-sm, 2rem);min-inline-size:var(--ui-icon-button-size-sm, 2rem);min-block-size:var(--ui-icon-button-size-sm, 2rem)}:host([size='lg']) button{inline-size:var(--ui-icon-button-size-lg, 2.75rem);block-size:var(--ui-icon-button-size-lg, 2.75rem);min-inline-size:var(--ui-icon-button-size-lg, 2.75rem);min-block-size:var(--ui-icon-button-size-lg, 2.75rem)}:host([variant='outline']) button{border-color:var(--ui-icon-button-border, var(--ui-border-default));background:var(--ui-icon-button-outline-bg, var(--ui-surface-default));color:var(--ui-icon-button-outline-color, var(--ui-text-primary))}:host([variant='solid']) button{background:var(--ui-icon-button-solid-bg, var(--ui-accent-solid));color:var(--ui-icon-button-solid-color, var(--ui-text-on-accent));box-shadow:var(     --ui-icon-button-solid-shadow,     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)   )}button:hover:enabled{background:var(--ui-icon-button-hover-bg, var(--ui-surface-muted));color:var(--ui-icon-button-hover-color, var(--ui-text-primary))}:host([variant='outline']) button:hover:enabled{border-color:var(--ui-icon-button-hover-border, var(--ui-border-strong))}:host([variant='solid']) button:hover:enabled{background:var(--ui-icon-button-solid-hover-bg, var(--ui-accent-hover))}button:active:enabled{transform:scale(var(--ui-icon-button-active-scale, 0.96))}button:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:2px}button:disabled,:host([disabled]){opacity:0.6;cursor:not-allowed}::slotted(svg){inline-size:var(--ui-icon-button-icon-size, 1.125rem);block-size:var(--ui-icon-button-icon-size, 1.125rem);flex-shrink:0;stroke-width:var(--ui-icon-button-icon-stroke-width, 1.75)}`;
 
@@ -15,7 +15,7 @@ const UIIconButton = class {
     /** Reveals this control through a surrounding ui-affordance-scope. */
     anticipatory = false;
     render() {
-        return (index.h(index.Host, { key: 'dd6149d96d534a641eedaf808df5348eef48f31f', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, index.h("button", { key: '3e1b83a3e01b724cb75ddb7243a1e85bd9eb3420', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, index.h("slot", { key: 'd280293841471ad37f556c73d86de3223e1f98e6' }))));
+        return (index.h(index.Host, { key: 'fb4534d977b4812f402855f78176b8316ebace61', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, index.h("button", { key: 'b90d290870ad76ba18de88a6b6947a15040ff12a', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, index.h("slot", { key: '88ded6ad90a4cfeffcd687990e5ba8b0c7d3bd30' }))));
     }
 };
 UIIconButton.style = uiIconButtonCss();

package/dist/cjs/ui-input.cjs.entry.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
+var index = require('./index-BHG9Rpil.js');
 var events = require('./events-TcQIzpNv.js');
 
-const uiInputCss = () => `:host{display:inline-flex;color:var(--ui-text-primary)}::slotted(input){width:100%;appearance:none;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-default);color:inherit;font:inherit;line-height:var(--ui-line-height-md);padding:var(--ui-space-2) var(--ui-space-3);margin:0;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(input:hover:not(:focus):not(:disabled)){border-color:var(--ui-border-strong)}::slotted(input:focus){border-color:var(--ui-focus-ring);box-shadow:0 0 0 3px var(--ui-accent-soft)}:host([data-invalid='true'])::slotted(input),::slotted(input[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(input:disabled){background:var(--ui-surface-muted);color:var(--ui-text-muted);cursor:not-allowed}::slotted(input:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}`;
+const uiInputCss = () => `:host{display:inline-flex;min-inline-size:0;color:var(--ui-text-primary)}::slotted(input){width:100%;appearance:none;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-control-surface, var(--ui-surface-default));color:inherit;font:inherit;line-height:var(--ui-line-height-md);padding:var(--ui-space-2) var(--ui-space-3);margin:0;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(input:hover:not(:focus):not(:disabled)){border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(input:focus){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),::slotted(input[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(input:disabled){background:var(--ui-control-surface-disabled, var(--ui-surface-muted));color:var(--ui-text-muted);cursor:not-allowed}::slotted(input:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}`;
 
 const UIInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     get host() { return index.getElement(this); }
-    value = '';
+    value;
     defaultValue = '';
     disabled = false;
     invalid = false;
@@ -18,14 +18,19 @@ const UIInput = class {
     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;
@@ -73,7 +78,7 @@ const UIInput = class {
         });
     };
     render() {
-        return (index.h(index.Host, { key: '2b3b4f6862cf5c5e413aaefb349c53d4e66eb6d0', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: '140dc656f13399b8ef05adb6cfa1d9a7e1373c2d', ref: (el) => (this.slotRef = el) })));
+        return (index.h(index.Host, { key: 'fe125b4e8ec35e9ac0b0ca0434aa8439f515c51b', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: 'ec0609f9143435cf0436abb98488b9f30b71530b', ref: (el) => (this.slotRef = el) })));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/ui-menu-item.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
+var index = require('./index-BHG9Rpil.js');
 
-const uiMenuItemCss = () => `:host{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)}:host(:hover:not([aria-disabled='true']):not([disabled])){background:var(--ui-surface-subtle)}:host([aria-disabled='true']),:host([disabled]){opacity:0.6;cursor:not-allowed}`;
+const uiMenuItemCss = () => `: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;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)}:host(:hover:not([aria-disabled='true']):not([disabled])) .menu-item__surface{background:var(--ui-surface-subtle)}:host([aria-disabled='true']) .menu-item__surface,:host([disabled]) .menu-item__surface{opacity:0.6;cursor:not-allowed}`;
 
 const UIMenuItem = class {
     constructor(hostRef) {
@@ -11,7 +11,7 @@ const UIMenuItem = class {
     disabled = false;
     value = '';
     render() {
-        return (index.h(index.Host, { key: 'c0024d4bb84224019121b98a6fec36bfdad00864', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, index.h("slot", { key: '00eee7c496dfaf71e8ec158606ebc6641e2ef0d8' })));
+        return (index.h(index.Host, { key: 'f8a1721f8e516af04f901b53c3a66ce1de932608', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, index.h("span", { key: '6483d0b3ce1be06aed214f626b2d6a2963a44ade', class: "menu-item__surface" }, index.h("slot", { key: 'db470b1cbb54d56a14d05c0d7f72c43e37f4263e' }))));
     }
 };
 UIMenuItem.style = uiMenuItemCss();

package/dist/cjs/ui-menu.cjs.entry.js

@@ -1,18 +1,20 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
+var index = require('./index-BHG9Rpil.js');
 var events = require('./events-TcQIzpNv.js');
-var manager = require('./manager-C9j3HZay.js');
+var manager = require('./manager-Ce25WRtl.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 var positioning = require('./positioning-i0WrCAdF.js');
 
-const uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;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: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])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:auto;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::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}`;
+const uiMenuCss = () => `:host{--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)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:auto;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::slotted(ui-menu-item){display:block;width:100%}`;
 
 const UIMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     get host() { return index.getElement(this); }
-    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;
@@ -23,7 +25,8 @@ const UIMenu = class {
     anchor = null;
     surface = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (controlledState.isControlled(this.open))
+            this.internalOpen = this.open;
     }
     resetSurface() {
         this.setupSurface();
@@ -50,8 +53,7 @@ const UIMenu = class {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledState.controlledOrDefault(this.open, this.defaultOpen);
         this.host.addEventListener('click', this.onItemClick);
         this.host.addEventListener('keydown', this.onKeydown);
         this.setupSurface();
@@ -84,7 +86,8 @@ const UIMenu = class {
     closeMenu(reason, trigger) {
         if (!this.internalOpen)
             return;
-        this.internalOpen = false;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = false;
         events.dispatchDetail(this.host, 'close', {
             open: false,
             reason: reason,
@@ -115,7 +118,8 @@ const UIMenu = class {
             reason: 'action',
             trigger: events.eventToTrigger(e),
         });
-        this.internalOpen = false;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = false;
     };
     onKeydown = (e) => {
         if (e.key === 'Escape') {
@@ -138,7 +142,8 @@ const UIMenu = class {
                     reason: 'action',
                     trigger: 'keyboard',
                 });
-                this.internalOpen = false;
+                if (!controlledState.isControlled(this.open))
+                    this.internalOpen = false;
             }
             return;
         }
@@ -155,7 +160,7 @@ const UIMenu = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '06ad0750df843cb874bd4f257d8567157c855493', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: '50118ac749a2747ca06f4d483499c4cd20125a89' })));
+        return (index.h(index.Host, { key: 'c5af7acaf41b75165e9f7cf47d65b7a1dcd4d1c0', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, index.h("div", { key: '058fff9a00a1dcba26f6db425096e7a96d889896', class: "menu__surface" }, index.h("slot", { key: 'dbbf9eb4ba2a348b6d85049e229ed0562ee17318' }))));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/ui-popover.cjs.entry.js

@@ -1,18 +1,20 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
-var manager = require('./manager-C9j3HZay.js');
+var index = require('./index-BHG9Rpil.js');
+var manager = require('./manager-Ce25WRtl.js');
 var events = require('./events-TcQIzpNv.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 var positioning = require('./positioning-i0WrCAdF.js');
 
-const uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);padding:var(--ui-space-3);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg);max-inline-size:min(     20rem,     calc(100vw - (var(--ui-popover-viewport-gap) * 2))   );max-block-size:calc(100dvh - (var(--ui-popover-viewport-gap) * 2));overflow:auto}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}`;
+const uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);box-sizing:border-box;max-inline-size:min(     20rem,     calc(100vw - (var(--ui-popover-viewport-gap) * 2))   );max-block-size:calc(100dvh - (var(--ui-popover-viewport-gap) * 2));overflow:auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:var(--ui-shadow-lg)}.popover__surface{box-sizing:border-box;padding:var(--ui-space-3);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}`;
 
 const UIPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     get host() { return index.getElement(this); }
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     /** Optional id of the element this popover follows in the top layer. */
     for;
@@ -22,7 +24,8 @@ const UIPopover = class {
     anchor = null;
     surface = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (controlledState.isControlled(this.open))
+            this.internalOpen = this.open;
     }
     onOpenChange() {
         this.syncOverlay();
@@ -81,8 +84,7 @@ const UIPopover = class {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledState.controlledOrDefault(this.open, this.defaultOpen);
         this.host.addEventListener('keydown', this.onKeydown);
         this.setupSurface();
         this.syncOverlay();
@@ -97,7 +99,8 @@ const UIPopover = class {
         this.syncOverlay();
     }
     handleRequestClose(reason, trigger) {
-        this.internalOpen = false;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = false;
         events.dispatchDetail(this.host, 'close', {
             open: false,
             reason: reason,
@@ -110,7 +113,7 @@ const UIPopover = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '8e45be54147ff8f76a0d5e7fd875c3f4cf5ac40a', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("slot", { key: '3141729cd32c8dcdaec1fbd763eb034242563c8f' })));
+        return (index.h(index.Host, { key: '6a38873f2e4d085f733fa116057b1f55418e23ed', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("div", { key: '6fef6e37921e8c52994617719f1ebb6d9bd54ee2', class: "popover__surface" }, index.h("slot", { key: '5ee4269592219035a3185f8f06fd71ecb12e4e71' }))));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/ui-radio-group.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
+var index = require('./index-BHG9Rpil.js');
 var events = require('./events-TcQIzpNv.js');
 
 const uiRadioGroupCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2)}:host([data-orientation='vertical']){display:inline-grid;justify-items:start}`;
@@ -109,7 +109,7 @@ const UIRadioGroup = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '5410f4adb5d4ca888287150f57de38ab59cc791d', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, index.h("slot", { key: 'd3988acaf5456e89f26d449ccaadaf237c223bbd' })));
+        return (index.h(index.Host, { key: '28c6eb6cc9520b570f40d2193d0c64a7a6c7db01', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, index.h("slot", { key: '97814378181be78bfac6090ff173459e1f539728' })));
     }
     static get watchers() { return {
         "value": [{