@threadlabs/looma 0.1.0

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

@@ -0,0 +1,223 @@
+import { Host, h } from "@stencil/core";
+import { eventToTrigger, dispatchDetail } from "../../utils/events";
+export class UICheckbox {
+    host;
+    checked = false;
+    defaultChecked = false;
+    disabled = false;
+    indeterminate = false;
+    required = false;
+    value = 'on';
+    internalChecked = false;
+    slotRef;
+    syncFromProp() {
+        this.internalChecked = this.checked;
+    }
+    syncToInput() {
+        const input = this.getInput();
+        if (!input)
+            return;
+        this.host.dataset.disabled = this.disabled ? 'true' : '';
+        this.host.setAttribute('aria-disabled', String(this.disabled));
+        input.checked = this.internalChecked;
+        input.indeterminate = this.indeterminate;
+        input.disabled = this.disabled;
+        input.required = this.required;
+        input.value = this.value;
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.internalChecked = this.internalChecked || this.defaultChecked;
+        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 === 'checkbox') ?? null;
+    }
+    onInputChange = (e) => {
+        const input = e.target;
+        if (!input)
+            return;
+        this.internalChecked = input.checked;
+        this.indeterminate = input.indeterminate;
+        dispatchDetail(this.host, 'change', {
+            checked: this.internalChecked,
+            value: this.value,
+            trigger: eventToTrigger(e),
+        });
+    };
+    render() {
+        return (h(Host, { key: 'c125eb000960f63f48ae8a96e8f001c843f8baa7', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: '8eade76069c56e00d160488c5d91dae7b46ccc99', ref: (el) => (this.slotRef = el) })));
+    }
+    static get is() { return "ui-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-checkbox.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"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "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"
+            }, {
+                "propName": "internalChecked",
+                "methodName": "syncToInput"
+            }, {
+                "propName": "indeterminate",
+                "methodName": "syncToInput"
+            }, {
+                "propName": "disabled",
+                "methodName": "syncToInput"
+            }, {
+                "propName": "required",
+                "methodName": "syncToInput"
+            }];
+    }
+}

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

@@ -0,0 +1,17 @@
+:host {
+  display: contents;
+}
+
+.menu {
+  position: fixed;
+  z-index: var(--ui-z-overlay, 1000);
+  min-width: 12rem;
+}
+
+.menu[data-open] {
+  display: block;
+}
+
+.menu:not([data-open]) {
+  display: none !important;
+}

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

@@ -0,0 +1,272 @@
+import { Host, h } from "@stencil/core";
+import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
+import { dispatchDetail } from "../../utils/events";
+export class UIContextMenu {
+    host;
+    /** Controls the menu when the consumer owns open state. */
+    open = false;
+    /** Opens the menu on first client render. */
+    defaultOpen = false;
+    /** Optional id of the region that should also respond to a context-menu gesture. */
+    for;
+    internalOpen = false;
+    overlayId = `ui-context-menu-${Math.random().toString(36).slice(2, 11)}`;
+    trigger = null;
+    contextTarget = null;
+    pointerX = 0;
+    pointerY = 0;
+    syncFromProp() {
+        this.internalOpen = this.open;
+    }
+    syncTarget() {
+        this.resolveTargets();
+        this.attachTargetListeners();
+    }
+    syncOverlay() {
+        this.syncTriggerState();
+        if (this.internalOpen) {
+            openOverlay({
+                id: this.overlayId,
+                modal: false,
+                element: this.host,
+                dismissible: true,
+                requestClose: (reason, trigger) => this.closeMenu(reason, trigger),
+            });
+        }
+        else {
+            closeOverlay(this.overlayId);
+        }
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.resolveTargets();
+        this.attachTargetListeners();
+        this.syncTriggerState();
+        this.syncOverlay();
+    }
+    componentDidUpdate() {
+        this.resolveTargets();
+        this.attachTargetListeners();
+        this.syncTriggerState();
+    }
+    disconnectedCallback() {
+        this.detachTargetListeners();
+        closeOverlay(this.overlayId);
+    }
+    resolveTargets() {
+        const previousTrigger = this.trigger;
+        const previousContextTarget = this.contextTarget;
+        const explicitTrigger = this.host.querySelector('[slot="trigger"]');
+        const referencedTarget = this.for ? document.getElementById(this.for) : null;
+        this.trigger = explicitTrigger;
+        this.contextTarget = referencedTarget ?? explicitTrigger ?? this.host.parentElement;
+        if (previousTrigger !== this.trigger || previousContextTarget !== this.contextTarget) {
+            previousTrigger?.removeEventListener('click', this.onTriggerClick);
+            previousTrigger?.removeEventListener('keydown', this.onTriggerKeydown);
+            previousContextTarget?.removeEventListener('contextmenu', this.onContextMenu);
+        }
+    }
+    attachTargetListeners() {
+        this.detachTargetListeners();
+        this.trigger?.addEventListener('click', this.onTriggerClick);
+        this.trigger?.addEventListener('keydown', this.onTriggerKeydown);
+        this.contextTarget?.addEventListener('contextmenu', this.onContextMenu);
+    }
+    detachTargetListeners() {
+        this.trigger?.removeEventListener('click', this.onTriggerClick);
+        this.trigger?.removeEventListener('keydown', this.onTriggerKeydown);
+        this.contextTarget?.removeEventListener('contextmenu', this.onContextMenu);
+    }
+    syncTriggerState() {
+        if (!this.trigger)
+            return;
+        this.trigger.setAttribute('aria-haspopup', 'menu');
+        this.trigger.setAttribute('aria-expanded', this.internalOpen ? 'true' : 'false');
+    }
+    getItems() {
+        return Array.from(this.host.querySelectorAll('ui-menu-item')).filter((item) => !this.isItemDisabled(item));
+    }
+    focusFirstItem() {
+        requestAnimationFrame(() => this.getItems()[0]?.focus());
+    }
+    openMenu(x, y, trigger) {
+        this.pointerX = x;
+        this.pointerY = y;
+        this.internalOpen = true;
+        dispatchDetail(this.host, 'open', {
+            open: true,
+            reason: 'action',
+            trigger,
+        });
+        this.focusFirstItem();
+    }
+    openFromTrigger(trigger) {
+        if (!this.trigger)
+            return;
+        const rect = this.trigger.getBoundingClientRect();
+        this.openMenu(rect.left, rect.bottom, trigger);
+    }
+    closeMenu(reason, trigger, returnFocus = true) {
+        if (!this.internalOpen)
+            return;
+        this.internalOpen = false;
+        dispatchDetail(this.host, 'close', {
+            open: false,
+            reason: reason,
+            trigger: trigger,
+        });
+        if (returnFocus) {
+            this.trigger?.focus();
+        }
+    }
+    onTriggerClick = (event) => {
+        if (this.internalOpen) {
+            this.closeMenu('action', event.detail === 0 ? 'keyboard' : 'pointer');
+            return;
+        }
+        this.openFromTrigger(event.detail === 0 ? 'keyboard' : 'pointer');
+    };
+    onTriggerKeydown = (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'ArrowDown')
+            return;
+        event.preventDefault();
+        if (!this.internalOpen) {
+            this.openFromTrigger('keyboard');
+            return;
+        }
+        this.focusFirstItem();
+    };
+    onContextMenu = (event) => {
+        event.preventDefault();
+        this.openMenu(event.clientX, event.clientY, 'pointer');
+    };
+    isItemDisabled(item) {
+        return (item.getAttribute('aria-disabled') === 'true' ||
+            item.hasAttribute('disabled') ||
+            item.getAttribute('disabled') === 'true' ||
+            item.disabled === true);
+    }
+    onKeydown = (event) => {
+        if (!this.internalOpen)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            requestTopOverlayClose('escape', 'keyboard');
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            const target = event.target.closest?.('ui-menu-item');
+            if (!target || this.isItemDisabled(target))
+                return;
+            event.preventDefault();
+            const value = target.getAttribute('value') ?? target.getAttribute('data-value') ?? '';
+            dispatchDetail(this.host, 'select', { value, trigger: 'keyboard' });
+            this.closeMenu('action', 'keyboard');
+        }
+    };
+    onItemClick = (event) => {
+        const item = event.target.closest?.('ui-menu-item');
+        if (!item || this.isItemDisabled(item))
+            return;
+        const value = item.getAttribute('value') ?? item.getAttribute('data-value') ?? '';
+        dispatchDetail(this.host, 'select', { value, trigger: 'pointer' });
+        this.closeMenu('action', 'pointer');
+    };
+    render() {
+        return (h(Host, { key: 'c57c08724714d1de8c22a4a1e86e3a790f45fa20', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: '4048abb040de1125b8eb02358480914c97ea6b06', name: "trigger" }), h("div", { key: '6ce80f67142319260093903d289456070d49bfcc', class: "menu", "data-open": this.internalOpen ? '' : undefined, style: { left: `${this.pointerX}px`, top: `${this.pointerY}px` } }, h("ui-menu", { key: '2a2c22f0a797ca3a70a1399de41de2b18257abf8', open: this.internalOpen }, h("slot", { key: '252cc6e973704cd561301b5bf96f98481c6c74ff' })))));
+    }
+    static get is() { return "ui-context-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-context-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-context-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the menu when the consumer owns open state."
+                },
+                "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": "Opens the menu on first client render."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
+            },
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional id of the region that should also respond to a context-menu gesture."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "for"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalOpen": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "syncFromProp"
+            }, {
+                "propName": "for",
+                "methodName": "syncTarget"
+            }, {
+                "propName": "internalOpen",
+                "methodName": "syncOverlay"
+            }];
+    }
+}

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

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+}
+
+:host:not([open]) {
+  display: none;
+}
+
+:host dialog {
+  --ui-dialog-duration: var(--ui-motion-base);
+  position: fixed;
+  inset: var(--ui-space-4);
+  width: min(100%, 440px);
+  max-width: min(100%, 440px);
+  margin: auto;
+  padding: var(--ui-space-4);
+  background: var(--ui-surface-elevated);
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-dialog);
+  box-shadow: var(--ui-shadow-dialog);
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.96);
+  transition:
+    opacity var(--ui-dialog-duration) var(--ui-motion-ease),
+    transform var(--ui-dialog-duration) var(--ui-motion-ease),
+    visibility var(--ui-dialog-duration),
+    display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,
+    overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete;
+}
+
+:host dialog[open] {
+  visibility: visible;
+  pointer-events: auto;
+  opacity: 1;
+  transform: scale(1);
+  animation: ui-dialog-enter var(--ui-dialog-duration) var(--ui-motion-ease);
+}
+
+@keyframes ui-dialog-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+:host dialog::backdrop {
+  background-color: transparent;
+  transition:
+    background-color var(--ui-dialog-duration) var(--ui-motion-ease),
+    display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,
+    overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete;
+}
+
+:host dialog[open]::backdrop {
+  background-color: var(--ui-overlay-backdrop);
+  animation: ui-dialog-backdrop-enter var(--ui-dialog-duration) var(--ui-motion-ease);
+}
+
+@keyframes ui-dialog-backdrop-enter {
+  from {
+    background-color: transparent;
+  }
+}