@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,230 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, svg, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './checkbox.styles.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without importing
+// that module — it's off limits here — so the glyph still reads as part of
+// the same visual language as the rest of the library's inline icons.
+const GLYPH_VIEW_BOX = '0 0 24 24';
+const GLYPH_STROKE_WIDTH = '1.75';
+function checkmarkGlyph() {
+    return svg `
+    <svg
+      part="checkmark"
+      width="1em"
+      height="1em"
+      viewBox=${GLYPH_VIEW_BOX}
+      fill="none"
+      stroke="currentColor"
+      stroke-width=${GLYPH_STROKE_WIDTH}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    ><polyline points="5 12.5 10 17.5 19 6.5"></polyline></svg>
+  `;
+}
+/** The indeterminate/mixed-state dash — takes priority over the checkmark. */
+function indeterminateGlyph() {
+    return svg `
+    <svg
+      part="checkmark"
+      width="1em"
+      height="1em"
+      viewBox=${GLYPH_VIEW_BOX}
+      fill="none"
+      stroke="currentColor"
+      stroke-width=${GLYPH_STROKE_WIDTH}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    ><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+  `;
+}
+/**
+ * `<lyra-checkbox>` — a boolean form control. Structurally the same idea as
+ * `<lyra-switch>` (form-associated via `ElementInternals`, click and
+ * Space/Enter both toggle) but with checkbox semantics: `role="checkbox"` +
+ * an `aria-checked` that can also be `"mixed"`, and a visual box/checkmark
+ * instead of a track/thumb.
+ *
+ * `checked` is not a plain string, so this attaches `ElementInternals`
+ * directly and implements its own `updateValidity()` rather than using the
+ * `FormAssociated` mixin — see `<lyra-combobox>` for the same
+ * direct-`ElementInternals` shape with a non-string value.
+ *
+ * @customElement lyra-checkbox
+ * @slot - Label text, rendered next to the box. Clicking it toggles the
+ * checkbox, the same as clicking a native checkbox's associated `<label>`.
+ * If left empty, set `aria-label` on the host so the control still has an
+ * accessible name.
+ * @event lyra-change - The user toggled the checkbox (click or Space/Enter).
+ * `detail: { checked }`. Not fired for a programmatic `.checked` assignment.
+ * @csspart base - The whole interactive control (`role="checkbox"`); wraps the box and label.
+ * @csspart box - The small square that shows the checkmark/indeterminate dash.
+ * @csspart checkmark - The checkmark (or indeterminate dash) glyph inside the box.
+ * @csspart label - The wrapper around the default slot.
+ */
+export class LyraCheckbox extends LyraElement {
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.formAssociated = true; }
+    constructor() {
+        super();
+        this.checked = false;
+        // Visual-only mixed state, matching native `<input type="checkbox">`
+        // semantics: it does not affect `checked`'s own value, and a user
+        // interaction (click/keyboard) clears it back to `false`, exactly like the
+        // native control does.
+        this.indeterminate = false;
+        this.disabled = false;
+        this.required = false;
+        this.name = '';
+        this.value = 'on';
+        // Tracks whether the default slot carries any real (non-whitespace)
+        // content, so the label wrapper — and the gap next to the box — can
+        // collapse to nothing for an icon-only/aria-label-only checkbox instead of
+        // leaving a stray empty gap. See lyra-switch's identical field for why
+        // `assignedNodes` (not `assignedElements`) is checked — the common case is
+        // a bare slotted text label, e.g. `<lyra-checkbox>Accept terms</lyra-checkbox>`.
+        this.hasLabelSlot = false;
+        // What `form.reset()` restores to — captured once, from whatever `checked`
+        // reads at first connect (i.e. whatever the declarative `checked`
+        // attribute parsed to, since attribute parsing happens before
+        // `connectedCallback`). `checked` reflects, so unlike `FormAssociated`'s
+        // non-reflecting `value` this can't be captured from
+        // `attributeChangedCallback` alone — that would also fire (and wrongly
+        // redefine the default) every time the property setter reflects a later
+        // user toggle back into the attribute. Guarding with a one-shot flag
+        // instead mirrors `<lyra-combobox>`'s `_defaultCaptured`/`_defaultSelected`
+        // and `<lyra-switch>`'s identical `_defaultChecked`.
+        this._defaultChecked = false;
+        this._defaultCaptured = false;
+        this.onClick = () => {
+            this.toggle();
+        };
+        this.onKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            // Space/Enter both activate, matching lyra-switch's onKeyDown (and
+            // lyra-table's sortable-header/row convention) for role-based clickable
+            // elements — bound to keydown, not keyup/native click-forwarding.
+            if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {
+                // Space would otherwise scroll the page, same as a native checkbox.
+                e.preventDefault();
+                this.toggle();
+            }
+        };
+        this.onSlotChange = (e) => {
+            const nodes = e.target.assignedNodes({ flatten: true });
+            this.hasLabelSlot = nodes.some((n) => (n.textContent ?? '').trim().length > 0);
+        };
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this._defaultCaptured) {
+            this._defaultCaptured = true;
+            this._defaultChecked = this.checked;
+        }
+        this.updateValidity();
+    }
+    willUpdate() {
+        // Seed `hasLabelSlot` from the light-DOM children synchronously before
+        // the very first render (same `!hasUpdated` guard as combobox/date-input's
+        // `hasHintSlot` etc.) so declaratively-provided label text doesn't flash
+        // hidden for one frame while waiting on the first `slotchange` event.
+        if (!this.hasUpdated) {
+            this.hasLabelSlot = Array.from(this.childNodes).some((n) => (n.textContent ?? '').trim().length > 0);
+        }
+    }
+    updateValidity() {
+        if (this.required && !this.checked) {
+            this.internals.setValidity({ valueMissing: true }, 'Please check this box if you want to continue.');
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    updated(changed) {
+        if (changed.has('checked') || changed.has('value')) {
+            // A native checkbox submits its `value` content attribute (default
+            // "on") only while checked, and contributes nothing at all — not even
+            // an empty string — while unchecked.
+            this.internals.setFormValue(this.checked ? this.value : null);
+        }
+        if (changed.has('checked') || changed.has('required')) {
+            this.updateValidity();
+        }
+    }
+    formResetCallback() {
+        this.checked = this._defaultChecked;
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.indeterminate = false;
+        this.emit('lyra-change', { checked: this.checked });
+    }
+    render() {
+        const mixed = this.indeterminate;
+        return html `
+      <span
+        part="base"
+        role="checkbox"
+        tabindex=${this.disabled ? '-1' : '0'}
+        aria-checked=${mixed ? 'mixed' : this.checked ? 'true' : 'false'}
+        aria-required=${this.required ? 'true' : nothing}
+        aria-disabled=${this.disabled ? 'true' : nothing}
+        aria-label=${this.getAttribute('aria-label') || nothing}
+        @click=${this.onClick}
+        @keydown=${this.onKeyDown}
+      >
+        <span part="box"> ${mixed ? indeterminateGlyph() : this.checked ? checkmarkGlyph() : nothing} </span>
+        <span part="label" ?hidden=${!this.hasLabelSlot}>
+          <slot @slotchange=${this.onSlotChange}></slot>
+        </span>
+      </span>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCheckbox.prototype, "required", void 0);
+__decorate([
+    property()
+], LyraCheckbox.prototype, "name", void 0);
+__decorate([
+    property()
+], LyraCheckbox.prototype, "value", void 0);
+__decorate([
+    state()
+], LyraCheckbox.prototype, "hasLabelSlot", void 0);
+defineElement('checkbox', LyraCheckbox);

package/dist/components/checkbox/checkbox.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/checkbox/checkbox.styles.js

@@ -0,0 +1,70 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+  }
+  [part='base'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  [part='base']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  :host([disabled]) [part='base'] {
+    cursor: not-allowed;
+    opacity: var(--lyra-opacity-disabled);
+  }
+
+  [part='box'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    /* Matches the inline icon-affordance sizing convention used by
+       lyra-combobox's clear-button / lyra-select's toggle
+       (--lyra-icon-button-size capped at 1.75rem) — a real touch target
+       without ballooning to the full 2.5rem meant for standalone
+       icon-only buttons. */
+    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
+    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: calc(var(--lyra-radius) * 0.6);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-on-brand);
+    transition:
+      background-color var(--lyra-transition-fast),
+      border-color var(--lyra-transition-fast);
+  }
+  :host(:not([disabled])) [part='base']:hover [part='box'] {
+    border-color: var(--lyra-color-brand);
+  }
+  :host([checked]) [part='box'],
+  :host([indeterminate]) [part='box'] {
+    background: var(--lyra-color-brand);
+    border-color: var(--lyra-color-brand);
+  }
+
+  [part='checkmark'] {
+    display: block;
+  }
+
+  /* No explicit "display" here (unlike e.g. lyra-combobox's
+     [part='form-control-label']), so the UA stylesheet's default
+     "[hidden] { display: none }" rule needs no author-side override to
+     take effect when hasLabelSlot is false. */
+  [part='label'] {
+    font-size: 0.875rem;
+    color: var(--lyra-color-text);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='box'] {
+      transition: none !important;
+    }
+  }
+`;

package/dist/components/chip/chip-group.d.ts

@@ -0,0 +1,56 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface ChipGroupOverflowToggleDetail {
+    expanded: boolean;
+}
+/**
+ * `<lyra-chip-group>` — a flex-wrap container for a set of `<lyra-chip>`
+ * children (plain light-DOM composition — direct children are the chips,
+ * the same shape `<lyra-split>`'s panels / `<lyra-source-list>`'s cards
+ * take — no `.items` array prop).
+ *
+ * `max-visible` is entirely optional. When unset, every child is always
+ * shown and this component does nothing beyond flex-wrap layout. When set
+ * and the group has more chip children than that, the excess children are
+ * hidden (via their own `hidden` property — CSS alone can't parameterize
+ * `:nth-child` on a runtime prop, so this reaches into the light DOM the
+ * same way `<lyra-split>` sets each panel's inline `flex`/`order`) and a
+ * "+N" overflow-indicator pill takes their place. Clicking it is a toggle:
+ * it reveals the rest (and relabels itself "Show less"); clicking again
+ * re-collapses back to `max-visible`. `lyra-overflow-toggle` fires only from
+ * that click — i.e. only when `max-visible` is actually causing an overflow
+ * state — never as a side effect of `max-visible`/children changing on
+ * their own.
+ *
+ * @customElement lyra-chip-group
+ * @slot - `<lyra-chip>` elements (or any content, though the chip pairing is
+ * the intended usage).
+ * @event lyra-overflow-toggle - The overflow indicator was activated,
+ * revealing or re-collapsing the excess children. `detail: { expanded }`.
+ * @csspart base - The flex-wrap container (holds both the slot and the overflow indicator).
+ * @csspart overflow-indicator - The "+N" / "Show less" toggle button. Only rendered while `max-visible` is actively causing an overflow.
+ */
+export declare class LyraChipGroup extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Maximum number of direct children shown before the rest collapse behind
+     *  a "+N" indicator. Unset (the default) means no limit — every child is
+     *  always shown. */
+    maxVisible?: number;
+    private childCount;
+    /** Whether the excess (beyond `max-visible`) children are currently
+     *  revealed. Meaningless (and never rendered) while there's no overflow. */
+    private expanded;
+    protected willUpdate(): void;
+    firstUpdated(): void;
+    protected updated(): void;
+    private get hasOverflow();
+    private syncChildVisibility;
+    private onSlotChange;
+    private onToggleOverflow;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-chip-group': LyraChipGroup;
+    }
+}

package/dist/components/chip/chip-group.js

@@ -0,0 +1,124 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './chip-group.styles.js';
+/**
+ * `<lyra-chip-group>` — a flex-wrap container for a set of `<lyra-chip>`
+ * children (plain light-DOM composition — direct children are the chips,
+ * the same shape `<lyra-split>`'s panels / `<lyra-source-list>`'s cards
+ * take — no `.items` array prop).
+ *
+ * `max-visible` is entirely optional. When unset, every child is always
+ * shown and this component does nothing beyond flex-wrap layout. When set
+ * and the group has more chip children than that, the excess children are
+ * hidden (via their own `hidden` property — CSS alone can't parameterize
+ * `:nth-child` on a runtime prop, so this reaches into the light DOM the
+ * same way `<lyra-split>` sets each panel's inline `flex`/`order`) and a
+ * "+N" overflow-indicator pill takes their place. Clicking it is a toggle:
+ * it reveals the rest (and relabels itself "Show less"); clicking again
+ * re-collapses back to `max-visible`. `lyra-overflow-toggle` fires only from
+ * that click — i.e. only when `max-visible` is actually causing an overflow
+ * state — never as a side effect of `max-visible`/children changing on
+ * their own.
+ *
+ * @customElement lyra-chip-group
+ * @slot - `<lyra-chip>` elements (or any content, though the chip pairing is
+ * the intended usage).
+ * @event lyra-overflow-toggle - The overflow indicator was activated,
+ * revealing or re-collapsing the excess children. `detail: { expanded }`.
+ * @csspart base - The flex-wrap container (holds both the slot and the overflow indicator).
+ * @csspart overflow-indicator - The "+N" / "Show less" toggle button. Only rendered while `max-visible` is actively causing an overflow.
+ */
+export class LyraChipGroup extends LyraElement {
+    constructor() {
+        super(...arguments);
+        // Tracks the default slot's assigned-element count, the same
+        // connectedCallback/willUpdate + slotchange convention `<lyra-split>`'s
+        // `panelCount`/`<lyra-source-list>`'s `slottedCount` already establish.
+        this.childCount = 0;
+        /** Whether the excess (beyond `max-visible`) children are currently
+         *  revealed. Meaningless (and never rendered) while there's no overflow. */
+        this.expanded = false;
+        this.onSlotChange = (e) => {
+            this.childCount = e.target.assignedElements({ flatten: true }).length;
+        };
+        this.onToggleOverflow = () => {
+            this.expanded = !this.expanded;
+            this.emit('lyra-overflow-toggle', { expanded: this.expanded });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.childCount = this.children.length;
+        }
+        // max-visible/children can change out from under an already-expanded
+        // group (e.g. the consumer raises max-visible past the current count) —
+        // silently resync rather than leaving `expanded` stuck true with nothing
+        // left for it to mean. This never fires the event: only an actual click
+        // on the indicator does (see the class doc). Corrected here (not in
+        // `updated()`) so it folds into the update already in progress instead
+        // of scheduling a second one.
+        if (this.expanded && !this.hasOverflow)
+            this.expanded = false;
+    }
+    firstUpdated() {
+        // Fallback reconciliation for slot-forwarding / engines that don't fire
+        // `slotchange` for content present at parse time — same idiom as
+        // `<lyra-source-list>`'s identical `firstUpdated`.
+        const slot = this.shadowRoot.querySelector('slot');
+        this.childCount = slot.assignedElements({ flatten: true }).length;
+        this.syncChildVisibility();
+    }
+    updated() {
+        this.syncChildVisibility();
+    }
+    get hasOverflow() {
+        const max = this.maxVisible;
+        return max != null && Number.isFinite(max) && max >= 0 && this.childCount > max;
+    }
+    syncChildVisibility() {
+        const max = this.maxVisible;
+        const overflowing = this.hasOverflow;
+        Array.from(this.children).forEach((child, i) => {
+            child.hidden = overflowing && !this.expanded && i >= max;
+        });
+    }
+    render() {
+        const overflowing = this.hasOverflow;
+        const hiddenCount = overflowing ? this.childCount - this.maxVisible : 0;
+        return html `
+      <div part="base">
+        <slot @slotchange=${this.onSlotChange}></slot>
+        ${overflowing
+            ? html `<button
+              part="overflow-indicator"
+              type="button"
+              aria-expanded=${this.expanded ? 'true' : 'false'}
+              aria-label=${this.expanded ? 'Show less' : `Show ${hiddenCount} more`}
+              @click=${this.onToggleOverflow}
+            >
+              ${this.expanded ? 'Show less' : `+${hiddenCount}`}
+            </button>`
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Number, attribute: 'max-visible' })
+], LyraChipGroup.prototype, "maxVisible", void 0);
+__decorate([
+    state()
+], LyraChipGroup.prototype, "childCount", void 0);
+__decorate([
+    state()
+], LyraChipGroup.prototype, "expanded", void 0);
+defineElement('chip-group', LyraChipGroup);

package/dist/components/chip/chip-group.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/chip/chip-group.styles.js

@@ -0,0 +1,57 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+  }
+  /* Deliberately its own local pill styling rather than instantiating a
+     real <lyra-chip> in the shadow DOM for this -- keeps the group's
+     rendering self-contained instead of depending on chip.ts's internal
+     shape, the same way this family's overlay-shaped components duplicate
+     rather than nest one another. */
+  [part='overflow-indicator'] {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0.25rem var(--lyra-space-s);
+    border: 1px dashed var(--lyra-color-border);
+    border-radius: 999px;
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text-quiet);
+    font: inherit;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1.3;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      background-color var(--lyra-transition-fast),
+      border-color var(--lyra-transition-fast),
+      color var(--lyra-transition-fast);
+  }
+  /* Dashed border marks it as a structural "more" affordance, distinct at a
+     glance from the solid-bordered real chips it sits alongside. */
+  [part='overflow-indicator']:hover {
+    border-color: var(--lyra-color-brand);
+    color: var(--lyra-color-text);
+  }
+  [part='overflow-indicator']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='overflow-indicator'][aria-expanded='true'] {
+    border-style: solid;
+    color: var(--lyra-color-text);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='overflow-indicator'] {
+      transition: none !important;
+    }
+  }
+`;

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,64 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type ChipTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+export interface ChipRemoveDetail {
+    value?: string;
+}
+/**
+ * `<lyra-chip>` — a small, content-agnostic pill for a short label: a tag, an
+ * active-filter/scope indicator, etc. Distinct from `<lyra-attachment-chip>`
+ * (specifically file-shaped, with a thumbnail/size/upload-progress) — this
+ * one carries no domain assumptions at all, just a label and an optional
+ * leading icon/dot.
+ *
+ * `tone` tints the whole pill using the same loud-color-on-quiet-tint
+ * convention `<lyra-tool-call-chip>`/`<lyra-citation-badge>` already
+ * establish for status coloring: background is the tone's `-quiet` tint,
+ * text/icon is the tone's loud color. `neutral` (the default) has no
+ * dedicated token pair of its own, so it falls back to a plain
+ * bordered-surface look — the same "no signal" treatment
+ * `<lyra-citation-badge>`'s `default` status and `<lyra-tool-call-chip>`'s
+ * `pending` status already use.
+ *
+ * This is a controlled component: clicking the remove (×) button only fires
+ * `lyra-remove` — the chip never removes itself from the DOM on its own
+ * interaction, the same contract `<lyra-attachment-chip>`/
+ * `<lyra-conversation-item>` already follow. A consumer owns the underlying
+ * list and decides whether/how the click actually removes anything.
+ *
+ * @customElement lyra-chip
+ * @slot - The chip's label content.
+ * @slot icon - Optional leading icon or status dot. Nothing is reserved for
+ * it (no extra gap) when left empty.
+ * @event lyra-remove - The remove (×) button was activated (click, or
+ * Enter/Space while focused — native `<button>` behavior). `detail: { value }`
+ * — `value` is `undefined` when the `value` prop was never set. Only
+ * rendered while `removable`.
+ * @csspart base - The pill's root container.
+ * @csspart icon - Wrapper around the `icon` slot. Hidden entirely while empty.
+ * @csspart label - Wrapper around the default slot.
+ * @csspart remove-button - The remove (×) affordance, only rendered while `removable`.
+ */
+export declare class LyraChip extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Status/emphasis color. `neutral` (the default) reads as plain/unstyled. */
+    tone: ChipTone;
+    /** Shows the remove (×) button. */
+    removable: boolean;
+    /** Opaque consumer bookkeeping value — never read, validated, or rendered
+     *  by this component itself, only ever echoed back verbatim (including
+     *  `undefined` if never set) in `lyra-remove`'s detail. */
+    value?: string;
+    private hasIconSlot;
+    protected willUpdate(): void;
+    private onIconSlotChange;
+    private get labelText();
+    private get accessibleRemoveLabel();
+    private onRemoveClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-chip': LyraChip;
+    }
+}