@threadlabs/looma 0.1.23 → 0.1.25

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

@@ -0,0 +1,196 @@
+import { Host, h } from "@stencil/core";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
+/** Swaps an explicit presentation trigger for a focused editing control. */
+export class UIEditable {
+    host;
+    /** Controlled edit state. Omit it to use defaultEdit and local interaction state. */
+    edit;
+    defaultEdit = false;
+    disabled = false;
+    editChange;
+    internalEdit = false;
+    trigger = null;
+    syncFromProp() {
+        if (isControlled(this.edit))
+            this.internalEdit = this.edit;
+    }
+    componentWillLoad() {
+        this.internalEdit = controlledOrDefault(this.edit, this.defaultEdit);
+    }
+    componentDidLoad() {
+        this.host.ownerDocument.addEventListener('pointerdown', this.onDocumentPointerDown, true);
+    }
+    disconnectedCallback() {
+        this.host.ownerDocument.removeEventListener('pointerdown', this.onDocumentPointerDown, true);
+    }
+    requestEdit(next, reason, trigger) {
+        if (this.disabled || this.internalEdit === next)
+            return;
+        if (!isControlled(this.edit))
+            this.internalEdit = next;
+        this.editChange.emit({ edit: next, reason, trigger });
+        if (next)
+            requestAnimationFrame(() => this.focusEditor());
+        else
+            requestAnimationFrame(() => this.trigger?.focus());
+    }
+    focusEditor() {
+        const editRoot = this.host.querySelector('[slot="edit"]');
+        const candidate = editRoot?.matches('input, textarea, select, button, [tabindex], ui-combobox, ui-multi-combobox')
+            ? editRoot
+            : editRoot?.querySelector('input, textarea, select, button, [tabindex], ui-combobox, ui-multi-combobox');
+        const focusInput = candidate?.focusInput;
+        if (typeof focusInput === 'function')
+            void focusInput.call(candidate);
+        else
+            candidate?.focus();
+    }
+    eventTrigger(event) {
+        return event.composedPath().find(node => node instanceof HTMLElement && node.hasAttribute('data-ui-editable-trigger'));
+    }
+    onClick = (event) => {
+        if (this.internalEdit || this.disabled)
+            return;
+        const trigger = this.eventTrigger(event);
+        if (!trigger)
+            return;
+        this.trigger = trigger;
+        this.requestEdit(true, 'activate', 'pointer');
+    };
+    onKeyDown = (event) => {
+        if (this.internalEdit && event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.requestEdit(false, 'escape', 'keyboard');
+            return;
+        }
+        if (this.internalEdit || !['Enter', ' '].includes(event.key))
+            return;
+        const trigger = this.eventTrigger(event);
+        if (!trigger)
+            return;
+        event.preventDefault();
+        this.trigger = trigger;
+        this.requestEdit(true, 'activate', 'keyboard');
+    };
+    onDocumentPointerDown = (event) => {
+        if (!this.internalEdit || event.composedPath().includes(this.host))
+            return;
+        this.requestEdit(false, 'light-dismiss', 'pointer');
+    };
+    render() {
+        return h(Host, { key: 'f350400d4ebf897fb657b83b7cba9d309c5067bd', "data-edit": this.internalEdit ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("div", { key: 'f365ac61f59e9aaa1516121e3d6e2a42187e1d7b', part: "preview", hidden: this.internalEdit }, h("slot", { key: 'ea234b437cc4eb530f2994d695429be91d874ef7', name: "preview" })), h("div", { key: 'dacf0e74e72c47868986c80aaa60f55942fd9505', part: "edit", hidden: !this.internalEdit }, h("slot", { key: '54a943bc290335181a23b4cfa6055e4acfd8a62b', name: "edit" })));
+    }
+    static get is() { return "ui-editable"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-editable.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-editable.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "edit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled edit state. Omit it to use defaultEdit and local interaction state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "edit"
+            },
+            "defaultEdit": {
+                "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-edit",
+                "defaultValue": "false"
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalEdit": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "editChange",
+                "name": "edit-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "EditableChange",
+                    "resolved": "EditableChange",
+                    "references": {
+                        "EditableChange": {
+                            "location": "import",
+                            "path": "../../field/editable",
+                            "id": "src/field/editable.ts::EditableChange",
+                            "referenceLocation": "EditableChange"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "edit",
+                "methodName": "syncFromProp"
+            }];
+    }
+}

package/dist/collection/components/ui-floating-action-button/ui-floating-action-button.js

@@ -4,7 +4,7 @@ export class UIFloatingActionButton {
     mobileOnly = false;
     label = '';
     render() {
-        return (h(Host, { key: 'c9a7d8c9b6d6608566b21621a73d939f372c830d', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: '8eddccaf6be2f028bc02df967038843120045b84', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '0ea12efb9cb8ecec06238066827a734fb3b01e1e' }))));
+        return (h(Host, { key: '9e917e07efcef5c0a96b8b09af8934f336a521bd', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: '940daac4c2ff1144d7e82b36727205f286325a8e', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '382c70aa4836f6e799f98e1f0e4bc6e3104430fc' }))));
     }
     static get is() { return "ui-floating-action-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-form-field/ui-form-field.js

@@ -5,17 +5,62 @@ export class UIFormField {
     invalid = false;
     disabled = false;
     required = false;
+    observer = null;
+    activeInput = null;
+    ownedDescriptionIds = new Set();
+    wireQueued = false;
     componentDidLoad() {
+        this.observer = new MutationObserver(this.scheduleWire);
+        this.observer.observe(this.host, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['aria-describedby', 'data-slot', 'id', 'role'],
+        });
         this.wire();
     }
     componentDidUpdate() {
-        this.wire();
+        this.scheduleWire();
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+        this.observer = null;
+        this.removeOwnedDescriptions(this.activeInput);
+        this.activeInput = null;
+        this.ownedDescriptionIds.clear();
     }
+    descriptionIds(input) {
+        return Array.from(new Set((input.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean)));
+    }
+    removeOwnedDescriptions(input) {
+        if (!input || this.ownedDescriptionIds.size === 0)
+            return;
+        const remaining = this.descriptionIds(input)
+            .filter(id => !this.ownedDescriptionIds.has(id));
+        if (remaining.length > 0)
+            input.setAttribute('aria-describedby', remaining.join(' '));
+        else
+            input.removeAttribute('aria-describedby');
+    }
+    scheduleWire = () => {
+        if (this.wireQueued)
+            return;
+        this.wireQueued = true;
+        queueMicrotask(() => {
+            this.wireQueued = false;
+            this.wire();
+        });
+    };
     wire() {
         const label = this.host.querySelector('label');
         const input = this.host.querySelector('input, textarea, select');
         const help = this.host.querySelector('[data-slot="help"]');
         const error = this.host.querySelector('[data-slot="error"], [role="alert"]');
+        if (input !== this.activeInput) {
+            this.removeOwnedDescriptions(this.activeInput);
+            this.activeInput = input;
+            this.ownedDescriptionIds.clear();
+        }
         if (!input)
             return;
         if (!input.id) {
@@ -24,6 +69,9 @@ export class UIFormField {
         if (label && !label.getAttribute('for')) {
             label.setAttribute('for', input.id);
         }
+        const previousOwnedIds = this.ownedDescriptionIds;
+        const externalIds = this.descriptionIds(input)
+            .filter(id => !previousOwnedIds.has(id));
         const describedIds = [];
         if (help) {
             if (!help.id)
@@ -35,15 +83,22 @@ export class UIFormField {
                 error.id = createId('form-field-error');
             describedIds.push(error.id);
         }
-        if (describedIds.length) {
-            input.setAttribute('aria-describedby', describedIds.join(' '));
+        const nextOwnedIds = describedIds.filter(id => !externalIds.includes(id));
+        const nextDescribedIds = Array.from(new Set([...externalIds, ...describedIds]));
+        const nextDescribedBy = nextDescribedIds.join(' ');
+        if (input.getAttribute('aria-describedby') !== nextDescribedBy) {
+            if (nextDescribedBy)
+                input.setAttribute('aria-describedby', nextDescribedBy);
+            else
+                input.removeAttribute('aria-describedby');
         }
+        this.ownedDescriptionIds = new Set(nextOwnedIds);
         input.disabled = this.disabled;
         input.required = this.required;
         input.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
     }
     render() {
-        return (h(Host, { key: 'cdd06c6b16ac56f3547e64e7888d8766243392db', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: '7d545673a3485f8beee01b13ab56185b98ba8856' })));
+        return (h(Host, { key: 'ac01e2be489b9c907169417dc5064061bd74ff7c', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: 'c739f9b2c948bc1d3db4316871c2293bf75cf520', onSlotchange: this.scheduleWire })));
     }
     static get is() { return "ui-form-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-icon-button/ui-icon-button.js

@@ -7,7 +7,7 @@ export class UIIconButton {
     /** Reveals this control through a surrounding ui-affordance-scope. */
     anticipatory = false;
     render() {
-        return (h(Host, { key: '8616d7e52a03a7a42738b11f4cabed3eb38c8640', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, h("button", { key: 'fae1362a50a0d80e2fcb3ab41f63ff21cf5d939a', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: 'e548fc504e3b26e85263fe3fc8faac0887fee16b' }))));
+        return (h(Host, { key: '225e147d184109d39a2e6f9236ba3ba3c5864c31', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, h("button", { key: '7e54fab4520ae6641c974abf19e975e8eec7a3df', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '54f9ba27c5a2ca896267f07ad1055907e74a64bc' }))));
     }
     static get is() { return "ui-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class UIInput {
         });
     };
     render() {
-        return (h(Host, { key: 'a2f2c108144a7acae0dfb1bef6ea1f38a4dcca9c', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '04284765a12089a8a1045056d72551a3494f00fc', ref: (el) => (this.slotRef = el) })));
+        return (h(Host, { key: '0d8676e8458476681653ef4600dcb0f3b56d1ed1', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'd3585c07b6985d9090002f7a9c0eea1227517e0f', ref: (el) => (this.slotRef = el) })));
     }
     static get is() { return "ui-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,14 +2,25 @@
   --ui-menu-viewport-gap: var(--ui-space-2, 0.5rem);
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   inline-size: max-content;
   min-inline-size: min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));
   max-inline-size: calc(100vw - (var(--ui-menu-viewport-gap) * 2));
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: var(--ui-shadow-lg);
+}
+
+.menu__surface {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
   padding: var(--ui-space-1);
   background: var(--ui-surface-elevated);
   border: 1px solid var(--ui-border-default);
   border-radius: var(--ui-radius-3);
-  box-shadow: var(--ui-shadow-lg);
 }
 
 :host(:not([data-open])) {
@@ -54,26 +65,4 @@
 ::slotted(ui-menu-item) {
   display: block;
   width: 100%;
-  padding: var(--ui-space-2) var(--ui-space-3);
-  text-align: left;
-  background: none;
-  border: none;
-  border-radius: var(--ui-radius-2);
-  color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-md);
-  font-weight: var(--ui-font-medium, 500);
-  cursor: pointer;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
-::slotted(ui-menu-item:hover:not([aria-disabled='true']):not([disabled])) {
-  background: var(--ui-surface-subtle);
-}
-
-::slotted(ui-menu-item[aria-disabled='true']),
-::slotted(ui-menu-item[disabled]) {
-  opacity: 0.6;
-  cursor: not-allowed;
 }

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

@@ -2,10 +2,12 @@ import { Host, h } from "@stencil/core";
 import { eventToTrigger } from "../../utils/events";
 import { dispatchDetail } from "../../utils/events";
 import { closeOverlay, openOverlay, requestTopOverlayClose } from "../../overlay/manager";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 import { createAnchoredSurface, } from "../../overlay/positioning";
 export class UIMenu {
     host;
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     /** Id of the control that anchors this menu in the top layer. */
     for;
@@ -16,7 +18,8 @@ export class UIMenu {
     anchor = null;
     surface = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (isControlled(this.open))
+            this.internalOpen = this.open;
     }
     resetSurface() {
         this.setupSurface();
@@ -43,8 +46,7 @@ export class UIMenu {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
         this.host.addEventListener('click', this.onItemClick);
         this.host.addEventListener('keydown', this.onKeydown);
         this.setupSurface();
@@ -77,7 +79,8 @@ export class UIMenu {
     closeMenu(reason, trigger) {
         if (!this.internalOpen)
             return;
-        this.internalOpen = false;
+        if (!isControlled(this.open))
+            this.internalOpen = false;
         dispatchDetail(this.host, 'close', {
             open: false,
             reason: reason,
@@ -108,7 +111,8 @@ export class UIMenu {
             reason: 'action',
             trigger: eventToTrigger(e),
         });
-        this.internalOpen = false;
+        if (!isControlled(this.open))
+            this.internalOpen = false;
     };
     onKeydown = (e) => {
         if (e.key === 'Escape') {
@@ -131,7 +135,8 @@ export class UIMenu {
                     reason: 'action',
                     trigger: 'keyboard',
                 });
-                this.internalOpen = false;
+                if (!isControlled(this.open))
+                    this.internalOpen = false;
             }
             return;
         }
@@ -148,7 +153,7 @@ export class UIMenu {
         }
     };
     render() {
-        return (h(Host, { key: '25ae79e914820dfc470fa03d8c843646c3c060d9', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'b3a8b130e55610d948bc3e4603dede59dd560d05' })));
+        return (h(Host, { key: 'afba5a7f63238afdb6f71a3636c1f294d3e8ac6f', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("div", { key: '50d770efd27dddca436b804f10f1cc40bc604cb5', class: "menu__surface" }, h("slot", { key: '5014fc43a0ee2d66168bbcc1d52b20bd5120acb9' }))));
     }
     static get is() { return "ui-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -173,16 +178,15 @@ export class UIMenu {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controlled open state. Omit it to use defaultOpen and local interaction state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "open",
-                "defaultValue": "false"
+                "attribute": "open"
             },
             "defaultOpen": {
                 "type": "boolean",

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

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

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

@@ -3,7 +3,7 @@ export class UIMenuItem {
     disabled = false;
     value = '';
     render() {
-        return (h(Host, { key: 'ebd7c5aa5c8fdce2d2349aef7f1a4505b9190852', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, h("slot", { key: '7b55a8545034b055f8cbd047a0f16ea729af097e' })));
+        return (h(Host, { key: '711e7f70268d23969e40073cd47b065afadc22c9', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, h("span", { key: 'd0c0aff983bdbc48666fcd652b39340bfd92c790', class: "menu-item__surface" }, h("slot", { key: '3fc6111848142b388529a9cdb5f6134bffe8fa42' }))));
     }
     static get is() { return "ui-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-multi-combobox/ui-multi-combobox.css

@@ -0,0 +1,29 @@
+:host { display: block; min-inline-size: 0; color: var(--ui-text-primary); font: inherit; }
+ui-combobox::part(field) {
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ui-space-1);
+  min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem);
+  padding: var(--ui-space-1);
+}
+ui-combobox::part(input) {
+  flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);
+  width: auto;
+  min-block-size: 1.75rem;
+  padding: var(--ui-space-0-5) var(--ui-space-1);
+}
+.items { display: contents; }
+.item {
+  appearance: none;
+  display: inline-flex;
+  max-inline-size: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-radius-1);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: default;
+}
+.item:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 1px; }
+.item:disabled { opacity: .6; }