@threadlabs/looma 0.1.0

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

@@ -0,0 +1,93 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.js');
+var manager = require('./manager-BOpVXb92.js');
+var events = require('./events-TcQIzpNv.js');
+
+const uiDialogCss = () => `:host{display:block}:host:not([open]){display:none}:host dialog{--ui-dialog-duration:var(--ui-motion-base);position:fixed;inset:var(--ui-space-4);width:min(100%, 440px);max-width:min(100%, 440px);margin:auto;padding:var(--ui-space-4);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}}`;
+
+const UIDialog = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.getElement(this); }
+    open = false;
+    defaultOpen = false;
+    modal = true;
+    dismissible = true;
+    internalOpen = false;
+    overlayId = `ui-dialog-${Math.random().toString(36).slice(2, 11)}`;
+    dialogRef;
+    syncFromProp() {
+        this.internalOpen = this.open;
+    }
+    syncOpen() {
+        if (this.dialogRef) {
+            if (this.internalOpen) {
+                this.dialogRef.showModal();
+                manager.openOverlay({
+                    id: this.overlayId,
+                    modal: this.modal,
+                    element: this.host,
+                    dismissible: this.dismissible,
+                    requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
+                });
+            }
+            else {
+                this.dialogRef.close();
+                manager.closeOverlay(this.overlayId);
+            }
+        }
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.dialogRef?.addEventListener('close', this.onDialogClose);
+        this.syncOpen();
+    }
+    disconnectedCallback() {
+        this.dialogRef?.removeEventListener('close', this.onDialogClose);
+        manager.closeOverlay(this.overlayId);
+    }
+    componentDidUpdate() {
+        this.syncOpen();
+    }
+    handleRequestClose(reason, trigger) {
+        this.internalOpen = false;
+        events.dispatchDetail(this.host, 'close', {
+            open: false,
+            reason: reason,
+            trigger: trigger,
+        });
+    }
+    onDialogClose = () => {
+        if (this.internalOpen) {
+            this.internalOpen = false;
+            manager.closeOverlay(this.overlayId);
+            events.dispatchDetail(this.host, 'close', {
+                open: false,
+                reason: 'programmatic',
+                trigger: 'programmatic',
+            });
+        }
+    };
+    onKeydown = (e) => {
+        if (e.key === 'Escape') {
+            manager.requestTopOverlayClose('escape', 'keyboard');
+        }
+    };
+    render() {
+        return (index.h(index.Host, { key: '2a2fcdfa1e3fac5eb3c0e3d6748cebdf388c216d', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("dialog", { key: 'c3eef2bb3bec77fa518269fce38c19c2ededda49', ref: (el) => (this.dialogRef = el), open: this.internalOpen }, index.h("slot", { key: '9ae5c30d57096184ec287fd9dd134ff566b9fd39' }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncFromProp": 0
+            }],
+        "internalOpen": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+UIDialog.style = uiDialogCss();
+
+exports.ui_dialog = UIDialog;

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

@@ -0,0 +1,109 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.js');
+var id = require('./id-CYbKpaYr.js');
+var events = require('./events-TcQIzpNv.js');
+
+const uiDisclosureCss = () => `:host{display:block}::slotted([hidden]){display:none !important}`;
+
+const UIDisclosure = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.getElement(this); }
+    open = false;
+    defaultOpen = false;
+    disabled = false;
+    internalOpen = false;
+    contentId = '';
+    trigger = null;
+    content = null;
+    syncFromProp() {
+        this.internalOpen = this.open;
+    }
+    syncState() {
+        if (this.trigger) {
+            this.trigger.setAttribute('aria-expanded', String(this.internalOpen));
+        }
+        if (this.content) {
+            this.content.hidden = !this.internalOpen;
+        }
+    }
+    componentDidLoad() {
+        this.resolveParts();
+        this.syncFromProp();
+        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.syncState();
+        this.trigger?.addEventListener('click', this.onTriggerClick);
+        this.trigger?.addEventListener('keydown', this.onTriggerKeydown);
+    }
+    disconnectedCallback() {
+        this.trigger?.removeEventListener('click', this.onTriggerClick);
+        this.trigger?.removeEventListener('keydown', this.onTriggerKeydown);
+    }
+    componentDidUpdate() {
+        this.syncState();
+    }
+    resolveParts() {
+        this.trigger =
+            this.host.querySelector('[data-ui-disclosure-trigger], button, [aria-controls]');
+        const controlsId = this.trigger?.getAttribute('aria-controls') ?? '';
+        if (controlsId) {
+            this.content = document.getElementById(controlsId);
+        }
+        else {
+            const children = Array.from(this.host.children);
+            this.content = children.find((c) => c !== this.trigger) ?? null;
+        }
+        if (this.trigger && this.content) {
+            if (!this.content.id) {
+                this.content.id = id.createId('disclosure-content');
+            }
+            this.trigger.setAttribute('aria-controls', this.content.id);
+            this.contentId = this.content.id;
+        }
+        if (this.trigger instanceof HTMLButtonElement) {
+            this.trigger.disabled = this.disabled;
+        }
+        else if (this.trigger) {
+            this.trigger.setAttribute('aria-disabled', String(this.disabled));
+        }
+    }
+    setOpen(next, action) {
+        if (this.internalOpen === next)
+            return;
+        this.internalOpen = next;
+        events.dispatchDetail(this.host, next ? 'open' : 'close', {
+            open: next,
+            reason: action.reason,
+            trigger: action.trigger,
+        });
+    }
+    onTriggerClick = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        this.setOpen(!this.internalOpen, { reason: 'action', trigger: events.eventToTrigger(e) });
+    };
+    onTriggerKeydown = (e) => {
+        if (this.disabled || !events.isActivationKey(e))
+            return;
+        e.preventDefault();
+        this.setOpen(!this.internalOpen, { reason: 'action', trigger: 'keyboard' });
+    };
+    render() {
+        return (index.h(index.Host, { key: '433d2a0f6efe939e1a1ae60e27464139571004db' }, index.h("slot", { key: '7533ae794a7ce8be044c2ff0b5d3d1b72c01575c' })));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncFromProp": 0
+            }],
+        "internalOpen": [{
+                "syncState": 0
+            }]
+    }; }
+};
+UIDisclosure.style = uiDisclosureCss();
+
+exports.ui_disclosure = UIDisclosure;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.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:var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem));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}}`;
+
+const UIFloatingActionButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    disabled = false;
+    mobileOnly = false;
+    label = '';
+    render() {
+        return (index.h(index.Host, { key: '4b5b5eb530e4ab424e1189cff83d697f28432d84', "data-disabled": this.disabled ? '' : undefined }, index.h("button", { key: 'f8a4b8ac90bf306434b2b905030b46c1fcbcb000', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, index.h("slot", { key: '500d0606ea7166669f104e42813591395fc81c3f' }))));
+    }
+};
+UIFloatingActionButton.style = uiFloatingActionButtonCss();
+
+exports.ui_floating_action_button = UIFloatingActionButton;

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

@@ -0,0 +1,59 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.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 UIFormField = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.getElement(this); }
+    invalid = false;
+    disabled = false;
+    required = false;
+    componentDidLoad() {
+        this.wire();
+    }
+    componentDidUpdate() {
+        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)
+            return;
+        if (!input.id) {
+            input.id = id.createId('form-field-input');
+        }
+        if (label && !label.getAttribute('for')) {
+            label.setAttribute('for', input.id);
+        }
+        const describedIds = [];
+        if (help) {
+            if (!help.id)
+                help.id = id.createId('form-field-help');
+            describedIds.push(help.id);
+        }
+        if (error) {
+            if (!error.id)
+                error.id = id.createId('form-field-error');
+            describedIds.push(error.id);
+        }
+        if (describedIds.length) {
+            input.setAttribute('aria-describedby', describedIds.join(' '));
+        }
+        input.disabled = this.disabled;
+        input.required = this.required;
+        input.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f2eb3a7bf493c0630ef27ee21fca1ffee94be536', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, index.h("slot", { key: 'f5f30e388ed9473ee50103f12527a1dd9cfb0b0b' })));
+    }
+};
+UIFormField.style = uiFormFieldCss();
+
+exports.ui_form_field = UIFormField;

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.js');
+
+const uiIconButtonCss = () => `:host{display:inline-flex;color:var(--ui-text-secondary)}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)}: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)}`;
+
+const UIIconButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    disabled = false;
+    label = '';
+    size = 'md';
+    variant = 'ghost';
+    render() {
+        return (index.h(index.Host, { key: '8f4c7271505fa061da954f1e989fc526dc980407', "data-disabled": this.disabled ? '' : undefined }, index.h("button", { key: 'c56009d4028a557cd6f7f19833b0af6412b90c1c', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, index.h("slot", { key: 'ac2f201b0fbedb23106f72135ff8c3b6f25fca60' }))));
+    }
+};
+UIIconButton.style = uiIconButtonCss();
+
+exports.ui_icon_button = UIIconButton;

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

@@ -0,0 +1,101 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.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 UIInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.getElement(this); }
+    value = '';
+    defaultValue = '';
+    disabled = false;
+    invalid = false;
+    readOnly = false;
+    internalValue = '';
+    slotRef;
+    syncFromProp() {
+        this.internalValue = this.value;
+    }
+    syncToInput() {
+        const input = this.getInput();
+        if (!input)
+            return;
+        this.host.dataset.invalid = this.invalid ? 'true' : '';
+        input.value = this.internalValue;
+        input.defaultValue = this.defaultValue;
+        input.disabled = this.disabled;
+        input.readOnly = this.readOnly;
+        input.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.slotRef?.addEventListener('slotchange', () => this.syncToInput());
+        this.syncToInput();
+        const input = this.getInput();
+        input?.addEventListener('input', this.onInput);
+        input?.addEventListener('change', this.onChange);
+    }
+    disconnectedCallback() {
+        const input = this.getInput();
+        input?.removeEventListener('input', this.onInput);
+        input?.removeEventListener('change', this.onChange);
+    }
+    componentDidUpdate() {
+        this.syncToInput();
+    }
+    getInput() {
+        const slot = this.host.shadowRoot?.querySelector('slot');
+        const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
+        return nodes.find((el) => el.tagName === 'INPUT') ?? null;
+    }
+    onInput = (e) => {
+        const input = e.target;
+        if (!input)
+            return;
+        this.internalValue = input.value;
+        events.dispatchDetail(this.host, 'input', {
+            value: this.internalValue,
+            trigger: events.eventToTrigger(e),
+        });
+    };
+    onChange = (e) => {
+        const input = this.getInput();
+        if (!input)
+            return;
+        this.internalValue = input.value;
+        events.dispatchDetail(this.host, 'change', {
+            value: this.internalValue,
+            trigger: events.eventToTrigger(e),
+        });
+    };
+    render() {
+        return (index.h(index.Host, { key: '73f518c7f12fa483d592041d185498bd91f9bb8b', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: '7ef93ef7c5d36ccdfa66cfb4d14f08707e9ea790', ref: (el) => (this.slotRef = el) })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "syncFromProp": 0
+            }],
+        "internalValue": [{
+                "syncToInput": 0
+            }],
+        "defaultValue": [{
+                "syncToInput": 0
+            }],
+        "disabled": [{
+                "syncToInput": 0
+            }],
+        "invalid": [{
+                "syncToInput": 0
+            }],
+        "readOnly": [{
+                "syncToInput": 0
+            }]
+    }; }
+};
+UIInput.style = uiInputCss();
+
+exports.ui_input = UIInput;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.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 UIMenuItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    disabled = false;
+    value = '';
+    render() {
+        return (index.h(index.Host, { key: '485ac24af80b72a751f6fc13a084847ba0f7605e', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, index.h("slot", { key: 'b2bde48d9b819b0e55fbe00c2939ccd44f63bc15' })));
+    }
+};
+UIMenuItem.style = uiMenuItemCss();
+
+exports.ui_menu_item = UIMenuItem;

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

@@ -0,0 +1,96 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.js');
+var events = require('./events-TcQIzpNv.js');
+
+const uiMenuCss = () => `:host{display:flex;flex-direction:column;min-width:12rem;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)}::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 UIMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.getElement(this); }
+    open = false;
+    defaultOpen = false;
+    internalOpen = false;
+    syncFromProp() {
+        this.internalOpen = this.open;
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.host.addEventListener('click', this.onItemClick);
+        this.host.addEventListener('keydown', this.onKeydown);
+    }
+    disconnectedCallback() {
+        this.host.removeEventListener('click', this.onItemClick);
+        this.host.removeEventListener('keydown', this.onKeydown);
+    }
+    getItems() {
+        return Array.from(this.host.querySelectorAll('ui-menu-item'));
+    }
+    isItemDisabled(item) {
+        return (item.getAttribute('aria-disabled') === 'true' ||
+            item.hasAttribute('disabled') ||
+            item.getAttribute('disabled') === 'true' ||
+            item.disabled === true);
+    }
+    onItemClick = (e) => {
+        const item = e.target.closest?.('ui-menu-item');
+        if (!item || item.getRootNode() !== this.host.getRootNode())
+            return;
+        if (this.isItemDisabled(item))
+            return;
+        const value = item.getAttribute('value') ?? item.getAttribute('data-value') ?? '';
+        events.dispatchDetail(this.host, 'select', { value, trigger: events.eventToTrigger(e) });
+        events.dispatchDetail(this.host, 'close', {
+            open: false,
+            reason: 'action',
+            trigger: events.eventToTrigger(e),
+        });
+        this.internalOpen = false;
+    };
+    onKeydown = (e) => {
+        const items = this.getItems().filter((i) => !this.isItemDisabled(i));
+        if (items.length === 0)
+            return;
+        const target = e.target.closest?.('ui-menu-item');
+        const currentIndex = target && target instanceof HTMLElement ? items.indexOf(target) : -1;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (target && currentIndex >= 0) {
+                const value = target.getAttribute('value') ?? target.getAttribute('data-value') ?? '';
+                events.dispatchDetail(this.host, 'select', { value, trigger: 'keyboard' });
+                events.dispatchDetail(this.host, 'close', {
+                    open: false,
+                    reason: 'action',
+                    trigger: 'keyboard',
+                });
+                this.internalOpen = false;
+            }
+            return;
+        }
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const nextIndex = e.key === 'ArrowDown'
+                ? currentIndex < 0
+                    ? 0
+                    : Math.min(currentIndex + 1, items.length - 1)
+                : currentIndex <= 0
+                    ? items.length - 1
+                    : currentIndex - 1;
+            items[nextIndex].focus();
+        }
+    };
+    render() {
+        return (index.h(index.Host, { key: 'f06ad0f8c09060495757ced2da095817409720b7', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: 'd504fd3c33894d0e464b957ce67c75fe8a24899c' })));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncFromProp": 0
+            }]
+    }; }
+};
+UIMenu.style = uiMenuCss();
+
+exports.ui_menu = UIMenu;

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

@@ -0,0 +1,92 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.js');
+var manager = require('./manager-BOpVXb92.js');
+var events = require('./events-TcQIzpNv.js');
+
+const uiPopoverCss = () => `:host{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-width:min(20rem, 90vw)}`;
+
+const UIPopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.getElement(this); }
+    open = false;
+    defaultOpen = false;
+    internalOpen = false;
+    overlayId = `ui-popover-${Math.random().toString(36).slice(2, 11)}`;
+    syncFromProp() {
+        this.internalOpen = this.open;
+    }
+    onOpenChange() {
+        this.syncOverlay();
+        if (this.internalOpen) {
+            events.dispatchDetail(this.host, 'open', {
+                open: true,
+                reason: 'programmatic',
+                trigger: 'programmatic',
+            });
+        }
+        else {
+            events.dispatchDetail(this.host, 'close', {
+                open: false,
+                reason: 'programmatic',
+                trigger: 'programmatic',
+            });
+        }
+    }
+    syncOverlay() {
+        if (this.internalOpen) {
+            manager.openOverlay({
+                id: this.overlayId,
+                modal: false,
+                element: this.host,
+                dismissible: true,
+                requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
+            });
+        }
+        else {
+            manager.closeOverlay(this.overlayId);
+        }
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.host.addEventListener('keydown', this.onKeydown);
+        this.syncOverlay();
+    }
+    disconnectedCallback() {
+        this.host.removeEventListener('keydown', this.onKeydown);
+        manager.closeOverlay(this.overlayId);
+    }
+    componentDidUpdate() {
+        this.syncOverlay();
+    }
+    handleRequestClose(reason, trigger) {
+        this.internalOpen = false;
+        events.dispatchDetail(this.host, 'close', {
+            open: false,
+            reason: reason,
+            trigger: trigger,
+        });
+    }
+    onKeydown = (e) => {
+        if (e.key === 'Escape') {
+            manager.requestTopOverlayClose('escape', 'keyboard');
+        }
+    };
+    render() {
+        return (index.h(index.Host, { key: '121482cf2fe9ba972ae6b902568389790b9accaa', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("slot", { key: '095ce0c147ed8c8411114563c9efcb5fe775fcae' })));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncFromProp": 0
+            }],
+        "internalOpen": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+UIPopover.style = uiPopoverCss();
+
+exports.ui_popover = UIPopover;