# `lr-usage-badge` - **Import** `import '@aceshooting/lyra-ui/components/lr-usage-badge.js';` (stable tag alias; registers the tag) - **Class** `LyraUsageBadge`, also available unregistered from `@aceshooting/lyra-ui/components/conversation/usage-badge/usage-badge.class.js` - **Family** `components/conversation/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 7 parts, 5 custom properties — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-usage-badge` Compact, static resource strip for one message or run — tokens in/out, cost, latency — with a hover/focus tooltip breakdown. Purely formatting: computes no counts, rates, or prices; every segment is independently optional, and with nothing set, nothing renders at all (not even a focusable shell). The tooltip reuses `lr-tool-call-chip`'s hover/focus/Escape/`aria-describedby` contract wholesale. Not `lr-context-meter` (occupancy of a fixed capacity); not `lr-generation-metrics` (live, with a Stop button) — this is static after the fact. Removing `cost-text` or `summary` safely omits that content; explicit empty values remain empty and later values restore it. An open tooltip participates in shared Escape ordering even while only hovered, and dismissal preserves focus elsewhere. **Properties:** `tokensIn?: number` (attribute `tokens-in`) — input tokens, normalized to a non-negative integer, locale-formatted; segment omitted while unset/non-finite. `tokensOut?: number` (attribute `tokens-out`) — same rules. `costText: string = ''` (attribute `cost-text`) — pre-formatted cost (e.g. `"$0.012"`), rendered verbatim. `latencyMs?: number` (attribute `latency-ms`) — formatted with the shared duration algorithm (`820 -> "820ms"`, `1500 -> "1.5s"`), or `formatLatency` when set. `formatLatency?: (ms: number) => string` — overrides the built-in duration algorithm (which has no minutes/hours tier) in both the visible strip and the tooltip row; mirrors `lr-activity-feed`'s `formatTimestamp` convention. `abbreviate: boolean = false` (reflected) — token counts render via `Intl.NumberFormat` `notation: 'compact'` (`12345 -> "12K"`); the tooltip always shows full grouped figures. This badge has no density mode: the old `compact` spelling of this property was removed in 9.0.0 (it collided with `compact`'s density meaning everywhere else in the library) — rename `compact` to `abbreviate`; a stale `compact` attribute is inert. `summary: string = ''` supplies visible fallback text when no built-in segment is present. **Slots:** `summary` — visible summary when no built-in segment is set (takes precedence over the property); `details` — extra rows appended below the built-in tooltip breakdown (e.g. cache-read tokens). Interactive descendants are inert because this is a tooltip, while their accessible text is mirrored into the trigger description. Details without a visible summary remain non-focusable. **CSS parts:** `base` (a focusable non-button `role="group"` only when content is both visible and describable), `summary`, `tokens-in`, `tokens-out`, `cost`, `latency`, `tooltip`. The anchored breakdown tooltip is a floating surface and paints from the **shared overlay-surface family** (16.0.0): `--lr-overlay-surface` (default `var(--lr-color-surface-overlay)`), `--lr-overlay-border` (default `var(--lr-color-border)`) and `--lr-overlay-shadow-anchored` (default `var(--lr-shadow-m)`). None is declared on `:host`, so one declaration on `:root` — or on any ancestor, to scope it — retints this surface together with every other floating surface in the library. `--lr-overlay-radius` (default `var(--lr-radius)`) is the matching corner radius. `--lr-positioning-strategy` (16.0.0) — the breakdown tooltip reads this same cascading `absolute`/`fixed` override documented on `` when it is (re)positioned, falling back to its own `fixed` default when nothing is set. There is no per-instance `positioning-strategy` property on ``; set the custom property on `:root`, a theme, or one clipping ancestor to change every unset usage badge beneath it. ```html ```