@aceshooting/lyra-ui 9.1.1 → 10.0.1

package/dist/components/agent-tools/tool-approval-dialog/tool-approval-dialog.styles.js

@@ -1,16 +1,6 @@
 import{css}from"lit";const styles=css`
   :host {
-    /* Backdrop scrim color -- component-specific so a host can retheme it
-       without a raw literal leaking into the public API (no shared
-       --lr-*-overlay token exists in the design system to resolve through,
-       same rationale as lr-dialog's --lr-dialog-overlay-color and
-       lr-tool-select-dialog's --lr-tool-select-dialog-overlay-color). */
     --_lr-tool-approval-dialog-overlay-color: var(--lr-color-overlay);
-    /* Contained here (rather than a bare font-family literal on the
-       textarea) so a host page can retheme it -- same rationale as
-       lr-json-viewer's --lr-json-viewer-font; raw args are code, not
-       prose, so the editor gets the same monospace treatment as that
-       viewer's own tree rendering. */
     --_lr-tool-approval-dialog-mono-font: var(--lr-font-mono);
     display: none;
     position: fixed;
@@ -43,13 +33,9 @@ import{css}from"lit";const styles=css`
     flex-direction: column;
     inline-size: min(var(--lr-size-32rem), 100%);
     max-block-size: min(var(--lr-size-36rem), 100%);
-    /* Modal-panel surface, not the page surface -- in dark mode the two resolve to the same
-       near-black and the dialog reads as a scrim with floating text instead of a panel. */
     background: var(--lr-color-surface-overlay);
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: var(--lr-radius);
-    /* Modal layer, top step: a centered, scrimmed dialog floating free on all four edges --
-       the same role as lr-dialog, so the same elevation. */
     box-shadow: var(--lr-shadow-xl);
     overflow: hidden;
   }
@@ -81,11 +67,6 @@ import{css}from"lit";const styles=css`
     overflow: auto;
   }
   [part="args-view"] {
-    /* lr-json-viewer grows with its content by default (its own
-       max-height is 'none'); this component's [part='body'] is what caps
-       and scrolls it instead, so it stays consistent with the plain
-       [part='args-editor'] textarea below, which has no scroll cap of its
-       own either. */
     flex: 1 1 auto;
     min-block-size: 0;
   }
@@ -110,16 +91,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Gives mouse users the same 'this is interactive' cue the :focus-visible ring above already
-     gives keyboard users -- mirrors lr-textarea's [part='textarea']:hover pattern, gated via
-     :host(:not([pending])) rather than :not(:disabled) since this raw <textarea> is not a
-     form-associated control and carries no disabled state of its own; a decision in flight
-     (pending reflected) freezes it to readonly instead, so hover shouldn't relight it. */
-  /* no-pressed-state: pressing inside a text surface places a caret, it does not actuate anything.
-     The mousedown that would match :active is the same gesture that focuses the field, so a pressed
-     treatment would render for one frame between the hover border and the focus ring and read as a
-     flicker; focus is this control's real "you are acting on me" state (mirrors lr-textarea's
-     identical reasoning for its own [part='textarea']). */
   :host(:not([pending])) [part="args-editor"]:not([aria-invalid="true"]):hover {
     border-color: var(
       --lr-tool-approval-dialog-hover-border-color,
@@ -151,17 +122,9 @@ import{css}from"lit";const styles=css`
     border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border);
   }
   [part="footer"] ::slotted(*) {
-    /* Any consumer-supplied footer content sits ahead of the built-in
-       buttons and soaks up the row's remaining space, so it reads as
-       start-aligned while Deny/Edit/Approve stay pinned to the end (the
-       row itself is justify-content: flex-end for the empty-slot case). */
     margin-inline-end: auto;
   }
 
-  /* deny-button/approve-button are <lr-button> hosts (see tool-approval-dialog.class.ts's
-     render()); their own padding/border/background/color/hover/focus-visible/disabled chrome now
-     lives entirely inside lr-button's own styles.ts. edit-button alone stays a raw <button> and
-     keeps its own rules below. */
   [part="edit-button"] {
     font: inherit;
     font-size: var(--lr-font-size-md-sm);
@@ -175,10 +138,6 @@ import{css}from"lit";const styles=css`
   :where([part="edit-button"]):not(:disabled):hover {
     background: var(--lr-color-brand-quiet);
   }
-  /* Pressed is the hovered tint pushed a further --lr-color-mix-active toward
-     --lr-color-mix-partner (which follows the text colour), so it reads as a distinctly deeper step
-     than hover in both light and dark themes rather than repeating it. The lr-button-hosted
-     Deny/Approve siblings get the equivalent step from lr-button's own styles. */
   :where([part="edit-button"]):not(:disabled):active {
     background: color-mix(
       in oklab,

package/dist/components/agent-tools/tool-call-chip/tool-call-chip.styles.js

@@ -2,10 +2,6 @@ import{css}from"lit";const styles=css`
   :host {
     display: inline-flex;
     max-inline-size: 100%;
-    /* Per-status accent -- one custom property swapped by the :host([status])
-       rules below rather than repeating background/color per part per status.
-       Defaults to the 'pending' tone so an unset/unknown status still reads
-       as neutral instead of unstyled. */
     --_lr-tool-call-chip-accent: var(--lr-color-text-quiet);
     --_lr-tool-call-chip-bg: var(--lr-color-surface);
     --_lr-tool-call-chip-border: var(--lr-color-border);
@@ -27,10 +23,6 @@ import{css}from"lit";const styles=css`
     --_lr-tool-call-chip-bg: var(--lr-color-danger-quiet);
     --_lr-tool-call-chip-border: transparent;
   }
-  /* 'denied' reads as a policy rejection, not a runtime failure -- the
-     warning (not danger) tint keeps it visually distinct from 'error',
-     matching lr-tool-result-dialog's identical status vocabulary/tone so
-     the two components agree on what "denied" looks like. */
   :host([status="denied"]) {
     --_lr-tool-call-chip-accent: var(--lr-color-warning);
     --_lr-tool-call-chip-bg: var(--lr-color-warning-quiet);
@@ -62,10 +54,6 @@ import{css}from"lit";const styles=css`
   [part="base"]:hover {
     border-color: var(--lr-color-brand);
   }
-  /* The hover moves the border only, which leaves the pressed step nothing to deepen -- so pressed
-     tints the chip's own fill toward --lr-color-mix-partner (which follows the text colour). The
-     fill is already a custom property, so this one declaration covers all five status tints without
-     restating any of them, and darkens in a light theme while lightening in a dark one. */
   [part="base"]:active {
     background: color-mix(
       in oklab,
@@ -88,16 +76,10 @@ import{css}from"lit";const styles=css`
   [part="icon"] svg {
     display: block;
   }
-  /* A three-quarter arc (not a full ring) is what actually reads as
-     spinning once rotated -- a full circle looks identical at every
-     rotation frame. */
   :host([status="running"]) [part="icon"] svg {
     animation: lr-tool-call-chip-spin
       var(--lr-tool-call-chip-spin, var(--_lr-tool-call-chip-spin)) infinite;
   }
-  /* Subtler than the spin -- a slow opacity breathe, so a list of several
-     still-queued chips doesn't compete visually with any 'running' ones
-     next to it. */
   :host([status="pending"]) [part="icon"] svg {
     animation: lr-tool-call-chip-pulse var(--lr-transition-ambient) infinite;
   }
@@ -116,11 +98,6 @@ import{css}from"lit";const styles=css`
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    /* Full-strength text, not --lr-color-text-quiet -- this sits on top of
-       the per-status *-quiet tint backgrounds above (e.g. success-quiet),
-       and text-quiet's gray fails WCAG AA contrast against several of those
-       tints even though it comfortably passes against the plain surface
-       background used by the resting/denied states. */
     color: var(--lr-color-text);
     font-size: var(--lr-size-0-6875rem);
     font-weight: var(--lr-font-weight-semibold);
@@ -145,7 +122,6 @@ import{css}from"lit";const styles=css`
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    /* See [part='category']'s comment above -- same contrast rationale. */
     color: var(--lr-color-text);
   }
   [part="summary"]::before {
@@ -176,17 +152,11 @@ import{css}from"lit";const styles=css`
     text-align: end;
   }
   [part="duration"] {
-    /* See [part='category']'s comment above -- same contrast rationale. */
     color: var(--lr-color-text);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
 
-  /* Positioned by internal/positioner.js's place() -- see combobox's
-     [part='listbox'] for the identical fixed/z-index/max-size shape. Unlike
-     that popup this one has no open/close transition: a tooltip that
-     tracks the pointer/focus target benefits from appearing instantly, not
-     chasing a fade. */
   [part="tooltip"] {
     position: fixed;
     z-index: var(--lr-layer-dropdown);

package/dist/components/agent-tools/tool-param-form/tool-param-form.class.js

@@ -4,7 +4,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         .hint=${prop.description??""}
         .errorText=${errorMessage}
         .required=${!1}
-        aria-required=${required?"true":nothing}
+        aria-required=${required?"true":"false"}
         .value=${typeof effective=="string"?effective:""}
         ?disabled=${this.effectiveDisabled}
         @input=${this.stopNestedControlEvent}
@@ -22,8 +22,8 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         type="text"
         id=${fieldId}
         aria-describedby=${describedBy||nothing}
-        aria-required=${required?"true":nothing}
-        aria-invalid=${errorMessage?"true":nothing}
+        aria-required=${required?"true":"false"}
+        aria-invalid=${errorMessage?"true":"false"}
         autocomplete=${prop.autocomplete||nothing}
         .spellcheck=${prop.spellcheck??!0}
         autocapitalize=${prop.autocapitalize||nothing}
@@ -42,8 +42,8 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         id=${fieldId}
         step=${prop.type==="integer"?"1":"any"}
         aria-describedby=${describedBy||nothing}
-        aria-required=${required?"true":nothing}
-        aria-invalid=${errorMessage?"true":nothing}
+        aria-required=${required?"true":"false"}
+        aria-invalid=${errorMessage?"true":"false"}
         .value=${numValue}
         ?disabled=${this.effectiveDisabled}
         @input=${e=>this.onNumberInput(key,e)}
@@ -55,7 +55,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         .hint=${prop.description??""}
         .errorText=${errorMessage}
         .required=${!1}
-        aria-required=${required?"true":nothing}
+        aria-required=${required?"true":"false"}
         .value=${selected}
         ?disabled=${this.effectiveDisabled}
         @input=${this.stopNestedControlEvent}

package/dist/components/agent-tools/tool-param-form/tool-param-form.styles.js

@@ -30,11 +30,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     font-size: var(--lr-font-size-md-sm);
     font-weight: var(--lr-font-weight-semibold);
   }
-  /* The shared required marker (internal/form-control.styles.ts). This is the
-     one component where "required" is per FIELD rather than per host, which is
-     why that sheet carries a second selector keyed on
-     [part="field"][data-required] alongside the usual :host([required]) one.
-     Boolean and enum labels are owned by their nested <lr-select> instead. */
   ${formControlRequiredMarker}
 
   [part='field'] > lr-select,

package/dist/components/agent-tools/tool-result-dialog/tool-result-dialog.styles.js

@@ -1,14 +1,6 @@
 import{css}from"lit";const styles=css`
   :host {
-    /* Backdrop scrim color -- component-specific so a host can retheme it
-       without a raw literal leaking into the public API (no shared
-       --lr-*-overlay token exists in the design system to resolve through,
-       same rationale as lr-dialog's --lr-dialog-overlay-color and
-       lr-widget's --lr-widget-overlay-color). */
     --_lr-tool-result-dialog-overlay-color: var(--lr-color-overlay);
-    /* Inset applied to the panel while [maximized] -- overridable the same
-       way lr-widget's --lr-widget-fullscreen-inset is, e.g. to leave a
-       persistent app rail visible. */
     --_lr-tool-result-dialog-maximized-inset: max(
         var(--lr-space-l),
         var(--lr-safe-area-top)
@@ -60,13 +52,9 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     max-block-size: 100%;
     box-sizing: border-box;
-    /* Modal-panel surface, not the page surface -- in dark mode the two resolve to the same
-       near-black and the dialog reads as a scrim with floating text instead of a panel. */
     background: var(--lr-color-surface-overlay);
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: var(--lr-radius);
-    /* Modal layer, top step: a centered, scrimmed dialog floating free on all four edges --
-       the same role as lr-dialog, so the same elevation. */
     box-shadow: var(--lr-shadow-xl);
     overflow: hidden;
     transition: inline-size var(--lr-transition-base),
@@ -142,8 +130,6 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     overflow-wrap: anywhere;
   }
-  /* Pending is the resting state before a tool call has done anything worth
-     calling out; its foreground and background remain independently themeable. */
   :host([status="running"]) [part="status"] {
     color: var(
       --lr-tool-result-dialog-running-color,
@@ -174,9 +160,6 @@ import{css}from"lit";const styles=css`
       var(--_lr-tool-result-dialog-error-bg)
     );
   }
-  /* 'denied' is a policy rejection, not a runtime failure -- the warning
-     (not danger) tinted-background reads that distinction without relying on
-     the status text alone. */
   :host([status="denied"]) [part="status"] {
     color: var(
       --lr-tool-result-dialog-denied-color,
@@ -224,9 +207,6 @@ import{css}from"lit";const styles=css`
     background: var(--lr-color-brand-quiet);
     color: var(--lr-color-brand);
   }
-  /* Pressed is the hovered tint pushed a further --lr-color-mix-active toward
-     --lr-color-mix-partner (which follows the text colour), so it reads as a distinctly deeper step
-     than hover in both light and dark themes rather than repeating it. */
   [part="maximize-button"]:active,
   [part="close-button"]:active {
     background: color-mix(

package/dist/components/agent-tools/tool-result-view/tool-result-view.styles.js

@@ -1,10 +1,6 @@
 import{css}from"lit";const styles=css`
   :host {
     display: block;
-    /* Chains through the shared monospace token (like lr-json-viewer's
-       --lr-json-viewer-font and lr-tool-approval-dialog's mono font) so a
-       consumer retheming --lr-theme-font-family-mono also repaints the plain-text
-       fallback view, instead of it being stuck on the hardcoded system stack. */
     --_lr-tool-result-view-font: var(--lr-font-mono);
   }
   [part="base"] {

package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.styles.js

@@ -1,10 +1,5 @@
 import{css}from"lit";const styles=css`
   :host {
-    /* Backdrop scrim color -- component-specific so a host can retheme it
-       without a raw literal leaking into the public API (no shared
-       --lr-*-overlay token exists in the design system to resolve through,
-       same rationale as lr-dialog's --lr-dialog-overlay-color and
-       lr-tool-result-dialog's --lr-tool-result-dialog-overlay-color). */
     --_lr-tool-select-dialog-overlay-color: var(--lr-color-overlay);
     display: none;
     position: fixed;
@@ -39,13 +34,9 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     max-inline-size: 100%;
     block-size: min(var(--lr-size-38rem), 100%);
-    /* Modal-panel surface, not the page surface -- in dark mode the two resolve to the same
-       near-black and the dialog reads as a scrim with floating text instead of a panel. */
     background: var(--lr-color-surface-overlay);
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: var(--lr-radius);
-    /* Modal layer, top step: a centered, scrimmed dialog floating free on all four edges --
-       the same role as lr-dialog, so the same elevation. */
     box-shadow: var(--lr-shadow-xl);
     overflow: hidden;
   }
@@ -89,9 +80,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* no-pressed-state: a search field is a caret target, not a push target -- pointer-down places an
-     insertion point and hands the affordance to :focus-visible, so a pressed tint would flash for
-     one frame and then be contradicted by the focus ring. */
   :where([part="search-input"]):hover {
     border-color: var(--lr-color-brand);
   }
@@ -113,12 +101,6 @@ import{css}from"lit";const styles=css`
   }
   [part="defaults-hint"] {
     margin: 0;
-    /* Lines the hint up under the switch's label text, not its track --
-       lr-switch's own [part="base"] uses a fixed 2.25rem track
-       inline-size plus a --lr-space-s gap before its label (both defined
-       in switch.styles.ts, not exposed as tokens), so this indent is
-       coupled to that fixed geometry rather than derived from an unrelated
-       component's token. */
     padding-inline-start: calc(var(--lr-size-2-25rem) + var(--lr-space-s));
     font-size: var(--lr-font-size-xs);
     color: var(--lr-color-text-quiet);
@@ -136,7 +118,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: calc(-1 * var(--lr-focus-ring-width));
   }
-  /* no-pressed-state: the focusable body is a scroll viewport, not an activation target. */
   :where([part="body"]):hover {
     outline: var(--lr-border-width-thin) solid var(--lr-color-border);
     outline-offset: calc(-1 * var(--lr-border-width-thin));
@@ -284,8 +265,6 @@ import{css}from"lit";const styles=css`
     color: var(--lr-color-text-quiet);
   }
   [part="tool-disabled-reason"] {
-    /* Slotted into lr-checkbox's owned hint surface alongside tool-description, so the stable
-       checkbox-hint bridge describes the control without lengthening its accessible name. */
     display: block;
     min-inline-size: 0;
     max-inline-size: 100%;

package/dist/components/agent-tools/trace-tree/trace-tree.styles.js

@@ -71,39 +71,23 @@ import{css}from"lit";const styles=css`
   [part='row'][data-active] {
     background: var(--lr-trace-tree-row-active-bg, var(--lr-color-brand-quiet));
   }
-  /* The row itself is the click target (it selects a span; the nested [part='toggle'] only expands
-     it), so it earns a pressed state. Mixing the hovered tint a further --lr-color-mix-active toward
-     --lr-color-mix-partner keeps it a distinctly deeper step than hover in both themes. It must stay
-     after the [data-active] rule: the two selectors are both (0,2,0), so source order alone decides
-     whether pressing the already-selected row shows any feedback at all. */
+  [part='row']:where([data-active]):hover {
+    background: color-mix(
+      in oklab,
+      var(--lr-trace-tree-row-active-bg, var(--lr-color-brand-quiet)),
+      var(--lr-color-mix-partner) var(--lr-color-mix-hover)
+    );
+  }
   [part='row']:active {
     background: color-mix(in oklab, var(--lr-color-surface-raised), var(--lr-color-mix-partner) var(--lr-color-mix-active));
   }
 
-  /* text-quiet's contrast ratio against brand-quiet lands at ~4.25:1 -- just under the WCAG AA
-     4.5:1 floor for normal-size text -- even though it comfortably passes against the plain
-     (non-active) row background used the rest of the time. Darkening the active tint instead would
-     make it worse, since every failing foreground here is dark text; the fix is to raise the
-     foreground to full strength once the row is active, as lr-conversation-item does for the same
-     bug. --lr-color-text flips with the color scheme, so this raises contrast in both.
-     [data-status='pending'] is included because its color *is* --lr-color-text-quiet: same failure,
-     same fix. The other statuses keep their semantic hue -- see the mix below. */
   [part='row'][data-active]
     :is([part='detail'], [part='duration'], [part='tokens-in'], [part='tokens-out'], [part='cost']),
   [part='row'][data-active] [part='status-text'][data-status='pending'] {
     color: var(--lr-trace-tree-row-active-color, var(--lr-color-text));
   }
 
-  /* The semantic status labels keep their hue on the active row -- an error row that stops being
-     red once selected is an information-design regression, and the hue is the fastest scan signal
-     in a trace list -- but get pulled 25% toward the text color so they clear the same AA floor
-     (success 4.46 -> 6.18, denied/warning 4.28 -> 5.96 against the default tint). Applied to every
-     tone rather than only the two that fail at the shipped defaults: a per-status carve-out is
-     theme-fragile, since a consumer retheming one --lr-color-* moves that ratio and would silently
-     re-break. The mix is theme-symmetric by construction -- --lr-color-text flips with the scheme,
-     so the same declaration darkens in light mode and lightens in dark mode.
-     Scoped to [part='status-text'] rather than redefining the tokens inside the active row, which
-     would silently re-point a consumer's own token override and drag [part='bar'] along with it. */
   [part='row'][data-active] [part='status-text'][data-status='success'] {
     color: color-mix(
       in srgb,
@@ -134,9 +118,6 @@ import{css}from"lit";const styles=css`
   }
 
   [part='toggle'] {
-    /* Keep the chevron glyph compact while giving the interactive box the shared minimum
-       tappable size -- same "small glyph, padded hit box" pattern as lr-code-block's/
-       lr-json-viewer's own [part='toggle']. */
     flex: 0 0 auto;
     inline-size: var(--lr-size-1-25rem);
     block-size: var(--lr-size-1-25rem);
@@ -254,15 +235,10 @@ import{css}from"lit";const styles=css`
     background-size: 200% 100%;
     animation: lr-trace-tree-stripe var(--lr-transition-ambient) infinite;
   }
-  /* background-position animates in physical coordinates, so the sweep needs
-     an explicit mirrored keyframe track to travel inline-start -> inline-end
-     in RTL as well. */
   :host(:dir(rtl)) [part='bar'][data-status='running'] {
     animation-name: lr-trace-tree-stripe-rtl;
   }
   @media (prefers-reduced-motion: reduce) {
-    /* the RTL selector outranks the bare one, so it must be silenced here
-       explicitly or its animation-name would win over 'animation: none' */
     [part='bar'][data-status='running'],
     :host(:dir(rtl)) [part='bar'][data-status='running'] {
       animation: none;

package/dist/components/charts/chart/box-plot.styles.js

@@ -8,14 +8,6 @@ import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-co
     block-size: auto;
     container-type: inline-size;
     contain-intrinsic-inline-size: var(--lr-size-20rem);
-    /* Same theme tokens as chart.styles.ts's :host — Chart.js renders to
-       canvas, not the DOM, so it can't consume CSS var() directly;
-       box-plot.ts's themeColors() resolves these once per draw() via
-       getComputedStyle, mirroring chart.ts. Each is its own token (rather
-       than reusing the semantic ones directly) so a host can retheme just
-       the chart's grid/ticks/legend/tooltip without affecting unrelated
-       text/border/surface colors elsewhere in the component, while still
-       defaulting to those semantic tokens. */
     --_lr-chart-grid-color: var(--lr-color-border);
     --_lr-chart-tick-color: var(--lr-color-text-quiet);
     --_lr-chart-legend-color: var(--lr-color-text);
@@ -80,9 +72,6 @@ import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-co
   [part~='legend-item'] {
     display: inline-flex;
     align-items: center;
-    /* Both axes, matching <lr-chart>'s legend item: a short series name leaves the swatch+label
-       pair narrower than the min-inline-size hit-area floor below, and the default
-       justify-content (normal => flex-start) dumped that slack on the trailing side. */
     justify-content: center;
     min-inline-size: var(--lr-icon-button-size);
     min-block-size: var(--lr-icon-button-size);
@@ -101,8 +90,6 @@ import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-co
   [part~='legend-item']:where(:hover) {
     background: var(--lr-chart-legend-item-hover-bg, var(--lr-color-brand-quiet));
   }
-  /* Pressed, matching <lr-chart>'s legend item: the same quiet brand tint pushed further toward
-     the text colour, so the mousedown that toggles the series reads as distinct from hovering. */
   [part~='legend-item']:where(:active) {
     background: var(
       --lr-chart-legend-item-active-bg,
@@ -172,14 +159,7 @@ import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-co
     min-inline-size: var(--lr-icon-button-size);
     min-block-size: var(--lr-icon-button-size);
   }
-  /* no-pressed-state: the canvas is a role="application" keyboard surface with no click handler of
-     its own -- pressing it activates a box *inside* the bitmap, which no CSS rule can reach, and
-     re-outlining the whole plot on mousedown would read as the entire chart being the target.
-     Same treatment, and same rationale, as chart.styles.ts's canvas. */
   [part='canvas']:hover {
-    /* Scoped so a consumer can retint/resize just this hover outline without also affecting every
-       other --lr-border-width-thin consumer on the page -- the same indirection rationale as the
-       --lr-chart-grid-color/-tick-color/etc. block above, applied to a state-specific rule. */
     outline: var(--lr-chart-canvas-hover-outline-width, var(--lr-border-width-thin)) solid
       var(--lr-chart-grid-color, var(--_lr-chart-grid-color));
     outline-offset: var(--lr-focus-ring-offset);

package/dist/components/charts/chart/chart-colors.d.ts

@@ -1,4 +1,4 @@
-export { resolveCanvasColor } from '../../../internal/canvas-color.js';
+export { resolveCanvasColor, resolveCanvasColors } from '../../../internal/canvas-color.js';
 /**
  * Resolves the categorical chart ramp to concrete canvas-safe colors. Passing `null` selects the
  * deterministic fallback directly; omitting the argument reads the document theme.

package/dist/components/charts/chart/chart-colors.js

@@ -1 +1 @@
-import{resolveCanvasColor}from"../../../internal/canvas-color.js";const FALLBACK_SERIES_PALETTE=["#0e006e","#4d011a","#862002","#503983","#315fdd","#935e7c","#de6906","#8f81d3"],AREA_FILL_PERCENT=28;import{resolveCanvasColor as resolveCanvasColor2}from"../../../internal/canvas-color.js";function seriesPalette(element){const target=element===void 0&&typeof document<"u"?document.documentElement:element;if(!target||typeof getComputedStyle!="function")return[...FALLBACK_SERIES_PALETTE];const cs=getComputedStyle(target);return FALLBACK_SERIES_PALETTE.map((fallback,index)=>{const number=index+1,color=cs.getPropertyValue(`--lr-color-chart-${number}`).trim()||cs.getPropertyValue(`--lr-theme-color-chart-${number}`).trim()||fallback;return resolveCanvasColor(target,color,fallback)})}function translucentAreaColor(scope,color){if(typeof document>"u"||typeof getComputedStyle!="function")return color;const concrete=resolveCanvasColor(scope,color,color);return resolveCanvasColor(scope,`color-mix(in srgb, ${concrete} ${AREA_FILL_PERCENT}%, transparent)`,concrete)}export{resolveCanvasColor2 as resolveCanvasColor,seriesPalette,translucentAreaColor};
+import{resolveCanvasColor}from"../../../internal/canvas-color.js";const FALLBACK_SERIES_PALETTE=["#0e006e","#4d011a","#862002","#503983","#315fdd","#935e7c","#de6906","#8f81d3"],AREA_FILL_PERCENT=28;import{resolveCanvasColor as resolveCanvasColor2,resolveCanvasColors}from"../../../internal/canvas-color.js";function seriesPalette(element){const target=element===void 0&&typeof document<"u"?document.documentElement:element;if(!target||typeof getComputedStyle!="function")return[...FALLBACK_SERIES_PALETTE];const cs=getComputedStyle(target);return FALLBACK_SERIES_PALETTE.map((fallback,index)=>{const number=index+1,color=cs.getPropertyValue(`--lr-color-chart-${number}`).trim()||cs.getPropertyValue(`--lr-theme-color-chart-${number}`).trim()||fallback;return resolveCanvasColor(target,color,fallback)})}function translucentAreaColor(scope,color){if(typeof document>"u"||typeof getComputedStyle!="function")return color;const concrete=resolveCanvasColor(scope,color,color);return resolveCanvasColor(scope,`color-mix(in srgb, ${concrete} ${AREA_FILL_PERCENT}%, transparent)`,concrete)}export{resolveCanvasColor2 as resolveCanvasColor,resolveCanvasColors,seriesPalette,translucentAreaColor};

package/dist/components/charts/chart/chart-core-loader.d.ts

@@ -29,6 +29,7 @@ export interface ChartJsModule {
     LinearScale: unknown;
     CategoryScale: unknown;
     RadialLinearScale: unknown;
+    LogarithmicScale: unknown;
     Filler: unknown;
     Tooltip: unknown;
     Legend: unknown;

package/dist/components/charts/chart/chart-core-loader.js

@@ -1 +1 @@
-import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const CHART_REGISTERABLE_KEYS=["LineController","BarController","ScatterController","DoughnutController","PieController","RadarController","PolarAreaController","BubbleController","LineElement","PointElement","BarElement","ArcElement","LinearScale","CategoryScale","RadialLinearScale","Filler","Tooltip","Legend"];function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isConstructor(value){if(typeof value!="function")return!1;try{return Reflect.construct(Object,[],value),!0}catch{return!1}}function missingChartCapability(candidate){if(!isObjectLike(candidate))return"module namespace";if(!isConstructor(candidate.Chart))return"Chart";if(typeof candidate.Chart.register!="function")return"Chart.register";if(!isObjectLike(candidate.defaults))return"defaults";for(const key of CHART_REGISTERABLE_KEYS)if(!isObjectLike(candidate[key]))return key}function isChartJsModule(candidate){return missingChartCapability(candidate)===void 0}function resolveChartJsModule(value){const module=resolveOptionalPeerCapability(value,isChartJsModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value),missing=missingChartCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`chart.js\`: missing or invalid \`${missing}\` capability.`)}let chartJs,registered=!1;async function loadChartModule(importChart=()=>import("chart.js")){try{return resolveChartJsModule(await importChart())}catch(err){return console.warn("<lr-chart> needs the optional peer dependency `chart.js` \u2014 install it with `pnpm add chart.js`:",err),null}}function registerCore(mod){registered||(mod.Chart.register(mod.LineController,mod.BarController,mod.ScatterController,mod.DoughnutController,mod.PieController,mod.RadarController,mod.PolarAreaController,mod.BubbleController,mod.LineElement,mod.PointElement,mod.BarElement,mod.ArcElement,mod.LinearScale,mod.CategoryScale,mod.RadialLinearScale,mod.Filler,mod.Tooltip,mod.Legend),registered=!0)}async function loadAndRegisterChartModule(importChart=()=>import("chart.js"),register=registerCore){const mod=await loadChartModule(importChart);if(!mod)return null;try{return register(mod),mod}catch(error){return console.warn("<lr-chart> could not register the optional `chart.js` peer:",error),null}}function loadChartJs(){return chartJs||(chartJs=loadAndRegisterChartModule()),chartJs}export{loadAndRegisterChartModule,loadChartJs,loadChartModule};
+import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const CHART_REGISTERABLE_KEYS=["LineController","BarController","ScatterController","DoughnutController","PieController","RadarController","PolarAreaController","BubbleController","LineElement","PointElement","BarElement","ArcElement","LinearScale","CategoryScale","RadialLinearScale","LogarithmicScale","Filler","Tooltip","Legend"];function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isConstructor(value){if(typeof value!="function")return!1;try{return Reflect.construct(Object,[],value),!0}catch{return!1}}function missingChartCapability(candidate){if(!isObjectLike(candidate))return"module namespace";if(!isConstructor(candidate.Chart))return"Chart";if(typeof candidate.Chart.register!="function")return"Chart.register";if(!isObjectLike(candidate.defaults))return"defaults";for(const key of CHART_REGISTERABLE_KEYS)if(!isObjectLike(candidate[key]))return key}function isChartJsModule(candidate){return missingChartCapability(candidate)===void 0}function resolveChartJsModule(value){const module=resolveOptionalPeerCapability(value,isChartJsModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value),missing=missingChartCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`chart.js\`: missing or invalid \`${missing}\` capability.`)}let chartJs,registered=!1;async function loadChartModule(importChart=()=>import("chart.js")){try{return resolveChartJsModule(await importChart())}catch(err){return console.warn("<lr-chart> needs the optional peer dependency `chart.js` \u2014 install it with `pnpm add chart.js`:",err),null}}function registerCore(mod){registered||(mod.Chart.register(mod.LineController,mod.BarController,mod.ScatterController,mod.DoughnutController,mod.PieController,mod.RadarController,mod.PolarAreaController,mod.BubbleController,mod.LineElement,mod.PointElement,mod.BarElement,mod.ArcElement,mod.LinearScale,mod.CategoryScale,mod.RadialLinearScale,mod.LogarithmicScale,mod.Filler,mod.Tooltip,mod.Legend),registered=!0)}async function loadAndRegisterChartModule(importChart=()=>import("chart.js"),register=registerCore){const mod=await loadChartModule(importChart);if(!mod)return null;try{return register(mod),mod}catch(error){return console.warn("<lr-chart> could not register the optional `chart.js` peer:",error),null}}function loadChartJs(){return chartJs||(chartJs=loadAndRegisterChartModule()),chartJs}export{loadAndRegisterChartModule,loadChartJs,loadChartModule};

package/dist/components/charts/chart/chart-feature-loader.d.ts

@@ -6,6 +6,7 @@ export interface ChartPluginCapability {
 }
 export type ZoomPlugin = ChartPluginCapability;
 export type DataLabelsPlugin = ChartPluginCapability;
+export type AnnotationPlugin = ChartPluginCapability;
 /**
  * The outcome of loading an opt-in Chart.js feature after attempting to load
  * the core module. Callers can distinguish an unavailable core from an
@@ -122,3 +123,37 @@ export declare function loadChartJsWithDataLabels(importDataLabels?: () => Promi
     mod: ChartJsModule;
     plugin: DataLabelsPlugin | undefined;
 } | null>;
+/**
+ * Loads `chartjs-plugin-annotation`, validating that the module really exposes a Chart.js plugin
+ * before it is handed to a chart — registering a wrapper namespace or a malformed object would
+ * silently no-op, which is the failure mode `resolveChartPlugin` exists to prevent. Un-memoized so
+ * both the success and the degrade-with-a-warning paths stay directly testable.
+ */
+export declare function loadAnnotationPlugin(importAnnotation?: () => Promise<unknown>): Promise<AnnotationPlugin | undefined>;
+/**
+ * Loads Chart.js plus the annotation plugin and **registers it globally**, preserving a usable core
+ * when the feature peer is absent. Un-memoized twin of `loadChartJsWithAnnotationResult()`, for
+ * failure-path tests.
+ *
+ * Global registration here, per-instance for `chartjs-plugin-datalabels`, and the difference is not
+ * arbitrary. Datalabels draws on every dataset the moment it is globally registered, so registering
+ * it globally would visibly change every other chart on the page. `chartjs-plugin-annotation` is
+ * the `chartjs-plugin-zoom` shape instead: it draws nothing at all unless a chart supplies
+ * `options.plugins.annotation.annotations`, so a global registration is unobservable to a chart
+ * that sets none. It also has to be global -- registration is what installs the plugin's own
+ * element types and their defaults, and an inline `config.plugins` entry skips that, leaving the
+ * plugin to throw on missing `borderWidth`/`borderCapStyle` defaults the moment it draws.
+ */
+export declare function loadChartAndAnnotation(loadChart: () => Promise<ChartJsModule | null>, importAnnotation?: () => Promise<unknown>): Promise<ChartFeatureLoadResult<AnnotationPlugin>>;
+/**
+ * Loads `chart.js` (reusing the cached core load) plus `chartjs-plugin-annotation`, on first actual
+ * demand — most charts set no annotations.
+ *
+ * Registered globally, like `chartjs-plugin-zoom` and unlike `chartjs-plugin-datalabels` — see
+ * `loadChartAndAnnotation()` for why the two differ. The load itself still happens only on first
+ * actual demand, so a page whose charts set no annotations never downloads the peer at all.
+ *
+ * Memoized behind a single promise assigned synchronously before any `await`, closing the
+ * check-then-act race across the `await` boundary that the zoom loader's doc describes.
+ */
+export declare function loadChartJsWithAnnotationResult(importAnnotation?: () => Promise<unknown>): Promise<ChartFeatureLoadResult<AnnotationPlugin>>;

package/dist/components/charts/chart/chart-feature-loader.js

@@ -1 +1 @@
-import{resolveOptionalPeerCapability}from"../../../internal/optional-peer-capabilities.js";import{loadChartJs,loadChartModule}from"./chart-core-loader.js";function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isChartPlugin(candidate){return isObjectLike(candidate)&&typeof candidate.id=="string"&&candidate.id.trim().length>0}function resolveChartPlugin(value,packageName){const plugin=resolveOptionalPeerCapability(value,isChartPlugin);if(plugin)return plugin;throw new Error(`Invalid optional peer \`${packageName}\`: expected a plugin with a non-empty string \`id\`.`)}let zoomResultLoad,dataLabelsResultLoad,zoomLoad,dataLabelsLoad;async function loadChartAndZoom(importChart=()=>import("chart.js"),importZoom=()=>import("chartjs-plugin-zoom"),needsZoom=!1){const mod=await loadChartModule(importChart);if(!mod)return null;if(!needsZoom)return{mod,zoomPlugin:void 0};let zoomPlugin;try{zoomPlugin=resolveChartPlugin(await importZoom(),"chartjs-plugin-zoom")}catch(err){console.warn("<lr-chart> zoom support needs the optional peer dependency `chartjs-plugin-zoom` \u2014 charts still render without it, but the `zoom` attribute has no effect until it is installed with `pnpm add chartjs-plugin-zoom`:",err)}return{mod,zoomPlugin}}async function loadChartAndRegisterZoom(loadChart,importZoom=()=>import("chartjs-plugin-zoom")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const zoomPlugin=(await loadChartAndZoom(()=>Promise.resolve(mod),importZoom,!0))?.zoomPlugin;if(!zoomPlugin)return{kind:"feature-unavailable",mod};try{mod.Chart.register(zoomPlugin)}catch(err){return console.warn("<lr-chart> zoom support could not be enabled \u2014 charts still render without it, but the `zoom` attribute has no effect:",err),{kind:"feature-unavailable",mod}}return{kind:"available",mod,plugin:zoomPlugin}}function loadChartJsWithZoomResult(importZoom=()=>import("chartjs-plugin-zoom")){return zoomResultLoad??=loadChartAndRegisterZoom(loadChartJs,importZoom)}function loadChartJsWithZoom(importZoom=()=>import("chartjs-plugin-zoom")){return zoomLoad??=loadChartJsWithZoomResult(importZoom).then(result=>result.kind==="core-unavailable"?null:result.mod)}async function loadDataLabelsPlugin(importDataLabels=()=>import("chartjs-plugin-datalabels")){try{return resolveChartPlugin(await importDataLabels(),"chartjs-plugin-datalabels")}catch(err){console.warn("<lr-chart> data labels need the optional peer dependency `chartjs-plugin-datalabels` \u2014 charts still render without it, but the `data-labels`/`stack-totals` attributes have no effect until it is installed with `pnpm add chartjs-plugin-datalabels`:",err);return}}async function loadChartAndDataLabels(loadChart,importDataLabels=()=>import("chartjs-plugin-datalabels")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const plugin=await loadDataLabelsPlugin(importDataLabels);return plugin?{kind:"available",mod,plugin}:{kind:"feature-unavailable",mod}}function loadChartJsWithDataLabelsResult(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsResultLoad??=loadChartAndDataLabels(loadChartJs,importDataLabels)}function loadChartJsWithDataLabels(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsLoad??=loadChartJsWithDataLabelsResult(importDataLabels).then(result=>result.kind==="core-unavailable"?null:{mod:result.mod,plugin:result.kind==="available"?result.plugin:void 0})}export{loadChartAndDataLabels,loadChartAndRegisterZoom,loadChartAndZoom,loadChartJsWithDataLabels,loadChartJsWithDataLabelsResult,loadChartJsWithZoom,loadChartJsWithZoomResult,loadDataLabelsPlugin};
+import{resolveOptionalPeerCapability}from"../../../internal/optional-peer-capabilities.js";import{loadChartJs,loadChartModule}from"./chart-core-loader.js";function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isChartPlugin(candidate){return isObjectLike(candidate)&&typeof candidate.id=="string"&&candidate.id.trim().length>0}function resolveChartPlugin(value,packageName){const plugin=resolveOptionalPeerCapability(value,isChartPlugin);if(plugin)return plugin;throw new Error(`Invalid optional peer \`${packageName}\`: expected a plugin with a non-empty string \`id\`.`)}let zoomResultLoad,dataLabelsResultLoad,annotationResultLoad,zoomLoad,dataLabelsLoad;async function loadChartAndZoom(importChart=()=>import("chart.js"),importZoom=()=>import("chartjs-plugin-zoom"),needsZoom=!1){const mod=await loadChartModule(importChart);if(!mod)return null;if(!needsZoom)return{mod,zoomPlugin:void 0};let zoomPlugin;try{zoomPlugin=resolveChartPlugin(await importZoom(),"chartjs-plugin-zoom")}catch(err){console.warn("<lr-chart> zoom support needs the optional peer dependency `chartjs-plugin-zoom` \u2014 charts still render without it, but the `zoom` attribute has no effect until it is installed with `pnpm add chartjs-plugin-zoom`:",err)}return{mod,zoomPlugin}}async function loadChartAndRegisterZoom(loadChart,importZoom=()=>import("chartjs-plugin-zoom")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const zoomPlugin=(await loadChartAndZoom(()=>Promise.resolve(mod),importZoom,!0))?.zoomPlugin;if(!zoomPlugin)return{kind:"feature-unavailable",mod};try{mod.Chart.register(zoomPlugin)}catch(err){return console.warn("<lr-chart> zoom support could not be enabled \u2014 charts still render without it, but the `zoom` attribute has no effect:",err),{kind:"feature-unavailable",mod}}return{kind:"available",mod,plugin:zoomPlugin}}function loadChartJsWithZoomResult(importZoom=()=>import("chartjs-plugin-zoom")){return zoomResultLoad??=loadChartAndRegisterZoom(loadChartJs,importZoom)}function loadChartJsWithZoom(importZoom=()=>import("chartjs-plugin-zoom")){return zoomLoad??=loadChartJsWithZoomResult(importZoom).then(result=>result.kind==="core-unavailable"?null:result.mod)}async function loadDataLabelsPlugin(importDataLabels=()=>import("chartjs-plugin-datalabels")){try{return resolveChartPlugin(await importDataLabels(),"chartjs-plugin-datalabels")}catch(err){console.warn("<lr-chart> data labels need the optional peer dependency `chartjs-plugin-datalabels` \u2014 charts still render without it, but the `data-labels`/`stack-totals` attributes have no effect until it is installed with `pnpm add chartjs-plugin-datalabels`:",err);return}}async function loadChartAndDataLabels(loadChart,importDataLabels=()=>import("chartjs-plugin-datalabels")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const plugin=await loadDataLabelsPlugin(importDataLabels);return plugin?{kind:"available",mod,plugin}:{kind:"feature-unavailable",mod}}function loadChartJsWithDataLabelsResult(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsResultLoad??=loadChartAndDataLabels(loadChartJs,importDataLabels)}function loadChartJsWithDataLabels(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsLoad??=loadChartJsWithDataLabelsResult(importDataLabels).then(result=>result.kind==="core-unavailable"?null:{mod:result.mod,plugin:result.kind==="available"?result.plugin:void 0})}async function loadAnnotationPlugin(importAnnotation=()=>import("chartjs-plugin-annotation")){try{return resolveChartPlugin(await importAnnotation(),"chartjs-plugin-annotation")}catch(err){console.warn("<lr-chart> annotations need the optional peer dependency `chartjs-plugin-annotation` \u2014 charts still render without it, but the `annotations` property has no effect until it is installed with `pnpm add chartjs-plugin-annotation`:",err);return}}async function loadChartAndAnnotation(loadChart,importAnnotation=()=>import("chartjs-plugin-annotation")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const plugin=await loadAnnotationPlugin(importAnnotation);if(!plugin)return{kind:"feature-unavailable",mod};try{mod.Chart.register(plugin)}catch(err){return console.warn("<lr-chart> annotations could not be enabled \u2014 charts still render without them, but the `annotations` property has no effect:",err),{kind:"feature-unavailable",mod}}return{kind:"available",mod,plugin}}function loadChartJsWithAnnotationResult(importAnnotation=()=>import("chartjs-plugin-annotation")){return annotationResultLoad??=loadChartAndAnnotation(loadChartJs,importAnnotation)}export{loadAnnotationPlugin,loadChartAndAnnotation,loadChartAndDataLabels,loadChartAndRegisterZoom,loadChartAndZoom,loadChartJsWithAnnotationResult,loadChartJsWithDataLabels,loadChartJsWithDataLabelsResult,loadChartJsWithZoom,loadChartJsWithZoomResult,loadDataLabelsPlugin};