@aceshooting/lyra-ui 2.1.0 → 2.3.0

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

@@ -43,15 +43,32 @@ export const styles = css `
     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;
+    padding: var(--lyra-size-0-25rem) var(--lyra-space-s);
+    border: var(--lyra-border-width-thin) solid var(--lyra-chip-border);
+    border-radius: var(--lyra-radius-pill);
     background: var(--lyra-chip-bg);
     color: var(--lyra-chip-accent);
     font: inherit;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    line-height: 1.3;
+    font-size: var(--lyra-font-size-sm);
+    font-weight: var(--lyra-font-weight-medium);
+    line-height: var(--lyra-line-height-snug);
+  }
+
+  [part='base'][role='button'] {
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--lyra-transition-fast);
+  }
+  [part='base'][role='button']:hover {
+    background: color-mix(in srgb, var(--lyra-chip-accent) 8%, var(--lyra-chip-bg));
+  }
+  [part='base'][role='button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='base'][aria-pressed='true'] {
+    background: var(--lyra-chip-bg);
+    border-color: var(--lyra-chip-accent);
   }
 
   [part='icon'] {
@@ -83,15 +100,15 @@ export const styles = css `
     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;
+    min-inline-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-25rem));
+    min-block-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-25rem));
+    margin-inline-end: var(--lyra-size-neg-0-15rem);
     padding: 0;
     border: none;
-    border-radius: 999px;
+    border-radius: var(--lyra-radius-pill);
     background: transparent;
     color: inherit;
-    font-size: 0.75em;
+    font-size: var(--lyra-size-0-75em);
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     transition: background-color var(--lyra-transition-fast);
@@ -108,8 +125,10 @@ export const styles = css `
   }
 
   @media (prefers-reduced-motion: reduce) {
-    [part='remove-button'] {
+    [part='remove-button'],
+    [part='base'][role='button'] {
       transition: none !important;
     }
   }
 `;
+//# sourceMappingURL=chip.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.styles.js","sourceRoot":"","sources":["../../../src/components/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIxB,CAAC"}

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

@@ -0,0 +1,114 @@
+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;
+    }
+}
+//# sourceMappingURL=citation-badge.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"citation-badge.class.d.ts","sourceRoot":"","sources":["../../../src/components/citation-badge/citation-badge.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,GAAG,YAAY,CAAC;AAEpG,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAkCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,MAAM,CAAC,MAAM,iCAAgC;IAE7C,4DAA4D;IAChC,KAAK,SAAK;IAEtC;uDACmD;IACtB,MAAM,EAAE,mBAAmB,CAAa;IAErE;6EACyE;IACnC,QAAQ,SAAM;IAEpD;+EAC2E;IAC/D,IAAI,SAAM;IAEtB,iFAAiF;IACrE,KAAK,SAAM;IAMd,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,WAAW,CAAS;IAEb,OAAO,CAAC,QAAQ,CAAC,CAAoB;IAClC,OAAO,CAAC,SAAS,CAAC,CAAc;IAE3D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAC9D,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,SAAS,CAAC,CAAgC;IAKlD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,OAAO,CAAS;IAExB,SAAS,CAAC,UAAU,IAAI,IAAI,CAI3B;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAQ/C;IAED,oBAAoB,IAAI,IAAI,CAI3B;IAED,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,CAAC,YAAY,CAMlB;IASF,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,cAAc,CAGpB;IACF,OAAO,CAAC,cAAc,CAGpB;IACF,OAAO,CAAC,SAAS,CAGf;IAMF,OAAO,CAAC,UAAU,CAIhB;IAOF,OAAO,CAAC,SAAS,CAmBf;IAEF,OAAO,CAAC,OAAO,CAEb;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,QAAQ;IAQhB,MAAM,IAAI,cAAc,CA0BvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/citation-badge/citation-badge.class.js

@@ -0,0 +1,317 @@
+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, query } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { place } from '../../internal/positioner.js';
+import { nextId } from '../../internal/a11y.js';
+import { styles } from './citation-badge.styles.js';
+/** Visible (not just color-coded) status word, folded into the computed
+ *  accessible name — `''` for `default` omits the status clause entirely
+ *  rather than announcing a meaningless "Citation 3, Default". */
+const STATUS_LABEL = {
+    default: '',
+    high: 'High confidence',
+    medium: 'Medium confidence',
+    low: 'Low confidence',
+    verified: 'Verified',
+    unverified: 'Unverified',
+};
+// A short grace period before the popover actually hides on pointer-leave/
+// focus-out, so moving the mouse from the badge into the popover itself (to
+// select/copy its text) doesn't make it vanish mid-move. Cancelled outright
+// if hover or focus returns before it fires. No delay on Escape or explicit
+// keyboard blur — those are intentional dismissals, not transient pointer
+// travel, so they close immediately.
+const HIDE_DELAY_MS = 200;
+// The default slot's preview content is often plain text (see the Statuses
+// story: "No source has confirmed this yet.") with no wrapping element at
+// all, so an Element-only check (e.g. Array.from(children)/assignedElements)
+// never counts it. Mirrors result-field.ts's hasRealContent: a node counts as
+// real preview content if it's an element not assigned to some other named
+// slot, or non-whitespace text.
+function isRealPreviewNode(n) {
+    return n.nodeType === Node.ELEMENT_NODE
+        ? !n.hasAttribute('slot')
+        : (n.textContent ?? '').trim().length > 0;
+}
+/**
+ * `<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 class LyraCitationBadge extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The citation number shown, e.g. `3` renders as `[3]`. */
+        this.index = 1;
+        /** Confidence/verification state — drives the badge's color and (unless
+         *  `label` is set) part of its accessible name. */
+        this.status = 'default';
+        /** Id of a corresponding `<lyra-source-card>` elsewhere on the page —
+         *  echoed back verbatim in both events, never read or validated here. */
+        this.sourceId = '';
+        /** Optional direct link target for the citation's source. Carried into
+         *  `lyra-citation-open`'s detail as-is; this component never navigates. */
+        this.href = '';
+        /** Overrides the computed accessible name (`"Citation {index}[, {status}]"`). */
+        this.label = '';
+        // A `[part]` always contains a literal `<slot>` child regardless of
+        // assigned content, so `:empty` never matches — real emptiness is tracked
+        // in JS instead, same fix lyra-tool-call-chip's hasDetailSlot/lyra-stat's
+        // hasIcon etc. already establish.
+        this.hasPreviewSlot = false;
+        this.popoverOpen = false;
+        this.popoverId = nextId('citation-badge-popover');
+        // Hover and focus are tracked as independent "keep it open" reasons —
+        // mirrors lyra-toast-item's identical hovering/focused pair — so releasing
+        // one (e.g. the pointer leaving while the badge still has keyboard focus)
+        // doesn't schedule a hide the other modality is still holding open.
+        this.hovering = false;
+        this.focused = false;
+        this.onSlotChange = (e) => {
+            this.hasPreviewSlot = e.target.assignedNodes({ flatten: true }).some(isRealPreviewNode);
+            // The slot can be emptied out from under an already-open popover (e.g. a
+            // consumer clearing preview content asynchronously) — nothing left to
+            // show, so don't leave an empty panel floating open.
+            if (!this.hasPreviewSlot)
+                this.hidePreviewNow();
+        };
+        // Attached to the wrapper (not the button alone) so the popover's own
+        // slotted content counts too — pointerenter/pointerleave/focusin/focusout
+        // fire relative to whichever element they're bound to, not per descendant,
+        // so moving the pointer or focus between the button and the popover panel
+        // within this same wrapper never toggles hovering/focused off and on.
+        this.onPointerEnter = () => {
+            this.hovering = true;
+            this.showPreview();
+        };
+        this.onPointerLeave = () => {
+            this.hovering = false;
+            this.scheduleHidePreview();
+        };
+        this.onFocusIn = () => {
+            this.focused = true;
+            this.showPreview();
+        };
+        // No grace period here, unlike onPointerLeave -- a blur (Tab/Shift+Tab
+        // away, or focus programmatically moved elsewhere) is a deliberate
+        // navigation, not the transient pointer travel the delay exists to survive,
+        // so it closes at once. Still deferred to hover if the pointer happens to
+        // be resting on the badge/popover at the same time.
+        this.onFocusOut = () => {
+            this.focused = false;
+            if (this.hovering)
+                return;
+            this.hidePreviewNow();
+        };
+        // keydown bubbles up from whatever actually holds focus (the button, or a
+        // focusable element inside slotted preview content) — attaching this at
+        // the wrapper, rather than the button alone, is what makes Escape work
+        // "while the popover has focus-within" per the component's contract,
+        // without needing to track focus targets explicitly here.
+        this.onKeyDown = (e) => {
+            if (e.key === 'Escape' && this.popoverOpen) {
+                // Swallow it here rather than letting it bubble to e.g. a containing
+                // lyra-dialog's own Escape-to-close handler — dismissing this
+                // lightweight preview shouldn't also close a surrounding modal.
+                e.stopPropagation();
+                this.hidePreviewNow();
+                return;
+            }
+            // Space normally activates a <button> the same as Enter, but this
+            // component gives the two keys distinct meanings (Enter = activate,
+            // Space = open) — so Space's native click-on-keyup must be pre-empted
+            // here (preventDefault on keydown suppresses it) rather than left to
+            // fire alongside this. Enter deliberately gets no such handling: its
+            // native immediate click already reaches onClick below.
+            if (e.key === ' ' && !e.repeat && e.target === this.buttonEl) {
+                e.preventDefault();
+                this.emitOpen();
+            }
+        };
+        this.onClick = () => {
+            this.emit('lyra-citation-activate', { sourceId: this.sourceId, index: this.index });
+        };
+        this.onDblClick = () => {
+            this.emitOpen();
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasPreviewSlot = Array.from(this.childNodes).some(isRealPreviewNode);
+        }
+    }
+    updated(changed) {
+        if (changed.has('popoverOpen')) {
+            this.cleanupPositioner?.();
+            this.cleanupPositioner = undefined;
+            if (this.popoverOpen && this.buttonEl && this.popoverEl) {
+                this.cleanupPositioner = place(this.buttonEl, this.popoverEl, { placement: 'top-start' });
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupPositioner?.();
+        clearTimeout(this.hideTimer);
+    }
+    get accessibleLabel() {
+        if (this.label)
+            return this.label;
+        const statusText = STATUS_LABEL[this.status];
+        return statusText ? `Citation ${this.index}, ${statusText}` : `Citation ${this.index}`;
+    }
+    // Named showPreview/hidePreviewNow (not show/hidePopover) to avoid
+    // colliding with the standard HTML Popover API's own
+    // HTMLElement.prototype.showPopover()/hidePopover() -- this component
+    // renders its own floating panel via internal/positioner.js rather than
+    // the native `popover` attribute, but TS's DOM lib still declares those
+    // method names on every HTMLElement subclass, so reusing them here would
+    // be a same-name-different-signature override error.
+    showPreview() {
+        if (!this.hasPreviewSlot)
+            return;
+        // Cancel any pending hide unconditionally -- including when the popover
+        // is already open -- so hover/focus returning within the grace period
+        // (pointerenter -> pointerleave -> pointerenter before HIDE_DELAY_MS)
+        // actually cancels the scheduled hide instead of leaving it armed to
+        // fire later regardless of the now-restored hover/focus state.
+        clearTimeout(this.hideTimer);
+        this.hideTimer = undefined;
+        if (this.popoverOpen)
+            return;
+        this.popoverOpen = true;
+    }
+    scheduleHidePreview() {
+        if (!this.popoverOpen || this.hovering || this.focused)
+            return;
+        clearTimeout(this.hideTimer);
+        this.hideTimer = setTimeout(() => {
+            this.hideTimer = undefined;
+            this.popoverOpen = false;
+        }, HIDE_DELAY_MS);
+    }
+    hidePreviewNow() {
+        clearTimeout(this.hideTimer);
+        this.hideTimer = undefined;
+        if (this.popoverOpen)
+            this.popoverOpen = false;
+    }
+    emitOpen() {
+        this.emit('lyra-citation-open', {
+            sourceId: this.sourceId,
+            index: this.index,
+            href: this.href || undefined,
+        });
+    }
+    render() {
+        return html `
+      <span
+        class="wrapper"
+        @pointerenter=${this.onPointerEnter}
+        @pointerleave=${this.onPointerLeave}
+        @focusin=${this.onFocusIn}
+        @focusout=${this.onFocusOut}
+        @keydown=${this.onKeyDown}
+      >
+        <button
+          part="base"
+          type="button"
+          aria-label=${this.getAttribute('aria-label') || this.accessibleLabel}
+          aria-describedby=${this.hasPreviewSlot && this.popoverOpen ? this.popoverId : nothing}
+          @click=${this.onClick}
+          @dblclick=${this.onDblClick}
+        >
+          <span part="bracket" aria-hidden="true">[</span><span part="index">${this.index}</span
+          ><span part="bracket" aria-hidden="true">]</span>
+        </button>
+        <div part="popover" id=${this.popoverId} role="tooltip" ?hidden=${!this.popoverOpen}>
+          <slot @slotchange=${this.onSlotChange}></slot>
+        </div>
+      </span>
+    `;
+    }
+}
+__decorate([
+    property({ type: Number })
+], LyraCitationBadge.prototype, "index", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraCitationBadge.prototype, "status", void 0);
+__decorate([
+    property({ attribute: 'source-id' })
+], LyraCitationBadge.prototype, "sourceId", void 0);
+__decorate([
+    property()
+], LyraCitationBadge.prototype, "href", void 0);
+__decorate([
+    property()
+], LyraCitationBadge.prototype, "label", void 0);
+__decorate([
+    state()
+], LyraCitationBadge.prototype, "hasPreviewSlot", void 0);
+__decorate([
+    state()
+], LyraCitationBadge.prototype, "popoverOpen", void 0);
+__decorate([
+    query('[part="base"]')
+], LyraCitationBadge.prototype, "buttonEl", void 0);
+__decorate([
+    query('[part="popover"]')
+], LyraCitationBadge.prototype, "popoverEl", void 0);
+//# sourceMappingURL=citation-badge.class.js.map

package/dist/components/citation-badge/citation-badge.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"citation-badge.class.js","sourceRoot":"","sources":["../../../src/components/citation-badge/citation-badge.class.ts"],"names":[],"mappings":"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"}

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

@@ -1,113 +1,2 @@
-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;
-    }
-}
+export * from './citation-badge.class.js';
+//# sourceMappingURL=citation-badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"citation-badge.d.ts","sourceRoot":"","sources":["../../../src/components/citation-badge/citation-badge.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}