@threadlabs/looma 0.1.0

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

@@ -0,0 +1,64 @@
+import { Host, h } from "@stencil/core";
+export class UIMenuItem {
+    disabled = false;
+    value = '';
+    render() {
+        return (h(Host, { key: '485ac24af80b72a751f6fc13a084847ba0f7605e', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, h("slot", { key: 'b2bde48d9b819b0e55fbe00c2939ccd44f63bc15' })));
+    }
+    static get is() { return "ui-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-menu-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-menu-item.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"
+            },
+            "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": "''"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,8 @@
+:host {
+  padding: var(--ui-space-3);
+  background: var(--ui-surface-elevated);
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-3);
+  box-shadow: var(--ui-shadow-lg);
+  max-width: min(20rem, 90vw);
+}

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

@@ -0,0 +1,144 @@
+import { Host, h } from "@stencil/core";
+import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
+import { dispatchDetail } from "../../utils/events";
+export class UIPopover {
+    host;
+    open = false;
+    defaultOpen = false;
+    internalOpen = false;
+    overlayId = `ui-popover-${Math.random().toString(36).slice(2, 11)}`;
+    syncFromProp() {
+        this.internalOpen = this.open;
+    }
+    onOpenChange() {
+        this.syncOverlay();
+        if (this.internalOpen) {
+            dispatchDetail(this.host, 'open', {
+                open: true,
+                reason: 'programmatic',
+                trigger: 'programmatic',
+            });
+        }
+        else {
+            dispatchDetail(this.host, 'close', {
+                open: false,
+                reason: 'programmatic',
+                trigger: 'programmatic',
+            });
+        }
+    }
+    syncOverlay() {
+        if (this.internalOpen) {
+            openOverlay({
+                id: this.overlayId,
+                modal: false,
+                element: this.host,
+                dismissible: true,
+                requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
+            });
+        }
+        else {
+            closeOverlay(this.overlayId);
+        }
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.host.addEventListener('keydown', this.onKeydown);
+        this.syncOverlay();
+    }
+    disconnectedCallback() {
+        this.host.removeEventListener('keydown', this.onKeydown);
+        closeOverlay(this.overlayId);
+    }
+    componentDidUpdate() {
+        this.syncOverlay();
+    }
+    handleRequestClose(reason, trigger) {
+        this.internalOpen = false;
+        dispatchDetail(this.host, 'close', {
+            open: false,
+            reason: reason,
+            trigger: trigger,
+        });
+    }
+    onKeydown = (e) => {
+        if (e.key === 'Escape') {
+            requestTopOverlayClose('escape', 'keyboard');
+        }
+    };
+    render() {
+        return (h(Host, { key: '121482cf2fe9ba972ae6b902568389790b9accaa', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: '095ce0c147ed8c8411114563c9efcb5fe775fcae' })));
+    }
+    static get is() { return "ui-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-popover.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"
+            }, {
+                "propName": "internalOpen",
+                "methodName": "onOpenChange"
+            }];
+    }
+}

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

@@ -0,0 +1,22 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  color: var(--ui-text-primary);
+}
+
+:host([data-disabled='true']),
+:host([aria-disabled='true']) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+::slotted(input[type='radio']) {
+  accent-color: var(--ui-accent-solid);
+  cursor: pointer;
+}
+
+::slotted(input[type='radio']:focus-visible) {
+  outline: 2px solid var(--ui-accent-solid);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,213 @@
+import { Host, h } from "@stencil/core";
+import { eventToTrigger } from "../../utils/events";
+import { dispatchDetail } from "../../utils/events";
+export class UIRadio {
+    host;
+    checked = false;
+    defaultChecked = false;
+    disabled = false;
+    name = '';
+    required = false;
+    value = 'on';
+    slotRef;
+    syncToInput() {
+        const input = this.getInput();
+        if (!input)
+            return;
+        this.host.dataset.disabled = this.disabled ? 'true' : '';
+        input.checked = this.checked;
+        input.disabled = this.disabled;
+        input.name = this.name;
+        input.required = this.required;
+        input.value = this.value;
+    }
+    componentDidLoad() {
+        if (!this.checked && this.defaultChecked) {
+            this.checked = true;
+        }
+        this.slotRef?.addEventListener('slotchange', () => this.syncToInput());
+        this.syncToInput();
+        const input = this.getInput();
+        input?.addEventListener('change', this.onInputChange);
+    }
+    disconnectedCallback() {
+        const input = this.getInput();
+        input?.removeEventListener('change', this.onInputChange);
+    }
+    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 instanceof HTMLInputElement && el.type === 'radio') ?? null;
+    }
+    onInputChange = (e) => {
+        const input = e.target;
+        if (!input || !input.checked)
+            return;
+        dispatchDetail(this.host, 'change', {
+            checked: true,
+            value: this.value,
+            trigger: eventToTrigger(e),
+        });
+    };
+    render() {
+        return (h(Host, { key: '85a3e7f7903c910f6ccbc324ab38bf94ebaf93e0', role: "radio", "aria-checked": String(this.checked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: '9117391004b9ed10cb4e819a629f66d32661d7d3', ref: (el) => (this.slotRef = el) })));
+    }
+    static get is() { return "ui-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-radio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-radio.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"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "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 elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "syncToInput"
+            }, {
+                "propName": "disabled",
+                "methodName": "syncToInput"
+            }, {
+                "propName": "name",
+                "methodName": "syncToInput"
+            }, {
+                "propName": "required",
+                "methodName": "syncToInput"
+            }, {
+                "propName": "value",
+                "methodName": "syncToInput"
+            }];
+    }
+}

package/dist/collection/components/ui-radio-group/ui-radio-group.css

@@ -0,0 +1,10 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+}
+
+:host([data-orientation='vertical']) {
+  display: inline-grid;
+  justify-items: start;
+}