basalt-ui 1.20.0 → 1.21.0

package/dist/tokens/index.js

@@ -14,6 +14,8 @@ import { deriveRadius } from "./palette.js";
 import { deriveSpacing } from "./palette.js";
 const alpha = (token, a) => `color-mix(in srgb, ${token} ${Math.round(a * 100)}%, transparent)`;
 const TEXT = {
+  nano: 10,
+  // engraved/graphic label INSIDE a drawn object (a plate face, a dial, a chip) — never UI copy or prose
   micro: 11,
   // mono uppercase micro-label (table th, Menu.Label, sidebar/section headers, axis ticks)
   xs: 12.5,
@@ -30,8 +32,10 @@ const TEXT = {
   // article-density Prose h2 (docs/CONTENT-SPEC.md §5)
   kpi: 24,
   // the StatCard hero numeral (density pass: 31 → 24, tighter/less shouty)
-  h1: 26
+  h1: 26,
   // article-density Prose h1 (docs/CONTENT-SPEC.md §5)
+  display: 30
+  // a numeral read at arm's length (a keypad readout, a timer, a kiosk figure) — not a heading
 };
 const VX = {
   // Non-color sizing constants

package/dist/tokens/palette.d.ts

@@ -112,11 +112,11 @@ export declare const SHADOW: {
      * ever needs more, raise the DROP. Do not reintroduce an edge; both shapes have been tried.
      */
     readonly raised: {
-        readonly light: "0 1px 2px rgba(28, 25, 23, 0.10)";
+        readonly light: "0 1px 2px rgba(28, 25, 23, 0.1)";
         readonly dark: "0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent)";
     };
     readonly overlay: {
-        readonly light: "0 8px 24px rgba(28, 25, 23, 0.10)";
+        readonly light: "0 8px 24px rgba(28, 25, 23, 0.1)";
         readonly dark: "0 8px 24px rgba(0, 0, 0, 0.5)";
     };
 };

package/dist/tokens/palette.js

@@ -72,7 +72,7 @@ const SHADOW = {
    * ever needs more, raise the DROP. Do not reintroduce an edge; both shapes have been tried.
    */
   raised: {
-    light: "0 1px 2px rgba(28, 25, 23, 0.10)",
+    light: "0 1px 2px rgba(28, 25, 23, 0.1)",
     dark: "0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent)"
   },
   // Floating-layer elevation (menus, popovers, tooltips, modals, drawers) — a REAL drop shadow, a
@@ -80,7 +80,7 @@ const SHADOW = {
   // Unlike `card`, no embedded ring: floating surfaces carry a real 1px `--vx-surface-border` so
   // Mantine's rotated-square arrow inherits a proper edge.
   overlay: {
-    light: "0 8px 24px rgba(28, 25, 23, 0.10)",
+    light: "0 8px 24px rgba(28, 25, 23, 0.1)",
     dark: "0 8px 24px rgba(0, 0, 0, 0.5)"
   }
 };

package/dist/tokens/text-scale.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text-scale.test.d.ts.map

package/dist/tokens/text-scale.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-scale.test.d.ts","sourceRoot":"","sources":["../../src/tokens/text-scale.test.ts"],"names":[],"mappings":""}

package/dist/tokens.css

@@ -138,6 +138,7 @@
   --vx-fill-hover-lime: color-mix(in srgb, var(--vx-fill-lime) 88%, #000);
   --vx-fill-hover-yellow: color-mix(in srgb, var(--vx-fill-yellow) 88%, #000);
   --vx-fill-hover-orange: color-mix(in srgb, var(--vx-fill-orange) 88%, #000);
+  --vx-text-nano: 10px;
   --vx-text-micro: 11px;
   --vx-text-xs: 12.5px;
   --vx-text-sm: 13.5px;
@@ -147,6 +148,7 @@
   --vx-text-h2: 21px;
   --vx-text-kpi: 24px;
   --vx-text-h1: 26px;
+  --vx-text-display: 30px;
   --vx-area-top: 22%;
   --vx-area-bottom: 1%;
   --vx-good: color-mix(in srgb, var(--vx-good-solid) 18%, transparent);
@@ -274,8 +276,8 @@ html[data-mantine-color-scheme='light'] {
   --vx-divider: color-mix(in srgb, #e5e5e5 65%, transparent);
   --vx-shadow-card: 0 1px 2px rgba(28, 25, 23, 0.05), 0 0 0 1px var(--vx-surface-hairline);
   --vx-shadow-ctrl: 0 1px 2px rgba(28, 25, 23, 0.12);
-  --vx-shadow-raised: 0 1px 2px rgba(28, 25, 23, 0.10);
-  --vx-shadow-overlay: 0 8px 24px rgba(28, 25, 23, 0.10);
+  --vx-shadow-raised: 0 1px 2px rgba(28, 25, 23, 0.1);
+  --vx-shadow-overlay: 0 8px 24px rgba(28, 25, 23, 0.1);
   --vx-surface-bg: #f2f2f5;
   --vx-surface-panel: #fafafd;
   --vx-surface-panel-hover: #ffffff;

package/dist/vite.d.ts

@@ -49,7 +49,21 @@ export type BasaltAppOptions = {
         light: string;
         dark: string;
     };
-    /** Manifest `background_color` + anti-FOUC paint color. Default: the resolved dark theme color. */
+    /**
+     * Which scheme the anti-FOUC `<style>` paints before the app boots. Default `'dark'` —
+     * `BasaltProvider`'s own default. `'light'` paints the light surface, `'auto'` declares
+     * `color-scheme: light dark` and picks the background off `prefers-color-scheme`, and `false`
+     * paints the background but declares no `color-scheme` at all (leave native controls to Mantine).
+     *
+     * Set this to whatever the app passes as `defaultColorScheme` — a mismatch is a visible flash of
+     * the wrong surface, not a correctness bug: the boot rule stops applying the moment Mantine
+     * writes `data-mantine-color-scheme` on `<html>` (see `BOOT_SCOPE`).
+     */
+    colorScheme?: 'dark' | 'light' | 'auto' | false;
+    /**
+     * Manifest `background_color` + anti-FOUC paint color. Default: the theme color matching
+     * `colorScheme` (the dark one for `'dark'` / `'auto'` / `false`, the light one for `'light'`).
+     */
     backgroundColor?: string;
     /** Manifest `display` mode. Default: `'standalone'`. */
     display?: 'standalone' | 'minimal-ui' | 'fullscreen' | 'browser';
@@ -104,13 +118,21 @@ export type BasaltAppOptions = {
  * manifest `theme_color` both need a FLAT color, so the flattening step is the contract this
  * plugin owes its output regardless of which shape the palette hands it.
  *
+ * Two behaviours worth knowing before adopting it, both of which the plugin owns because the
+ * consumer cannot reach them:
+ *  • It HOISTS the shell's `<meta charset>` ahead of everything it injects, so the encoding
+ *    declaration stays inside the spec's first 1024 bytes (see `hoistCharset`).
+ *  • The anti-FOUC `<style>` expires the moment Mantine resolves the real scheme, and `colorScheme`
+ *    selects which surface it paints until then (see `BOOT_SCOPE` / `buildBootStyle`).
+ *
  * @example
  * // vite.config.ts
  * import { basaltAppPlugin, basaltViteConfig } from 'basalt-ui/vite'
  *
  * export default {
  *   ...basaltViteConfig({ port: 5173 }),
- *   plugins: [react(), ...basaltAppPlugin({ name: 'Argo' })],
+ *   // colorScheme mirrors <BasaltProvider defaultColorScheme> — omit it for the dark default.
+ *   plugins: [react(), ...basaltAppPlugin({ name: 'Argo', colorScheme: 'auto' })],
  * }
  */
 export declare function basaltAppPlugin(options: BasaltAppOptions): PluginOption[];

package/dist/vite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAA6B,YAAY,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AAI/E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4FAA4F;IAC5F,IAAI,EAAE,MAAM,CAAA;IACZ,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AA6CD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,iBAAiB,GAAG,UAAU,CAgFpE;AAgBD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACrD,mGAAmG;IACnG,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,wDAAwD;IACxD,OAAO,CAAC,EAAE,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;IAChE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mGAAmG;IACnG,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,wFAAwF;IACxF,KAAK,CAAC,EAAE,KAAK,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAChC,8FAA8F;IAC9F,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC3B,oFAAoF;IACpF,GAAG,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,SAAS,GAAG,qBAAqB,CAAA;KAAE,CAAA;IACvF,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAClD,CAAA;AAuZD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,YAAY,EAAE,CAMzE"}
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAA6B,YAAY,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AAI/E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4FAA4F;IAC5F,IAAI,EAAE,MAAM,CAAA;IACZ,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AA6CD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,iBAAiB,GAAG,UAAU,CAgFpE;AAgBD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACrD;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;IAC/C;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,wDAAwD;IACxD,OAAO,CAAC,EAAE,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;IAChE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mGAAmG;IACnG,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,wFAAwF;IACxF,KAAK,CAAC,EAAE,KAAK,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAChC,8FAA8F;IAC9F,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC3B,oFAAoF;IACpF,GAAG,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,SAAS,GAAG,qBAAqB,CAAA;KAAE,CAAA;IACvF,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAClD,CAAA;AAigBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,YAAY,EAAE,CAMzE"}

package/dist/vite.js

@@ -140,6 +140,29 @@ const VIEWPORT_TAG = {
   tag: "meta",
   attrs: { name: "viewport", content: "width=device-width, initial-scale=1.0, viewport-fit=cover" }
 };
+const BOOT_SCOPE = "html:not([data-mantine-color-scheme])";
+const BOOT_COLOR_SCHEME = { dark: "dark", light: "light", auto: "light dark" };
+function buildBootStyle(input) {
+  const { colorScheme, themeColor, backgroundColor, explicitBackground } = input;
+  if (colorScheme === false) return `${BOOT_SCOPE}{background-color:${backgroundColor}}`;
+  const scheme = BOOT_COLOR_SCHEME[colorScheme];
+  if (colorScheme !== "auto" || explicitBackground) {
+    return `${BOOT_SCOPE}{background-color:${backgroundColor};color-scheme:${scheme}}`;
+  }
+  return `${BOOT_SCOPE}{background-color:${themeColor.light};color-scheme:${scheme}}@media(prefers-color-scheme:dark){${BOOT_SCOPE}{background-color:${themeColor.dark}}}`;
+}
+const CHARSET_META_RE = /[ \t]*<meta\s+charset\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>=]+))\s*\/?>[ \t]*\r?\n?/i;
+const HTTP_EQUIV_CHARSET_RE = /<meta\s[^>]*http-equiv\s*=\s*["']?content-type["']?[^>]*>/i;
+const DEFAULT_CHARSET = "UTF-8";
+function hoistCharset(html) {
+  if (HTTP_EQUIV_CHARSET_RE.test(html)) return { html, tag: void 0 };
+  const match = CHARSET_META_RE.exec(html);
+  const charset = match?.[1] ?? match?.[2] ?? match?.[3] ?? DEFAULT_CHARSET;
+  return {
+    html: match ? html.replace(CHARSET_META_RE, "") : html,
+    tag: { tag: "meta", attrs: { charset } }
+  };
+}
 function buildSeoTags(input) {
   const { name, description, seo } = input;
   const tags = [];
@@ -183,7 +206,7 @@ function buildStaticTags(input) {
     options,
     shortName,
     themeColor,
-    backgroundColor,
+    bootStyle,
     iconsEnabled,
     iconsDir,
     darkreader,
@@ -210,10 +233,7 @@ function buildStaticTags(input) {
       }
     }
   );
-  tags.push({
-    tag: "style",
-    children: `html{background-color:${backgroundColor};color-scheme:dark}`
-  });
+  tags.push({ tag: "style", children: bootStyle });
   if (iconsEnabled) {
     tags.push(
       {
@@ -274,7 +294,7 @@ function buildManifestJson(input) {
     scope,
     id,
     display,
-    themeColor,
+    schemeColor,
     backgroundColor,
     iconsDir,
     base
@@ -287,7 +307,9 @@ function buildManifestJson(input) {
     start_url: startUrl,
     scope,
     display,
-    theme_color: themeColor.dark,
+    // A manifest carries ONE theme color, so it follows the boot scheme rather than the dual
+    // `<meta name="theme-color">` pair. Unchanged for the default (`'dark'`) and for `'auto'`.
+    theme_color: schemeColor,
     background_color: backgroundColor,
     icons: [
       {
@@ -313,7 +335,15 @@ function createMainPlugin(options) {
   const iconsDir = options.icons === false ? void 0 : options.icons?.dir;
   const manifestEnabled = options.manifest !== false;
   const themeColor = resolveThemeColors(options.themeColor);
-  const backgroundColor = options.backgroundColor ?? themeColor.dark;
+  const colorScheme = options.colorScheme ?? "dark";
+  const schemeColor = colorScheme === "light" ? themeColor.light : themeColor.dark;
+  const backgroundColor = options.backgroundColor ?? schemeColor;
+  const bootStyle = buildBootStyle({
+    colorScheme,
+    themeColor,
+    backgroundColor,
+    explicitBackground: options.backgroundColor !== void 0
+  });
   let manifestJson = "";
   let manifestHref = "/site.webmanifest";
   let staticTags = [];
@@ -332,7 +362,7 @@ function createMainPlugin(options) {
         scope,
         id,
         display,
-        themeColor,
+        schemeColor,
         backgroundColor,
         iconsDir,
         base
@@ -341,7 +371,7 @@ function createMainPlugin(options) {
         options,
         shortName,
         themeColor,
-        backgroundColor,
+        bootStyle,
         iconsEnabled,
         iconsDir,
         darkreader,
@@ -350,9 +380,20 @@ function createMainPlugin(options) {
         manifestHref
       });
     },
-    transformIndexHtml(html) {
-      const tags = hasViewportMeta(html) ? staticTags : [VIEWPORT_TAG, ...staticTags];
-      return { html, tags };
+    transformIndexHtml: {
+      // `pre` so this plugin's tags are the FIRST head-prepend contributions Vite collects — that
+      // ordering is what puts the hoisted <meta charset> at the very top of <head> rather than
+      // behind another plugin's tags. Vite injects all collected tags after every hook has run.
+      order: "pre",
+      handler(html) {
+        const hoisted = hoistCharset(html);
+        const tags = [
+          ...hoisted.tag ? [hoisted.tag] : [],
+          ...hasViewportMeta(html) ? [] : [VIEWPORT_TAG],
+          ...staticTags
+        ];
+        return { html: hoisted.html, tags };
+      }
     },
     generateBundle() {
       if (!manifestEnabled) return;

package/llms.txt

@@ -1,4 +1,4 @@
-# basalt-ui v1.20.0
+# basalt-ui v1.21.0
 # Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets
 #
 # basalt-ui is an opinionated framework for Mantine-based React apps.
@@ -19,7 +19,7 @@
 # ./tokens.css subpath. Guide: docs/FRAMEWORK-FREE.md in the repo.
 
 Package: basalt-ui
-Version: 1.20.0
+Version: 1.21.0
 
 ## basalt-ui
 Import: import { ... } from 'basalt-ui'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basalt-ui",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets",
   "keywords": [
     "charts",

package/src/charts/kinds/Bars.tsx

@@ -125,7 +125,7 @@ export type BarsProps<T> = {
   /** Legend config forwarded to `CartesianChart`; `false` disables the legend (sparkline escape).
    * Default `{ placement: 'bottom' }`. */
   legend?: ChartLegendConfig | false
-  /** Accessible text alternative, forwarded as `aria-label` (+ `role="img"`). */
+  /** Accessible text alternative, forwarded as `aria-label` (+ `role="group"`). */
   ariaLabel?: string
   /** Forwarded to `CartesianChart` — see `ChartPending`'s JSDoc for the three-state rationale. */
   isPending?: boolean

package/src/charts/kinds/Donut.tsx

@@ -50,7 +50,7 @@ export type DonutProps<K extends string = SeriesKey> = {
   centerContent?: ReactNode
   innerRatio?: number
   padAngle?: number
-  /** Accessible text alternative, forwarded to `ChartFrame` as `aria-label` (+ `role="img"`). */
+  /** Accessible text alternative, forwarded to `ChartFrame` as `aria-label` (+ `role="group"`). */
   ariaLabel?: string
   /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc for the three-state rationale. */
   isPending?: boolean

package/src/charts/kinds/DualPanel.tsx

@@ -94,7 +94,7 @@ export type DualPanelProps<T> = {
   /** Legend config forwarded to `ChartFrame`; `false` disables the legend (sparkline escape).
    * Default `{ placement: 'bottom' }`. */
   legend?: ChartLegendConfig | false
-  /** Accessible text alternative, forwarded to `ChartFrame` as `aria-label` (+ `role="img"`). */
+  /** Accessible text alternative, forwarded to `ChartFrame` as `aria-label` (+ `role="group"`). */
   ariaLabel?: string
   /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc for the three-state rationale. */
   isPending?: boolean
@@ -521,7 +521,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
             </>
           )}
 
-          {/* theme-allow basalt/hand-rolled-plot: TWO panes over one x scale is not a single
+          {/* theme-allow-file basalt/hand-rolled-plot: TWO panes over one x scale is not a single
               cartesian plot, so `CartesianChart` (one plot rect, one or two y axes) cannot express
               it. This file therefore assembles the plot itself — but from the SAME parts every
               other chart gets: `ChartFrame`, `autoMargin` + `probeAxisLabels`, `useChartCursor`,

package/src/charts/kinds/Heatmap.tsx

@@ -53,7 +53,7 @@ export type HeatmapProps<T> = {
   renderTooltip?: (cell: HeatmapCell) => ReactNode
   /** Optional gradient legend strip below the grid (faint → solid color). */
   legend?: { min: string; max: string }
-  /** Accessible text alternative, forwarded to `ChartFrame` as `aria-label` (+ `role="img"`). */
+  /** Accessible text alternative, forwarded to `ChartFrame` as `aria-label` (+ `role="group"`). */
   ariaLabel?: string
   /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc for the three-state rationale. */
   isPending?: boolean

package/src/charts/kinds/MultiLine.tsx

@@ -52,7 +52,7 @@ export type MultiLineProps<T> = {
   /** Legend config forwarded to `CartesianChart`; `false` disables the legend (sparkline escape).
    * Default `{ placement: 'bottom' }`. */
   legend?: ChartLegendConfig | false
-  /** Accessible text alternative, forwarded to `CartesianChart` as `aria-label` (+ `role="img"`). */
+  /** Accessible text alternative, forwarded to `CartesianChart` as `aria-label` (+ `role="group"`). */
   ariaLabel?: string
   /** Forwarded to `CartesianChart` — see `ChartPending`'s JSDoc for the three-state rationale. */
   isPending?: boolean

package/src/charts/kinds/StackedArea.tsx

@@ -33,7 +33,7 @@ export type StackedAreaProps<T> = {
   /** Legend config forwarded to `CartesianChart`; `false` disables the legend (sparkline escape).
    * Default `{ placement: 'bottom' }`. */
   legend?: ChartLegendConfig | false
-  /** Accessible text alternative, forwarded as `aria-label` (+ `role="img"`). */
+  /** Accessible text alternative, forwarded as `aria-label` (+ `role="group"`). */
   ariaLabel?: string
   /** Forwarded to `CartesianChart` — see `ChartPending`'s JSDoc for the three-state rationale. */
   isPending?: boolean

package/src/charts/kinds/ZonedLine.tsx

@@ -73,7 +73,7 @@ export type ZonedLineProps<T> = {
   /** Legend config forwarded to `CartesianChart`; `false` disables the legend (sparkline escape).
    * Default `{ placement: 'bottom' }`. */
   legend?: ChartLegendConfig | false
-  /** Accessible text alternative, forwarded to `CartesianChart` as `aria-label` (+ `role="img"`). */
+  /** Accessible text alternative, forwarded to `CartesianChart` as `aria-label` (+ `role="group"`). */
   ariaLabel?: string
   /** Forwarded to `CartesianChart` — see `ChartPending`'s JSDoc for the three-state rationale. */
   isPending?: boolean