@threadlabs/looma 0.1.0

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

@@ -0,0 +1,212 @@
+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;
+    syncFromProp() {
+        this.internalValue = this.value;
+    }
+    syncToSelect() {
+        const select = this.getSelect();
+        if (!select)
+            return;
+        this.host.dataset.invalid = this.invalid ? 'true' : '';
+        select.value = this.internalValue || this.defaultValue;
+        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: 'eebea3f7fafafba901e5bd33cbd711565feb251e', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'bbb49202d8298fac0912accb3848c8450cab00c9', 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": 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"
+            },
+            "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

@@ -0,0 +1,63 @@
+: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

@@ -0,0 +1,177 @@
+import { Host, h } from "@stencil/core";
+import { dispatchDetail } from "../../utils/events";
+export class UISwitch {
+    host;
+    checked = false;
+    defaultChecked = false;
+    disabled = false;
+    required = false;
+    value = 'on';
+    internalChecked = false;
+    syncFromProp() {
+        this.internalChecked = this.checked;
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.internalChecked = this.internalChecked || this.defaultChecked;
+    }
+    toggle = (trigger) => {
+        if (this.disabled)
+            return;
+        this.internalChecked = !this.internalChecked;
+        dispatchDetail(this.host, 'change', {
+            checked: this.internalChecked,
+            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: 'd4e39c8865afa98414dbedcbbff5bdeeef7f4478', 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: '498774428224b9d09a8657924d4d8b6a2196fddf', type: "checkbox", checked: this.internalChecked, disabled: this.disabled, required: this.required, value: this.value, "aria-hidden": "true", tabIndex: -1, onChange: (e) => {
+                this.internalChecked = e.target.checked;
+                dispatchDetail(this.host, 'change', {
+                    checked: this.internalChecked,
+                    value: this.value,
+                    trigger: 'pointer',
+                });
+            } }), h("slot", { key: 'b8f8c3947a9dd058e12270b9afdfe2a654164987' })));
+    }
+    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": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "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

@@ -0,0 +1,65 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+:host([data-orientation='vertical']) {
+  flex-direction: row;
+}
+
+::slotted([role='tablist']) {
+  display: flex;
+  gap: 0;
+  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);
+}