@threadlabs/looma 0.2.4 → 0.2.6

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

@@ -1,217 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { eventToTrigger, dispatchDetail } from "../../utils/events";
-export class UIInput {
-    host;
-    value;
-    defaultValue = '';
-    disabled = false;
-    invalid = false;
-    readOnly = false;
-    internalValue = '';
-    slotRef;
-    syncFromProp() {
-        if (this.value !== undefined)
-            this.internalValue = this.value;
-    }
-    syncToInput() {
-        const input = this.getInput();
-        if (!input)
-            return;
-        this.host.dataset.invalid = this.invalid ? 'true' : '';
-        // 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;
-        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;
-        dispatchDetail(this.host, 'input', {
-            value: this.internalValue,
-            trigger: eventToTrigger(e),
-        });
-    };
-    onChange = (e) => {
-        const input = this.getInput();
-        if (!input)
-            return;
-        this.internalValue = input.value;
-        dispatchDetail(this.host, 'change', {
-            value: this.internalValue,
-            trigger: eventToTrigger(e),
-        });
-    };
-    render() {
-        return (h(Host, { key: '92505de6b1245569a6d4746418a70f8d7bc4eed9', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'd5743dc62037b5d7722cfbb64a582592327c75e5', ref: (el) => (this.slotRef = el) })));
-    }
-    static get is() { return "ui-input"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-input.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-input.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
-            },
-            "defaultValue": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "default-value",
-                "defaultValue": "''"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "invalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "invalid",
-                "defaultValue": "false"
-            },
-            "readOnly": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "readonly",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalValue": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "syncFromProp"
-            }, {
-                "propName": "internalValue",
-                "methodName": "syncToInput"
-            }, {
-                "propName": "defaultValue",
-                "methodName": "syncToInput"
-            }, {
-                "propName": "disabled",
-                "methodName": "syncToInput"
-            }, {
-                "propName": "invalid",
-                "methodName": "syncToInput"
-            }, {
-                "propName": "readOnly",
-                "methodName": "syncToInput"
-            }];
-    }
-}

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

@@ -1,73 +0,0 @@
-: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: none;
-  overflow: visible;
-}
-
-.menu__surface {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  max-inline-size: inherit;
-  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);
-  max-block-size: inherit;
-  overflow: auto;
-}
-
-:host(:not([data-open])) {
-  display: none;
-}
-
-:host([popover]) {
-  position: fixed;
-  inset: auto;
-  margin: 0;
-  overflow: visible;
-  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%;
-}

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

@@ -1,280 +0,0 @@
-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;
-    /** 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;
-    /** Preferred placement; Looma flips and shifts when space is constrained. */
-    placement = 'bottom-start';
-    internalOpen = false;
-    overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
-    anchor = null;
-    surface = null;
-    syncFromProp() {
-        if (isControlled(this.open))
-            this.internalOpen = this.open;
-    }
-    resetSurface() {
-        this.setupSurface();
-        this.syncSurface();
-    }
-    syncSurface() {
-        this.syncAnchorState();
-        if (!this.surface)
-            return;
-        if (this.internalOpen) {
-            this.surface.show();
-            openOverlay({
-                id: this.overlayId,
-                modal: false,
-                element: this.host,
-                relatedElements: this.anchor ? [this.anchor] : undefined,
-                dismissible: true,
-                requestClose: (reason, trigger) => this.closeMenu(reason, trigger),
-            });
-        }
-        else {
-            this.surface.hide();
-            closeOverlay(this.overlayId);
-        }
-    }
-    componentDidLoad() {
-        this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
-        this.host.addEventListener('click', this.onItemClick);
-        this.host.addEventListener('keydown', this.onKeydown);
-        this.setupSurface();
-        this.syncSurface();
-    }
-    disconnectedCallback() {
-        this.host.removeEventListener('click', this.onItemClick);
-        this.host.removeEventListener('keydown', this.onKeydown);
-        this.surface?.destroy();
-        this.surface = null;
-        closeOverlay(this.overlayId);
-    }
-    setupSurface() {
-        this.surface?.destroy();
-        this.surface = null;
-        this.anchor = this.for ? this.host.ownerDocument.getElementById(this.for) : null;
-        if (!this.anchor)
-            return;
-        this.surface = createAnchoredSurface(this.host, {
-            anchor: this.anchor,
-            placement: this.placement,
-        });
-    }
-    syncAnchorState() {
-        if (!this.anchor)
-            return;
-        this.anchor.setAttribute('aria-haspopup', 'menu');
-        this.anchor.setAttribute('aria-expanded', this.internalOpen ? 'true' : 'false');
-    }
-    closeMenu(reason, trigger) {
-        if (!this.internalOpen)
-            return;
-        if (!isControlled(this.open))
-            this.internalOpen = false;
-        dispatchDetail(this.host, 'close', {
-            open: false,
-            reason: reason,
-            trigger: trigger,
-        });
-        if (reason === 'escape')
-            this.anchor?.focus();
-    }
-    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') ?? '';
-        dispatchDetail(this.host, 'select', { value, trigger: eventToTrigger(e) });
-        dispatchDetail(this.host, 'close', {
-            open: false,
-            reason: 'action',
-            trigger: eventToTrigger(e),
-        });
-        if (!isControlled(this.open))
-            this.internalOpen = false;
-    };
-    onKeydown = (e) => {
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            requestTopOverlayClose('escape', 'keyboard');
-            return;
-        }
-        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') ?? '';
-                dispatchDetail(this.host, 'select', { value, trigger: 'keyboard' });
-                dispatchDetail(this.host, 'close', {
-                    open: false,
-                    reason: 'action',
-                    trigger: 'keyboard',
-                });
-                if (!isControlled(this.open))
-                    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 (h(Host, { key: '5b64cc53ca56ea04a63013c8cb61231c9b1045cc', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("div", { key: '6410a56cc5efcffd0673c9abdf8f8aa45295c516', class: "menu__surface" }, h("slot", { key: '7e7f9d3b19bbf3024d61ecf44cd8b103748ef966' }))));
-    }
-    static get is() { return "ui-menu"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-menu.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-menu.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "open": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Controlled open state. Omit it to use defaultOpen and local interaction state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "open"
-            },
-            "defaultOpen": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "default-open",
-                "defaultValue": "false"
-            },
-            "for": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Id of the control that anchors this menu in the top layer."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "for"
-            },
-            "placement": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "AnchoredPlacement",
-                    "resolved": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"",
-                    "references": {
-                        "AnchoredPlacement": {
-                            "location": "import",
-                            "path": "../../overlay/positioning",
-                            "id": "src/overlay/positioning.ts::AnchoredPlacement",
-                            "referenceLocation": "AnchoredPlacement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Preferred placement; Looma flips and shifts when space is constrained."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placement",
-                "defaultValue": "'bottom-start'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalOpen": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "open",
-                "methodName": "syncFromProp"
-            }, {
-                "propName": "for",
-                "methodName": "resetSurface"
-            }, {
-                "propName": "placement",
-                "methodName": "resetSurface"
-            }, {
-                "propName": "internalOpen",
-                "methodName": "syncSurface"
-            }];
-    }
-}

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

@@ -1,32 +0,0 @@
-: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;
-}

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

@@ -1,64 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class UIMenuItem {
-    disabled = false;
-    value = '';
-    render() {
-        return (h(Host, { key: 'd0f0886b18ebd01c0c2e20a2c1b1ecfd57eeb3e3', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, h("span", { key: '7fc584fb670b5b8ce0bbd3be1fea08f87de4a298', class: "menu-item__surface" }, h("slot", { key: '066fb08bc22996d439f3216e401a93a084e3e299' }))));
-    }
-    static get is() { return "ui-menu-item"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-menu-item.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-menu-item.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
-            }
-        };
-    }
-}