@eifi1/ui-kit 0.6.1 → 0.7.1

package/src/components/autocomplete.tsx

@@ -8,9 +8,14 @@ import type {
 } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn";
-import { FieldLabel, FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, Spinner } from "./ui";
+import { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, Spinner } from "./ui";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel";
+import { useAnchorDir } from "./use-anchor-dir";
 import {
+  ComboboxFieldLabel,
+  DISABLED_ROW_CLASS,
+  isOptionEnabled,
+  stepEnabled,
   useActiveOptionScroll,
   useComboboxFieldError,
   useOptionSource,
@@ -26,7 +31,7 @@ import { DEFAULT_COMBOBOX_LABELS, useKitLabels } from "../i18n/kit-labels";
 export interface AutocompleteProps<V extends string | number = string>
   extends Omit<
     ComponentPropsWithoutRef<"input">,
-    "value" | "defaultValue" | "onChange" | "onSelect" | "children" | "type"
+    "value" | "defaultValue" | "onChange" | "onSelect" | "children" | "type" | "size"
   > {
   /** What is in the field. Controlled, and never reset by the component: opening,
    *  closing and a failed lookup all leave it exactly as typed. */
@@ -34,7 +39,8 @@ export interface AutocompleteProps<V extends string | number = string>
   /** Every keystroke — and, with `fillOnSelect`, the label of a taken suggestion. */
   onChange: (text: string) => void;
   /** Suggestions the caller already has (e.g. from its own query hook). Narrowed by
-   *  the text unless `filter={false}`. */
+   *  the text unless `filter={false}`. An option with `disabled: true` is listed but
+   *  cannot be taken — see {@link ComboOption.disabled}. */
   options?: ComboOption<V>[];
   /** Or: fetch them. Debounced (`debounceMs`), race-safe, only at `minChars` and up,
    *  never while the field is idle; a rejection shows `loadErrorLabel` and empties
@@ -52,6 +58,30 @@ export interface AutocompleteProps<V extends string | number = string>
    *  inter-key interval is 150–250 ms, so the pickers' 150 fires on nearly every
    *  letter, which a rate-limited geocoder cannot afford. */
   debounceMs?: number;
+  /**
+   * Whether the list MAY show — controlled. Omit (or pass `undefined`) and the field
+   * decides: open while focused, until Escape, Tab or a taken row. `false` keeps it
+   * shut whatever the user does, and stops `loadOptions` asking — keksdose's address
+   * search, with its confirm map up, where it used to pass `minChars={Infinity}`.
+   * `true` shows it even unfocused.
+   *
+   * Even open, the list only APPEARS when it has something to show (rows, or a
+   * status line); `aria-expanded` follows what appears, not this flag.
+   */
+  open?: boolean;
+  /** The field wants the list open or shut — focus, typing, ↓/↑ open it; blur,
+   *  Escape, Tab and taking a row shut it. Called on every change, controlled or not. */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * `"sm"`: the 28px, 12px-type field of {@link Select}'s `size="sm"`, with the icon,
+   * spinner and list rows scaled to match — for a card or toolbar whose buttons are
+   * small. `"md"` (default) is the form field. Unlabelled only, as on `Select`: a
+   * floating label needs the tall box, so a labelled field ignores `"sm"`.
+   *
+   * A NUMBER is still the native `size` attribute (the width in characters), passed
+   * straight through.
+   */
+  size?: "sm" | "md" | number;
   /** A suggestion was taken (click, or Enter on the highlighted row). */
   onSelect?: (option: ComboOption<V>) => void;
   /**
@@ -61,11 +91,12 @@ export interface AutocompleteProps<V extends string | number = string>
    * and the field is only the search that found it; the text then stays as typed.
    */
   fillOnSelect?: boolean;
-  /** A floating label, as on {@link Combobox}. Names the field (`aria-labelledby`)
-   *  unless an `aria-label` is given. */
+  /** A floating label, as on {@link Combobox} — a real `<label for>` on the input.
+   *  Names the field (`aria-labelledby`) unless an `aria-label` is given. */
   label?: ReactNode;
   /** Leading decoration inside the field (a pin, a magnifier). Decorative: the
-   *  label names the field. */
+   *  label names the field. An `<svg>` child is sized by the field — 16px, or 14px
+   *  at `size="sm"` — so a lucide icon needs no class of its own. */
   icon?: ReactNode;
   /** Required and unanswered — {@link FIELD_INVALID}. */
   invalid?: boolean;
@@ -107,6 +138,9 @@ function AutocompleteInner<V extends string | number = string>(
     status,
     emptyLabel,
     loadErrorLabel,
+    open: openProp,
+    onOpenChange,
+    size,
     className,
     inputClassName,
     id,
@@ -136,7 +170,15 @@ function AutocompleteInner<V extends string | number = string>(
 
   /** The user's intent: the field is focused and the list has not been dismissed.
    *  Whether anything SHOWS is decided below, from what there is to show. */
-  const [open, setOpen] = useState(false);
+  const [ownOpen, setOwnOpen] = useState(false);
+  // Controlled when the caller passes a boolean. The own state is kept up to date
+  // either way, so a caller that controls only SOMETIMES (`open={confirming ? false :
+  // undefined}`) hands back a field that is exactly as open as focus says it is.
+  const open = openProp ?? ownOpen;
+  const setOpen = (next: boolean) => {
+    setOwnOpen(next);
+    if (next !== open) onOpenChange?.(next);
+  };
   const [active, setActive] = useState(-1);
   const live = open && !disabled;
   const { results, busy, failed, tooShort } = useOptionSource<V>({
@@ -165,22 +207,29 @@ function AutocompleteInner<V extends string | number = string>(
             ? labels.noResults
             : null;
   const expanded = live && (results.length > 0 || statusLine !== null);
-  const activeId =
-    expanded && active >= 0 && active < results.length ? optionId(active) : undefined;
+  // A disabled row is never the keyboard's — not even when a list that changed under
+  // the highlight put one there.
+  const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : undefined;
   useActiveOptionScroll(activeId);
   const { rect, top, maxHeight } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });
+  const dir = useAnchorDir(fieldRef, expanded);
 
   const close = () => {
     setOpen(false);
     setActive(-1);
   };
   const take = (o: ComboOption<V>) => {
+    if (o.disabled) return;
     if (fillOnSelect) onChange(o.label);
     onSelect?.(o);
     close();
   };
 
   const hasLabel = label !== undefined;
+  // `size="sm"` is for an UNLABELLED field, as on Select: the floating label needs the
+  // tall box. A number is the native attribute.
+  const small = size === "sm" && !hasLabel;
+  const nativeSize = typeof size === "number" ? size : undefined;
   // The caller's name wins; else the floating label, by reference so a non-string
   // label still names the field.
   const labelledBy =
@@ -190,12 +239,21 @@ function AutocompleteInner<V extends string | number = string>(
     // `relative`: the floating label and the live region's `sr-only` both need a
     // local containing block.
     <div className={cn("relative", className)}>
-      {hasLabel && <FieldLabel id={labelId}>{label}</FieldLabel>}
+      {/* A real <label for> (lenkbank), and still `aria-labelledby`'s target, so the
+          name — and the listbox's, which borrows it — is exactly what it was. */}
+      {hasLabel && (
+        <ComboboxFieldLabel id={labelId} htmlFor={fieldId}>
+          {label}
+        </ComboboxFieldLabel>
+      )}
       <div ref={fieldRef} className="relative">
         {icon && (
           <span
             aria-hidden
-            className="pointer-events-none absolute start-2.5 top-1/2 flex -translate-y-1/2 text-[var(--text-muted)] [&>svg]:size-4"
+            className={cn(
+              "pointer-events-none absolute top-1/2 flex -translate-y-1/2 text-[var(--text-muted)]",
+              small ? "start-2 [&>svg]:size-3.5" : "start-2.5 [&>svg]:size-4",
+            )}
           >
             {icon}
           </span>
@@ -204,6 +262,7 @@ function AutocompleteInner<V extends string | number = string>(
           {...rest}
           ref={ref}
           id={fieldId}
+          size={nativeSize}
           type="text"
           value={value}
           disabled={disabled}
@@ -246,16 +305,16 @@ function AutocompleteInner<V extends string | number = string>(
             }
             onKeyDown?.(e);
             if (e.defaultPrevented) return;
-            const last = results.length - 1;
+            // Disabled rows are passed over; at either end the highlight stays put.
             if (e.key === "ArrowDown") {
               e.preventDefault();
               if (!open) setOpen(true);
-              else setActive((i) => Math.min(i + 1, last));
+              else setActive((i) => stepEnabled(results, i, 1));
             } else if (e.key === "ArrowUp") {
               e.preventDefault();
               if (!open) setOpen(true);
               // From "nothing highlighted", Up goes to the bottom, as the APG has it.
-              else setActive((i) => (i < 0 ? last : Math.max(i - 1, 0)));
+              else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));
             } else if (e.key === "Enter") {
               // No row highlighted: the text is the answer, and a form's own submit
               // is left alone.
@@ -270,16 +329,24 @@ function AutocompleteInner<V extends string | number = string>(
           className={cn(
             FIELD_BASE,
             hasLabel && FIELD_FLOATING_PAD,
-            icon ? "ps-8" : undefined,
-            busy && "pe-9",
+            // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height
+            // cannot grow it.
+            small && "h-7 py-0 pe-2 ps-2 text-xs",
+            icon ? (small ? "ps-7" : "ps-8") : undefined,
+            busy && (small ? "pe-7" : "pe-9"),
             field.isInvalid && FIELD_INVALID,
             inputClassName,
           )}
         />
         {busy && live && (
           // Decorative: the live region below already says "Loading…".
-          <span className="pointer-events-none absolute end-2.5 top-1/2 flex -translate-y-1/2">
-            <Spinner label={null} className="h-4 w-4" />
+          <span
+            className={cn(
+              "pointer-events-none absolute top-1/2 flex -translate-y-1/2",
+              small ? "end-2" : "end-2.5",
+            )}
+          >
+            <Spinner label={null} className={small ? "h-3.5 w-3.5" : "h-4 w-4"} />
           </span>
         )}
       </div>
@@ -305,6 +372,9 @@ function AutocompleteInner<V extends string | number = string>(
             // Every press inside the list keeps focus in the field — rows, the status
             // line, the scrollbar — or the input's blur would close the list first.
             role="presentation"
+            // Portalled out of the form's `dir`; the field's is put back. The list is
+            // exactly the field's width, so `left` places it in either direction.
+            dir={dir}
             onMouseDown={(e) => e.preventDefault()}
             className="fixed z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg"
             style={{ top, left: rect.left, width: rect.width, maxHeight }}
@@ -340,12 +410,22 @@ function AutocompleteInner<V extends string | number = string>(
                           // field holds no value, so the only row that can be chosen
                           // is the one whose label the text already is.
                           aria-selected={fillOnSelect && o.label === value}
+                          // Listed, announced as unavailable, never taken: `take`
+                          // refuses it and the arrows pass it over.
+                          aria-disabled={o.disabled || undefined}
                           tabIndex={-1}
                           onClick={() => take(o)}
-                          onMouseEnter={() => setActive(i)}
+                          onMouseEnter={() => {
+                            if (!o.disabled) setActive(i);
+                          }}
                           className={cn(
-                            "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
-                            i === active ? "bg-[var(--bg-active)]" : "hover:bg-[var(--bg-hover)]",
+                            "flex w-full items-center gap-2 px-3 text-start",
+                            small ? "py-1 text-xs" : "py-1.5 text-sm",
+                            o.disabled
+                              ? DISABLED_ROW_CLASS
+                              : i === active
+                                ? "bg-[var(--bg-active)]"
+                                : "hover:bg-[var(--bg-hover)]",
                             o.group != null && "ps-6",
                           )}
                         >
@@ -359,7 +439,12 @@ function AutocompleteInner<V extends string | number = string>(
                               {o.label}
                             </span>
                             {o.sublabel && (
-                              <span className="block truncate text-xs text-[var(--text-placeholder)]">
+                              <span
+                                className={cn(
+                                  "block truncate text-[var(--text-placeholder)]",
+                                  small ? "text-[11px]" : "text-xs",
+                                )}
+                              >
                                 {o.sublabel}
                               </span>
                             )}
@@ -376,7 +461,7 @@ function AutocompleteInner<V extends string | number = string>(
               <div
                 aria-hidden
                 className={cn(
-                  "px-3 py-2 text-sm",
+                  small ? "px-3 py-1.5 text-xs" : "px-3 py-2 text-sm",
                   failed && !hasStatus ? "text-[var(--danger)]" : "text-[var(--text-muted)]",
                   results.length > 0 && "border-t border-[var(--border)] text-xs",
                 )}
@@ -411,7 +496,8 @@ AutocompleteBase.displayName = "Autocomplete";
  *
  * Focus never leaves the `<input>`: `aria-activedescendant` names the highlighted
  * row, `aria-controls` the list, and a polite live region says what the list now
- * holds. Keyboard: ↓/↑ move (↓ opens), Enter takes the highlighted row (with none,
+ * holds. Keyboard: ↓/↑ move (↓ opens) over every row but a `disabled` one, Enter
+ * takes the highlighted row (with none,
  * Enter is left to the form), Escape closes, Tab closes and moves on; Home/End stay
  * with the caret. An Escape that closes an open list is consumed and never reaches the
  * caller; with the list closed it does. For every other key a caller's `onKeyDown`

package/src/components/calculator.tsx

@@ -147,9 +147,13 @@ function CalculatorPanel({
             equals();
           }
         }}
+        // Arithmetic reads left to right in every script, and a calculator display
+        // is right-aligned in every script too — so both stay physical, pinned
+        // with `dir="ltr"` rather than mirrored in a right-to-left form.
+        dir="ltr"
         className="block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]"
       />
-      <div className="h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]">
+      <div dir="ltr" className="h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]">
         {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : ""}
       </div>
       <div className="grid grid-cols-4 gap-1.5">

package/src/components/chart-zoom.tsx

@@ -337,6 +337,13 @@ export function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>) {
     };
     const state: ZoomState = { x: xWindow, y: ownY };
     const zoomed = xWindow !== undefined || ownY !== null;
+    // A chart handed no rows or no series draws its empty state, not a plot — and a
+    // "Reset zoom" floating over "No data" (every line toggled off while zoomed) offers
+    // to undo something the reader cannot see. The zoom itself is KEPT: it is where they
+    // were looking, and it applies again the moment a line comes back. Only an array
+    // that is there and empty counts; a chart that does not pass its data is not known
+    // to be empty.
+    const empty = props.rows?.length === 0 || props.series?.length === 0;
 
     const clear = () => {
       setXWindow(undefined);
@@ -362,7 +369,7 @@ export function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>) {
     return (
       <div className="relative">
         <Chart {...props} zoom={binding} />
-        {zoomed && (
+        {zoomed && !empty && (
           <button
             type="button"
             onClick={clear}

package/src/components/chart.tsx

@@ -16,6 +16,7 @@ import {
   Tooltip as RechartsTooltip,
 } from "recharts";
 import { cn } from "../lib/cn";
+import { isRtl } from "../lib/direction";
 
 export interface ChartSeriesConfig {
   label: ReactNode;
@@ -37,6 +38,20 @@ interface ChartContainerProps extends ComponentProps<"div"> {
   children: ComponentProps<typeof ResponsiveContainer>["children"];
 }
 
+/**
+ * The shell every chart in the kit is drawn inside.
+ *
+ * **The plot is not mirrored in RTL.** An x axis is a number line or a timeline, and
+ * both run left-to-right in Hebrew and Arabic charts as much as in English ones; a
+ * time axis flipped to run right-to-left is the surprise, not the courtesy. So no
+ * `reversed` on any axis, and the SVG is pinned to `direction: ltr` — without that it
+ * inherits the page's `rtl`, which flips what `text-anchor: end` means, and the tick
+ * labels of a left-hand y axis are drawn INTO the plot instead of beside it. Text
+ * inside the SVG still shapes by its own script; only the anchoring is physical.
+ * The HTML around the plot — legend, tooltip, the zoom reset button — follows the
+ * page's direction like any other markup. A consumer who does want a mirrored
+ * category axis passes `reversed` on its own `XAxis`.
+ */
 export function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps) {
   const uid = useId();
   // The id is pasted into an UNQUOTED `[data-chart=…]` selector below, so it has to be
@@ -54,6 +69,8 @@ export function ChartContainer({ id, className, children, config, ...props }: Ch
           // a horizontal drag is handed to recharts for tooltip scrubbing,
           // instead of the page scrolling underneath the gesture (feedback #292).
           "flex w-full touch-pan-y justify-center text-xs",
+          // physical anchoring for the unmirrored plot (see the doc comment above)
+          "[&_.recharts-surface]:[direction:ltr]",
           // muted axis labels + gridlines; one class each, since the tokens
           // already carry the light/dark values
           "[&_.recharts-cartesian-axis-tick_text]:fill-[var(--text-muted)]",
@@ -101,6 +118,19 @@ const CSS_IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;
 const CSS_COLOR =
   /^(?:#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6}|(?:rgba?|hsla?)\([0-9A-Za-z.,%/ -]*\)|var\(--[A-Za-z0-9_-]+\))$/;
 
+/**
+ * The colour an entry is painted with, or `undefined` when the style block refuses it.
+ *
+ * The one gate both sides go through: {@link ChartStyle} emits exactly these, and the
+ * legend and tooltip swatches show exactly these. They used to read `config[key].color`
+ * directly, so an entry the style block had skipped still showed its configured colour
+ * in the key — a swatch promising a colour the series was never painted in.
+ */
+function paintedColor(key: string, entry: ChartSeriesConfig | undefined): string | undefined {
+  if (!entry?.color) return undefined;
+  return CSS_IDENT.test(key) && CSS_COLOR.test(entry.color) ? entry.color : undefined;
+}
+
 // Inject each series colour as a `--color-<key>` custom property scoped to this
 // chart, so chart JSX can refer to `var(--color-total)` and the legend/tooltip
 // stay in sync from one source of truth.
@@ -127,7 +157,22 @@ function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
   return <style dangerouslySetInnerHTML={{ __html: css }} />;
 }
 
-export const ChartTooltip = RechartsTooltip;
+/**
+ * recharts' `Tooltip`, with `filterNull` defaulting to **false**.
+ *
+ * recharts drops every payload entry whose value is `null`/`undefined` before the
+ * content sees it, so the missing-value path {@link ChartTooltipContent} documents —
+ * the em dash, `formatValue(undefined)` — never ran under the default: a series with a
+ * gap at the cursor simply vanished from the tooltip, which reads as "this series does
+ * not exist here" rather than "it has no value here". Kept, the entry prints "—".
+ *
+ * The other half of that filter — dropping series drawn with `hide` — is redone by
+ * `ChartTooltipContent` itself (honouring `includeHidden`), so a legend toggle still
+ * takes a series out of the tooltip. Pass `filterNull` to get recharts' behaviour back.
+ */
+export function ChartTooltip(props: ComponentProps<typeof RechartsTooltip>) {
+  return <RechartsTooltip filterNull={false} {...props} />;
+}
 export const ChartLegend = RechartsLegend;
 
 interface TooltipPayloadItem {
@@ -135,6 +180,8 @@ interface TooltipPayloadItem {
   name?: string | number;
   value?: number | string;
   color?: string;
+  /** A series drawn with `hide` — dropped here, see {@link ChartTooltip}. */
+  hide?: boolean;
   payload?: Record<string, unknown>;
 }
 
@@ -194,6 +241,8 @@ interface ChartTooltipContentProps {
    *  spill past the right edge of this (usually horizontally-scrolling) container
    *  — e.g. a wide chart whose rightmost bars sat off-screen (feedback #77). */
   boundaryRef?: RefObject<HTMLElement | null>;
+  /** Injected by recharts: keep series drawn with `hide` in the tooltip. */
+  includeHidden?: boolean;
 }
 
 export function ChartTooltipContent({
@@ -207,17 +256,29 @@ export function ChartTooltipContent({
   formatValue,
   coordinate,
   boundaryRef,
+  includeHidden = false,
 }: ChartTooltipContentProps) {
   const config = useChart();
   const tipRef = useRef<HTMLDivElement>(null);
-  if (!active || !payload?.length) return null;
+  // `ChartTooltip` keeps null values (so they can print "—"), which also keeps the
+  // series a legend toggle switched off with `hide`; those go here instead.
+  const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);
+  if (!active || !items?.length) return null;
   // Recharts anchors the tooltip at coordinate.x inside the full (scrolled) chart
   // width; subtract the container's scrollLeft to get its on-screen x, then flip
   // left if the tooltip's own width would run past the visible right edge.
+  //
+  // Both the cursor and the flip are PHYSICAL (the plot is never mirrored, see
+  // `ChartContainer`), but an RTL scroller counts `scrollLeft` from its right edge —
+  // 0 at the start, negative going left — so there the content's left edge sits
+  // `scrollWidth - clientWidth + scrollLeft` px to the left of the visible one.
   let flip = false;
   const boundary = boundaryRef?.current;
   if (boundary && coordinate?.x != null) {
-    const visibleX = coordinate.x - boundary.scrollLeft;
+    const offset = isRtl(boundary)
+      ? boundary.scrollWidth - boundary.clientWidth + boundary.scrollLeft
+      : boundary.scrollLeft;
+    const visibleX = coordinate.x - offset;
     const tipWidth = tipRef.current?.offsetWidth ?? 160;
     flip = visibleX + tipWidth + 12 > boundary.clientWidth;
   }
@@ -233,7 +294,7 @@ export function ChartTooltipContent({
         </div>
       )}
       <div className="grid gap-1.5">
-        {payload.map((item, i) => {
+        {items.map((item, i) => {
           // Bars/lines/areas identify a series by dataKey; pies/treemaps key off
           // `name` (the nameKey value). Prefer whichever the config knows.
           const dk = item.dataKey != null ? String(item.dataKey) : undefined;
@@ -245,7 +306,7 @@ export function ChartTooltipContent({
           // or a bar with a per-cell colour, IS the colour the reader is pointing at,
           // while `item.color` is the series-wide one — every tile's swatch came out
           // `--chart-1` whatever colour the tile was.
-          const color = series?.color ?? fill ?? item.color ?? "#64748b";
+          const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "#64748b";
           const name = series?.label ?? nm ?? cfgKey;
           const raw = tooltipValue(item.value);
           let shown: ReactNode;
@@ -262,7 +323,7 @@ export function ChartTooltipContent({
                 style={{ backgroundColor: color }}
               />
               <span className="text-[var(--text-muted)]">{name}</span>
-              <span data-private className="ml-auto font-mono font-medium tabular-nums text-[var(--text-primary)]">
+              <span data-private className="ms-auto font-mono font-medium tabular-nums text-[var(--text-primary)]">
                 {shown}
               </span>
             </div>
@@ -313,7 +374,7 @@ export function ChartLegendContent({
         const vv = item.value != null ? String(item.value) : undefined;
         const cfgKey = dk && config[dk] ? dk : vv && config[vv] ? vv : (dk ?? vv ?? String(i));
         const series = config[cfgKey];
-        const color = series?.color ?? item.color ?? "#64748b";
+        const color = paintedColor(cfgKey, series) ?? item.color ?? "#64748b";
         const label = series?.label ?? vv ?? cfgKey;
         const off = hidden?.has(cfgKey) ?? false;
         const dimmed = off || (activeKey != null && activeKey !== cfgKey);