@eifi1/ui-kit 0.9.0 → 0.11.0

package/dist/components/progress-bar.d.ts

@@ -17,6 +17,21 @@ type ProgressBarTone = "brand" | "neutral" | "success" | "warning" | "danger" |
  * line of text where 8px outweighs the text.
  */
 type ProgressBarSize = "sm" | "slim" | "md" | "lg";
+/** One part of a stacked bar. See {@link ProgressBarProps.segments}. */
+interface ProgressBarSegment {
+    /** Its size, on the bar's own `min`–`max` scale. */
+    value: number;
+    /** A kit tone. Left out (and no `color`/`className`), the next `--chart-N` colour. */
+    tone?: ProgressBarTone;
+    /** Any CSS colour (`var(--token)`), for a palette the tones do not cover. Wins over `tone`. */
+    color?: string;
+    /** Classes for the segment's fill — keksdose's `STEP_CLASS` ramp. Wins over `tone`. */
+    className?: string;
+    /** The part's name: said in the bar's `aria-valuetext` and shown in the legend. */
+    label?: ReactNode;
+    /** A stable React key, when `label` is not a string. */
+    key?: string;
+}
 interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> {
     /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way
      *  and nobody knows how much is left (an import that reports no count). */
@@ -45,6 +60,20 @@ interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">, "childr
     tone?: ProgressBarTone;
     size?: ProgressBarSize;
     locale?: string;
+    /**
+     * Draw a METER OF PARTS: one bar, several fills side by side in order, a 2px gap
+     * between them — keksdose's discretionary-spending bar (cut-card:133), a whole
+     * split into the steps of a scale. Forces `variant="meter"`: parts of a whole are
+     * never "busy". `aria-valuenow` is the sum; `aria-valuetext` names every part
+     * ("Rent: 40%, Food: 25%"), each part's value through `formatValue` and joined in the
+     * kit's locale — the words keksdose's hand-drawn bar had to hide from a reader
+     * altogether, leaving the legend as the only way in. The sum is clamped to `max`,
+     * and parts past it are cut off at the track's end.
+     */
+    segments?: ProgressBarSegment[];
+    /** With `segments`: a list under the bar naming each part with its swatch and value
+     *  — the table view of the bar, in text tokens rather than the segment colour. */
+    legend?: boolean;
 }
 /**
  * A horizontal bar that fills toward `max`.
@@ -63,6 +92,6 @@ interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">, "childr
  * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an
  * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.
  */
-declare function ProgressBar({ value, min, max, variant, label, showValue, formatValue, tone, size, locale, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: ProgressBarProps): react.JSX.Element;
+declare function ProgressBar({ value, min, max, variant, label, showValue, formatValue, tone, size, locale, segments, legend, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: ProgressBarProps): react.JSX.Element;
 
-export { ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarTone };
+export { ProgressBar, type ProgressBarProps, type ProgressBarSegment, type ProgressBarSize, type ProgressBarTone };

package/dist/components/progress-bar.js

@@ -14,6 +14,25 @@ const FILL = {
   expense: "bg-[var(--money-expense)]"
 };
 const TRACK_HEIGHT = { sm: "h-1", slim: "h-1.5", md: "h-2", lg: "h-3" };
+const SERIES_FILL = [
+  "bg-[var(--chart-1)]",
+  "bg-[var(--chart-2)]",
+  "bg-[var(--chart-3)]",
+  "bg-[var(--chart-4)]",
+  "bg-[var(--chart-5)]",
+  "bg-[var(--chart-6)]",
+  "bg-[var(--chart-7)]",
+  "bg-[var(--chart-8)]",
+  "bg-[var(--chart-9)]"
+];
+function segmentFills(segments) {
+  let next = 0;
+  return segments.map((seg) => {
+    if (seg.className) return seg.className;
+    if (seg.tone) return FILL[seg.tone];
+    return seg.color ? void 0 : SERIES_FILL[next++ % SERIES_FILL.length];
+  });
+}
 function ProgressBar({
   value,
   min = 0,
@@ -25,6 +44,8 @@ function ProgressBar({
   tone = "brand",
   size = "md",
   locale,
+  segments,
+  legend = false,
   className,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -33,13 +54,25 @@ function ProgressBar({
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const kitLocale = useKitLocale(locale);
   const labelId = useId();
-  const meter = variant === "meter";
-  const current = value === void 0 || !Number.isFinite(value) ? meter ? min : void 0 : value;
-  const indeterminate = current === void 0;
+  const stacked = segments !== void 0;
+  const meter = stacked || variant === "meter";
   const span = max - min;
+  const partValue = (v) => Number.isFinite(v) ? Math.max(0, v - min) : 0;
+  const fills = stacked ? segmentFills(segments) : [];
+  const partTotal = stacked ? min + segments.reduce((sum, seg) => sum + partValue(seg.value), 0) : void 0;
+  const format = (v) => formatValue ? formatValue(v, max, min) : new Intl.NumberFormat(kitLocale, { style: "percent", maximumFractionDigits: 0 }).format(
+    span <= 0 ? 0 : (Math.min(max, Math.max(min, v)) - min) / span
+  );
+  const partTexts = stacked ? segments.map((seg) => {
+    const text = format(min + partValue(seg.value));
+    return typeof seg.label === "string" || typeof seg.label === "number" ? common.fieldValue(String(seg.label), text) : text;
+  }) : [];
+  const current = partTotal ?? (value === void 0 || !Number.isFinite(value) ? meter ? min : void 0 : value);
+  const indeterminate = current === void 0;
   const clamped = indeterminate ? void 0 : Math.min(max, Math.max(min, current));
   const fraction = clamped === void 0 || span <= 0 ? 0 : (clamped - min) / span;
-  const valueText = clamped === void 0 ? void 0 : formatValue ? formatValue(clamped, max, min) : new Intl.NumberFormat(kitLocale, { style: "percent", maximumFractionDigits: 0 }).format(fraction);
+  const valueText = clamped === void 0 ? void 0 : format(clamped);
+  const ariaValueText = stacked && partTexts.length > 0 ? new Intl.ListFormat(kitLocale, { style: "short", type: "unit" }).format(partTexts) : valueText;
   const labelledBy = ariaLabelledBy ?? (label != null ? labelId : void 0);
   const name = labelledBy ? void 0 : ariaLabel ?? (indeterminate ? common.loading : void 0);
   return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), "data-state": indeterminate ? "indeterminate" : "determinate", children: [
@@ -59,10 +92,28 @@ function ProgressBar({
         "aria-valuemin": indeterminate ? void 0 : min,
         "aria-valuemax": indeterminate ? void 0 : max,
         "aria-valuenow": clamped,
-        "aria-valuetext": valueText,
+        "aria-valuetext": ariaValueText,
         "aria-busy": !meter && indeterminate ? true : void 0,
         className: cn("relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]", TRACK_HEIGHT[size]),
-        children: indeterminate ? /* @__PURE__ */ jsx(
+        children: stacked ? (
+          // The parts in a flex row with a 2px gap, so two neighbouring steps of one
+          // hue are parted by the track rather than by their difference in lightness.
+          /* @__PURE__ */ jsx("div", { className: "flex h-full w-full gap-0.5", children: segments.map((seg, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-part": "segment",
+              className: cn(
+                "h-full shrink-0 rounded-full transition-[width] duration-300 motion-reduce:transition-none",
+                fills[i]
+              ),
+              style: {
+                width: `${span <= 0 ? 0 : partValue(seg.value) / span * 100}%`,
+                backgroundColor: seg.className ? void 0 : seg.color
+              }
+            },
+            seg.key ?? i
+          )) })
+        ) : indeterminate ? /* @__PURE__ */ jsx(
           "div",
           {
             "data-part": "fill",
@@ -87,7 +138,22 @@ function ProgressBar({
           }
         )
       }
-    )
+    ),
+    stacked && legend && segments.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-1 text-sm", "data-part": "legend", children: segments.map((seg, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "size-2.5 shrink-0 rounded-sm",
+            fills[i]
+          ),
+          style: { backgroundColor: seg.className ? void 0 : seg.color }
+        }
+      ),
+      seg.label != null && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[var(--text-secondary)]", children: seg.label }),
+      /* @__PURE__ */ jsx("span", { className: "ms-auto shrink-0 text-xs tabular-nums text-[var(--text-muted)]", children: format(min + partValue(seg.value)) })
+    ] }, seg.key ?? i)) })
   ] });
 }
 export {

package/dist/components/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/**\n * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the\n * names `Chip`, `StatTile` and `Sparkline` already use for them: a share bar of what\n * came in or went out is money, and painting it `success` / `warning` said \"good\" and\n * \"careful\" about a figure that is neither. keksdose's report meters (food-group-card,\n * drilldown-modal) sit beside amounts that are already in the money colours.\n */\nexport type ProgressBarTone =\n  | \"brand\"\n  | \"neutral\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\"\n  | \"income\"\n  | \"expense\";\n/**\n * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a\n * letter because the letters are taken in order — an `xs` at 6px would be THICKER than\n * `sm` — and renaming `sm` would move every bar already on it. 6px is the Slider's\n * track and keksdose's hand-drawn meters (`h-1.5`, landing-visuals), for a bar under a\n * line of text where 8px outweighs the text.\n */\nexport type ProgressBarSize = \"sm\" | \"slim\" | \"md\" | \"lg\";\n\nconst FILL: Record<ProgressBarTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: \"h-1\", slim: \"h-1.5\", md: \"h-2\", lg: \"h-3\" };\n\nexport interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way\n   *  and nobody knows how much is left (an import that reports no count). */\n  value?: number;\n  min?: number;\n  max?: number;\n  /**\n   * `progress` (default): a task moving toward completion — `role=\"progressbar\"`.\n   * `meter`: a share of a known whole that is not going anywhere (budget used, disk\n   * space, one category's slice of spending) — `role=\"meter\"`. keksdose's share bars\n   * were progress bars to a screen reader, which reads \"busy\" into a figure that is\n   * simply a figure. A meter is never indeterminate; a missing value reads as `min`.\n   */\n  variant?: \"progress\" | \"meter\";\n  /** Visible label above the bar, and its accessible name. Without it, pass\n   *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */\n  label?: ReactNode;\n  /** Show the value text at the end of the label row. */\n  showValue?: boolean;\n  /**\n   * The value as words — both the visible `showValue` text and `aria-valuetext`.\n   * Default: the fraction as a percentage in the kit's locale (\"42 %\" in French).\n   * Pass one for anything that is not a percentage: `(v, max) => \\`${v} of ${max} files\\``.\n   */\n  formatValue?: (value: number, max: number, min: number) => string;\n  tone?: ProgressBarTone;\n  size?: ProgressBarSize;\n  locale?: string;\n}\n\n/**\n * A horizontal bar that fills toward `max`.\n *\n * keksdose (import progress, budget share bars) and kastlan (upload and job\n * progress) each drew their own div-in-a-div. None had a role, so a reader heard\n * nothing at all; the share bars that did have one claimed to be progress.\n *\n * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow=\"37\"`\n * is read as \"37\" by some readers and \"37 percent\" by others, and neither is right\n * when `max` is 212 files.\n *\n * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,\n * half-strength bar across the whole track — still visibly \"something is happening\",\n * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than\n * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an\n * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.\n */\nexport function ProgressBar({\n  value,\n  min = 0,\n  max = 100,\n  variant = \"progress\",\n  label,\n  showValue = false,\n  formatValue,\n  tone = \"brand\",\n  size = \"md\",\n  locale,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...rest\n}: ProgressBarProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const kitLocale = useKitLocale(locale);\n  const labelId = useId();\n\n  const meter = variant === \"meter\";\n  const current = value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value;\n  const indeterminate = current === undefined;\n  const span = max - min;\n  const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));\n  const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;\n\n  const valueText =\n    clamped === undefined\n      ? undefined\n      : formatValue\n        ? formatValue(clamped, max, min)\n        : new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(fraction);\n\n  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : undefined);\n  const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-state={indeterminate ? \"indeterminate\" : \"determinate\"}>\n      {(label != null || (showValue && valueText !== undefined)) && (\n        <div className=\"mb-1 flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          {showValue && valueText !== undefined && (\n            // Hidden: the same words are the bar's aria-valuetext, and reading them\n            // twice in a row is noise.\n            <span aria-hidden className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n              {valueText}\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        {...rest}\n        role={meter ? \"meter\" : \"progressbar\"}\n        aria-label={name}\n        aria-labelledby={labelledBy}\n        aria-valuemin={indeterminate ? undefined : min}\n        aria-valuemax={indeterminate ? undefined : max}\n        aria-valuenow={clamped}\n        aria-valuetext={valueText}\n        aria-busy={!meter && indeterminate ? true : undefined}\n        // `relative` + `overflow-hidden`: the indeterminate segment is positioned in\n        // here and must not paint past the rounded ends.\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]\", TRACK_HEIGHT[size])}\n      >\n        {indeterminate ? (\n          <div\n            data-part=\"fill\"\n            className={cn(\n              // `left-0`, deliberately physical: the keyframes (tokens.css\n              // `indeterminate-sweep`) translate along the physical x axis, and under\n              // RTL the same keyframes are run in REVERSE — from the right edge back\n              // to the left. A logical `start-0` would park the segment at the right\n              // in RTL and the reversed sweep would then start off-screen.\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]\",\n              \"motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50\",\n              FILL[tone],\n            )}\n          />\n        ) : (\n          <div\n            data-part=\"fill\"\n            // Block flow starts at the inline start, so a plain width fills from the\n            // right under `dir=\"rtl\"` with nothing extra.\n            className={cn(\"h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none\", FILL[tone])}\n            style={{ width: `${fraction * 100}%` }}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAkIQ,SAEI,KAFJ;AAlIR,SAAS,aAAa;AAEtB,SAAS,UAAU;AACnB,SAAS,uBAAuB,cAAc,oBAAoB;AA2BlE,MAAM,OAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,MAAM,eAAgD,EAAE,IAAI,OAAO,MAAM,SAAS,IAAI,OAAO,IAAI,MAAM;AAiDhG,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,YAAY,aAAa,MAAM;AACrC,QAAM,UAAU,MAAM;AAEtB,QAAM,QAAQ,YAAY;AAC1B,QAAM,UAAU,UAAU,UAAa,CAAC,OAAO,SAAS,KAAK,IAAK,QAAQ,MAAM,SAAa;AAC7F,QAAM,gBAAgB,YAAY;AAClC,QAAM,OAAO,MAAM;AACnB,QAAM,UAAU,gBAAgB,SAAY,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,OAAO,CAAC;AAChF,QAAM,WAAW,YAAY,UAAa,QAAQ,IAAI,KAAK,UAAU,OAAO;AAE5E,QAAM,YACJ,YAAY,SACR,SACA,cACE,YAAY,SAAS,KAAK,GAAG,IAC7B,IAAI,KAAK,aAAa,WAAW,EAAE,OAAO,WAAW,uBAAuB,EAAE,CAAC,EAAE,OAAO,QAAQ;AAExG,QAAM,aAAa,mBAAmB,SAAS,OAAO,UAAU;AAChE,QAAM,OAAO,aAAa,SAAa,cAAc,gBAAgB,OAAO,UAAU;AAEtF,SACE,qBAAC,SAAI,WAAW,GAAG,WAAW,SAAS,GAAG,cAAY,gBAAgB,kBAAkB,eACpF;AAAA,cAAS,QAAS,aAAa,cAAc,WAC7C,qBAAC,SAAI,WAAU,0CACZ;AAAA,eAAS,QACR,oBAAC,UAAK,IAAI,SAAS,WAAU,wCAC1B,iBACH;AAAA,MAED,aAAa,cAAc;AAAA;AAAA,MAG1B,oBAAC,UAAK,eAAW,MAAC,WAAU,0DACzB,qBACH;AAAA,OAEJ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAM,QAAQ,UAAU;AAAA,QACxB,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,aAAW,CAAC,SAAS,gBAAgB,OAAO;AAAA,QAG5C,WAAW,GAAG,sEAAsE,aAAa,IAAI,CAAC;AAAA,QAErG,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMT;AAAA,cACA;AAAA,cACA;AAAA,cACA,KAAK,IAAI;AAAA,YACX;AAAA;AAAA,QACF,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YAGV,WAAW,GAAG,qFAAqF,KAAK,IAAI,CAAC;AAAA,YAC7G,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI;AAAA;AAAA,QACvC;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/**\n * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the\n * names `Chip`, `StatTile` and `Sparkline` already use for them: a share bar of what\n * came in or went out is money, and painting it `success` / `warning` said \"good\" and\n * \"careful\" about a figure that is neither. keksdose's report meters (food-group-card,\n * drilldown-modal) sit beside amounts that are already in the money colours.\n */\nexport type ProgressBarTone =\n  | \"brand\"\n  | \"neutral\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\"\n  | \"income\"\n  | \"expense\";\n/**\n * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a\n * letter because the letters are taken in order — an `xs` at 6px would be THICKER than\n * `sm` — and renaming `sm` would move every bar already on it. 6px is the Slider's\n * track and keksdose's hand-drawn meters (`h-1.5`, landing-visuals), for a bar under a\n * line of text where 8px outweighs the text.\n */\nexport type ProgressBarSize = \"sm\" | \"slim\" | \"md\" | \"lg\";\n\nconst FILL: Record<ProgressBarTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: \"h-1\", slim: \"h-1.5\", md: \"h-2\", lg: \"h-3\" };\n\n// A segment with no tone of its own takes the next categorical chart colour, so a\n// stacked bar of unnamed parts is still a set of tellable parts rather than one fill.\nconst SERIES_FILL = [\n  \"bg-[var(--chart-1)]\",\n  \"bg-[var(--chart-2)]\",\n  \"bg-[var(--chart-3)]\",\n  \"bg-[var(--chart-4)]\",\n  \"bg-[var(--chart-5)]\",\n  \"bg-[var(--chart-6)]\",\n  \"bg-[var(--chart-7)]\",\n  \"bg-[var(--chart-8)]\",\n  \"bg-[var(--chart-9)]\",\n];\n\n/** Each segment's fill classes: its own classes, else its tone, else (with no `color`)\n *  the next chart colour. \"Next\" counts the UNCOLOURED segments only — a segment with\n *  its own `className`/`tone`/`color` does not use up `--chart-1`, so an \"Other\" in grey\n *  ahead of two plain parts leaves them `--chart-1` and `--chart-2`. */\nfunction segmentFills(segments: ProgressBarSegment[]): Array<string | undefined> {\n  let next = 0;\n  return segments.map((seg) => {\n    if (seg.className) return seg.className;\n    if (seg.tone) return FILL[seg.tone];\n    return seg.color ? undefined : SERIES_FILL[next++ % SERIES_FILL.length];\n  });\n}\n\n/** One part of a stacked bar. See {@link ProgressBarProps.segments}. */\nexport interface ProgressBarSegment {\n  /** Its size, on the bar's own `min`–`max` scale. */\n  value: number;\n  /** A kit tone. Left out (and no `color`/`className`), the next `--chart-N` colour. */\n  tone?: ProgressBarTone;\n  /** Any CSS colour (`var(--token)`), for a palette the tones do not cover. Wins over `tone`. */\n  color?: string;\n  /** Classes for the segment's fill — keksdose's `STEP_CLASS` ramp. Wins over `tone`. */\n  className?: string;\n  /** The part's name: said in the bar's `aria-valuetext` and shown in the legend. */\n  label?: ReactNode;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n}\n\nexport interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way\n   *  and nobody knows how much is left (an import that reports no count). */\n  value?: number;\n  min?: number;\n  max?: number;\n  /**\n   * `progress` (default): a task moving toward completion — `role=\"progressbar\"`.\n   * `meter`: a share of a known whole that is not going anywhere (budget used, disk\n   * space, one category's slice of spending) — `role=\"meter\"`. keksdose's share bars\n   * were progress bars to a screen reader, which reads \"busy\" into a figure that is\n   * simply a figure. A meter is never indeterminate; a missing value reads as `min`.\n   */\n  variant?: \"progress\" | \"meter\";\n  /** Visible label above the bar, and its accessible name. Without it, pass\n   *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */\n  label?: ReactNode;\n  /** Show the value text at the end of the label row. */\n  showValue?: boolean;\n  /**\n   * The value as words — both the visible `showValue` text and `aria-valuetext`.\n   * Default: the fraction as a percentage in the kit's locale (\"42 %\" in French).\n   * Pass one for anything that is not a percentage: `(v, max) => \\`${v} of ${max} files\\``.\n   */\n  formatValue?: (value: number, max: number, min: number) => string;\n  tone?: ProgressBarTone;\n  size?: ProgressBarSize;\n  locale?: string;\n  /**\n   * Draw a METER OF PARTS: one bar, several fills side by side in order, a 2px gap\n   * between them — keksdose's discretionary-spending bar (cut-card:133), a whole\n   * split into the steps of a scale. Forces `variant=\"meter\"`: parts of a whole are\n   * never \"busy\". `aria-valuenow` is the sum; `aria-valuetext` names every part\n   * (\"Rent: 40%, Food: 25%\"), each part's value through `formatValue` and joined in the\n   * kit's locale — the words keksdose's hand-drawn bar had to hide from a reader\n   * altogether, leaving the legend as the only way in. The sum is clamped to `max`,\n   * and parts past it are cut off at the track's end.\n   */\n  segments?: ProgressBarSegment[];\n  /** With `segments`: a list under the bar naming each part with its swatch and value\n   *  — the table view of the bar, in text tokens rather than the segment colour. */\n  legend?: boolean;\n}\n\n/**\n * A horizontal bar that fills toward `max`.\n *\n * keksdose (import progress, budget share bars) and kastlan (upload and job\n * progress) each drew their own div-in-a-div. None had a role, so a reader heard\n * nothing at all; the share bars that did have one claimed to be progress.\n *\n * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow=\"37\"`\n * is read as \"37\" by some readers and \"37 percent\" by others, and neither is right\n * when `max` is 212 files.\n *\n * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,\n * half-strength bar across the whole track — still visibly \"something is happening\",\n * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than\n * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an\n * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.\n */\nexport function ProgressBar({\n  value,\n  min = 0,\n  max = 100,\n  variant = \"progress\",\n  label,\n  showValue = false,\n  formatValue,\n  tone = \"brand\",\n  size = \"md\",\n  locale,\n  segments,\n  legend = false,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...rest\n}: ProgressBarProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const kitLocale = useKitLocale(locale);\n  const labelId = useId();\n\n  const stacked = segments !== undefined;\n  const meter = stacked || variant === \"meter\";\n  const span = max - min;\n  const partValue = (v: number) => (Number.isFinite(v) ? Math.max(0, v - min) : 0);\n  const fills = stacked ? segmentFills(segments) : [];\n  const partTotal = stacked ? min + segments.reduce((sum, seg) => sum + partValue(seg.value), 0) : undefined;\n  const format = (v: number) =>\n    formatValue\n      ? formatValue(v, max, min)\n      : new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(\n          span <= 0 ? 0 : (Math.min(max, Math.max(min, v)) - min) / span,\n        );\n  const partTexts = stacked\n    ? segments.map((seg) => {\n        const text = format(min + partValue(seg.value));\n        return typeof seg.label === \"string\" || typeof seg.label === \"number\"\n          ? common.fieldValue(String(seg.label), text)\n          : text;\n      })\n    : [];\n  const current =\n    partTotal ?? (value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value);\n  const indeterminate = current === undefined;\n  const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));\n  const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;\n\n  const valueText = clamped === undefined ? undefined : format(clamped);\n  const ariaValueText =\n    stacked && partTexts.length > 0\n      ? new Intl.ListFormat(kitLocale, { style: \"short\", type: \"unit\" }).format(partTexts)\n      : valueText;\n\n  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : undefined);\n  const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-state={indeterminate ? \"indeterminate\" : \"determinate\"}>\n      {(label != null || (showValue && valueText !== undefined)) && (\n        <div className=\"mb-1 flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          {showValue && valueText !== undefined && (\n            // Hidden: the same words are the bar's aria-valuetext, and reading them\n            // twice in a row is noise.\n            <span aria-hidden className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n              {valueText}\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        {...rest}\n        role={meter ? \"meter\" : \"progressbar\"}\n        aria-label={name}\n        aria-labelledby={labelledBy}\n        aria-valuemin={indeterminate ? undefined : min}\n        aria-valuemax={indeterminate ? undefined : max}\n        aria-valuenow={clamped}\n        aria-valuetext={ariaValueText}\n        aria-busy={!meter && indeterminate ? true : undefined}\n        // `relative` + `overflow-hidden`: the indeterminate segment is positioned in\n        // here and must not paint past the rounded ends.\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]\", TRACK_HEIGHT[size])}\n      >\n        {stacked ? (\n          // The parts in a flex row with a 2px gap, so two neighbouring steps of one\n          // hue are parted by the track rather than by their difference in lightness.\n          <div className=\"flex h-full w-full gap-0.5\">\n            {segments.map((seg, i) => (\n              <div\n                key={seg.key ?? i}\n                data-part=\"segment\"\n                className={cn(\n                  \"h-full shrink-0 rounded-full transition-[width] duration-300 motion-reduce:transition-none\",\n                  fills[i],\n                )}\n                style={{\n                  width: `${span <= 0 ? 0 : (partValue(seg.value) / span) * 100}%`,\n                  backgroundColor: seg.className ? undefined : seg.color,\n                }}\n              />\n            ))}\n          </div>\n        ) : indeterminate ? (\n          <div\n            data-part=\"fill\"\n            className={cn(\n              // `left-0`, deliberately physical: the keyframes (tokens.css\n              // `indeterminate-sweep`) translate along the physical x axis, and under\n              // RTL the same keyframes are run in REVERSE — from the right edge back\n              // to the left. A logical `start-0` would park the segment at the right\n              // in RTL and the reversed sweep would then start off-screen.\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]\",\n              \"motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50\",\n              FILL[tone],\n            )}\n          />\n        ) : (\n          <div\n            data-part=\"fill\"\n            // Block flow starts at the inline start, so a plain width fills from the\n            // right under `dir=\"rtl\"` with nothing extra.\n            className={cn(\"h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none\", FILL[tone])}\n            style={{ width: `${fraction * 100}%` }}\n          />\n        )}\n      </div>\n      {stacked && legend && segments.length > 0 && (\n        <ul className=\"mt-2 space-y-1 text-sm\" data-part=\"legend\">\n          {segments.map((seg, i) => (\n            <li key={seg.key ?? i} className=\"flex items-center gap-2\">\n              <span\n                aria-hidden\n                className={cn(\n                  \"size-2.5 shrink-0 rounded-sm\",\n                  fills[i],\n                )}\n                style={{ backgroundColor: seg.className ? undefined : seg.color }}\n              />\n              {seg.label != null && (\n                <span className=\"min-w-0 flex-1 truncate text-[var(--text-secondary)]\">{seg.label}</span>\n              )}\n              <span className=\"ms-auto shrink-0 text-xs tabular-nums text-[var(--text-muted)]\">\n                {format(min + partValue(seg.value))}\n              </span>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/series-chart-labels.d.ts

@@ -8,6 +8,9 @@ interface SeriesChartLabels {
     empty: string;
     /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */
     legend: string;
+    /** Accessible name of the group of keyboard stops a clickable chart (`onPointClick`)
+     *  lays over its bars or periods — one tab stop, arrow keys between them. */
+    points: string;
 }
 declare const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels;
 

package/dist/components/series-chart-labels.js

@@ -3,7 +3,8 @@ const DEFAULT_SERIES_CHART_LABELS = {
   resetZoom: "Reset zoom",
   zoomHint: "Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.",
   empty: "No data",
-  legend: "Series"
+  legend: "Series",
+  points: "Chart values"
 };
 export {
   DEFAULT_SERIES_CHART_LABELS

package/dist/components/series-chart-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/series-chart-labels.ts"],"sourcesContent":["// All user-facing strings for the series chart family — `SeriesChart`, its drag-to-zoom\n// layer and `ToggleLegend` — as the `seriesChart` namespace of `<UiKitProvider labels>`,\n// and per chart the `labels` prop over that.\n//\n// A module of its own, with no recharts in it, so the label registry (src/i18n) can\n// import the defaults without pulling the chart library in behind them.\n\nexport interface SeriesChartLabels {\n  /** The button that puts a zoomed chart back to its full extent. Visible text. */\n  resetZoom: string;\n  /** Accessible name of the drag surface laid over the plot. It is the only place the\n   *  gesture is explained, so it says how the drag is read and how to undo it. */\n  zoomHint: string;\n  /** What a chart with nothing to draw says, when the caller passes no `empty`. */\n  empty: string;\n  /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */\n  legend: string;\n}\n\nexport const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels = {\n  resetZoom: \"Reset zoom\",\n  zoomHint:\n    \"Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.\",\n  empty: \"No data\",\n  legend: \"Series\",\n};\n"],"mappings":";AAmBO,MAAM,8BAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,UACE;AAAA,EACF,OAAO;AAAA,EACP,QAAQ;AACV;","names":[]}
+{"version":3,"sources":["../../src/components/series-chart-labels.ts"],"sourcesContent":["// All user-facing strings for the series chart family — `SeriesChart`, its drag-to-zoom\n// layer and `ToggleLegend` — as the `seriesChart` namespace of `<UiKitProvider labels>`,\n// and per chart the `labels` prop over that.\n//\n// A module of its own, with no recharts in it, so the label registry (src/i18n) can\n// import the defaults without pulling the chart library in behind them.\n\nexport interface SeriesChartLabels {\n  /** The button that puts a zoomed chart back to its full extent. Visible text. */\n  resetZoom: string;\n  /** Accessible name of the drag surface laid over the plot. It is the only place the\n   *  gesture is explained, so it says how the drag is read and how to undo it. */\n  zoomHint: string;\n  /** What a chart with nothing to draw says, when the caller passes no `empty`. */\n  empty: string;\n  /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */\n  legend: string;\n  /** Accessible name of the group of keyboard stops a clickable chart (`onPointClick`)\n   *  lays over its bars or periods — one tab stop, arrow keys between them. */\n  points: string;\n}\n\nexport const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels = {\n  resetZoom: \"Reset zoom\",\n  zoomHint:\n    \"Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.\",\n  empty: \"No data\",\n  legend: \"Series\",\n  points: \"Chart values\",\n};\n"],"mappings":";AAsBO,MAAM,8BAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,UACE;AAAA,EACF,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AACV;","names":[]}

package/dist/components/series-chart.d.ts

@@ -75,6 +75,18 @@ interface SeriesChartSeries {
     activeDot?: boolean | {
         r?: number;
     };
+    /**
+     * The shortest a bar of this series is drawn, in px — recharts' `minPointSize`. A
+     * zero or a value too small to see keeps a visible stub, so an empty slot still reads
+     * as a slot with a value rather than a gap: keksdose's weekday pattern, where a
+     * Sunday with no spending drew a 2% stub by hand. Only the DRAWING changes: the axis
+     * is fitted to the values, and the tooltip, the keyboard stops and every accessible
+     * name still say 0. A hole (no value in the row) stays a hole. Overrides the chart's
+     * {@link SeriesChartProps.minBarLength}; `0` turns it off for this series. Meant for
+     * unstacked bars — in a `stack` the stub is drawn over the layer above it. Lines and
+     * areas ignore it.
+     */
+    minBarLength?: number;
 }
 /** What a series draws. See {@link SeriesChartSeries.type}. */
 type SeriesChartType = "line" | "bar" | "area";
@@ -144,6 +156,22 @@ interface SeriesChartAxisShape {
      * a hairline). A pinned `domain` is left alone either way.
      */
     includeZero?: boolean;
+    /**
+     * Tick only on whole numbers — the y counterpart of `SeriesChartX.integerTicks`, and
+     * what keksdose's user-count axis (`metrics-panel.tsx`, `wholeTicks`) and its runway
+     * in days (`cash-buffer-chart.tsx`, `wholeDayTicks`) each wrote by hand: a band of
+     * [0, 3.1] users is ticked 0 1 2 3, not 0 0.5 1 … 3, and a short runway is not ticked
+     * 0 / 0.5 / 1 under a rounding formatter that prints "1" twice. A (zoom) window that
+     * holds no whole number falls back to the ordinary ticks rather than to none.
+     *
+     * AUTOMATIC by default — on when every value this axis carries is a whole number
+     * (counts), because that is where a half tick is a value no sample can have, and it
+     * changes nothing on a span wider than about eight, which already ticks on whole
+     * steps. `true` forces it over fractional data (days of runway computed as 43.7);
+     * `false` keeps fractional ticks for a continuous quantity that merely happens to be
+     * whole in this sample. `tickValues` wins over either.
+     */
+    integerTicks?: boolean;
 }
 /**
  * A y axis — and a VISIBLE one says what it measures.
@@ -406,6 +434,10 @@ interface SeriesChartProps {
     locale?: string;
     /** Onto the chart's root (`ChartContainer`) — e.g. an app's own grid ink. */
     className?: string;
+    /** The shortest bar drawn, in px, for every bar series that does not set its own
+     *  {@link SeriesChartSeries.minBarLength}. Drawing only: domain, tooltip and names
+     *  keep the real value. Default: none — a zero draws nothing. */
+    minBarLength?: number;
 }
 /** How much of an axis band the rotated title takes, in px. Reserved rather than
  *  shared with the ticks: a title merely offset inside the band prints on top of a

package/dist/components/series-chart.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, useRef, useState } from "react";
 import {
   Area,
   Bar,
@@ -10,8 +10,11 @@ import {
   Line,
   ReferenceDot,
   ReferenceLine,
+  Rectangle,
   XAxis,
-  YAxis
+  YAxis,
+  usePlotArea,
+  useXAxisScale
 } from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import {
@@ -196,6 +199,77 @@ const TIME_TICK_FORMAT = {
 const LINE_WIDTH = 2;
 const STEP_WIDTH = 1.5;
 const BAR_RADIUS = [3, 3, 0, 0];
+function focusedBarShape(index) {
+  return function FocusedBar(props) {
+    const focused = props.originalDataIndex === index;
+    return /* @__PURE__ */ jsx(Rectangle, { ...props, ...focused ? { stroke: "var(--text-primary)", strokeWidth: 2 } : {} });
+  };
+}
+function PointKeys({
+  stops,
+  current,
+  label,
+  onFocusStop,
+  onBlurStops,
+  onPick
+}) {
+  const plot = usePlotArea();
+  const scale = useXAxisScale();
+  const refs = useRef([]);
+  if (!plot || !scale || plot.width <= 0 || plot.height <= 0) return null;
+  const move = (at) => {
+    const next = Math.max(0, Math.min(stops.length - 1, at));
+    refs.current[next]?.focus();
+  };
+  const onKeyDown = (at) => (event) => {
+    const stop = stops[at];
+    const inSlot = (step) => stops[at + step]?.index === stop.index ? at + step : at;
+    const target = event.key === "ArrowRight" ? at + 1 : event.key === "ArrowLeft" ? at - 1 : event.key === "ArrowDown" ? inSlot(1) : event.key === "ArrowUp" ? inSlot(-1) : event.key === "Home" ? 0 : event.key === "End" ? stops.length - 1 : void 0;
+    if (target !== void 0) {
+      event.preventDefault();
+      move(target);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onPick(stop);
+    }
+  };
+  const left = plot.x;
+  const right = plot.x + plot.width;
+  return /* @__PURE__ */ jsx("g", { role: "group", "aria-label": label, children: stops.map((stop, at) => {
+    const a = finite(scale(stop.from)) ?? left;
+    const b = finite(scale(stop.to)) ?? right;
+    const x0 = Math.max(left, Math.min(a, b));
+    const x1 = Math.min(right, Math.max(a, b));
+    return /* @__PURE__ */ jsx(
+      "rect",
+      {
+        ref: (node) => {
+          refs.current[at] = node;
+        },
+        role: "button",
+        tabIndex: at === current ? 0 : -1,
+        "aria-label": stop.name,
+        "data-point-key": stop.key,
+        x: x0,
+        y: plot.y,
+        width: Math.max(0, x1 - x0),
+        height: plot.height,
+        fill: "transparent",
+        pointerEvents: "none",
+        strokeWidth: 2,
+        className: cn(
+          "outline-none focus-visible:fill-[var(--brand)]/10",
+          // A bar outlines ITSELF (see `FOCUSED_BAR`); a slot has nothing else to.
+          stop.key === void 0 && "focus-visible:stroke-[var(--brand)]"
+        ),
+        onFocus: () => onFocusStop(at),
+        onBlur: onBlurStops,
+        onKeyDown: onKeyDown(at)
+      },
+      `${stop.index}:${stop.key ?? ""}`
+    );
+  }) });
+}
 function SeriesPlot({
   model,
   xAxis,
@@ -214,11 +288,14 @@ function SeriesPlot({
   zoom,
   labels: labelsProp,
   locale: localeProp,
-  className
+  className,
+  minBarLength
 }) {
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const number = useDefaultFormat(localeProp);
+  const [keyStop, setKeyStop] = useState(0);
+  const [keyFocus, setKeyFocus] = useState(void 0);
   const heightClass = typeof height === "string" ? height : void 0;
   const heightStyle = typeof height === "number" ? { height } : void 0;
   if (!model.source.length || !series.length) {
@@ -300,6 +377,12 @@ function SeriesPlot({
   const anchored = (axis) => axis.includeZero ?? series.some(
     (entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id && (entry.type ?? "line") !== "line"
   );
+  const wholeOnly = (axis) => axis.integerTicks ?? series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id).every(
+    (entry) => plotted.every((row) => {
+      const value = finite(row[entry.key]);
+      return value === void 0 || Number.isInteger(value);
+    })
+  );
   const onAxis = (axisId) => (ref) => (ref.axis ?? DEFAULT_Y_AXIS) === axisId;
   const fittedY = (axis) => {
     const own = [
@@ -317,6 +400,38 @@ function SeriesPlot({
     const row = rows[index];
     return row ? { index, row, x: xOf(index), key } : void 0;
   };
+  const stops = [];
+  if (onPointClick) {
+    const valueText = valueFormat ?? number;
+    const nameOf = (entry) => typeof entry.label === "string" || typeof entry.label === "number" ? String(entry.label) : entry.key;
+    const said = (entry, value) => {
+      const name = nameOf(entry);
+      return name ? `${name}: ${valueText(value)}` : valueText(value);
+    };
+    const bars = series.filter((entry) => entry.type === "bar");
+    const [low, high] = fittedX ?? [-Infinity, Infinity];
+    const placed = plotted.map((row, index) => ({ index, at: model.kind === "category" ? index : finite(row[xKey]) })).filter((slot) => slot.at !== void 0 && slot.at >= low && slot.at <= high).sort((a, b) => a.at - b.at);
+    placed.forEach(({ index, at }, k) => {
+      const from = k > 0 ? (placed[k - 1].at + at) / 2 : low;
+      const to = k < placed.length - 1 ? (placed[k + 1].at + at) / 2 : high;
+      const heading = xLabel(at);
+      const where = typeof heading === "string" && heading ? heading : xFormat(at);
+      const valued = (bars.length ? bars : series).map((entry) => ({ entry, value: finite(rows[index]?.[entry.key]) })).filter((cell) => cell.value !== void 0);
+      if (bars.length) {
+        for (const { entry, value } of valued) {
+          stops.push({ index, key: entry.key, from, to, name: `${where} \u2014 ${said(entry, value)}` });
+        }
+      } else if (valued.length) {
+        stops.push({
+          index,
+          from,
+          to,
+          name: `${where} \u2014 ${valued.map(({ entry, value }) => said(entry, value)).join(", ")}`
+        });
+      }
+    });
+  }
+  const focusedStop = keyFocus === void 0 ? void 0 : stops[keyFocus];
   const dotFor = (entry) => {
     const want = entry.dot;
     if (!want) return false;
@@ -371,6 +486,7 @@ function SeriesPlot({
           data: plotted,
           margin,
           stackOffset: "sign",
+          accessibilityLayer: !onPointClick,
           onClick: onPointClick ? (state) => {
             const index = Number(state?.activeTooltipIndex ?? state?.activeIndex);
             const hit = Number.isInteger(index) ? hitAt(index) : void 0;
@@ -413,7 +529,7 @@ function SeriesPlot({
                   yAxisId: axis.id,
                   hide: axis.hide,
                   domain,
-                  ticks: resolveTicks(axis.tickValues, domain, finite) ?? niceTicks(domain),
+                  ticks: resolveTicks(axis.tickValues, domain, finite) ?? (wholeOnly(axis) ? integerTicks(domain) ?? niceTicks(domain) : niceTicks(domain)),
                   allowDataOverflow: zoomed,
                   orientation: axis.orientation ?? "left",
                   width: axisBandWidth(axis.width, Boolean(axis.title) && !axis.hide),
@@ -441,6 +557,7 @@ function SeriesPlot({
               {
                 ...tooltip?.allowEscapeViewBox || tooltip?.boundary ? { allowEscapeViewBox: tooltip.allowEscapeViewBox ?? { x: true } } : {},
                 ...tooltip?.boundary ? { offset: 0 } : {},
+                defaultIndex: focusedStop?.index,
                 content: /* @__PURE__ */ jsx(
                   ChartTooltipContent,
                   {
@@ -460,6 +577,7 @@ function SeriesPlot({
               const curve = entry.step ? "stepAfter" : entry.curve ?? "monotone";
               const width = entry.strokeWidth ?? (entry.step ? STEP_WIDTH : LINE_WIDTH);
               if (type === "bar") {
+                const stub = entry.minBarLength ?? minBarLength;
                 return /* @__PURE__ */ jsx(
                   Bar,
                   {
@@ -469,6 +587,8 @@ function SeriesPlot({
                     fill: color,
                     fillOpacity: entry.fillOpacity,
                     radius: entry.stack === void 0 ? BAR_RADIUS : 0,
+                    ...stub ? { minPointSize: (_value, index) => finite(plotted[index]?.[entry.key]) === void 0 ? 0 : stub } : {},
+                    ...focusedStop?.key === entry.key ? { shape: focusedBarShape(focusedStop.index) } : {},
                     onClick: onPointClick ? (_bar, index, event) => {
                       event.stopPropagation();
                       const hit = hitAt(index, entry.key);
@@ -581,6 +701,23 @@ function SeriesPlot({
                 marker.key ?? `marker-${index}`
               );
             }),
+            stops.length > 0 && /* @__PURE__ */ jsx(
+              PointKeys,
+              {
+                stops,
+                current: Math.min(keyStop, stops.length - 1),
+                label: labels.points,
+                onFocusStop: (at) => {
+                  setKeyStop(at);
+                  setKeyFocus(at);
+                },
+                onBlurStops: () => setKeyFocus(void 0),
+                onPick: (stop) => {
+                  const hit = hitAt(stop.index, stop.key);
+                  if (hit) onPointClick?.(hit);
+                }
+              }
+            ),
             zoom?.layer
           ]
         }