@threadlabs/looma 0.2.5 → 0.2.7

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

@@ -1,190 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { eventToTrigger } from "../../utils/events";
-import { dispatchDetail } from "../../utils/events";
-import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
-export class UITabs {
-    host;
-    /** Controlled selected tab value. Omit it to use defaultValue and local interaction state. */
-    value;
-    defaultValue = '';
-    orientation = 'horizontal';
-    internalValue = '';
-    syncFromProp() {
-        if (isControlled(this.value))
-            this.internalValue = this.value;
-    }
-    syncState() {
-        const tabs = this.getTabs();
-        if (tabs.length === 0)
-            return;
-        tabs.forEach((tab) => {
-            const tabId = tab.id ?? tab.getAttribute('aria-controls') ?? '';
-            const isSelected = tabId === this.internalValue;
-            tab.setAttribute('aria-selected', String(isSelected));
-            tab.tabIndex = isSelected ? 0 : -1;
-            const controlsId = tab.getAttribute('aria-controls');
-            if (controlsId) {
-                const panel = this.host.querySelector(`#${CSS.escape(controlsId)}`) ?? document.getElementById(controlsId);
-                if (panel) {
-                    panel.hidden = !isSelected;
-                }
-            }
-        });
-    }
-    componentDidLoad() {
-        this.internalValue = controlledOrDefault(this.value, this.defaultValue);
-        if (!isControlled(this.value) && !this.internalValue) {
-            const tabs = this.getTabs();
-            if (tabs.length > 0) {
-                this.internalValue = tabs[0]?.id ?? tabs[0]?.getAttribute('aria-controls') ?? '';
-            }
-        }
-        this.syncState();
-        this.host.addEventListener('keydown', this.onKeydown);
-        this.host.addEventListener('click', this.onClick);
-    }
-    disconnectedCallback() {
-        this.host.removeEventListener('keydown', this.onKeydown);
-        this.host.removeEventListener('click', this.onClick);
-    }
-    componentDidUpdate() {
-        this.syncState();
-    }
-    getTabs() {
-        return Array.from(this.host.querySelectorAll('[role="tab"]'));
-    }
-    setValueFromTab(tab, trigger) {
-        const newValue = tab.id ?? tab.getAttribute('aria-controls') ?? '';
-        if (!newValue)
-            return;
-        const prev = this.internalValue;
-        if (!isControlled(this.value))
-            this.internalValue = newValue;
-        this.syncState();
-        dispatchDetail(this.host, 'select', { value: newValue, previousValue: prev || undefined, trigger });
-    }
-    onClick = (e) => {
-        const tab = e.target.closest?.('[role="tab"]');
-        if (!tab || !this.host.contains(tab))
-            return;
-        this.setValueFromTab(tab, eventToTrigger(e));
-    };
-    onKeydown = (e) => {
-        const tab = e.target.closest?.('[role="tab"]');
-        if (!tab || !this.host.contains(tab))
-            return;
-        const tabs = this.getTabs();
-        if (tabs.length === 0)
-            return;
-        const currentIndex = tabs.indexOf(tab);
-        const isVertical = this.orientation === 'vertical';
-        const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
-        const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
-        if (e.key === nextKey || e.key === prevKey) {
-            e.preventDefault();
-            const nextIndex = e.key === nextKey
-                ? Math.min(currentIndex + 1, tabs.length - 1)
-                : currentIndex <= 0
-                    ? tabs.length - 1
-                    : currentIndex - 1;
-            this.setValueFromTab(tabs[nextIndex], 'keyboard');
-            tabs[nextIndex].focus();
-        }
-    };
-    render() {
-        return (h(Host, { key: '61044ac3f2fcb0f766d931416f42ff17ec94c00d', orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: '3260c95bdd24581045b1c4e4d1b8f4d08daf02b4' })));
-    }
-    static get is() { return "ui-tabs"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-tabs.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-tabs.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Controlled selected tab value. Omit it to use defaultValue and local interaction state."
-                },
-                "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": "''"
-            },
-            "orientation": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'horizontal' | 'vertical'",
-                    "resolved": "\"horizontal\" | \"vertical\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "orientation",
-                "defaultValue": "'horizontal'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalValue": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "syncFromProp"
-            }, {
-                "propName": "internalValue",
-                "methodName": "syncState"
-            }, {
-                "propName": "orientation",
-                "methodName": "syncState"
-            }];
-    }
-}

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

@@ -1,49 +0,0 @@
-:host {
-  display: inline-flex;
-  min-inline-size: 0;
-  color: var(--ui-text-primary);
-}
-
-::slotted(textarea) {
-  width: 100%;
-  appearance: none;
-  border: 1px solid var(--ui-control-border, var(--ui-border-default));
-  border-radius: var(--ui-radius-2);
-  background: var(--ui-control-surface, var(--ui-surface-default));
-  color: inherit;
-  font: inherit;
-  line-height: var(--ui-line-height-md);
-  min-block-size: calc(var(--ui-space-12, 3rem) * 2);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  margin: 0;
-  resize: vertical;
-  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(textarea:hover:not(:focus):not(:disabled)) {
-  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
-}
-
-::slotted(textarea:focus) {
-  border-color: var(--ui-control-focus, var(--ui-focus-ring));
-  box-shadow: 0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft));
-}
-
-:host([data-invalid='true'])::slotted(textarea),
-::slotted(textarea[aria-invalid='true']) {
-  border-color: var(--ui-accent-active);
-}
-
-::slotted(textarea:disabled) {
-  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-text-muted);
-  cursor: not-allowed;
-}
-
-::slotted(textarea:focus-visible) {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
-}

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

@@ -1,241 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { dispatchDetail, eventToTrigger } from "../../utils/events";
-export class UITextarea {
-    host;
-    value;
-    defaultValue = '';
-    disabled = false;
-    invalid = false;
-    readOnly = false;
-    rows = 4;
-    internalValue = '';
-    slotRef;
-    syncFromProp() {
-        if (this.value !== undefined)
-            this.internalValue = this.value;
-    }
-    syncToTextarea() {
-        const textarea = this.getTextarea();
-        if (!textarea)
-            return;
-        this.host.dataset.invalid = this.invalid ? 'true' : '';
-        // An omitted host value leaves the slotted textarea under framework or
-        // native-form control instead of resetting it during component updates.
-        if (this.value !== undefined)
-            textarea.value = this.internalValue;
-        textarea.defaultValue = this.defaultValue;
-        textarea.disabled = this.disabled;
-        textarea.readOnly = this.readOnly;
-        textarea.rows = this.rows;
-        textarea.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
-    }
-    componentDidLoad() {
-        this.syncFromProp();
-        this.slotRef?.addEventListener('slotchange', () => this.syncToTextarea());
-        this.syncToTextarea();
-        const textarea = this.getTextarea();
-        textarea?.addEventListener('input', this.onInput);
-        textarea?.addEventListener('change', this.onChange);
-    }
-    disconnectedCallback() {
-        const textarea = this.getTextarea();
-        textarea?.removeEventListener('input', this.onInput);
-        textarea?.removeEventListener('change', this.onChange);
-    }
-    componentDidUpdate() {
-        this.syncToTextarea();
-    }
-    getTextarea() {
-        const slot = this.host.shadowRoot?.querySelector('slot');
-        const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
-        return nodes.find((el) => el.tagName === 'TEXTAREA') ?? null;
-    }
-    onInput = (e) => {
-        const textarea = e.target;
-        if (!textarea)
-            return;
-        this.internalValue = textarea.value;
-        dispatchDetail(this.host, 'input', {
-            value: this.internalValue,
-            trigger: eventToTrigger(e),
-        });
-    };
-    onChange = (e) => {
-        const textarea = this.getTextarea();
-        if (!textarea)
-            return;
-        this.internalValue = textarea.value;
-        dispatchDetail(this.host, 'change', {
-            value: this.internalValue,
-            trigger: eventToTrigger(e),
-        });
-    };
-    render() {
-        return (h(Host, { key: 'a554edb1a0ef40a2c116e3064e52af7474e065e4', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'a4eb8034ec11f8b3b06ace7287410fd839004593', ref: (el) => (this.slotRef = el) })));
-    }
-    static get is() { return "ui-textarea"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-textarea.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-textarea.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"
-            },
-            "rows": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "rows",
-                "defaultValue": "4"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalValue": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "syncFromProp"
-            }, {
-                "propName": "internalValue",
-                "methodName": "syncToTextarea"
-            }, {
-                "propName": "defaultValue",
-                "methodName": "syncToTextarea"
-            }, {
-                "propName": "disabled",
-                "methodName": "syncToTextarea"
-            }, {
-                "propName": "invalid",
-                "methodName": "syncToTextarea"
-            }, {
-                "propName": "readOnly",
-                "methodName": "syncToTextarea"
-            }, {
-                "propName": "rows",
-                "methodName": "syncToTextarea"
-            }];
-    }
-}

package/dist/collection/components/ui-toast-region/ui-toast-region.css

@@ -1,59 +0,0 @@
-:host {
-  position: fixed;
-  top: calc(var(--ui-space-4) + env(safe-area-inset-top));
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
-  display: grid;
-  gap: var(--ui-space-2);
-  inline-size: min(24rem, calc(100vw - (var(--ui-space-4) * 2)));
-  max-inline-size: 100%;
-  pointer-events: none;
-}
-
-:host([popover]) {
-  right: auto;
-  bottom: auto;
-  margin: 0;
-}
-
-:host > * {
-  pointer-events: auto;
-}
-
-::slotted([data-ui-toast]) {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: var(--ui-space-2);
-  align-items: start;
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-3);
-  padding: var(--ui-space-3) var(--ui-space-4);
-  background: var(--ui-surface-elevated);
-  color: var(--ui-text-primary);
-  box-shadow: var(--ui-shadow-lg);
-  animation: ui-toast-enter 0.25s var(--ui-motion-ease) forwards;
-}
-
-@keyframes ui-toast-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-0.5rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-::slotted([data-ui-toast][aria-hidden='true']) {
-  display: none;
-}
-
-::slotted([data-ui-toast-dismiss]) {
-  border: 0;
-  background: transparent;
-  color: var(--ui-text-secondary);
-  cursor: pointer;
-  font: inherit;
-}

package/dist/collection/components/ui-toast-region/ui-toast-region.js

@@ -1,126 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { eventToTrigger } from "../../utils/events";
-import { dispatchDetail } from "../../utils/events";
-import { createViewportSurface } from "../../overlay/positioning";
-export class UIToastRegion {
-    host;
-    open = true;
-    internalOpen = false;
-    surface = null;
-    contentObserver = null;
-    pendingDismiss = null;
-    syncFromProp() {
-        this.syncContents();
-    }
-    syncSurface() {
-        if (this.internalOpen)
-            this.surface?.show();
-        else
-            this.surface?.hide();
-    }
-    componentDidLoad() {
-        this.surface = createViewportSurface(this.host);
-        this.contentObserver = new MutationObserver(this.syncContents);
-        this.contentObserver.observe(this.host, { childList: true, subtree: true });
-        this.syncContents();
-        this.syncSurface();
-        this.host.addEventListener('click', this.onClick);
-    }
-    disconnectedCallback() {
-        this.host.removeEventListener('click', this.onClick);
-        this.contentObserver?.disconnect();
-        this.contentObserver = null;
-        this.surface?.destroy();
-        this.surface = null;
-    }
-    getToasts() {
-        return Array.from(this.host.querySelectorAll('[data-ui-toast]'));
-    }
-    syncContents = () => {
-        const nextOpen = this.open && this.getToasts().length > 0;
-        const wasOpen = this.internalOpen;
-        const completedDismiss = this.pendingDismiss && !this.host.contains(this.pendingDismiss.toast)
-            ? this.pendingDismiss
-            : null;
-        this.internalOpen = nextOpen;
-        if (wasOpen && !nextOpen && completedDismiss) {
-            dispatchDetail(this.host, 'close', {
-                open: false,
-                reason: 'action',
-                trigger: completedDismiss.trigger,
-            });
-        }
-        if (completedDismiss || !this.open)
-            this.pendingDismiss = null;
-    };
-    onClick = (e) => {
-        const dismissBtn = e.target.closest?.('[data-ui-toast-dismiss]');
-        if (!dismissBtn)
-            return;
-        const toast = dismissBtn.closest?.('[data-ui-toast]');
-        if (!toast)
-            return;
-        const id = toast.id ?? '';
-        const trigger = eventToTrigger(e);
-        this.pendingDismiss = { toast: toast, trigger };
-        dispatchDetail(this.host, 'dismiss', {
-            id,
-            reason: 'action',
-            trigger,
-        });
-    };
-    render() {
-        return (h(Host, { key: '9f9c2e14150c631c0f7cb427c693dcd52c20897d', role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: '9e1d9ebb6b587afab2c4302241cecb03a321cee1' })));
-    }
-    static get is() { return "ui-toast-region"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-toast-region.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-toast-region.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "open": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "open",
-                "defaultValue": "true"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalOpen": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "open",
-                "methodName": "syncFromProp"
-            }, {
-                "propName": "internalOpen",
-                "methodName": "syncSurface"
-            }];
-    }
-}