@threadlabs/looma 0.1.24 → 0.1.26

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: 'b41f0aaabbcd23cb79ac06245e69fd8ecb9c9912', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: '36a023bd66d38845f1116874380d7a28bb46b5a2', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '412c41e4732cc230f84e7758bfc7faab7e0802e2' }))));
+        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

@@ -98,7 +98,7 @@ export class UIFormField {
         input.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
     }
     render() {
-        return (h(Host, { key: '0b8fd5608631b5f9159fdf99d6eba918cc6587e4', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: '4ed78782bcc8b6699a40d8402994b486d71d730a', onSlotchange: this.scheduleWire })));
+        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: 'fb4534d977b4812f402855f78176b8316ebace61', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, h("button", { key: 'b90d290870ad76ba18de88a6b6947a15040ff12a', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '88ded6ad90a4cfeffcd687990e5ba8b0c7d3bd30' }))));
+        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: 'fe125b4e8ec35e9ac0b0ca0434aa8439f515c51b', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'ec0609f9143435cf0436abb98488b9f30b71530b', 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.js

@@ -153,7 +153,7 @@ export class UIMenu {
         }
     };
     render() {
-        return (h(Host, { key: 'c5af7acaf41b75165e9f7cf47d65b7a1dcd4d1c0', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("div", { key: '058fff9a00a1dcba26f6db425096e7a96d889896', class: "menu__surface" }, h("slot", { key: 'dbbf9eb4ba2a348b6d85049e229ed0562ee17318' }))));
+        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"; }

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: 'f8a1721f8e516af04f901b53c3a66ce1de932608', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, h("span", { key: '6483d0b3ce1be06aed214f626b2d6a2963a44ade', class: "menu-item__surface" }, h("slot", { key: 'db470b1cbb54d56a14d05c0d7f72c43e37f4263e' }))));
+        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; }