@threadlabs/looma 0.2.5 → 0.2.6

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

@@ -1,218 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { dispatchDetail, eventToTrigger } from "../../utils/events";
-export class UISelect {
-    host;
-    value;
-    defaultValue;
-    disabled = false;
-    invalid = false;
-    required = false;
-    internalValue = '';
-    slotRef;
-    initialized = false;
-    syncFromProp() {
-        if (this.value !== undefined)
-            this.internalValue = this.value;
-    }
-    syncToSelect() {
-        const select = this.getSelect();
-        if (!select)
-            return;
-        this.host.dataset.invalid = this.invalid ? 'true' : '';
-        // A native select automatically selects its first option. Apply the host
-        // default once regardless, then leave subsequent native/framework edits alone.
-        if (this.value !== undefined)
-            select.value = this.internalValue;
-        else if (!this.initialized && this.defaultValue !== undefined)
-            select.value = this.defaultValue;
-        this.initialized = true;
-        select.disabled = this.disabled;
-        select.required = this.required;
-        select.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
-    }
-    componentDidLoad() {
-        this.syncFromProp();
-        this.slotRef?.addEventListener('slotchange', () => this.syncToSelect());
-        this.syncToSelect();
-        const select = this.getSelect();
-        select?.addEventListener('input', this.onInput);
-        select?.addEventListener('change', this.onChange);
-    }
-    disconnectedCallback() {
-        const select = this.getSelect();
-        select?.removeEventListener('input', this.onInput);
-        select?.removeEventListener('change', this.onChange);
-    }
-    componentDidUpdate() {
-        this.syncToSelect();
-    }
-    getSelect() {
-        const slot = this.host.shadowRoot?.querySelector('slot');
-        const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
-        return nodes.find((el) => el.tagName === 'SELECT') ?? null;
-    }
-    onInput = (e) => {
-        const select = e.target;
-        if (!select)
-            return;
-        this.internalValue = select.value;
-        dispatchDetail(this.host, 'input', {
-            value: this.internalValue,
-            trigger: eventToTrigger(e),
-        });
-    };
-    onChange = (e) => {
-        const select = this.getSelect();
-        if (!select)
-            return;
-        this.internalValue = select.value;
-        dispatchDetail(this.host, 'change', {
-            value: this.internalValue,
-            trigger: eventToTrigger(e),
-        });
-    };
-    render() {
-        return (h(Host, { key: '2b3348e1694cfd113163af3adf939fd64cb40654', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '40e627125a906cf4bf294eb085c172a5370f3a54', ref: (el) => (this.slotRef = el) })));
-    }
-    static get is() { return "ui-select"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-select.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-select.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": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "default-value"
-            },
-            "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"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalValue": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "syncFromProp"
-            }, {
-                "propName": "internalValue",
-                "methodName": "syncToSelect"
-            }, {
-                "propName": "defaultValue",
-                "methodName": "syncToSelect"
-            }, {
-                "propName": "disabled",
-                "methodName": "syncToSelect"
-            }, {
-                "propName": "invalid",
-                "methodName": "syncToSelect"
-            }, {
-                "propName": "required",
-                "methodName": "syncToSelect"
-            }];
-    }
-}

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

@@ -1,63 +0,0 @@
-:host {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  color: var(--ui-text-primary);
-}
-
-:host([aria-disabled='true']),
-:host([data-disabled='true']) {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-:host([role='switch']) {
-  cursor: pointer;
-}
-
-:host input[type='checkbox'] {
-  appearance: none;
-  -webkit-appearance: none;
-  display: block;
-  position: relative;
-  width: 2.25rem;
-  height: 1.25rem;
-  padding: 0;
-  border: 1px solid var(--ui-border-default);
-  border-radius: 999px;
-  background: var(--ui-surface-muted);
-  cursor: pointer;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    border-color var(--ui-motion-fast) var(--ui-motion-ease);
-  margin: 0;
-}
-
-:host input[type='checkbox']::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 0.875rem;
-  height: 0.875rem;
-  border-radius: 999px;
-  background: var(--ui-surface-default);
-  border: 1px solid var(--ui-border-default);
-  transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
-:host input[type='checkbox']:checked {
-  background: var(--ui-accent-solid);
-  border-color: var(--ui-accent-solid);
-}
-
-:host input[type='checkbox']:checked::after {
-  transform: translateX(calc(2.25rem - 0.875rem - 4px));
-  background: var(--ui-text-on-accent);
-  border-color: var(--ui-text-on-accent);
-}
-
-:host input[type='checkbox']:focus-visible {
-  outline: 2px solid var(--ui-accent-solid);
-  outline-offset: 2px;
-}

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

@@ -1,185 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { dispatchDetail } from "../../utils/events";
-import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
-export class UISwitch {
-    host;
-    /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
-    checked;
-    defaultChecked = false;
-    disabled = false;
-    required = false;
-    value = 'on';
-    internalChecked = false;
-    syncFromProp() {
-        if (isControlled(this.checked))
-            this.internalChecked = this.checked;
-    }
-    componentDidLoad() {
-        this.internalChecked = controlledOrDefault(this.checked, this.defaultChecked);
-    }
-    toggle = (trigger) => {
-        if (this.disabled)
-            return;
-        const checked = !this.internalChecked;
-        if (!isControlled(this.checked))
-            this.internalChecked = checked;
-        dispatchDetail(this.host, 'change', {
-            checked,
-            value: this.value,
-            trigger,
-        });
-    };
-    onKeydown = (e) => {
-        if (e.key !== ' ' || this.disabled)
-            return;
-        e.preventDefault();
-        this.toggle('keyboard');
-    };
-    onClick = (e) => {
-        if (e.target === this.host?.shadowRoot?.querySelector('input'))
-            return;
-        this.toggle('pointer');
-    };
-    render() {
-        return (h(Host, { key: 'eaee279bbc787c844f2ad265da03fca608d9c429', role: "switch", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.onKeydown, onClick: this.onClick }, h("input", { key: '2ebfa684bf08735a4e89a06001f6758885c40ffb', type: "checkbox", checked: this.internalChecked, disabled: this.disabled, required: this.required, value: this.value, "aria-hidden": "true", tabIndex: -1, onChange: (e) => {
-                const input = e.target;
-                const checked = input.checked;
-                if (!isControlled(this.checked))
-                    this.internalChecked = checked;
-                dispatchDetail(this.host, 'change', {
-                    checked,
-                    value: this.value,
-                    trigger: 'pointer',
-                });
-                if (isControlled(this.checked))
-                    input.checked = this.internalChecked;
-            } }), h("slot", { key: 'ff9975d4ccbffbed2b97060eabf347653d5f5110' })));
-    }
-    static get is() { return "ui-switch"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-switch.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-switch.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "checked": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Controlled checked state. Omit it to use defaultChecked and local interaction state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "checked"
-            },
-            "defaultChecked": {
-                "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-checked",
-                "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"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            },
-            "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": "'on'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalChecked": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "checked",
-                "methodName": "syncFromProp"
-            }];
-    }
-}

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

@@ -1,68 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-:host([data-orientation='vertical']) {
-  flex-direction: row;
-}
-
-::slotted([role='tablist']) {
-  display: flex;
-  gap: 0;
-  max-inline-size: 100%;
-  overflow-x: auto;
-  overscroll-behavior-inline: contain;
-  border-bottom: 1px solid var(--ui-border-default);
-}
-
-:host([data-orientation='vertical']) ::slotted([role='tablist']) {
-  flex-direction: column;
-  border-bottom: none;
-  border-inline-end: 1px solid var(--ui-border-default);
-}
-
-::slotted(button[role='tab']),
-::slotted([role='tab']),
-::slotted(ui-button) button[role='tab'] {
-  padding: var(--ui-space-2) var(--ui-space-3);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-medium, 500);
-  color: var(--ui-text-secondary);
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  cursor: pointer;
-  transition: color var(--ui-motion-fast) var(--ui-motion-ease);
-  box-shadow: none;
-}
-
-::slotted(button[role='tab']:hover),
-::slotted([role='tab']:hover) {
-  color: var(--ui-text-primary);
-}
-
-::slotted(button[role='tab'][aria-selected='true']),
-::slotted([role='tab'][aria-selected='true']) {
-  color: var(--ui-accent-solid);
-  border-bottom-color: var(--ui-accent-solid);
-}
-
-:host([data-orientation='vertical']) ::slotted(button[role='tab']),
-:host([data-orientation='vertical']) ::slotted([role='tab']) {
-  border-bottom: none;
-  border-inline-end: 2px solid transparent;
-  margin-bottom: 0;
-  margin-inline-end: -1px;
-}
-
-:host([data-orientation='vertical']) ::slotted(button[role='tab'][aria-selected='true']),
-:host([data-orientation='vertical']) ::slotted([role='tab'][aria-selected='true']) {
-  border-inline-end-color: var(--ui-accent-solid);
-}
-
-::slotted([role='tabpanel']) {
-  padding: var(--ui-space-4);
-}