@threadlabs/looma 0.1.0

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

@@ -0,0 +1,190 @@
+import { Host, h } from "@stencil/core";
+import { eventToTrigger } from "../../utils/events";
+import { dispatchDetail } from "../../utils/events";
+export class UITabs {
+    host;
+    value = '';
+    defaultValue = '';
+    orientation = 'horizontal';
+    internalValue = '';
+    syncFromProp() {
+        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.syncFromProp();
+        if (!this.internalValue && this.defaultValue) {
+            this.internalValue = this.defaultValue;
+        }
+        if (!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;
+        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: 'd73e97facf3ffa020f349642bc6c0136f39fc463', orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: 'a7bd47a4b48780ddf1f21a917fd1cb747376640b' })));
+    }
+    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": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "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

@@ -0,0 +1,48 @@
+:host {
+  display: inline-flex;
+  color: var(--ui-text-primary);
+}
+
+::slotted(textarea) {
+  width: 100%;
+  appearance: none;
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-2);
+  background: 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-border-strong);
+}
+
+::slotted(textarea:focus) {
+  border-color: var(--ui-focus-ring);
+  box-shadow: 0 0 0 3px 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-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

@@ -0,0 +1,238 @@
+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() {
+        this.internalValue = this.value;
+    }
+    syncToTextarea() {
+        const textarea = this.getTextarea();
+        if (!textarea)
+            return;
+        this.host.dataset.invalid = this.invalid ? 'true' : '';
+        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: 'd52719875939fa9b2f757a35fb4cd1aa31a194c5', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'e40ba71b60cae07437219d6ab4b5879b26af1ac2', 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": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "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

@@ -0,0 +1,52 @@
+:host {
+  position: fixed;
+  top: var(--ui-space-4);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: grid;
+  gap: var(--ui-space-2);
+  max-width: min(24rem, 90vw);
+  pointer-events: none;
+}
+
+: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

@@ -0,0 +1,100 @@
+import { Host, h } from "@stencil/core";
+import { eventToTrigger } from "../../utils/events";
+import { dispatchDetail } from "../../utils/events";
+export class UIToastRegion {
+    host;
+    open = true;
+    internalOpen = true;
+    syncFromProp() {
+        this.internalOpen = this.open;
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.host.addEventListener('click', this.onClick);
+    }
+    disconnectedCallback() {
+        this.host.removeEventListener('click', this.onClick);
+    }
+    getToasts() {
+        return Array.from(this.host.querySelectorAll('[data-ui-toast]'));
+    }
+    updateOpenState() {
+        const toasts = this.getToasts();
+        this.internalOpen = toasts.length > 0;
+    }
+    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 ?? '';
+        toast.setAttribute('aria-hidden', 'true');
+        toast.remove();
+        dispatchDetail(this.host, 'dismiss', {
+            id,
+            reason: 'action',
+            trigger: eventToTrigger(e),
+        });
+        this.updateOpenState();
+        if (this.getToasts().length === 0) {
+            dispatchDetail(this.host, 'close', {
+                open: false,
+                reason: 'action',
+                trigger: eventToTrigger(e),
+            });
+        }
+    };
+    render() {
+        return (h(Host, { key: '8e99577d8770984b8d6d29e442931570c1f1bc4d', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: '06f2c6cf39c4795afc0937669aa2104821aef3d6' })));
+    }
+    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"
+            }];
+    }
+}

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

@@ -0,0 +1,14 @@
+:host {
+  display: inline-block;
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-surface-elevated);
+  color: var(--ui-text-primary);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  font-size: var(--ui-font-size-sm);
+  box-shadow: var(--ui-shadow-md);
+}
+
+:host([hidden]) {
+  display: none !important;
+}