@actioneer/ads 1.0.8 → 1.0.9

package/DESIGN.md

@@ -179,7 +179,7 @@ components:
 
 TASTE.md puts it in one line: On a quiet, neutral ground, colour and motion are spent like money — rarely, deliberately, and only where the eye should go.
 
-ADS 1.0.8 is a library first and a look second. 323 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 11 principles rather than re-deciding it per screen.
+ADS 1.0.9 is a library first and a look second. 325 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 15 principles rather than re-deciding it per screen.
 
 The ground is warm grey and the ink is warm near-black. One hue is spent by default, the Studio teal CTA family, and four more carry semantic status. Everything else stays neutral. A consumer product may narrow that further, and one already does: Baby Sentinel drops the teal and runs every action on ink.
 
@@ -385,7 +385,7 @@ Soft geometry on a 5-step ladder: `xs` 2px, `sm` 4px, `md` 6px, `lg` 8px, `xl` 8
 
 ## Components
 
-The catalog is the contract: 323 components, 10 hooks and 98 utilities behind one barrel (`@actioneer/ads`). Import exact, unaliased names. Native elements are for semantic structure only: `<div>`, `<form>`, `<main>`, `<section>`. Never recreate a visual control.
+The catalog is the contract: 325 components, 10 hooks and 98 utilities behind one barrel (`@actioneer/ads`). Import exact, unaliased names. Native elements are for semantic structure only: `<div>`, `<form>`, `<main>`, `<section>`. Never recreate a visual control.
 
 ### Sourcing a component
 
@@ -513,9 +513,9 @@ Hand-rolling a visual control, or importing a UI library at a call site, is neve
 
 **The ADS First Rule.** Every UI decision stays synchronized with ADS. Search the full catalog before deciding a component is missing, and use the exact exported name from the public barrel. When the barrel genuinely has no primitive, the sanctioned fallback is a shadcn/ui component vendored into src/components/ui through the repo's components.json recipe — never a hand-rolled control and never a UI library imported at a call site. Enforced by `npm run lint:ads`.
 
-**The Back Leads Rule.** A page-level Back control sits immediately before the page title in the leading header cluster. It is icon-only with an accessible label and never appears on the right with forward/page actions.
+**The Back Leads Rule.** A record or drill-down page (a campaign inside Voice campaigns, a connector inside Data Integrations) is titled by its Breadcrumbs trail — parent / record at 16px — with no back arrow and no repeated H1; the page's one primary action sits at the right end of the same row. A standalone page-level Back control, when one is needed outside a hierarchy, sits immediately before the title and never on the right.
 
-**The Tabs Lead, Search Trails Rule.** When tabs and a search field control the same content, they share one responsive control row: the tab list leads with its triggers left-aligned at their natural width over a baseline that fades from WG3 to transparent, and search sits at the trailing edge. Stack only when the container cannot fit both.
+**The Tabs Lead, Search Trails Rule.** When tabs and a search field control the same content, they share one responsive control row: the tab list leads with its triggers left-aligned at their natural width over a baseline that fades from WG3 to transparent, and search sits at the trailing edge. On collection screens the trailing controls are icon triggers — SearchDisclosure (expands into the field) then Filters — and tab labels are 14px with a quieter count after each label.
 
 ## Do's and Don'ts
 
@@ -550,14 +550,33 @@ Every line below is a `do` or `dont` recorded on a principle in `ads-manifest.js
 - **Do** prefer more, smaller steps over dense ones; ask one thing at a time. *(minimal-information)*
 - **Do** derive instead of asking whenever possible (a name from a work email, the company from its domain). *(minimal-information)*
 - **Do** prefer clear text-only buttons; add an icon only when it communicates essential meaning the label cannot carry alone, or for a compact conventional icon-only control. *(minimal-information)*
-- **Do** render multi-step flows full-screen — a single content container that holds the inputs and its own Back/Continue is fine. *(minimal-information)*
+- **Do** open a multi-step create task launched from a collection (New campaign) as a Modal over that list: title-only header, one scrolling form (for New campaign: Campaign name, Caller numbers, Audience), and Cancel + Create together in the footer — the user never loses their place. Add a Stepper only when the task truly has separate steps. Form modals use a fixed height (Modal height="fixed", 640px) so the frame never resizes: the header and footer stay put and ModalBody scrolls. Standalone onboarding flows render full-screen with a single content container holding the inputs and its own Back/Continue. *(minimal-information)*
 - **Do** use @container on the pane and @lg:/@xl: variants on children inside components. *(responsive-container-fluid)*
 - **Do** set pane widths in shells/pages through width tokens (thread-max-width, sidebar-width, aside-width, connector-card-min/-max). *(responsive-container-fluid)*
 - **Do** cap prose at its measure; let tables/charts/tool cards break out wider. Use auto-fill + minmax(min, 1fr) for grids. *(responsive-container-fluid)*
-- **Do** use PageHeader with onBack so the left arrow is anchored directly before the title. *(leading-back-navigation)*
-- **Do** reserve the trailing header area for forward or page-level actions such as Add, Save, or Share. *(leading-back-navigation)*
-- **Do** keep tab triggers left-aligned at their natural width, then place the scoped search field opposite them in the same toolbar. *(tabs-search-opposed)*
+- **Do** title a drill-down with Breadcrumbs (16px trail: muted parent links, Medium current item) and put its primary action (e.g. Pause campaign) right-aligned on the same row. *(leading-back-navigation)*
+- **Do** use PageHeader with onBack only for a standalone page that has no parent hierarchy to show. *(leading-back-navigation)*
+- **Do** reserve the trailing header area for forward or page-level actions such as Add, Save, Pause, or Share. *(leading-back-navigation)*
+- **Do** keep tab triggers left-aligned at their natural width, then place the scoped search opposite them in the same toolbar. *(tabs-search-opposed)*
+- **Do** on collection screens use SearchDisclosure followed by Filters as 32px icon triggers at the trailing edge; keep the page header for the title and one primary action only. *(tabs-search-opposed)*
+- **Do** give each status tab its count (All 42 · Active 14 · Paused 4); the count renders Regular in tertiary grey, teal on the active tab. *(tabs-search-opposed)*
 - **Do** on constrained containers, stack tabs first and search second while preserving their relationship. *(tabs-search-opposed)*
+- **Do** size the page so the rows fill the panel to its 24px bottom inset and Pagination sits at the bottom; let only the rows scroll. *(collection-screens)*
+- **Do** show row checkboxes only on hover/focus (and while checked or mixed); keep the header select-all checkbox always visible. *(collection-screens)*
+- **Do** when a row's details are open, mark it with TableRow isActive (the soft-teal fade) — no radio and no selection column for that purpose. *(collection-screens)*
+- **Do** put status in a Chip using business language (see status-language) and keep cell values at text-m. *(collection-screens)*
+- **Do** show the customer's workspace logo in the Sidebar brand slot (SidebarWorkspace) when the product runs inside a customer workspace. *(collection-screens)*
+- **Do** put the status Chip and its context ("Finished Oct 21") in the header, 4px under the title, so status never floats on its own. *(record-detail-panels)*
+- **Do** group numbers in small outlined stat cards (WG3 edge, radius-l, 12px padding, 8px apart) and the trend in its own chart card. *(record-detail-panels)*
+- **Do** list attributes (owner, started, calling windows) as label–value rows: label secondary left, value primary right, inset WG3 dividers. *(record-detail-panels)*
+- **Do** separate sections with 32px and keep items inside a section ≤16px apart; give each section a 14px Medium title. *(record-detail-panels)*
+- **Do** stat card: label (14px secondary) → number (32px) with its scope ("of 4,800 calls") 4px apart, then a Progress bar 12px below that fills the card width. *(analytics-surfaces)*
+- **Do** chart card: title (16px Medium) + scope subtitle (12px secondary) on the left, the legend right-aligned on the same row, ~40px from the title block to the plot. *(analytics-surfaces)*
+- **Do** bar charts print each bar's value; stacked bars print each segment that fits plus the stack total. Line charts print every point's value in the series colour (secondary grey for light amber/grey series). *(analytics-surfaces)*
+- **Do** size charts so the cards end on the panel's 24px bottom inset. *(analytics-surfaces)*
+- **Do** say Active, not Dialing; name the tab Active too (All · Draft · Active · Paused · Completed). *(status-language)*
+- **Do** use Chip tones consistently for the same status everywhere (table cell, detail header, filters). *(status-language)*
+- **Do** use the plain Chip appearance (square dot + 14px text) where a column of filled chips would shout louder than the record names. *(status-language)*
 
 ### Don't:
 
@@ -584,8 +603,23 @@ Every line below is a `do` or `dont` recorded on a principle in `ads-manifest.js
 - **Don't** nest panel/step-rail chrome inside a multi-step flow. *(minimal-information)*
 - **Don't** use sm:/md: viewport variants inside src/components, or hardcode a pane width there. *(responsive-container-fluid)*
 - **Don't** cap a grid at a hard column count so it stops growing on wide displays. *(responsive-container-fluid)*
+- **Don't** stack a back arrow and a large H1 above a page whose parent is already known — the breadcrumb says both. *(leading-back-navigation)*
 - **Don't** place Back on the right side of a page header. *(leading-back-navigation)*
 - **Don't** render a redundant visible Back label when the standard left arrow and accessible label are sufficient. *(leading-back-navigation)*
 - **Don't** stretch the tab track to fill the space between its labels and the search field. *(tabs-search-opposed)*
 - **Don't** put a scoped search field on a separate row above its tabs when both controls fit side by side. *(tabs-search-opposed)*
 - **Don't** place search before tabs in the reading or keyboard order. *(tabs-search-opposed)*
+- **Don't** put a Search button or a full-width search field in the page header of a collection screen. *(tabs-search-opposed)*
+- **Don't** leave an empty band under a short table, or float Pagination mid-panel. *(collection-screens)*
+- **Don't** use single-selection radios to mean 'this row is open'. *(collection-screens)*
+- **Don't** show a checkbox on every resting row of a multi-select table. *(collection-screens)*
+- **Don't** open record details in a modal over the list you are scanning. *(collection-screens)*
+- **Don't** mix attributes (owner) into the metric grid. *(record-detail-panels)*
+- **Don't** leave a lone chip or line of metadata between the title and the first section. *(record-detail-panels)*
+- **Don't** repeat the same fact (finish date) in the header and in Details. *(record-detail-panels)*
+- **Don't** separate stats with vertical hairlines while their bars run into the next stat — proximity breaks. *(analytics-surfaces)*
+- **Don't** hide numbers behind a hover tooltip. *(analytics-surfaces)*
+- **Don't** give a legend its own row under the subtitle when it fits beside the title. *(analytics-surfaces)*
+- **Don't** put the same spacing between a label and its value as between two separate cards. *(analytics-surfaces)*
+- **Don't** colour a status with the primary teal — it competes with the primary action and the selected-row fade. *(status-language)*
+- **Don't** use different words for the same state in the tab, the chip and the filter. *(status-language)*

package/README.md

@@ -158,9 +158,21 @@ Reference the semantic tokens (e.g. `bg-brand`, `text-muted-foreground`,
 
 **Sample screens:** full screens built only from ADS exports ship as readable
 source in `node_modules/@actioneer/ads/examples/` (`AgentsScreen`,
-`SettingsScreen`, `WorkspaceHeaderScreen`). Open them to see how components are
-meant to be composed, or copy one into your app and swap in your own data; the
-folder's `README.md` lists what each one shows.
+`SettingsScreen`, `WorkspaceHeaderScreen`, `CampaignsScreen`,
+`CampaignAnalysisScreen`). Open them to see how components are meant to be
+composed, or copy one into your app and swap in your own data; the folder's
+`README.md` lists what each one shows.
+
+**Screen recipes:** when you build a screen CLOSE to a collection (a list of
+records with a detail panel and a create modal) or a record's analytics page,
+start from `CampaignsScreen` / `CampaignAnalysisScreen` and follow the
+`collection-screens`, `record-detail-panels`, `analytics-surfaces` and
+`status-language` principles (`get_principles`) and the `collection-screen` /
+`record-analytics` productions (`get_ui_grammar`). In short: rows fill the panel
+with pagination at the bottom, row checkboxes on hover, `TableRow isActive` for
+the open row, status under the detail title, outlined stat and chart cards with
+legends in the title row and printed values, a 16px breadcrumb titling
+drill-downs, business-language statuses, and fixed-height form modals.
 
 Shared motion presets are named exports from `@actioneer/ads`. Components already
 include their own interaction motion; use the exported presets for additional
@@ -203,7 +215,7 @@ every consuming repo honest.
 
 ## Documentation and license
 
-- [Storybook: components and recipes](https://actioneer-ads-storybook.himanshu-563.workers.dev)
+- [Storybook: components](https://actioneer-ads-storybook.himanshu-563.workers.dev)
 - [ADS MCP: component discovery for coding agents](https://www.npmjs.com/package/@actioneer/ads-mcp)
 - Bundled references: `@actioneer/ads/manifest.json`, `@actioneer/ads/llms.txt`,
   and `@actioneer/ads/DESIGN.md`.

package/components/assistant-ui/composer-harness.js

@@ -39,6 +39,7 @@ import "react-aria-components";
 import "../autocomplete.js";
 import "../slider.js";
 import "../segmented.js";
+import "../filters.js";
 import "../modal.js";
 import "../drawer.js";
 import "../popover.js";
@@ -127,7 +128,7 @@ const m = "application/x-actioneer-harness", S = [
     instructions: "Write a concise executive brief: lead with the decision or insight, use only decision-relevant evidence, and end with the recommended next action."
   }
 ];
-function wi() {
+function Si() {
   const r = d(), t = u((i) => i.attachments), o = new Set(
     t.filter((i) => i.contentType === m).map((i) => i.name)
   ), s = (i) => {
@@ -170,7 +171,7 @@ function wi() {
     ] })
   ] });
 }
-class Si {
+class Ai {
   constructor() {
     p(this, "accept", m);
   }
@@ -203,7 +204,7 @@ ${o}
   }
 }
 export {
-  wi as ComposerHarness,
+  Si as ComposerHarness,
   m as HARNESS_MIME,
-  Si as HarnessAttachmentAdapter
+  Ai as HarnessAttachmentAdapter
 };

package/components/breadcrumbs.js

@@ -15,13 +15,13 @@ function B(a) {
   return null;
 }
 const C = r.forwardRef(
-  ({ className: a, children: n, sticky: e, actions: i, center: c, meta: f, ...p }, o) => {
+  ({ className: a, children: n, sticky: e, actions: i, center: c, meta: f, ...p }, l) => {
     const h = r.Children.toArray(n), b = r.useRef(null), m = r.useCallback(
       (s) => {
-        b.current = s, typeof o == "function" ? o(s) : o && (o.current = s);
+        b.current = s, typeof l == "function" ? l(s) : l && (l.current = s);
       },
-      [o]
-    ), [l, g] = r.useState(!1);
+      [l]
+    ), [o, g] = r.useState(!1);
     return r.useEffect(() => {
       if (!e) return;
       const s = B(b.current), u = s ?? window, v = () => g((s ? s.scrollTop : window.scrollY) > 2);
@@ -31,7 +31,7 @@ const C = r.forwardRef(
       {
         ref: m,
         "aria-label": "Breadcrumb",
-        "data-stuck": e ? l ? "true" : "false" : void 0,
+        "data-stuck": e ? o ? "true" : "false" : void 0,
         className: d(
           "relative flex w-full items-center",
           e && "sticky top-0 z-40 bg-card transition-[border-color] duration-150 ease-out motion-reduce:transition-none",
@@ -41,13 +41,13 @@ const C = r.forwardRef(
           // background over that gap (a no-op at rest, where the strip is the
           // panel's empty padding).
           e && "before:absolute before:inset-x-0 before:-top-8 before:h-8 before:bg-inherit before:content-['']",
-          e && (l ? "border-b border-border" : "border-b border-transparent"),
+          e && (o ? "border-b border-border" : "border-b border-transparent"),
           a
         ),
         ...p,
         children: [
           /* @__PURE__ */ x("div", { className: "flex min-w-0 shrink items-baseline", children: [
-            /* @__PURE__ */ t("ol", { className: "flex min-w-0 shrink items-center gap-1.5 text-base", children: /* @__PURE__ */ t(N.Provider, { value: { count: h.length }, children: h.map((s, u) => /* @__PURE__ */ t(w.Provider, { value: u, children: s }, u)) }) }),
+            /* @__PURE__ */ t("ol", { className: "flex min-w-0 shrink items-center gap-1.5 text-l", children: /* @__PURE__ */ t(N.Provider, { value: { count: h.length }, children: h.map((s, u) => /* @__PURE__ */ t(w.Provider, { value: u, children: s }, u)) }) }),
             f && /* @__PURE__ */ t("div", { className: "ml-3 flex shrink-0 items-baseline gap-3 text-s text-tertiary", children: f })
           ] }),
           c && /* @__PURE__ */ t("div", { className: "absolute left-1/2 top-1/2 z-50 flex -translate-x-1/2 -translate-y-1/2 items-center", children: c }),
@@ -59,15 +59,15 @@ const C = r.forwardRef(
 );
 C.displayName = "Breadcrumbs";
 const R = r.forwardRef(({ className: a, href: n, isCurrent: e, icon: i, children: c, ...f }, p) => {
-  const { count: o } = r.useContext(N), b = r.useContext(w) === o - 1, m = "inline-flex items-center gap-1.5", l = /* @__PURE__ */ x(k, { children: [
+  const { count: l } = r.useContext(N), b = r.useContext(w) === l - 1, m = "inline-flex items-center gap-1.5", o = /* @__PURE__ */ x(k, { children: [
     i && /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "flex shrink-0 items-center [&_svg]:size-4", children: i }),
     e ? /* @__PURE__ */ t("span", { className: "min-w-0 truncate", children: c }) : c
   ] }), g = e ? /* @__PURE__ */ t(
     "span",
     {
       "aria-current": "page",
-      className: d(m, "min-w-0 text-base font-medium text-primary"),
-      children: l
+      className: d(m, "min-w-0 text-l font-medium text-primary"),
+      children: o
     }
   ) : n ? /* @__PURE__ */ t(
     "a",
@@ -78,9 +78,9 @@ const R = r.forwardRef(({ className: a, href: n, isCurrent: e, icon: i, children
         "font-normal text-muted-foreground transition-colors hover:text-foreground",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm"
       ),
-      children: l
+      children: o
     }
-  ) : /* @__PURE__ */ t("span", { className: d(m, "text-muted-foreground"), children: l });
+  ) : /* @__PURE__ */ t("span", { className: d(m, "text-muted-foreground"), children: o });
   return /* @__PURE__ */ x(
     "li",
     {

package/components/button.d.ts

@@ -4,7 +4,22 @@ export declare const buttonVariants: (props?: ({
     variant?: "link" | "danger" | "outline" | "solid" | "secondary" | "ghost" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+/** Every accepted `size` value, including the deprecated aliases. */
+export type ButtonSize = "md" | "lg" | "icon" | "icon-sm" | "icon-xs"
+/** @deprecated Renders identically to `md` (32px). Use `md`. */
+ | "xs"
+/** @deprecated Renders identically to `md` (32px). Use `md`. */
+ | "sm";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, "size"> {
+    /**
+     * Button height. ADS has exactly two text-button heights: `md` (32px, the
+     * default) and `lg` (48px, 20px inline padding, radius-l). Icon-only sizes
+     * (`icon`, `icon-sm`, `icon-xs`) stay 32px tall.
+     *
+     * `xs` and `sm` are deprecated aliases kept for backward compatibility —
+     * they render identically to `md`.
+     */
+    size?: ButtonSize | null;
     isLoading?: boolean;
     startContent?: React.ReactNode;
     endContent?: React.ReactNode;

package/components/button.js

@@ -32,11 +32,14 @@ const x = v(
         danger: "bg-danger text-danger-foreground enabled:hover:bg-danger/90 enabled:active:bg-danger/90 focus-visible:ring-danger/40"
       },
       size: {
-        // Each size has its own height; the 14px Medium label never changes.
-        xs: "h-6 rounded-sm px-2 [&_svg]:size-3.5",
-        sm: "h-7 rounded-sm px-3 [&_svg]:size-4",
+        // ADS has exactly two button heights: md (32px, default) and lg
+        // (48px). The 14px Medium label never changes between them.
+        // xs/sm are deprecated aliases kept for backward compatibility —
+        // they render identically to md.
+        xs: "h-8 rounded-md px-3.5 [&_svg]:size-4",
+        sm: "h-8 rounded-md px-3.5 [&_svg]:size-4",
         md: "h-8 rounded-md px-3.5 [&_svg]:size-4",
-        lg: "h-10 rounded-md px-5 [&_svg]:size-5",
+        lg: "h-12 rounded-lg px-5 [&_svg]:size-5",
         icon: "h-8 w-9 rounded-md [&_svg]:size-4",
         "icon-sm": "h-8 w-8 rounded-sm [&_svg]:size-4",
         "icon-xs": "h-8 w-7 rounded-sm [&_svg]:size-4"

package/components/chart.d.ts

@@ -2,6 +2,8 @@ import * as React from "react";
 /** One row of chart data. Gaps (null/undefined) render as breaks in the series. */
 export type ChartDatum = Record<string, string | number | null | undefined>;
 export type ChartColor = "primary" | "success" | "warning" | "danger" | "info";
+/** Where a cartesian chart's series legend sits — see `BaseChartProps.legendPlacement`. */
+export type ChartLegendPlacement = "header" | "top";
 /** Bounded Recharts domain surface — enough for fixed and data-driven axes. */
 export type ChartAxisDomain = [string | number, string | number];
 export type ChartTickFormatter = (value: string | number) => string | number;
@@ -82,6 +84,22 @@ interface BaseChartProps {
     grid?: boolean;
     /** Defaults to on when there is more than one series. */
     legend?: boolean;
+    /**
+     * Chart title, rendered in the chart's own header row (16px Medium). Spend
+     * the words on what the plot measures; scope goes in `subtitle`.
+     */
+    title?: React.ReactNode;
+    /** Scope line under the title — count, range, share (e.g. "442 calls · past 7 days"). */
+    subtitle?: React.ReactNode;
+    /**
+     * Where the series legend sits.
+     *   • `"header"` — right-aligned at the end of the header row, opposite the
+     *     title block, with 36px between the header and the plot. The default
+     *     whenever a `title` or `subtitle` is set.
+     *   • `"top"` — its own right-aligned row directly above the plot (12px
+     *     gap). The default for an untitled chart (unchanged behavior).
+     */
+    legendPlacement?: ChartLegendPlacement;
     showYAxis?: boolean;
     formatValue?: (value: number) => string;
     /** Numeric/time x-axis scale. Time data must use numeric timestamps. */
@@ -103,9 +121,11 @@ export interface LineChartProps extends BaseChartProps {
     /** When set, only these series keys animate on mount/update. */
     animatedSeriesKeys?: string[];
     /**
-     * Print each observation's value above its dot. On by default for a SINGLE
-     * series (the reader shouldn't have to hover to read a number that fits);
-     * off once there are several, where the labels would collide.
+     * Print each observation's value above its dot — ON by default for every
+     * series, so the numbers read without hovering (tooltips still work). The
+     * label takes its series color; light series (amber chart-2, grey chart-6,
+     * the context grey) use the secondary text color for contrast. Resting
+     * labels step aside while the plot is hovered. Pass `false` to opt out.
      */
     showValues?: boolean;
 }
@@ -123,7 +143,14 @@ export interface BarChartProps extends BaseChartProps {
     stacked?: boolean;
     /** Visual bar direction: vertical columns (default) or horizontal bars. */
     layout?: "vertical" | "horizontal";
-    /** Print each bar's value past its end. On by default for a single series. */
+    /**
+     * Print values without hovering — ON by default (pass `false` to opt out).
+     * Single-series and grouped bars print their value past the bar's end in
+     * secondary text. Stacked bars print each segment's value centred inside it
+     * when the segment is at least 20px along the value axis (white ink on dark
+     * series, primary ink on light amber/grey), plus the stack total past the
+     * stack in Medium primary text. Tooltips still work on hover.
+     */
     showValues?: boolean;
 }
 export interface ComboChartProps extends BaseChartProps {