@threadlabs/looma 0.2.5 → 0.2.6

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

@@ -1,180 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { createId } from "../../utils/id";
-export class UIFormField {
-    host;
-    invalid = false;
-    disabled = false;
-    required = false;
-    observer = null;
-    activeInput = null;
-    ownedDescriptionIds = new Set();
-    wireQueued = false;
-    componentDidLoad() {
-        this.observer = new MutationObserver(this.scheduleWire);
-        this.observer.observe(this.host, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['aria-describedby', 'data-slot', 'id', 'role'],
-        });
-        this.wire();
-    }
-    componentDidUpdate() {
-        this.scheduleWire();
-    }
-    disconnectedCallback() {
-        this.observer?.disconnect();
-        this.observer = null;
-        this.removeOwnedDescriptions(this.activeInput);
-        this.activeInput = null;
-        this.ownedDescriptionIds.clear();
-    }
-    descriptionIds(input) {
-        return Array.from(new Set((input.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean)));
-    }
-    removeOwnedDescriptions(input) {
-        if (!input || this.ownedDescriptionIds.size === 0)
-            return;
-        const remaining = this.descriptionIds(input)
-            .filter(id => !this.ownedDescriptionIds.has(id));
-        if (remaining.length > 0)
-            input.setAttribute('aria-describedby', remaining.join(' '));
-        else
-            input.removeAttribute('aria-describedby');
-    }
-    scheduleWire = () => {
-        if (this.wireQueued)
-            return;
-        this.wireQueued = true;
-        queueMicrotask(() => {
-            this.wireQueued = false;
-            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 !== this.activeInput) {
-            this.removeOwnedDescriptions(this.activeInput);
-            this.activeInput = input;
-            this.ownedDescriptionIds.clear();
-        }
-        if (!input)
-            return;
-        if (!input.id) {
-            input.id = createId('form-field-input');
-        }
-        if (label && !label.getAttribute('for')) {
-            label.setAttribute('for', input.id);
-        }
-        const previousOwnedIds = this.ownedDescriptionIds;
-        const externalIds = this.descriptionIds(input)
-            .filter(id => !previousOwnedIds.has(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);
-        }
-        const nextOwnedIds = describedIds.filter(id => !externalIds.includes(id));
-        const nextDescribedIds = Array.from(new Set([...externalIds, ...describedIds]));
-        const nextDescribedBy = nextDescribedIds.join(' ');
-        if (input.getAttribute('aria-describedby') !== nextDescribedBy) {
-            if (nextDescribedBy)
-                input.setAttribute('aria-describedby', nextDescribedBy);
-            else
-                input.removeAttribute('aria-describedby');
-        }
-        this.ownedDescriptionIds = new Set(nextOwnedIds);
-        input.disabled = this.disabled;
-        input.required = this.required;
-        input.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
-    }
-    render() {
-        return (h(Host, { key: 'f052dbf0ba289bf187ea78c458260110fbfa059a', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: 'f26f48581b5781e8c3d7830ddd3707ea4fb04420', onSlotchange: this.scheduleWire })));
-    }
-    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"; }
-}

package/dist/collection/components/ui-icon-button/ui-icon-button.css

@@ -1,145 +0,0 @@
-:host {
-  display: inline-flex;
-  color: var(--ui-text-secondary);
-}
-
-:host([anticipatory]) {
-  position: relative;
-}
-
-:host([anticipatory])::before {
-  content: '';
-  position: absolute;
-  inset: 50% auto auto 50%;
-  z-index: 1;
-  inline-size: var(--ui-affordance-guide-size, 0.25rem);
-  block-size: var(--ui-affordance-guide-size, 0.25rem);
-  border-radius: var(--ui-radius-round, 999px);
-  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-  opacity: var(--ui-affordance-guide-opacity, 0.42);
-  transform: translate(-50%, -50%);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
-  pointer-events: none;
-}
-
-:host([anticipatory]) button {
-  opacity: 0;
-  transform: scale(0.72);
-  pointer-events: none;
-}
-
-:host([anticipatory][data-ui-proximity='near'])::before,
-:host([anticipatory]:focus-within)::before,
-:host([anticipatory]:hover)::before,
-:host([anticipatory][variant='solid'])::before {
-  opacity: 0;
-}
-
-:host([anticipatory][data-ui-proximity='near']) button,
-:host([anticipatory]:focus-within) button,
-:host([anticipatory]:hover) button,
-:host([anticipatory][variant='solid']) button {
-  opacity: 1;
-  transform: scale(1);
-  pointer-events: auto;
-}
-
-button {
-  appearance: none;
-  inline-size: var(--ui-icon-button-size, 2.5rem);
-  block-size: var(--ui-icon-button-size, 2.5rem);
-  min-inline-size: var(--ui-icon-button-size, 2.5rem);
-  min-block-size: var(--ui-icon-button-size, 2.5rem);
-  padding: 0;
-  margin: 0;
-  border: 1px solid transparent;
-  border-radius: var(--ui-icon-button-radius, var(--ui-radius-2));
-  background: var(--ui-icon-button-bg, transparent);
-  color: inherit;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    border-color var(--ui-motion-fast) var(--ui-motion-ease),
-    color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
-@media (hover: none), (pointer: coarse) {
-  :host([anticipatory])::before {
-    opacity: 0;
-  }
-
-  :host([anticipatory]) button {
-    opacity: 1;
-    transform: none;
-    pointer-events: auto;
-  }
-}
-
-:host([size='sm']) button {
-  inline-size: var(--ui-icon-button-size-sm, 2rem);
-  block-size: var(--ui-icon-button-size-sm, 2rem);
-  min-inline-size: var(--ui-icon-button-size-sm, 2rem);
-  min-block-size: var(--ui-icon-button-size-sm, 2rem);
-}
-
-:host([size='lg']) button {
-  inline-size: var(--ui-icon-button-size-lg, 2.75rem);
-  block-size: var(--ui-icon-button-size-lg, 2.75rem);
-  min-inline-size: var(--ui-icon-button-size-lg, 2.75rem);
-  min-block-size: var(--ui-icon-button-size-lg, 2.75rem);
-}
-
-:host([variant='outline']) button {
-  border-color: var(--ui-icon-button-border, var(--ui-border-default));
-  background: var(--ui-icon-button-outline-bg, var(--ui-surface-default));
-  color: var(--ui-icon-button-outline-color, var(--ui-text-primary));
-}
-
-:host([variant='solid']) button {
-  background: var(--ui-icon-button-solid-bg, var(--ui-accent-solid));
-  color: var(--ui-icon-button-solid-color, var(--ui-text-on-accent));
-  box-shadow: var(
-    --ui-icon-button-solid-shadow,
-    0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
-  );
-}
-
-button:hover:enabled {
-  background: var(--ui-icon-button-hover-bg, var(--ui-surface-muted));
-  color: var(--ui-icon-button-hover-color, var(--ui-text-primary));
-}
-
-:host([variant='outline']) button:hover:enabled {
-  border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
-}
-
-:host([variant='solid']) button:hover:enabled {
-  background: var(--ui-icon-button-solid-hover-bg, var(--ui-accent-hover));
-}
-
-button:active:enabled {
-  transform: scale(var(--ui-icon-button-active-scale, 0.96));
-}
-
-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-icon-button-icon-size, 1.125rem);
-  block-size: var(--ui-icon-button-icon-size, 1.125rem);
-  flex-shrink: 0;
-  stroke-width: var(--ui-icon-button-icon-stroke-width, 1.75);
-}

package/dist/collection/components/ui-icon-button/ui-icon-button.js

@@ -1,128 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class UIIconButton {
-    disabled = false;
-    label = '';
-    size = 'md';
-    variant = 'ghost';
-    /** Reveals this control through a surrounding ui-affordance-scope. */
-    anticipatory = false;
-    render() {
-        return (h(Host, { key: '8d0f84c9d3aaa69f47430369b511bb4160de5cc8', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, h("button", { key: 'b896cdb091e9733b2b8625463f1324819c23965c', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '76ab5e5f4d34e3f0850287b4552dde060b3798e7' }))));
-    }
-    static get is() { return "ui-icon-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-icon-button.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-icon-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"
-            },
-            "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": "''"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'sm' | 'md' | 'lg'",
-                    "resolved": "\"lg\" | \"md\" | \"sm\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "size",
-                "defaultValue": "'md'"
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'ghost' | 'outline' | 'solid'",
-                    "resolved": "\"ghost\" | \"outline\" | \"solid\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "variant",
-                "defaultValue": "'ghost'"
-            },
-            "anticipatory": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Reveals this control through a surrounding ui-affordance-scope."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "anticipatory",
-                "defaultValue": "false"
-            }
-        };
-    }
-}

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

@@ -1,48 +0,0 @@
-:host {
-  display: inline-flex;
-  min-inline-size: 0;
-  color: var(--ui-text-primary);
-}
-
-::slotted(input) {
-  width: 100%;
-  appearance: none;
-  min-block-size: var(--ui-control-min-block-size, 2.75rem);
-  border: 1px solid var(--ui-control-border, var(--ui-border-default));
-  border-radius: var(--ui-radius-2);
-  background: var(--ui-control-surface, var(--ui-surface-default));
-  color: inherit;
-  font: inherit;
-  line-height: var(--ui-line-height-md);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  margin: 0;
-  transition:
-    border-color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-    background-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
-::slotted(input:hover:not(:focus):not(:disabled)) {
-  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
-}
-
-::slotted(input:focus) {
-  border-color: var(--ui-control-focus, var(--ui-focus-ring));
-  box-shadow: 0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft));
-}
-
-:host([data-invalid='true'])::slotted(input),
-::slotted(input[aria-invalid='true']) {
-  border-color: var(--ui-accent-active);
-}
-
-::slotted(input:disabled) {
-  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-text-muted);
-  cursor: not-allowed;
-}
-
-::slotted(input:focus-visible) {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
-}