@threadlabs/looma 0.1.0

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

@@ -0,0 +1,185 @@
+import { Host, h } from "@stencil/core";
+import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
+import { dispatchDetail } from "../../utils/events";
+export class UIDialog {
+    host;
+    open = false;
+    defaultOpen = false;
+    modal = true;
+    dismissible = true;
+    internalOpen = false;
+    overlayId = `ui-dialog-${Math.random().toString(36).slice(2, 11)}`;
+    dialogRef;
+    syncFromProp() {
+        this.internalOpen = this.open;
+    }
+    syncOpen() {
+        if (this.dialogRef) {
+            if (this.internalOpen) {
+                this.dialogRef.showModal();
+                openOverlay({
+                    id: this.overlayId,
+                    modal: this.modal,
+                    element: this.host,
+                    dismissible: this.dismissible,
+                    requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
+                });
+            }
+            else {
+                this.dialogRef.close();
+                closeOverlay(this.overlayId);
+            }
+        }
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.dialogRef?.addEventListener('close', this.onDialogClose);
+        this.syncOpen();
+    }
+    disconnectedCallback() {
+        this.dialogRef?.removeEventListener('close', this.onDialogClose);
+        closeOverlay(this.overlayId);
+    }
+    componentDidUpdate() {
+        this.syncOpen();
+    }
+    handleRequestClose(reason, trigger) {
+        this.internalOpen = false;
+        dispatchDetail(this.host, 'close', {
+            open: false,
+            reason: reason,
+            trigger: trigger,
+        });
+    }
+    onDialogClose = () => {
+        if (this.internalOpen) {
+            this.internalOpen = false;
+            closeOverlay(this.overlayId);
+            dispatchDetail(this.host, 'close', {
+                open: false,
+                reason: 'programmatic',
+                trigger: 'programmatic',
+            });
+        }
+    };
+    onKeydown = (e) => {
+        if (e.key === 'Escape') {
+            requestTopOverlayClose('escape', 'keyboard');
+        }
+    };
+    render() {
+        return (h(Host, { key: '2a2fcdfa1e3fac5eb3c0e3d6748cebdf388c216d', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("dialog", { key: 'c3eef2bb3bec77fa518269fce38c19c2ededda49', ref: (el) => (this.dialogRef = el), open: this.internalOpen }, h("slot", { key: '9ae5c30d57096184ec287fd9dd134ff566b9fd39' }))));
+    }
+    static get is() { return "ui-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-dialog.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-dialog.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"
+            },
+            "modal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal",
+                "defaultValue": "true"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalOpen": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "syncFromProp"
+            }, {
+                "propName": "internalOpen",
+                "methodName": "syncOpen"
+            }];
+    }
+}

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

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+::slotted([hidden]) {
+  display: none !important;
+}

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

@@ -0,0 +1,182 @@
+import { Host, h } from "@stencil/core";
+import { createId } from "../../utils/id";
+import { eventToTrigger, isActivationKey, dispatchDetail } from "../../utils/events";
+export class UIDisclosure {
+    host;
+    open = false;
+    defaultOpen = false;
+    disabled = false;
+    internalOpen = false;
+    contentId = '';
+    trigger = null;
+    content = null;
+    syncFromProp() {
+        this.internalOpen = this.open;
+    }
+    syncState() {
+        if (this.trigger) {
+            this.trigger.setAttribute('aria-expanded', String(this.internalOpen));
+        }
+        if (this.content) {
+            this.content.hidden = !this.internalOpen;
+        }
+    }
+    componentDidLoad() {
+        this.resolveParts();
+        this.syncFromProp();
+        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.syncState();
+        this.trigger?.addEventListener('click', this.onTriggerClick);
+        this.trigger?.addEventListener('keydown', this.onTriggerKeydown);
+    }
+    disconnectedCallback() {
+        this.trigger?.removeEventListener('click', this.onTriggerClick);
+        this.trigger?.removeEventListener('keydown', this.onTriggerKeydown);
+    }
+    componentDidUpdate() {
+        this.syncState();
+    }
+    resolveParts() {
+        this.trigger =
+            this.host.querySelector('[data-ui-disclosure-trigger], button, [aria-controls]');
+        const controlsId = this.trigger?.getAttribute('aria-controls') ?? '';
+        if (controlsId) {
+            this.content = document.getElementById(controlsId);
+        }
+        else {
+            const children = Array.from(this.host.children);
+            this.content = children.find((c) => c !== this.trigger) ?? null;
+        }
+        if (this.trigger && this.content) {
+            if (!this.content.id) {
+                this.content.id = createId('disclosure-content');
+            }
+            this.trigger.setAttribute('aria-controls', this.content.id);
+            this.contentId = this.content.id;
+        }
+        if (this.trigger instanceof HTMLButtonElement) {
+            this.trigger.disabled = this.disabled;
+        }
+        else if (this.trigger) {
+            this.trigger.setAttribute('aria-disabled', String(this.disabled));
+        }
+    }
+    setOpen(next, action) {
+        if (this.internalOpen === next)
+            return;
+        this.internalOpen = next;
+        dispatchDetail(this.host, next ? 'open' : 'close', {
+            open: next,
+            reason: action.reason,
+            trigger: action.trigger,
+        });
+    }
+    onTriggerClick = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        this.setOpen(!this.internalOpen, { reason: 'action', trigger: eventToTrigger(e) });
+    };
+    onTriggerKeydown = (e) => {
+        if (this.disabled || !isActivationKey(e))
+            return;
+        e.preventDefault();
+        this.setOpen(!this.internalOpen, { reason: 'action', trigger: 'keyboard' });
+    };
+    render() {
+        return (h(Host, { key: '433d2a0f6efe939e1a1ae60e27464139571004db' }, h("slot", { key: '7533ae794a7ce8be044c2ff0b5d3d1b72c01575c' })));
+    }
+    static get is() { return "ui-disclosure"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-disclosure.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-disclosure.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"
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalOpen": {},
+            "contentId": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "syncFromProp"
+            }, {
+                "propName": "internalOpen",
+                "methodName": "syncState"
+            }];
+    }
+}

package/dist/collection/components/ui-floating-action-button/ui-floating-action-button.css

@@ -0,0 +1,70 @@
+:host {
+  position: fixed;
+  inset-block-end: calc(
+    var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom)
+  );
+  inset-inline-end: var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem));
+  inline-size: var(--ui-floating-action-button-size, 56px);
+  block-size: var(--ui-floating-action-button-size, 56px);
+  display: inline-flex;
+  z-index: var(--ui-floating-action-button-z-index, 100);
+}
+
+button {
+  appearance: none;
+  inline-size: 100%;
+  block-size: 100%;
+  border: none;
+  border-radius: 999px;
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ui-floating-action-button-bg, var(--ui-accent-solid));
+  color: var(--ui-floating-action-button-color, var(--ui-text-on-accent));
+  box-shadow: var(
+    --ui-floating-action-button-shadow,
+    0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)
+  );
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+    transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+    box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+}
+
+button:hover:enabled {
+  background: var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));
+  box-shadow: var(
+    --ui-floating-action-button-hover-shadow,
+    0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)
+  );
+}
+
+button:active:enabled {
+  transform: scale(var(--ui-floating-action-button-active-scale, 0.94));
+}
+
+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-floating-action-button-icon-size, 24px);
+  block-size: var(--ui-floating-action-button-icon-size, 24px);
+  flex-shrink: 0;
+}
+
+@media (min-width: 768px) {
+  :host([mobile-only]) {
+    display: none;
+  }
+}

package/dist/collection/components/ui-floating-action-button/ui-floating-action-button.js

@@ -0,0 +1,85 @@
+import { Host, h } from "@stencil/core";
+export class UIFloatingActionButton {
+    disabled = false;
+    mobileOnly = false;
+    label = '';
+    render() {
+        return (h(Host, { key: '4b5b5eb530e4ab424e1189cff83d697f28432d84', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: 'f8a4b8ac90bf306434b2b905030b46c1fcbcb000', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '500d0606ea7166669f104e42813591395fc81c3f' }))));
+    }
+    static get is() { return "ui-floating-action-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-floating-action-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-floating-action-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"
+            },
+            "mobileOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mobile-only",
+                "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": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/ui-form-field/ui-form-field.css

@@ -0,0 +1,21 @@
+:host {
+  display: grid;
+  gap: var(--ui-space-2);
+  color: var(--ui-text-primary);
+}
+
+::slotted(label) {
+  color: var(--ui-text-secondary);
+  font-size: 0.95rem;
+}
+
+::slotted([data-slot='help']) {
+  color: var(--ui-text-muted);
+  font-size: 0.875rem;
+}
+
+::slotted([data-slot='error']),
+::slotted([role='alert']) {
+  color: var(--ui-accent-active);
+  font-size: 0.875rem;
+}

package/dist/collection/components/ui-form-field/ui-form-field.js

@@ -0,0 +1,125 @@
+import { Host, h } from "@stencil/core";
+import { createId } from "../../utils/id";
+export class UIFormField {
+    host;
+    invalid = false;
+    disabled = false;
+    required = false;
+    componentDidLoad() {
+        this.wire();
+    }
+    componentDidUpdate() {
+        this.wire();
+    }
+    wire() {
+        const label = this.host.querySelector('label');
+        const input = this.host.querySelector('input, textarea, select');
+        const help = this.host.querySelector('[data-slot="help"]');
+        const error = this.host.querySelector('[data-slot="error"], [role="alert"]');
+        if (!input)
+            return;
+        if (!input.id) {
+            input.id = createId('form-field-input');
+        }
+        if (label && !label.getAttribute('for')) {
+            label.setAttribute('for', input.id);
+        }
+        const describedIds = [];
+        if (help) {
+            if (!help.id)
+                help.id = createId('form-field-help');
+            describedIds.push(help.id);
+        }
+        if (error) {
+            if (!error.id)
+                error.id = createId('form-field-error');
+            describedIds.push(error.id);
+        }
+        if (describedIds.length) {
+            input.setAttribute('aria-describedby', describedIds.join(' '));
+        }
+        input.disabled = this.disabled;
+        input.required = this.required;
+        input.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
+    }
+    render() {
+        return (h(Host, { key: 'f2eb3a7bf493c0630ef27ee21fca1ffee94be536', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: 'f5f30e388ed9473ee50103f12527a1dd9cfb0b0b' })));
+    }
+    static get is() { return "ui-form-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-form-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-form-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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"
+            },
+            "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"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}