@threadlabs/looma 0.2.5 → 0.2.7

package/dist/cjs/ui-avatar-group.cjs.entry.js

@@ -1,43 +0,0 @@
-'use strict';
-
-var index = require('./index-BHG9Rpil.js');
-
-const uiAvatarGroupCss = () => `: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}`;
-
-const UIAvatarGroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get host() { return index.getElement(this); }
-    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 (index.h(index.Host, { key: '9ba6693cabc379bbbe6f5698160481f27fe02f31', role: "group", "aria-label": this.label || undefined }, index.h("style", { key: 'ed231fe96c16a3cdd5a66d4828664c75c6959a9e' }, `::slotted(:nth-child(n + ${this.visibleLimit() + 1})) { display: none !important; }`), index.h("slot", { key: '463005a7f3c498c80c768151ab32c873ff1abf86', onSlotchange: () => this.updateOverflow() }), this.overflowCount > 0 && (index.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 watchers() { return {
-        "max": [{
-                "syncOverflow": 0
-            }]
-    }; }
-};
-UIAvatarGroup.style = uiAvatarGroupCss();
-
-exports.ui_avatar_group = UIAvatarGroup;

package/dist/cjs/ui-avatar.cjs.entry.js

@@ -1,50 +0,0 @@
-'use strict';
-
-var index = require('./index-BHG9Rpil.js');
-
-function toInitials(value) {
-    const tokens = value
-        .trim()
-        .split(/\s+/)
-        .filter((token) => token.length > 0);
-    if (tokens.length === 0)
-        return '?';
-    if (tokens.length === 1)
-        return tokens[0].slice(0, 2).toUpperCase();
-    return `${tokens[0][0] ?? ''}${tokens[1][0] ?? ''}`.toUpperCase();
-}
-
-const uiAvatarCss = () => `:host{display:inline-flex}.avatar{display:inline-grid;place-items:center;overflow:hidden;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.875rem;font-weight:600;text-transform:uppercase}.avatar img{grid-area:1 / 1;inline-size:100%;block-size:100%;object-fit:cover}.avatar .fallback{grid-area:1 / 1;display:inline-flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%}`;
-
-const UIAvatar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    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 (index.h(index.Host, { key: 'bbe6c3a775702022a19d819a6cc9d81d798cb3e1', role: "img", "aria-label": label, "data-has-image": this.hasImage ? '' : undefined }, index.h("div", { key: '63402327ba5bde122bf5deaea09baf965ee9b047', class: "avatar" }, index.h("img", { key: 'e52b86773684b80d76efa459cb03ae40881f959b', src: this.src, alt: label, onLoad: this.onImageLoad, onError: this.onImageError, hidden: !this.hasImage, "aria-hidden": this.hasImage ? 'false' : 'true' }), index.h("span", { key: '82a6d8f0d0c69ca52f81d092a2292fc80238265b', class: "fallback", hidden: this.hasImage, "aria-hidden": this.hasImage ? 'true' : 'false' }, fallbackText))));
-    }
-    static get watchers() { return {
-        "src": [{
-                "watchSrc": 0
-            }]
-    }; }
-};
-UIAvatar.style = uiAvatarCss();
-
-exports.ui_avatar = UIAvatar;

package/dist/cjs/ui-badge.cjs.entry.js

@@ -1,19 +0,0 @@
-'use strict';
-
-var index = require('./index-BHG9Rpil.js');
-
-const uiBadgeCss = () => `: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)}`;
-
-const UIBadge = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    variant;
-    tone;
-    render() {
-        return (index.h(index.Host, { key: 'ba96ade6d037a7ed9958e7eed540e62782f846f0', "data-variant": this.variant || undefined, "data-tone": this.tone || undefined }, index.h("span", { key: 'a1e9587f59de479c19b9ea7aec8c8e932b998369', class: "badge__surface" }, index.h("slot", { key: '5835ddcea5cda472e700557528fd3cbc9d572616' }))));
-    }
-};
-UIBadge.style = uiBadgeCss();
-
-exports.ui_badge = UIBadge;

package/dist/cjs/ui-button.cjs.entry.js

@@ -1,75 +0,0 @@
-'use strict';
-
-var index = require('./index-BHG9Rpil.js');
-var events = require('./events-TcQIzpNv.js');
-
-const uiButtonCss = () => `: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}`;
-
-const UIButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get host() { return index.getElement(this); }
-    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 || !events.isActivationKey(e))
-            return;
-        e.preventDefault();
-        this.host.click();
-    };
-    render() {
-        return (index.h(index.Host, { key: '27af76cb5db1d0385b6450d2bb12c3bbea5822d2', "data-size": this.size || undefined, "data-variant": this.variant, "data-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.onKeydown }, index.h("slot", { key: 'daeaa9a8c4e4e87e264bb1e09f1ab6bd1d53830c', ref: (el) => (this.slotRef = el) })));
-    }
-    static get watchers() { return {
-        "variant": [{
-                "syncToButton": 0
-            }],
-        "size": [{
-                "syncToButton": 0
-            }],
-        "disabled": [{
-                "syncToButton": 0
-            }]
-    }; }
-};
-UIButton.style = uiButtonCss();
-
-exports.ui_button = UIButton;

package/dist/cjs/ui-callout.cjs.entry.js

@@ -1,27 +0,0 @@
-'use strict';
-
-var index = require('./index-BHG9Rpil.js');
-var icons = require('./icons-BAdjrnhS.js');
-
-const uiCalloutCss = () => `:host{--ui-callout-surface:var(--ui-info-soft);--ui-callout-text:var(--ui-text-primary);--ui-callout-border:var(--ui-info-solid);--ui-callout-icon:var(--ui-info-solid);--ui-callout-padding-block:var(--ui-space-2);--ui-callout-padding-inline:var(--ui-space-3);--ui-callout-icon-column:1rem;--ui-callout-gap:var(--ui-space-2);--ui-callout-icon-size:1rem;--ui-callout-border-width:1px;--ui-callout-leading-border-width:4px;display:block;max-width:100%}.callout__surface{display:grid;grid-template-columns:var(--ui-callout-icon-column) minmax(0, 1fr);gap:var(--ui-callout-gap);align-items:start;padding:var(--ui-callout-padding-block) var(--ui-callout-padding-inline);border:var(--ui-callout-border-width) solid color-mix(in srgb, var(--ui-callout-border) 35%, transparent);border-inline-start:var(--ui-callout-leading-border-width) solid var(--ui-callout-border);border-radius:var(--ui-radius-2);background:var(--ui-callout-surface);color:var(--ui-callout-text);font-family:var(--ui-font-family-sans);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-normal);line-height:var(--ui-line-height-md)}.icon{display:grid;place-items:center;inline-size:var(--ui-callout-icon-column);block-size:var(--ui-callout-icon-column);color:var(--ui-callout-icon)}.icon svg{inline-size:var(--ui-callout-icon-size);block-size:var(--ui-callout-icon-size)}.content{min-inline-size:0}:host([data-tone='note']){--ui-callout-surface:var(--ui-surface-muted);--ui-callout-border:var(--ui-border-strong);--ui-callout-icon:var(--ui-text-secondary)}:host([data-tone='warning']){--ui-callout-surface:var(--ui-warning-soft);--ui-callout-border:var(--ui-warning-solid);--ui-callout-icon:var(--ui-warning-solid)}:host([data-tone='success']){--ui-callout-surface:var(--ui-success-soft);--ui-callout-border:var(--ui-success-solid);--ui-callout-icon:var(--ui-success-solid)}:host([data-tone='error']){--ui-callout-surface:var(--ui-danger-soft);--ui-callout-border:var(--ui-danger-solid);--ui-callout-icon:var(--ui-danger-solid)}`;
-
-const toneIcons = {
-    info: 'info',
-    note: 'notebook-pen',
-    warning: 'triangle-alert',
-    success: 'circle-check',
-    error: 'circle-x',
-};
-const UICallout = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    tone = 'info';
-    render() {
-        const icon = toneIcons[this.tone] ?? toneIcons.info;
-        return (index.h(index.Host, { key: '94bae6fbb688e5c8da979a3bebc12c51b8689c8a', role: "note", "data-tone": this.tone }, index.h("div", { key: '8fe1a3dae5b7cd3679d187cef018fa0cd810fb76', class: "callout__surface" }, index.h("span", { key: 'ed62ad8e29c30489e075631d83f1732d7a53a378', class: "icon", "aria-hidden": "true", innerHTML: icons.loomaIconMarkup(icon) }), index.h("div", { key: '97638d28e3979f71913c17b2501a90e3a9251f0f', class: "content" }, index.h("slot", { key: '6a91a0d3f189eae28aabbe278924ba7f89015f34' })))));
-    }
-};
-UICallout.style = uiCalloutCss();
-
-exports.ui_callout = UICallout;

package/dist/cjs/ui-checkbox.cjs.entry.js

@@ -1,97 +0,0 @@
-'use strict';
-
-var index = require('./index-BHG9Rpil.js');
-var events = require('./events-TcQIzpNv.js');
-var controlledState = require('./controlled-state-BFya8rAX.js');
-
-const uiCheckboxCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([aria-disabled='true']),:host([data-disabled='true']){opacity:0.6;cursor:not-allowed}::slotted(input[type='checkbox']){accent-color:var(--ui-accent-solid);width:1.125em;height:1.125em;cursor:pointer}::slotted(input[type='checkbox']:focus-visible){outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;
-
-const UICheckbox = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get host() { return index.getElement(this); }
-    /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
-    checked;
-    defaultChecked = false;
-    disabled = false;
-    indeterminate = false;
-    required = false;
-    value = 'on';
-    internalChecked = false;
-    slotRef;
-    syncFromProp() {
-        if (controlledState.isControlled(this.checked))
-            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.internalChecked = controlledState.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 === 'checkbox') ?? null;
-    }
-    onInputChange = (e) => {
-        const input = e.target;
-        if (!input)
-            return;
-        const checked = input.checked;
-        if (!controlledState.isControlled(this.checked))
-            this.internalChecked = checked;
-        else
-            this.syncToInput();
-        this.indeterminate = input.indeterminate;
-        events.dispatchDetail(this.host, 'change', {
-            checked,
-            value: this.value,
-            trigger: events.eventToTrigger(e),
-        });
-    };
-    render() {
-        return (index.h(index.Host, { key: 'eb46eb41a5ab871058960bd2aa1163a03144bc0f', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, index.h("slot", { key: 'ce18b1f1b63efebf048cd67b87064641cf4d915c', ref: (el) => (this.slotRef = el) })));
-    }
-    static get watchers() { return {
-        "checked": [{
-                "syncFromProp": 0
-            }],
-        "internalChecked": [{
-                "syncToInput": 0
-            }],
-        "indeterminate": [{
-                "syncToInput": 0
-            }],
-        "disabled": [{
-                "syncToInput": 0
-            }],
-        "required": [{
-                "syncToInput": 0
-            }]
-    }; }
-};
-UICheckbox.style = uiCheckboxCss();
-
-exports.ui_checkbox = UICheckbox;

package/dist/cjs/ui-chip_2.cjs.entry.js

@@ -1,258 +0,0 @@
-'use strict';
-
-var index = require('./index-BHG9Rpil.js');
-var manager = require('./manager-Ce25WRtl.js');
-var events = require('./events-TcQIzpNv.js');
-var controlledState = require('./controlled-state-BFya8rAX.js');
-var positioning = require('./positioning-CCR6ifPj.js');
-
-const uiChipCss = () => `:host{--ui-chip-surface:var(--ui-surface-subtle);--ui-chip-text:var(--ui-text-secondary);--ui-chip-border:var(--ui-border-default);--ui-chip-font-size:var(--ui-font-size-xs);--ui-chip-font-weight:var(--ui-font-normal);--ui-chip-line-height:var(--ui-line-height-tight);--ui-chip-padding-block:var(--ui-space-0-5);--ui-chip-padding-inline:var(--ui-space-2);--ui-chip-notch:var(--ui-space-1);display:inline-flex;min-width:0;max-width:100%}:host([data-size='sm']){--ui-chip-font-size:var(--ui-font-size-sm)}.chip__surface{display:inline-flex;align-items:center;box-sizing:border-box;min-width:0;max-width:100%;padding:var(--ui-chip-padding-block) var(--ui-chip-padding-inline);border:1px solid var(--ui-chip-border);background:var(--ui-chip-surface);color:var(--ui-chip-text) !important;font-family:var(--ui-font-family-sans) !important;font-size:var(--ui-chip-font-size) !important;font-weight:var(--ui-chip-font-weight) !important;line-height:var(--ui-chip-line-height) !important}.chip__label{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-appearance='pill']) .chip__surface{border-radius:var(--ui-radius-round)}:host([data-appearance='tag']) .chip__surface{border:0;padding-inline-end:calc(var(--ui-chip-padding-inline) + var(--ui-chip-notch));clip-path:polygon(0 0, calc(100% - var(--ui-chip-notch)) 0, 100% 50%, calc(100% - var(--ui-chip-notch)) 100%, 0 100%)}`;
-
-const UIChip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** `tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded. */
-    appearance = 'tag';
-    /** Compact typography size. */
-    size = 'xs';
-    render() {
-        return (index.h(index.Host, { key: '970cb48cf8d70c47feaab90fe428c09f0d052a03', "data-appearance": this.appearance, "data-size": this.size }, index.h("span", { key: '6d8c6104d2869520097a2a61bd2a887b363b4912', class: "chip__surface" }, index.h("span", { key: '638fb68ff5dffa629576c9e1079bb3169f2adb4f', class: "chip__label" }, index.h("slot", { key: '8b31f2130e202e18d7717aee6add6bc6e7f119b5' })))));
-    }
-};
-UIChip.style = uiChipCss();
-
-const uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;box-sizing:border-box;padding:0;border:0;border-radius:0;background:transparent;opacity:0;transform:translateY(4px);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}.tooltip__surface{box-sizing:border-box;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
-
-const UITooltip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.opened = index.createEvent(this, "open");
-        this.closed = index.createEvent(this, "close");
-    }
-    get host() { return index.getElement(this); }
-    for = '';
-    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
-    open;
-    defaultOpen = false;
-    placement = 'top-start';
-    /** Pointer hover intent delay in milliseconds. Keyboard focus is immediate. */
-    showDelay = 500;
-    /** Pointer leave grace period in milliseconds. */
-    hideDelay = 100;
-    /** Click or tap pins the description; activate again to dismiss. */
-    toggleOnClick = false;
-    pinned = false;
-    focused = false;
-    opened;
-    closed;
-    internalOpen = false;
-    overlayId = `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
-    trigger = null;
-    surface = null;
-    showTimer = null;
-    hideTimer = null;
-    syncFromProp() {
-        this.clearTimers();
-        if (controlledState.isControlled(this.open))
-            this.internalOpen = this.open;
-    }
-    resetSurface() {
-        this.syncTrigger();
-        this.setupSurface();
-        this.syncOverlay();
-    }
-    syncOverlay() {
-        if (this.internalOpen) {
-            this.surface?.show();
-            manager.openOverlay({
-                id: this.overlayId,
-                modal: false,
-                element: this.host,
-                relatedElements: this.trigger ? [this.trigger] : undefined,
-                dismissible: true,
-                requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
-            });
-        }
-        else {
-            this.surface?.hide();
-            manager.closeOverlay(this.overlayId);
-        }
-    }
-    componentDidLoad() {
-        if (!this.host.id)
-            this.host.id = this.overlayId;
-        this.internalOpen = controlledState.controlledOrDefault(this.open, this.defaultOpen);
-        this.syncTrigger();
-        this.setupSurface();
-        this.host.addEventListener('pointerenter', this.onSurfaceEnter);
-        this.host.addEventListener('pointerleave', this.onTriggerLeave);
-        this.syncOverlay();
-    }
-    componentDidUpdate() {
-        this.syncTrigger();
-    }
-    disconnectedCallback() {
-        this.clearTimers();
-        this.detachTriggerListeners();
-        this.surface?.destroy();
-        this.surface = null;
-        this.host.removeEventListener('pointerenter', this.onSurfaceEnter);
-        this.host.removeEventListener('pointerleave', this.onTriggerLeave);
-        manager.closeOverlay(this.overlayId);
-    }
-    syncTrigger() {
-        const next = this.for
-            ? this.host.getRootNode().getElementById(this.for)
-            : this.host.previousElementSibling;
-        if (next === this.trigger)
-            return;
-        this.detachTriggerListeners();
-        this.trigger = next;
-        this.attachTriggerListeners();
-        this.surface?.setAnchor(next);
-    }
-    setupSurface() {
-        this.surface?.destroy();
-        this.surface = positioning.createAnchoredSurface(this.host, {
-            anchor: this.trigger,
-            placement: this.placement,
-        });
-    }
-    attachTriggerListeners() {
-        this.detachTriggerListeners();
-        if (!this.trigger)
-            return;
-        const ids = new Set((this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean));
-        ids.add(this.host.id);
-        this.trigger.setAttribute('aria-describedby', [...ids].join(' '));
-        this.trigger.addEventListener('click', this.onTriggerClick);
-        this.trigger.addEventListener('keydown', this.onTriggerKeydown);
-        this.trigger.addEventListener('pointerenter', this.onTriggerEnter);
-        this.trigger.addEventListener('pointerleave', this.onTriggerLeave);
-        this.trigger.addEventListener('focusin', this.onTriggerFocusIn);
-        this.trigger.addEventListener('focusout', this.onTriggerFocusOut);
-    }
-    detachTriggerListeners() {
-        if (!this.trigger)
-            return;
-        const ids = (this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(id => id && id !== this.host.id);
-        if (ids.length)
-            this.trigger.setAttribute('aria-describedby', ids.join(' '));
-        else
-            this.trigger.removeAttribute('aria-describedby');
-        this.trigger.removeEventListener('click', this.onTriggerClick);
-        this.trigger.removeEventListener('keydown', this.onTriggerKeydown);
-        this.trigger.removeEventListener('pointerenter', this.onTriggerEnter);
-        this.trigger.removeEventListener('pointerleave', this.onTriggerLeave);
-        this.trigger.removeEventListener('focusin', this.onTriggerFocusIn);
-        this.trigger.removeEventListener('focusout', this.onTriggerFocusOut);
-    }
-    clearShowTimer() {
-        if (this.showTimer === null)
-            return;
-        clearTimeout(this.showTimer);
-        this.showTimer = null;
-    }
-    clearHideTimer() {
-        if (this.hideTimer === null)
-            return;
-        clearTimeout(this.hideTimer);
-        this.hideTimer = null;
-    }
-    clearTimers() {
-        this.clearShowTimer();
-        this.clearHideTimer();
-    }
-    setInteractionOpen(nextOpen, trigger) {
-        if (this.internalOpen === nextOpen)
-            return;
-        if (!controlledState.isControlled(this.open))
-            this.internalOpen = nextOpen;
-        events.dispatchDetail(this.host, nextOpen ? 'open' : 'close', {
-            open: nextOpen,
-            reason: 'action',
-            trigger,
-        });
-    }
-    onSurfaceEnter = () => this.clearHideTimer();
-    onTriggerClick = (event) => {
-        if (!this.toggleOnClick)
-            return;
-        this.clearTimers();
-        this.pinned = !this.pinned;
-        this.setInteractionOpen(this.pinned, event.detail === 0 ? 'keyboard' : 'pointer');
-    };
-    onTriggerKeydown = (event) => {
-        if (event.key === 'Escape')
-            this.clearTimers();
-    };
-    onTriggerEnter = (event) => {
-        if (event.pointerType === 'touch')
-            return;
-        this.clearHideTimer();
-        if (this.internalOpen || this.showTimer !== null)
-            return;
-        this.showTimer = setTimeout(() => {
-            this.showTimer = null;
-            this.setInteractionOpen(true, 'pointer');
-        }, Math.max(0, this.showDelay));
-    };
-    onTriggerLeave = () => {
-        this.clearShowTimer();
-        if (this.focused || this.pinned || !this.internalOpen || this.hideTimer !== null)
-            return;
-        this.hideTimer = setTimeout(() => {
-            this.hideTimer = null;
-            this.setInteractionOpen(false, 'pointer');
-        }, Math.max(0, this.hideDelay));
-    };
-    onTriggerFocusIn = () => {
-        this.focused = true;
-        this.clearTimers();
-        this.setInteractionOpen(true, 'keyboard');
-    };
-    onTriggerFocusOut = (e) => {
-        const related = e.relatedTarget;
-        if (related && this.host.contains(related))
-            return;
-        this.focused = false;
-        this.pinned = false;
-        this.clearTimers();
-        this.setInteractionOpen(false, 'keyboard');
-    };
-    handleRequestClose(reason, trigger) {
-        if (reason === 'escape' || (reason === 'light-dismiss' && this.toggleOnClick)) {
-            this.pinned = false;
-            this.clearTimers();
-            if (!controlledState.isControlled(this.open))
-                this.internalOpen = false;
-            events.dispatchDetail(this.host, 'close', {
-                open: false,
-                reason,
-                trigger: trigger,
-            });
-        }
-    }
-    render() {
-        return (index.h(index.Host, { key: 'fd4d81febd147b846aca66e94f25d56f14b171dc', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined }, index.h("div", { key: 'd31ac8c0e087becd7e60459f2cd894a9b15e95fa', class: "tooltip__surface" }, index.h("slot", { key: '06e7aac9b6992a9cf0f92c9d356b97d18fb2da8b' }))));
-    }
-    static get watchers() { return {
-        "open": [{
-                "syncFromProp": 0
-            }],
-        "for": [{
-                "resetSurface": 0
-            }],
-        "placement": [{
-                "resetSurface": 0
-            }],
-        "internalOpen": [{
-                "syncOverlay": 0
-            }]
-    }; }
-};
-UITooltip.style = uiTooltipCss();
-
-exports.ui_chip = UIChip;
-exports.ui_tooltip = UITooltip;