@threadlabs/looma 0.1.0

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

@@ -0,0 +1,92 @@
+:host {
+  display: inline-flex;
+  color: var(--ui-text-secondary);
+}
+
+button {
+  appearance: none;
+  inline-size: var(--ui-icon-button-size, 2.5rem);
+  block-size: var(--ui-icon-button-size, 2.5rem);
+  min-inline-size: var(--ui-icon-button-size, 2.5rem);
+  min-block-size: var(--ui-icon-button-size, 2.5rem);
+  padding: 0;
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: var(--ui-icon-button-radius, var(--ui-radius-2));
+  background: var(--ui-icon-button-bg, transparent);
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+    transform var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+:host([size='sm']) button {
+  inline-size: var(--ui-icon-button-size-sm, 2rem);
+  block-size: var(--ui-icon-button-size-sm, 2rem);
+  min-inline-size: var(--ui-icon-button-size-sm, 2rem);
+  min-block-size: var(--ui-icon-button-size-sm, 2rem);
+}
+
+:host([size='lg']) button {
+  inline-size: var(--ui-icon-button-size-lg, 2.75rem);
+  block-size: var(--ui-icon-button-size-lg, 2.75rem);
+  min-inline-size: var(--ui-icon-button-size-lg, 2.75rem);
+  min-block-size: var(--ui-icon-button-size-lg, 2.75rem);
+}
+
+:host([variant='outline']) button {
+  border-color: var(--ui-icon-button-border, var(--ui-border-default));
+  background: var(--ui-icon-button-outline-bg, var(--ui-surface-default));
+  color: var(--ui-icon-button-outline-color, var(--ui-text-primary));
+}
+
+:host([variant='solid']) button {
+  background: var(--ui-icon-button-solid-bg, var(--ui-accent-solid));
+  color: var(--ui-icon-button-solid-color, var(--ui-text-on-accent));
+  box-shadow: var(
+    --ui-icon-button-solid-shadow,
+    0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
+  );
+}
+
+button:hover:enabled {
+  background: var(--ui-icon-button-hover-bg, var(--ui-surface-muted));
+  color: var(--ui-icon-button-hover-color, var(--ui-text-primary));
+}
+
+:host([variant='outline']) button:hover:enabled {
+  border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
+}
+
+:host([variant='solid']) button:hover:enabled {
+  background: var(--ui-icon-button-solid-hover-bg, var(--ui-accent-hover));
+}
+
+button:active:enabled {
+  transform: scale(var(--ui-icon-button-active-scale, 0.96));
+}
+
+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-icon-button-icon-size, 1.125rem);
+  block-size: var(--ui-icon-button-icon-size, 1.125rem);
+  flex-shrink: 0;
+  stroke-width: var(--ui-icon-button-icon-stroke-width, 1.75);
+}

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

@@ -0,0 +1,106 @@
+import { Host, h } from "@stencil/core";
+export class UIIconButton {
+    disabled = false;
+    label = '';
+    size = 'md';
+    variant = 'ghost';
+    render() {
+        return (h(Host, { key: '8f4c7271505fa061da954f1e989fc526dc980407', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: 'c56009d4028a557cd6f7f19833b0af6412b90c1c', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: 'ac2f201b0fbedb23106f72135ff8c3b6f25fca60' }))));
+    }
+    static get is() { return "ui-icon-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-icon-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-icon-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"
+            },
+            "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": "''"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'ghost' | 'outline' | 'solid'",
+                    "resolved": "\"ghost\" | \"outline\" | \"solid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'ghost'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,46 @@
+:host {
+  display: inline-flex;
+  color: var(--ui-text-primary);
+}
+
+::slotted(input) {
+  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);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  margin: 0;
+  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(input:hover:not(:focus):not(:disabled)) {
+  border-color: var(--ui-border-strong);
+}
+
+::slotted(input:focus) {
+  border-color: var(--ui-focus-ring);
+  box-shadow: 0 0 0 3px var(--ui-accent-soft);
+}
+
+:host([data-invalid='true'])::slotted(input),
+::slotted(input[aria-invalid='true']) {
+  border-color: var(--ui-accent-active);
+}
+
+::slotted(input:disabled) {
+  background: var(--ui-surface-muted);
+  color: var(--ui-text-muted);
+  cursor: not-allowed;
+}
+
+::slotted(input:focus-visible) {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,213 @@
+import { Host, h } from "@stencil/core";
+import { eventToTrigger, dispatchDetail } from "../../utils/events";
+export class UIInput {
+    host;
+    value = '';
+    defaultValue = '';
+    disabled = false;
+    invalid = false;
+    readOnly = false;
+    internalValue = '';
+    slotRef;
+    syncFromProp() {
+        this.internalValue = this.value;
+    }
+    syncToInput() {
+        const input = this.getInput();
+        if (!input)
+            return;
+        this.host.dataset.invalid = this.invalid ? 'true' : '';
+        input.value = this.internalValue;
+        input.defaultValue = this.defaultValue;
+        input.disabled = this.disabled;
+        input.readOnly = this.readOnly;
+        input.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.slotRef?.addEventListener('slotchange', () => this.syncToInput());
+        this.syncToInput();
+        const input = this.getInput();
+        input?.addEventListener('input', this.onInput);
+        input?.addEventListener('change', this.onChange);
+    }
+    disconnectedCallback() {
+        const input = this.getInput();
+        input?.removeEventListener('input', this.onInput);
+        input?.removeEventListener('change', this.onChange);
+    }
+    componentDidUpdate() {
+        this.syncToInput();
+    }
+    getInput() {
+        const slot = this.host.shadowRoot?.querySelector('slot');
+        const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
+        return nodes.find((el) => el.tagName === 'INPUT') ?? null;
+    }
+    onInput = (e) => {
+        const input = e.target;
+        if (!input)
+            return;
+        this.internalValue = input.value;
+        dispatchDetail(this.host, 'input', {
+            value: this.internalValue,
+            trigger: eventToTrigger(e),
+        });
+    };
+    onChange = (e) => {
+        const input = this.getInput();
+        if (!input)
+            return;
+        this.internalValue = input.value;
+        dispatchDetail(this.host, 'change', {
+            value: this.internalValue,
+            trigger: eventToTrigger(e),
+        });
+    };
+    render() {
+        return (h(Host, { key: '73f518c7f12fa483d592041d185498bd91f9bb8b', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '7ef93ef7c5d36ccdfa66cfb4d14f08707e9ea790', ref: (el) => (this.slotRef = el) })));
+    }
+    static get is() { return "ui-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-input.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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncFromProp"
+            }, {
+                "propName": "internalValue",
+                "methodName": "syncToInput"
+            }, {
+                "propName": "defaultValue",
+                "methodName": "syncToInput"
+            }, {
+                "propName": "disabled",
+                "methodName": "syncToInput"
+            }, {
+                "propName": "invalid",
+                "methodName": "syncToInput"
+            }, {
+                "propName": "readOnly",
+                "methodName": "syncToInput"
+            }];
+    }
+}

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

@@ -0,0 +1,37 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-width: 12rem;
+  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);
+}
+
+::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

@@ -0,0 +1,149 @@
+import { Host, h } from "@stencil/core";
+import { eventToTrigger } from "../../utils/events";
+import { dispatchDetail } from "../../utils/events";
+export class UIMenu {
+    host;
+    open = false;
+    defaultOpen = false;
+    internalOpen = false;
+    syncFromProp() {
+        this.internalOpen = this.open;
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.host.addEventListener('click', this.onItemClick);
+        this.host.addEventListener('keydown', this.onKeydown);
+    }
+    disconnectedCallback() {
+        this.host.removeEventListener('click', this.onItemClick);
+        this.host.removeEventListener('keydown', this.onKeydown);
+    }
+    getItems() {
+        return Array.from(this.host.querySelectorAll('ui-menu-item'));
+    }
+    isItemDisabled(item) {
+        return (item.getAttribute('aria-disabled') === 'true' ||
+            item.hasAttribute('disabled') ||
+            item.getAttribute('disabled') === 'true' ||
+            item.disabled === true);
+    }
+    onItemClick = (e) => {
+        const item = e.target.closest?.('ui-menu-item');
+        if (!item || item.getRootNode() !== this.host.getRootNode())
+            return;
+        if (this.isItemDisabled(item))
+            return;
+        const value = item.getAttribute('value') ?? item.getAttribute('data-value') ?? '';
+        dispatchDetail(this.host, 'select', { value, trigger: eventToTrigger(e) });
+        dispatchDetail(this.host, 'close', {
+            open: false,
+            reason: 'action',
+            trigger: eventToTrigger(e),
+        });
+        this.internalOpen = false;
+    };
+    onKeydown = (e) => {
+        const items = this.getItems().filter((i) => !this.isItemDisabled(i));
+        if (items.length === 0)
+            return;
+        const target = e.target.closest?.('ui-menu-item');
+        const currentIndex = target && target instanceof HTMLElement ? items.indexOf(target) : -1;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (target && currentIndex >= 0) {
+                const value = target.getAttribute('value') ?? target.getAttribute('data-value') ?? '';
+                dispatchDetail(this.host, 'select', { value, trigger: 'keyboard' });
+                dispatchDetail(this.host, 'close', {
+                    open: false,
+                    reason: 'action',
+                    trigger: 'keyboard',
+                });
+                this.internalOpen = false;
+            }
+            return;
+        }
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const nextIndex = e.key === 'ArrowDown'
+                ? currentIndex < 0
+                    ? 0
+                    : Math.min(currentIndex + 1, items.length - 1)
+                : currentIndex <= 0
+                    ? items.length - 1
+                    : currentIndex - 1;
+            items[nextIndex].focus();
+        }
+    };
+    render() {
+        return (h(Host, { key: 'f06ad0f8c09060495757ced2da095817409720b7', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'd504fd3c33894d0e464b957ce67c75fe8a24899c' })));
+    }
+    static get is() { return "ui-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-menu.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": "false"
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalOpen": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "syncFromProp"
+            }];
+    }
+}

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

@@ -0,0 +1,26 @@
+:host {
+  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);
+}
+
+:host(:hover:not([aria-disabled='true']):not([disabled])) {
+  background: var(--ui-surface-subtle);
+}
+
+:host([aria-disabled='true']),
+:host([disabled]) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}