@aceshooting/lyra-ui 1.2.0 → 2.0.0

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;
+    }
+}

package/dist/components/chip/chip.js

@@ -0,0 +1,115 @@
+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 { closeIcon } from '../../internal/icons.js';
+import { styles } from './chip.styles.js';
+/**
+ * `<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 class LyraChip extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Status/emphasis color. `neutral` (the default) reads as plain/unstyled. */
+        this.tone = 'neutral';
+        /** Shows the remove (×) button. */
+        this.removable = false;
+        // A `[part]` always contains a literal `<slot>` child regardless of
+        // assigned content, so `:empty` never matches — real emptiness is tracked
+        // in JS instead, the same fix `<lyra-stat>`'s `hasIcon`/
+        // `<lyra-tool-call-chip>`'s `hasDetailSlot` etc. already establish.
+        this.hasIconSlot = false;
+        this.onIconSlotChange = (e) => {
+            this.hasIconSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onRemoveClick = () => {
+            this.emit('lyra-remove', { value: this.value });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasIconSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'icon');
+        }
+    }
+    // Only the default slot's own content counts toward the remove button's
+    // accessible name — text incidentally living inside the (decorative)
+    // `icon` slot shouldn't leak into "Remove {text}".
+    get labelText() {
+        return Array.from(this.childNodes)
+            .filter((n) => !(n instanceof Element && n.getAttribute('slot') === 'icon'))
+            .map((n) => n.textContent ?? '')
+            .join('')
+            .trim();
+    }
+    get accessibleRemoveLabel() {
+        const text = this.labelText;
+        return text ? `Remove ${text}` : 'Remove';
+    }
+    render() {
+        return html `
+      <span part="base">
+        <span part="icon" aria-hidden="true" ?hidden=${!this.hasIconSlot}>
+          <slot name="icon" @slotchange=${this.onIconSlotChange}></slot>
+        </span>
+        <span part="label"><slot></slot></span>
+        ${this.removable
+            ? html `<button part="remove-button" type="button" aria-label=${this.accessibleRemoveLabel} @click=${this.onRemoveClick}>
+              ${closeIcon()}
+            </button>`
+            : nothing}
+      </span>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LyraChip.prototype, "tone", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraChip.prototype, "removable", void 0);
+__decorate([
+    property()
+], LyraChip.prototype, "value", void 0);
+__decorate([
+    state()
+], LyraChip.prototype, "hasIconSlot", void 0);
+defineElement('chip', LyraChip);

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

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

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

@@ -0,0 +1,115 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    max-inline-size: 100%;
+    vertical-align: middle;
+    /* One custom-property trio swapped by the :host([tone]) rules below,
+       rather than repeating background/color/border per part per tone —
+       mirrors lyra-tool-call-chip's/lyra-attachment-chip's identical
+       -accent/-bg/-border trio so a chip's tone vocabulary reads the same
+       everywhere in the library. 'neutral' has no dedicated token pair (see
+       the class doc), so it falls back to plain surface/border/text instead
+       of inventing a sixth tint. */
+    --lyra-chip-accent: var(--lyra-color-text);
+    --lyra-chip-bg: var(--lyra-color-surface);
+    --lyra-chip-border: var(--lyra-color-border);
+  }
+
+  :host([tone='brand']) {
+    --lyra-chip-accent: var(--lyra-color-brand);
+    --lyra-chip-bg: var(--lyra-color-brand-quiet);
+    --lyra-chip-border: transparent;
+  }
+  :host([tone='success']) {
+    --lyra-chip-accent: var(--lyra-color-success);
+    --lyra-chip-bg: var(--lyra-color-success-quiet);
+    --lyra-chip-border: transparent;
+  }
+  :host([tone='warning']) {
+    --lyra-chip-accent: var(--lyra-color-warning);
+    --lyra-chip-bg: var(--lyra-color-warning-quiet);
+    --lyra-chip-border: transparent;
+  }
+  :host([tone='danger']) {
+    --lyra-chip-accent: var(--lyra-color-danger);
+    --lyra-chip-bg: var(--lyra-color-danger-quiet);
+    --lyra-chip-border: transparent;
+  }
+
+  [part='base'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    padding: 0.25rem var(--lyra-space-s);
+    border: 1px solid var(--lyra-chip-border);
+    border-radius: 999px;
+    background: var(--lyra-chip-bg);
+    color: var(--lyra-chip-accent);
+    font: inherit;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.3;
+  }
+
+  [part='icon'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+  }
+  [part='icon'] ::slotted(*) {
+    display: block;
+  }
+  /* Defeats [part='icon']'s own 'display: inline-flex' above -- the native
+     [hidden] UA rule alone would lose to it at equal specificity. Same fix
+     lyra-stat's identical [part='icon'][hidden] override already applies. */
+  [part='icon'][hidden] {
+    display: none;
+  }
+
+  [part='label'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part='remove-button'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: min(var(--lyra-icon-button-size), 1.25rem);
+    min-block-size: min(var(--lyra-icon-button-size), 1.25rem);
+    margin-inline-end: -0.15rem;
+    padding: 0;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: inherit;
+    font-size: 0.75em;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--lyra-transition-fast);
+  }
+  [part='remove-button']:hover {
+    background: color-mix(in srgb, currentColor 16%, transparent);
+  }
+  [part='remove-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='remove-button'] svg {
+    display: block;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='remove-button'] {
+      transition: none !important;
+    }
+  }
+`;

package/dist/components/citation-badge/citation-badge.d.ts

@@ -0,0 +1,113 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type CitationBadgeStatus = 'default' | 'high' | 'medium' | 'low' | 'verified' | 'unverified';
+export interface CitationActivateDetail {
+    sourceId: string;
+    index: number;
+}
+export interface CitationOpenDetail {
+    sourceId: string;
+    index: number;
+    href?: string;
+}
+/**
+ * `<lyra-citation-badge>` — an inline `[n]` citation marker with a hover/
+ * focus preview popover and confidence/verification-status coloring. Used
+ * for an agent response's inline citations, each carrying a `source-id`
+ * that matches a corresponding `<lyra-source-card>` shown elsewhere on the
+ * page (a sibling component in this same family — this component doesn't
+ * import or know anything about it, only carries the id through its
+ * events).
+ *
+ * The default slot is *not* the badge's visible content — the badge always
+ * renders `[index]` — it's reserved for optional rich preview content (e.g.
+ * a filename + short excerpt) shown in a floating popover on hover/focus,
+ * positioned with `internal/positioner.js`'s `place()` the same way
+ * `<lyra-tool-call-chip>` positions its own detail tooltip. No popover shows
+ * at all when the slot carries no content, and the popover never traps
+ * focus — it's supplementary preview content, not a modal, so Tab continues
+ * past the badge normally even while it happens to be visible from a mouse
+ * hover.
+ *
+ * Two distinct signals fire from the same badge: `lyra-citation-activate`
+ * (click, or Enter while focused — native `<button>` behavior, no listener
+ * needed for the Enter case) is the lightweight "jump to this source"
+ * signal a host wires to scrolling/highlighting the matching
+ * `<lyra-source-card>`. `lyra-citation-open` (dblclick, or Space while
+ * focused) is a distinct "full preview" signal — `href` in its detail is
+ * `undefined` when the `href` prop isn't set; the consumer decides what
+ * "open" means (a new tab, a dialog, etc). A double-click still fires two
+ * `lyra-citation-activate` events (one per constituent click — standard
+ * browser `dblclick` behavior) in addition to the one `lyra-citation-open`;
+ * a consumer that only cares about the richer signal on a double-click
+ * should ignore the paired activate events in that case.
+ *
+ * Status coloring: `verified`/`high` use the success tones (a claim that's
+ * been checked out, or the model is confident in). `medium`/`low` use
+ * warning (progressively less certain, but still a real citation).
+ * `unverified` uses danger — deliberately distinct from `low`: "hasn't been
+ * checked at all" is a different (arguably riskier) claim than "checked but
+ * uncertain". `default` renders as plain neutral text with no background
+ * tint, for citations that carry no confidence/verification signal at all.
+ *
+ * @customElement lyra-citation-badge
+ * @slot - Rich preview/tooltip content (e.g. a filename + excerpt), shown in
+ * a floating popover on hover/focus. Nothing renders (no hover affordance at
+ * all) when this slot is empty.
+ * @event lyra-citation-activate - The badge was activated (click, or Enter
+ * while focused). `detail: { sourceId, index }`.
+ * @event lyra-citation-open - The badge's "full preview" affordance was
+ * triggered (dblclick, or Space while focused).
+ * `detail: { sourceId, index, href }`.
+ * @csspart base - The clickable badge (`<button>`).
+ * @csspart bracket - Each of the two literal `[`/`]` glyphs.
+ * @csspart index - The citation number.
+ * @csspart popover - The floating preview panel (only meaningful while open).
+ */
+export declare class LyraCitationBadge extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The citation number shown, e.g. `3` renders as `[3]`. */
+    index: number;
+    /** Confidence/verification state — drives the badge's color and (unless
+     *  `label` is set) part of its accessible name. */
+    status: CitationBadgeStatus;
+    /** Id of a corresponding `<lyra-source-card>` elsewhere on the page —
+     *  echoed back verbatim in both events, never read or validated here. */
+    sourceId: string;
+    /** Optional direct link target for the citation's source. Carried into
+     *  `lyra-citation-open`'s detail as-is; this component never navigates. */
+    href: string;
+    /** Overrides the computed accessible name (`"Citation {index}[, {status}]"`). */
+    label: string;
+    private hasPreviewSlot;
+    private popoverOpen;
+    private buttonEl?;
+    private popoverEl?;
+    private readonly popoverId;
+    private cleanupPositioner?;
+    private hideTimer?;
+    private hovering;
+    private focused;
+    protected willUpdate(): void;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private get accessibleLabel();
+    private onSlotChange;
+    private showPreview;
+    private scheduleHidePreview;
+    private hidePreviewNow;
+    private onPointerEnter;
+    private onPointerLeave;
+    private onFocusIn;
+    private onFocusOut;
+    private onKeyDown;
+    private onClick;
+    private onDblClick;
+    private emitOpen;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-citation-badge': LyraCitationBadge;
+    }
+}