@threadlabs/looma 0.2.5 → 0.2.7

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

@@ -1,34 +0,0 @@
-:host {
-  display: contents;
-}
-
-:host([data-focus-trigger='pointer']) ::slotted(ui-menu-item:focus) {
-  outline: none;
-}
-
-.menu {
-  position: fixed;
-  inset: auto;
-  margin: 0;
-  z-index: var(--ui-z-overlay, 1000);
-  min-width: 12rem;
-  opacity: 0;
-  transform: translateY(-4px) scale(0.99);
-  transition:
-    opacity var(--ui-motion-fast) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease),
-    display var(--ui-motion-fast) allow-discrete,
-    overlay var(--ui-motion-fast) allow-discrete;
-}
-
-.menu:popover-open { opacity: 1; transform: translateY(0) scale(1); }
-
-@starting-style {
-  .menu:popover-open { opacity: 0; transform: translateY(-4px) scale(0.99); }
-}
-
-.menu[hidden] { display: none !important; }
-
-@media (prefers-reduced-motion: reduce) {
-  .menu { transition: none; }
-}

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

@@ -1,311 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
-import { dispatchDetail } from "../../utils/events";
-import { createAnchoredSurface } from "../../overlay/positioning";
-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;
-    focusTrigger = 'programmatic';
-    overlayId = `ui-context-menu-${Math.random().toString(36).slice(2, 11)}`;
-    trigger = null;
-    contextTarget = null;
-    pointerX = 0;
-    pointerY = 0;
-    pointPositioned = false;
-    surface = null;
-    syncFromProp() {
-        this.internalOpen = this.open;
-    }
-    syncTarget() {
-        this.resolveTargets();
-        this.attachTargetListeners();
-    }
-    syncOverlay() {
-        this.syncTriggerState();
-        if (this.internalOpen) {
-            if (this.pointPositioned) {
-                this.surface?.showAtPoint({ x: this.pointerX, y: this.pointerY });
-            }
-            else {
-                this.surface?.show();
-            }
-            openOverlay({
-                id: this.overlayId,
-                modal: false,
-                element: this.host,
-                dismissible: true,
-                requestClose: (reason, trigger) => this.closeMenu(reason, trigger),
-            });
-        }
-        else {
-            this.surface?.hide();
-            closeOverlay(this.overlayId);
-        }
-    }
-    componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
-        this.resolveTargets();
-        this.attachTargetListeners();
-        this.setupSurface();
-        this.syncTriggerState();
-        this.syncOverlay();
-    }
-    componentDidUpdate() {
-        this.resolveTargets();
-        this.attachTargetListeners();
-        if (!this.pointPositioned)
-            this.surface?.setAnchor(this.trigger);
-        this.syncTriggerState();
-    }
-    disconnectedCallback() {
-        this.detachTargetListeners();
-        this.surface?.destroy();
-        this.surface = null;
-        closeOverlay(this.overlayId);
-    }
-    setupSurface() {
-        const menu = this.host.shadowRoot?.querySelector('.menu');
-        if (!menu)
-            return;
-        this.surface?.destroy();
-        this.surface = createAnchoredSurface(menu, {
-            anchor: this.trigger,
-            placement: 'bottom-start',
-        });
-    }
-    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.focusTrigger = trigger;
-        this.pointPositioned = true;
-        // Context-click can reposition an already-open trigger menu, so do not
-        // depend on a state transition to run the positioning controller.
-        this.surface?.showAtPoint({ x, y });
-        this.internalOpen = true;
-        dispatchDetail(this.host, 'open', {
-            open: true,
-            reason: 'action',
-            trigger,
-        });
-        this.focusFirstItem();
-    }
-    openFromTrigger(trigger) {
-        if (!this.trigger)
-            return;
-        this.pointPositioned = false;
-        this.internalOpen = true;
-        dispatchDetail(this.host, 'open', {
-            open: true,
-            reason: 'action',
-            trigger,
-        });
-        this.focusFirstItem();
-    }
-    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;
-        this.focusTrigger = 'keyboard';
-        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: 'aaf9f27402b0c88cede3847ee9c8f61ac844f889', "data-open": this.internalOpen ? '' : undefined, "data-focus-trigger": this.internalOpen ? this.focusTrigger : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: 'd801d564ec2ee073e517cb991c26efc61d3e499d', name: "trigger" }), h("div", { key: '4febcc5d76c79c2e5361db7b203e971582197fd2', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: '7aace2479a8014a20da35f69bd3ed57b402f9ef2', open: this.internalOpen }, h("slot", { key: 'a31d703c437cf5d9ab82e5f7793caa093a312dfd' })))));
-    }
-    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": {},
-            "focusTrigger": {}
-        };
-    }
-    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

@@ -1,72 +0,0 @@
-:host {
-  display: block;
-}
-
-:host:not([data-open]) {
-  display: none;
-}
-
-:host dialog {
-  --ui-dialog-duration: var(--ui-motion-base);
-  --ui-dialog-viewport-gap: var(--ui-space-4, 1rem);
-  position: fixed;
-  inset: 0;
-  box-sizing: border-box;
-  inline-size: min(
-    calc(100% - (var(--ui-dialog-viewport-gap) * 2)),
-    var(--ui-dialog-max-width, 440px)
-  );
-  max-inline-size: none;
-  max-block-size: calc(100dvh - (var(--ui-dialog-viewport-gap) * 2));
-  margin: auto;
-  padding: var(--ui-space-4);
-  overflow: auto;
-  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;
-  }
-}

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

@@ -1,242 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
-import { dispatchDetail } from "../../utils/events";
-import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
-export class UIDialog {
-    host;
-    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
-    open;
-    defaultOpen = false;
-    modal = true;
-    dismissible = true;
-    /** Accessible name forwarded to the native dialog surface. */
-    label;
-    internalOpen = false;
-    accessibleLabel = 'Dialog';
-    overlayId = `ui-dialog-${Math.random().toString(36).slice(2, 11)}`;
-    dialogRef;
-    contentObserver = null;
-    syncFromProp() {
-        if (isControlled(this.open))
-            this.internalOpen = this.open;
-    }
-    syncLabelFromProp() {
-        this.syncAccessibleLabel();
-    }
-    componentWillLoad() {
-        this.syncAccessibleLabel();
-    }
-    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.contentObserver = new MutationObserver(this.syncAccessibleLabel);
-        this.contentObserver.observe(this.host, {
-            childList: true,
-            subtree: true,
-            characterData: true,
-        });
-        this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
-        this.dialogRef?.addEventListener('close', this.onDialogClose);
-        this.syncAccessibleLabel();
-        this.syncOpen();
-    }
-    disconnectedCallback() {
-        this.dialogRef?.removeEventListener('close', this.onDialogClose);
-        this.contentObserver?.disconnect();
-        this.contentObserver = null;
-        closeOverlay(this.overlayId);
-    }
-    componentDidUpdate() {
-        this.syncOpen();
-    }
-    handleRequestClose(reason, trigger) {
-        if (!isControlled(this.open))
-            this.internalOpen = false;
-        dispatchDetail(this.host, 'close', {
-            open: false,
-            reason: reason,
-            trigger: trigger,
-        });
-    }
-    onDialogClose = () => {
-        if (this.internalOpen) {
-            if (!isControlled(this.open)) {
-                this.internalOpen = false;
-                closeOverlay(this.overlayId);
-            }
-            else {
-                requestAnimationFrame(() => this.syncOpen());
-            }
-            dispatchDetail(this.host, 'close', {
-                open: false,
-                reason: 'programmatic',
-                trigger: 'programmatic',
-            });
-        }
-    };
-    onKeydown = (e) => {
-        if (e.key === 'Escape') {
-            requestTopOverlayClose('escape', 'keyboard');
-        }
-    };
-    syncAccessibleLabel = () => {
-        const explicitLabel = this.label?.trim();
-        const heading = this.host.querySelector('[slot="heading"], [data-ui-dialog-title], h1, h2, h3, h4, h5, h6');
-        const headingLabel = heading?.textContent?.trim();
-        const nextLabel = explicitLabel || headingLabel || 'Dialog';
-        if (this.accessibleLabel !== nextLabel)
-            this.accessibleLabel = nextLabel;
-    };
-    render() {
-        return (h(Host, { key: 'b606ef8c95728b5538047a7134030455fedf69e4', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("dialog", { key: '85531d82c36e79230cbb22c105ff3821f1f35f58', ref: (el) => (this.dialogRef = el), open: this.internalOpen, "aria-label": this.accessibleLabel }, h("slot", { key: '8216096bc94e8261680664398691b8ea877daa0f' }))));
-    }
-    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": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Controlled open state. Omit it to use defaultOpen and local interaction state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "open"
-            },
-            "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"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Accessible name forwarded to the native dialog surface."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalOpen": {},
-            "accessibleLabel": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "open",
-                "methodName": "syncFromProp"
-            }, {
-                "propName": "label",
-                "methodName": "syncLabelFromProp"
-            }, {
-                "propName": "internalOpen",
-                "methodName": "syncOpen"
-            }];
-    }
-}

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

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