@threadlabs/looma 0.2.5 → 0.2.7

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

@@ -1,130 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { toInitials } from "../../utils/initials";
-export class UIAvatar {
-    src = '';
-    alt = '';
-    name = '';
-    fallback = '';
-    hasImage = false;
-    watchSrc() {
-        this.hasImage = false;
-    }
-    onImageLoad = () => {
-        this.hasImage = true;
-    };
-    onImageError = () => {
-        this.hasImage = false;
-    };
-    render() {
-        const fallbackText = this.fallback || toInitials(this.name || this.alt);
-        const label = this.alt || this.name || 'Avatar';
-        return (h(Host, { key: 'bbe6c3a775702022a19d819a6cc9d81d798cb3e1', role: "img", "aria-label": label, "data-has-image": this.hasImage ? '' : undefined }, h("div", { key: '63402327ba5bde122bf5deaea09baf965ee9b047', class: "avatar" }, h("img", { key: 'e52b86773684b80d76efa459cb03ae40881f959b', src: this.src, alt: label, onLoad: this.onImageLoad, onError: this.onImageError, hidden: !this.hasImage, "aria-hidden": this.hasImage ? 'false' : 'true' }), h("span", { key: '82a6d8f0d0c69ca52f81d092a2292fc80238265b', class: "fallback", hidden: this.hasImage, "aria-hidden": this.hasImage ? 'true' : 'false' }, fallbackText))));
-    }
-    static get is() { return "ui-avatar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-avatar.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-avatar.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "src": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "src",
-                "defaultValue": "''"
-            },
-            "alt": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "alt",
-                "defaultValue": "''"
-            },
-            "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": "''"
-            },
-            "fallback": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "fallback",
-                "defaultValue": "''"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "hasImage": {}
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "src",
-                "methodName": "watchSrc"
-            }];
-    }
-}

package/dist/collection/components/ui-avatar-group/ui-avatar-group.css

@@ -1,32 +0,0 @@
-:host {
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-  gap: 0;
-}
-
-::slotted(*) {
-  margin-inline-end: -0.5rem;
-  flex-shrink: 0;
-}
-
-::slotted(*:last-of-type) {
-  margin-inline-end: 0;
-}
-
-.overflow {
-  margin-inline-end: -0.5rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 2.5rem;
-  block-size: 2.5rem;
-  border-radius: 999px;
-  border: 1px solid var(--ui-border-default);
-  background: var(--ui-surface-muted);
-  color: var(--ui-text-secondary);
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 600;
-  flex-shrink: 0;
-}

package/dist/collection/components/ui-avatar-group/ui-avatar-group.js

@@ -1,95 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class UIAvatarGroup {
-    host;
-    max = 5;
-    label = 'People';
-    overflowCount = 0;
-    syncOverflow() {
-        this.updateOverflow();
-    }
-    componentDidLoad() {
-        this.updateOverflow();
-    }
-    visibleLimit() {
-        return Number.isFinite(this.max) ? Math.max(0, Math.floor(this.max)) : 0;
-    }
-    updateOverflow() {
-        const children = Array.from(this.host.children);
-        const total = children.length;
-        const visibleLimit = this.visibleLimit();
-        const overflowCount = total > visibleLimit ? total - visibleLimit : 0;
-        if (this.overflowCount !== overflowCount)
-            this.overflowCount = overflowCount;
-    }
-    render() {
-        return (h(Host, { key: '9ba6693cabc379bbbe6f5698160481f27fe02f31', role: "group", "aria-label": this.label || undefined }, h("style", { key: 'ed231fe96c16a3cdd5a66d4828664c75c6959a9e' }, `::slotted(:nth-child(n + ${this.visibleLimit() + 1})) { display: none !important; }`), h("slot", { key: '463005a7f3c498c80c768151ab32c873ff1abf86', onSlotchange: () => this.updateOverflow() }), this.overflowCount > 0 && (h("span", { key: 'dc1ba88fd97ca461e6518d223f00a93416e6d0f0', class: "overflow", role: "img", "aria-label": `${this.overflowCount} more ${this.overflowCount === 1 ? 'person' : 'people'}`, "data-ui-avatar-group-overflow": true }, "+", this.overflowCount))));
-    }
-    static get is() { return "ui-avatar-group"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-avatar-group.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-avatar-group.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "max": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max",
-                "defaultValue": "5"
-            },
-            "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": "'People'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "overflowCount": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "max",
-                "methodName": "syncOverflow"
-            }];
-    }
-}

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

@@ -1,90 +0,0 @@
-:host {
-  --ui-badge-surface: var(--ui-surface-muted);
-  --ui-badge-text: var(--ui-text-secondary);
-  --ui-badge-border: var(--ui-border-default);
-  --ui-badge-font-size: var(--ui-font-size-xs);
-  --ui-badge-font-weight: var(--ui-font-normal);
-  --ui-badge-line-height: var(--ui-line-height-tight);
-  --ui-badge-padding-block: var(--ui-space-0-5);
-  --ui-badge-padding-inline: var(--ui-space-2);
-
-  display: inline-flex;
-  max-width: 100%;
-}
-
-.badge__surface {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-  padding: var(--ui-badge-padding-block) var(--ui-badge-padding-inline);
-  border: 1px solid var(--ui-badge-border);
-  border-radius: var(--ui-radius-round);
-  background: var(--ui-badge-surface);
-  color: var(--ui-badge-text);
-  font-family: var(--ui-font-family-sans);
-  font-size: var(--ui-badge-font-size);
-  font-weight: var(--ui-badge-font-weight);
-  line-height: var(--ui-badge-line-height);
-  white-space: nowrap;
-}
-
-:host([data-tone='accent']) .badge__surface {
-  --ui-badge-surface: var(--ui-accent-solid);
-  --ui-badge-border: var(--ui-accent-solid);
-  --ui-badge-text: var(--ui-text-on-accent);
-}
-
-:host([data-tone='danger']) .badge__surface {
-  --ui-badge-surface: var(--ui-danger-solid);
-  --ui-badge-border: var(--ui-danger-solid);
-  --ui-badge-text: var(--ui-text-on-accent);
-}
-
-:host([data-tone='success']) .badge__surface {
-  --ui-badge-surface: var(--ui-success-solid);
-  --ui-badge-border: var(--ui-success-solid);
-  --ui-badge-text: var(--ui-text-on-accent);
-}
-
-:host([data-tone='warning']) .badge__surface {
-  --ui-badge-surface: var(--ui-warning-solid);
-  --ui-badge-border: var(--ui-warning-solid);
-  --ui-badge-text: var(--ui-text-primary);
-}
-
-:host([data-tone='info']) .badge__surface {
-  --ui-badge-surface: var(--ui-info-solid);
-  --ui-badge-border: var(--ui-info-solid);
-  --ui-badge-text: var(--ui-text-on-accent);
-}
-
-:host([data-variant='subtle'][data-tone='accent']) .badge__surface {
-  --ui-badge-surface: var(--ui-accent-soft);
-  --ui-badge-border: var(--ui-accent-soft);
-  --ui-badge-text: var(--ui-accent-solid);
-}
-
-:host([data-variant='subtle'][data-tone='danger']) .badge__surface {
-  --ui-badge-surface: var(--ui-danger-soft);
-  --ui-badge-border: var(--ui-danger-soft);
-  --ui-badge-text: var(--ui-danger-solid);
-}
-
-:host([data-variant='subtle'][data-tone='success']) .badge__surface {
-  --ui-badge-surface: var(--ui-success-soft);
-  --ui-badge-border: var(--ui-success-soft);
-  --ui-badge-text: var(--ui-success-solid);
-}
-
-:host([data-variant='subtle'][data-tone='warning']) .badge__surface {
-  --ui-badge-surface: var(--ui-warning-soft);
-  --ui-badge-border: var(--ui-warning-soft);
-  --ui-badge-text: var(--ui-warning-solid);
-}
-
-:host([data-variant='subtle'][data-tone='info']) .badge__surface {
-  --ui-badge-surface: var(--ui-info-soft);
-  --ui-badge-border: var(--ui-info-soft);
-  --ui-badge-text: var(--ui-info-solid);
-}

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

@@ -1,62 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class UIBadge {
-    variant;
-    tone;
-    render() {
-        return (h(Host, { key: 'ba96ade6d037a7ed9958e7eed540e62782f846f0', "data-variant": this.variant || undefined, "data-tone": this.tone || undefined }, h("span", { key: 'a1e9587f59de479c19b9ea7aec8c8e932b998369', class: "badge__surface" }, h("slot", { key: '5835ddcea5cda472e700557528fd3cbc9d572616' }))));
-    }
-    static get is() { return "ui-badge"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-badge.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-badge.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "variant"
-            },
-            "tone": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tone"
-            }
-        };
-    }
-}

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

@@ -1,121 +0,0 @@
-:host {
-  display: inline-flex;
-  vertical-align: middle;
-  color: var(--ui-action-secondary-text, var(--ui-text-primary));
-}
-
-:host([data-variant='solid']) {
-  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
-}
-
-:host([data-variant='outline']) ::slotted(button),
-::slotted(button) {
-  appearance: none;
-  min-block-size: var(--ui-button-min-block-size, 2.5rem);
-  border: 1px solid var(--ui-control-border, var(--ui-border-default));
-  border-radius: var(--ui-button-radius, var(--ui-radius-2));
-  background: var(--ui-action-secondary-surface, var(--ui-surface-default));
-  color: inherit;
-  font: inherit;
-  font-weight: var(--ui-font-medium, 500);
-  line-height: var(--ui-line-height-tight);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  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);
-  margin: 0;
-}
-
-:host([data-size='sm']) ::slotted(button) {
-  padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.875rem;
-}
-
-:host([data-size='lg']) ::slotted(button) {
-  min-block-size: var(--ui-control-min-block-size, 2.75rem);
-  padding: var(--ui-space-3) var(--ui-space-4);
-  font-size: 1rem;
-}
-
-::slotted(button:hover:enabled) {
-  background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
-  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
-}
-
-::slotted(button:active:enabled) {
-  background: var(--ui-surface-subtle);
-}
-
-:host([data-variant='solid']) ::slotted(button) {
-  border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
-  background: var(--ui-action-primary-surface, var(--ui-accent-solid));
-  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
-  box-shadow: var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs));
-}
-
-:host([data-variant='solid']) ::slotted(button:hover:enabled) {
-  background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-  border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-  box-shadow: var(--ui-shadow-sm);
-  transform: translateY(-1px);
-}
-
-:host([data-variant='solid']) ::slotted(button:active:enabled) {
-  background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-  border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-  box-shadow: none;
-  transform: translateY(0);
-}
-
-:host([data-variant='destructive']) ::slotted(button) {
-  border-color: var(--ui-danger-solid);
-  background: var(--ui-danger-solid);
-  color: var(--ui-text-on-accent);
-  box-shadow: var(--ui-button-destructive-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs));
-}
-
-:host([data-variant='destructive']) ::slotted(button:hover:enabled) {
-  background: var(--ui-danger-hover);
-  border-color: var(--ui-danger-hover);
-  box-shadow: var(--ui-shadow-sm);
-  transform: translateY(-1px);
-}
-
-:host([data-variant='destructive']) ::slotted(button:active:enabled) {
-  box-shadow: none;
-  transform: translateY(0);
-}
-
-:host([data-variant='ghost']) ::slotted(button) {
-  border-color: transparent;
-  background: transparent;
-}
-
-:host([data-variant='ghost']) ::slotted(button:hover:enabled) {
-  background: var(--ui-surface-muted);
-  border-color: transparent;
-}
-
-:host([data-variant='ghost']) ::slotted(button:active:enabled) {
-  background: var(--ui-surface-subtle);
-  border-color: transparent;
-}
-
-::slotted(button:focus-visible) {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
-}
-
-:host([data-disabled='true']),
-:host([disabled]) {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-::slotted(button:disabled) {
-  cursor: not-allowed;
-}

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

@@ -1,141 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { isActivationKey } from "../../utils/events";
-export class UIButton {
-    host;
-    variant = 'outline';
-    size;
-    // Reflect so the attribute always tracks the property (as ui-icon-button does).
-    // Without reflection a `disabled` attribute rendered at SSR outlives the enabled
-    // state after hydration flips the prop, leaving working buttons styled disabled.
-    disabled = false;
-    slotRef;
-    syncToButton() {
-        const btn = this.getButton();
-        if (!btn)
-            return;
-        if (this.size) {
-            this.host.dataset.size = this.size;
-        }
-        else {
-            delete this.host.dataset.size;
-        }
-        if (this.disabled) {
-            this.host.dataset.disabled = 'true';
-        }
-        else {
-            delete this.host.dataset.disabled;
-        }
-        this.host.dataset.variant = this.variant;
-        btn.disabled = this.disabled;
-    }
-    componentDidLoad() {
-        this.slotRef?.addEventListener('slotchange', () => this.syncToButton());
-        this.syncToButton();
-    }
-    componentDidUpdate() {
-        this.syncToButton();
-    }
-    getButton() {
-        const slot = this.host.shadowRoot?.querySelector('slot');
-        const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
-        return nodes.find((el) => el.tagName === 'BUTTON') ?? null;
-    }
-    onKeydown = (e) => {
-        const btn = this.getButton();
-        if (btn || this.disabled || !isActivationKey(e))
-            return;
-        e.preventDefault();
-        this.host.click();
-    };
-    render() {
-        return (h(Host, { key: '27af76cb5db1d0385b6450d2bb12c3bbea5822d2', "data-size": this.size || undefined, "data-variant": this.variant, "data-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: 'daeaa9a8c4e4e87e264bb1e09f1ab6bd1d53830c', ref: (el) => (this.slotRef = el) })));
-    }
-    static get is() { return "ui-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-button.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-button.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'outline' | 'solid' | 'destructive' | 'ghost'",
-                    "resolved": "\"destructive\" | \"ghost\" | \"outline\" | \"solid\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "variant",
-                "defaultValue": "'outline'"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size"
-            },
-            "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"
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "variant",
-                "methodName": "syncToButton"
-            }, {
-                "propName": "size",
-                "methodName": "syncToButton"
-            }, {
-                "propName": "disabled",
-                "methodName": "syncToButton"
-            }];
-    }
-}