@threadlabs/looma 0.2.5 → 0.2.6

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

@@ -1,184 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { createId } from "../../utils/id";
-import { eventToTrigger, isActivationKey, dispatchDetail } from "../../utils/events";
-import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
-export class UIDisclosure {
-    host;
-    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
-    open;
-    defaultOpen = false;
-    disabled = false;
-    internalOpen = false;
-    contentId = '';
-    trigger = null;
-    content = null;
-    syncFromProp() {
-        if (isControlled(this.open))
-            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.internalOpen = controlledOrDefault(this.open, 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 = 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;
-        if (!isControlled(this.open))
-            this.internalOpen = next;
-        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: eventToTrigger(e) });
-    };
-    onTriggerKeydown = (e) => {
-        if (this.disabled || !isActivationKey(e))
-            return;
-        e.preventDefault();
-        this.setOpen(!this.internalOpen, { reason: 'action', trigger: 'keyboard' });
-    };
-    render() {
-        return (h(Host, { key: '91d1df53268f18c8c15192fb66b67baa7053fe93' }, h("slot", { key: '578c99f8fd09415c5e63e9f6a860fe204471da2f' })));
-    }
-    static get is() { return "ui-disclosure"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-disclosure.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-disclosure.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"
-            },
-            "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 {
-            "internalOpen": {},
-            "contentId": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "open",
-                "methodName": "syncFromProp"
-            }, {
-                "propName": "internalOpen",
-                "methodName": "syncState"
-            }];
-    }
-}

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

@@ -1,2 +0,0 @@
-:host { display: block; min-inline-size: 0; }
-[hidden] { display: none !important; }

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

@@ -1,196 +0,0 @@
-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')
-            ? editRoot
-            : editRoot?.querySelector('input, textarea, select, button, [tabindex], ui-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: 'c11babe81053ecc0fb6390507f74d5094c551f48', "data-edit": this.internalEdit ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("div", { key: 'fbb13fda25a177ff62f4bbb16b8fa7a8d1bfefb6', part: "preview", hidden: this.internalEdit }, h("slot", { key: '29537eed3c19da07a61b0236a563912eec332572', name: "preview" })), h("div", { key: 'a8cdb53c61041361ff97762bdf1e8e6992706751', part: "edit", hidden: !this.internalEdit }, h("slot", { key: '466c6bf07d44ab07ccab1fd138412e43a291dcca', 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.css

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

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

@@ -1,85 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class UIFloatingActionButton {
-    disabled = false;
-    mobileOnly = false;
-    label = '';
-    render() {
-        return (h(Host, { key: '54f6284109397d15e2b3ef92f68e9bd4cf91fbae', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: '9ebad7e3bbc2bf18d4d5a04f37a9f2d77011ad34', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '222c6807ae4639eb20dc25be08fe5f4e91c638de' }))));
-    }
-    static get is() { return "ui-floating-action-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-floating-action-button.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-floating-action-button.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"
-            },
-            "mobileOnly": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "mobile-only",
-                "defaultValue": "false"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
-            }
-        };
-    }
-}

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

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