@threadlabs/looma 0.2.4 → 0.2.6

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

@@ -1,58 +0,0 @@
-:host {
-  --ui-popover-viewport-gap: var(--ui-space-2, 0.5rem);
-  box-sizing: border-box;
-  max-inline-size: min(
-    20rem,
-    calc(100vw - (var(--ui-popover-viewport-gap) * 2))
-  );
-  max-block-size: calc(100dvh - (var(--ui-popover-viewport-gap) * 2));
-  overflow: visible;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-}
-
-.popover__surface {
-  box-sizing: border-box;
-  max-inline-size: inherit;
-  max-block-size: inherit;
-  overflow: auto;
-  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);
-}
-
-:host(:not([data-open])) {
-  display: none;
-}
-
-:host([popover]) {
-  position: fixed;
-  inset: auto;
-  margin: 0;
-  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;
-}
-
-:host([popover]:popover-open) { opacity: 1; transform: translateY(0) scale(1); }
-
-@starting-style {
-  :host([popover]:popover-open) { opacity: 0; transform: translateY(-4px) scale(0.99); }
-}
-
-:host([hidden]) {
-  display: none !important;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :host([popover]) { transition: none; }
-}

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

@@ -1,232 +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";
-import { createAnchoredSurface, } from "../../overlay/positioning";
-export class UIPopover {
-    host;
-    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
-    open;
-    defaultOpen = false;
-    /** Optional id of the element this popover follows in the top layer. */
-    for;
-    placement = 'bottom-start';
-    internalOpen = false;
-    overlayId = `ui-popover-${Math.random().toString(36).slice(2, 11)}`;
-    anchor = null;
-    surface = null;
-    syncFromProp() {
-        if (isControlled(this.open))
-            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',
-            });
-        }
-    }
-    resetSurface() {
-        this.setupSurface();
-        this.syncSurface();
-    }
-    setupSurface() {
-        this.surface?.destroy();
-        this.surface = null;
-        this.anchor = this.for ? this.host.ownerDocument.getElementById(this.for) : null;
-        if (!this.anchor)
-            return;
-        this.surface = createAnchoredSurface(this.host, {
-            anchor: this.anchor,
-            placement: this.placement,
-        });
-    }
-    syncSurface() {
-        if (!this.surface)
-            return;
-        if (this.internalOpen)
-            this.surface.show();
-        else
-            this.surface.hide();
-    }
-    syncOverlay() {
-        this.syncSurface();
-        if (this.internalOpen) {
-            openOverlay({
-                id: this.overlayId,
-                modal: false,
-                element: this.host,
-                relatedElements: this.anchor ? [this.anchor] : undefined,
-                dismissible: true,
-                requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
-            });
-        }
-        else {
-            closeOverlay(this.overlayId);
-        }
-    }
-    componentDidLoad() {
-        this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
-        this.host.addEventListener('keydown', this.onKeydown);
-        this.setupSurface();
-        this.syncOverlay();
-    }
-    disconnectedCallback() {
-        this.host.removeEventListener('keydown', this.onKeydown);
-        this.surface?.destroy();
-        this.surface = null;
-        closeOverlay(this.overlayId);
-    }
-    componentDidUpdate() {
-        this.syncOverlay();
-    }
-    handleRequestClose(reason, trigger) {
-        if (!isControlled(this.open))
-            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: '65a0927abc40450205989704bfde2cf7fd80d1f9', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("div", { key: '255acaf99e0fe70a92048351b24bdfde1a4ea45f', class: "popover__surface" }, h("slot", { key: '9d2f6c9d5a0f7a2766225aef0ec5b98b33ec9f07' }))));
-    }
-    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": 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"
-            },
-            "for": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional id of the element this popover follows in the top layer."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "for"
-            },
-            "placement": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "AnchoredPlacement",
-                    "resolved": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"",
-                    "references": {
-                        "AnchoredPlacement": {
-                            "location": "import",
-                            "path": "../../overlay/positioning",
-                            "id": "src/overlay/positioning.ts::AnchoredPlacement",
-                            "referenceLocation": "AnchoredPlacement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placement",
-                "defaultValue": "'bottom-start'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalOpen": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "open",
-                "methodName": "syncFromProp"
-            }, {
-                "propName": "internalOpen",
-                "methodName": "onOpenChange"
-            }, {
-                "propName": "for",
-                "methodName": "resetSurface"
-            }, {
-                "propName": "placement",
-                "methodName": "resetSurface"
-            }];
-    }
-}

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

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

@@ -1,226 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { eventToTrigger } from "../../utils/events";
-import { dispatchDetail } from "../../utils/events";
-import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
-export class UIRadio {
-    host;
-    /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
-    checked;
-    defaultChecked = false;
-    disabled = false;
-    name = '';
-    required = false;
-    value = 'on';
-    internalChecked = false;
-    slotRef;
-    syncFromProp() {
-        if (isControlled(this.checked))
-            this.internalChecked = this.checked;
-    }
-    syncToInput() {
-        const input = this.getInput();
-        if (!input)
-            return;
-        this.host.toggleAttribute('data-disabled', this.disabled);
-        input.checked = this.internalChecked;
-        input.disabled = this.disabled;
-        input.name = this.name;
-        input.required = this.required;
-        input.value = this.value;
-    }
-    componentDidLoad() {
-        this.internalChecked = controlledOrDefault(this.checked, 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 === 'radio') ?? null;
-    }
-    onInputChange = (e) => {
-        const input = e.target;
-        if (!input || !input.checked)
-            return;
-        if (!isControlled(this.checked))
-            this.internalChecked = true;
-        else
-            this.syncToInput();
-        dispatchDetail(this.host, 'change', {
-            checked: true,
-            value: this.value,
-            trigger: eventToTrigger(e),
-        });
-    };
-    render() {
-        return (h(Host, { key: '32df72dff7253956875ef28f593462ddbbb90eef', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: '0c78f3e3bdf4d618547b267128c6fc0fdd651599', 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": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Controlled checked state. Omit it to use defaultChecked and local interaction state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "checked"
-            },
-            "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 states() {
-        return {
-            "internalChecked": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "checked",
-                "methodName": "syncFromProp"
-            }, {
-                "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

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