@godxjp/ui 28.13.0 → 30.0.0

package/dist/app/index.d.ts

@@ -7,6 +7,7 @@ export * from "./time-format-labels.js";
 export * from "./date-format-labels.js";
 export * from "./storage.js";
 export * from "./theme-axes.js";
+export * from "./tenant-theme.js";
 export * from "./request-headers.js";
 export { AppProvider, useAppContext, useOptionalAppContext, useAppLocale, useAppTimezone, useAppTimeFormat, useAppDateFormat, } from "./app-provider.js";
 export { useFormatting, useDateTime } from "./use-formatting.js";
@@ -14,3 +15,5 @@ export { syncDatetimeContext, getDatetimeContext, formatDate, isFormatDateValue,
 export { useTranslation, usePickerLocales } from "../i18n/use-translation.js";
 export { OverlayPortalProvider } from "../lib/overlay-portal.js";
 export type { OverlayPortalProviderProps } from "../lib/overlay-portal.js";
+export { ThemeScope } from "../lib/overlay-portal.js";
+export type { ThemeScopeProps } from "../lib/overlay-portal.js";

package/dist/app/index.js

@@ -7,6 +7,7 @@ export * from "./time-format-labels.js";
 export * from "./date-format-labels.js";
 export * from "./storage.js";
 export * from "./theme-axes.js";
+export * from "./tenant-theme.js";
 export * from "./request-headers.js";
 import {
   AppProvider,
@@ -37,9 +38,11 @@ import {
 } from "../lib/datetime/index.js";
 import { useTranslation, usePickerLocales } from "../i18n/use-translation.js";
 import { OverlayPortalProvider } from "../lib/overlay-portal.js";
+import { ThemeScope } from "../lib/overlay-portal.js";
 export {
   AppProvider,
   OverlayPortalProvider,
+  ThemeScope,
   detectFormatDateKind,
   formatAppDate,
   formatAppDateLong,

package/dist/app/tenant-theme.d.ts

@@ -0,0 +1,80 @@
+/** A bare CSS HSL channel triplet, `"H S% L%"` — the shape every `@godxjp/ui` colour role uses. */
+export type HslTriplet = string;
+/** WCAG 2.2 SC 1.4.3 Contrast (Minimum) — normal text. */
+export declare const AA_NORMAL_TEXT = 4.5;
+/** WCAG 2.2 SC 1.4.3 Contrast (Minimum) — large text (≥18.66px bold / ≥24px). */
+export declare const AA_LARGE_TEXT = 3;
+/**
+ * L = 0.179, the pivot of the label choice (solve 1.05/(L+0.05) = (L+0.05)/0.05). A surface above it
+ * is one an ink walks DOWN away from, below it one an ink walks UP — and either end of the ramp is
+ * achromatic, since `hsl(h s 0%)` is black and `hsl(h s 100%)` is white at every hue and saturation.
+ * So the walk always reaches at least 4.58:1 and the guarantee is a property of the whole sRGB cube
+ * rather than of the seeds we happened to try.
+ *
+ * EXPORTED because a component that paints its own fill has to make the same choice against it and
+ * must not re-derive the number (gh#884: `Sidebar`'s brand mark).
+ */
+export declare const CONTRAST_PIVOT = 0.179;
+/**
+ * WCAG 2.2 relative luminance of an sRGB colour, per the definition quoted at the top of this file.
+ * Accepts `#abc` / `#aabbcc`; returns null for anything else.
+ */
+export declare function relativeLuminance(hex: string): number | null;
+/**
+ * WCAG 2.2 contrast ratio between two hex colours, `(L_lighter + 0.05) / (L_darker + 0.05)`, in
+ * 1–21. Returns null if either colour is not a hex. Compare against {@link AA_NORMAL_TEXT}.
+ */
+export declare function contrastRatio(a: string, b: string): number | null;
+/**
+ * `#0071bd` → `"204.13 100% 37.06%"` — the direction the package was missing (gh#868: `hslToHex`
+ * appears 9 times in `dist/`, `hexToHsl` zero). The exact inverse of
+ * {@link import("../email/color.js").hslToHex} within one hex step, which `tenant-theme.test.ts`
+ * round-trips over a grid. Returns null for anything that is not a 3- or 6-digit hex, so an
+ * unparseable customer value is ignored rather than breaking the page.
+ */
+export declare function hexToHsl(hex: string): HslTriplet | null;
+export type TenantThemeOptions = {
+    /**
+     * The label to paint ON the seed, as hex. Omit and the contrast-safe choice is made here. Supply
+     * it — Platform stores a server-computed, WCAG-checked pair — and it is used as given, with
+     * `contrast` / `meetsAA` reporting what it achieves and a dev warning under 4.5:1.
+     */
+    foreground?: string | null;
+    /**
+     * The surface the brand INK sits on, as hex — the DARKEST one it lands on in a light theme, the
+     * LIGHTEST in a dark one, because the guarantee has to hold in the hovered state too. Default: the
+     * package's light `--accent`, `#ebe9e5`. A region inside the dark theme passes `#3c3a34`
+     * (`--accent` there); a themed consumer passes its own. Anything that is not a hex is ignored.
+     */
+    surface?: string | null;
+};
+export type TenantTheme = {
+    /** The seed, normalized to `#rrggbb`, or null when the input was not a hex colour. */
+    primary: string | null;
+    /** The label on that seed, `#rrggbb`, or null when there is no seed. */
+    foreground: string | null;
+    /** WCAG 2.2 ratio of `foreground` on `primary`, 1–21. `0` when there is no seed. */
+    contrast: number;
+    /** `contrast >= 4.5` — WCAG 2.2 SC 1.4.3, normal text. */
+    meetsAA: boolean;
+    /**
+     * The custom properties to declare on the scope. Spread straight into a `style` prop, or
+     * serialize into a `<style>` block for SSR. EMPTY for an unusable seed, so an invalid customer
+     * value degrades to the app's own theme instead of breaking the page.
+     */
+    vars: Readonly<Record<string, string>>;
+};
+/**
+ * Turn a customer's hex into the scoped token declarations that make one REGION wear it —
+ * `--primary`, `--primary-foreground`, `--ring`, the hover / pressed steps, and the three brand INKS
+ * (`--text-link` / `--text-brand` / `--text-primary`) — all as literals, so the colour cannot
+ * half-apply on an engine without CSS relative colour and the ink cannot land under 4.5:1.
+ *
+ * ```tsx
+ * const brand = tenantTheme(tenant.primary_color, { foreground: tenant.primary_foreground });
+ * <div data-tenant={tenant.slug} style={brand.vars}>…</div>
+ * ```
+ *
+ * Never throws and never returns null: an unusable seed yields empty `vars`.
+ */
+export declare function tenantTheme(primary: string, options?: TenantThemeOptions): TenantTheme;

package/dist/app/tenant-theme.js

@@ -0,0 +1,154 @@
+import { isDevelopment } from "../lib/dev.js";
+const AA_NORMAL_TEXT = 4.5;
+const AA_LARGE_TEXT = 3;
+const STEPS = {
+  darken: { hover: (l) => l - 8.4, active: (l) => l - 15.5 },
+  lighten: {
+    hover: (l) => l + 5.8,
+    active: (l) => l > 83.4 ? l - 5.8 : l + 11.6
+  }
+};
+const INK_STEPS = {
+  light: { link: (l) => l - 8.4, pressed: (l) => l - 15.5 },
+  dark: { link: (l) => l, pressed: (l) => l + 5.8 }
+};
+const CONTRAST_PIVOT = 0.179;
+const INK_SURFACE_LIGHT = "#ebe9e5";
+const HEX = /^#(?:[\da-f]{3}|[\da-f]{6})$/i;
+const clamp = (value, lo, hi) => Math.min(hi, Math.max(lo, value));
+function parseHex(value) {
+  if (typeof value !== "string" || !HEX.test(value.trim())) return null;
+  const body = value.trim().slice(1);
+  const full = body.length === 3 ? body.replace(/./g, (c) => c + c) : body;
+  return [0, 2, 4].map((offset) => parseInt(full.slice(offset, offset + 2), 16) / 255);
+}
+const toHex = (rgb) => `#${rgb.map(
+  (v) => Math.round(clamp(v, 0, 1) * 255).toString(16).padStart(2, "0")
+).join("")}`;
+function relativeLuminance(hex) {
+  const rgb = parseHex(hex);
+  return rgb === null ? null : luminanceOf(rgb);
+}
+function luminanceOf(rgb) {
+  const coefficients = [0.2126, 0.7152, 0.0722];
+  return rgb.reduce(
+    (sum, channel, index) => sum + (channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4) * coefficients[index],
+    0
+  );
+}
+function contrastRatio(a, b) {
+  const [first, second] = [relativeLuminance(a), relativeLuminance(b)];
+  if (first === null || second === null) return null;
+  const [hi, lo] = first >= second ? [first, second] : [second, first];
+  return (hi + 0.05) / (lo + 0.05);
+}
+function hexToHsl(hex) {
+  const rgb = parseHex(hex);
+  return rgb === null ? null : tripletOf(rgb);
+}
+const round = (value, places) => {
+  const factor = 10 ** places;
+  return Math.round(value * factor) / factor;
+};
+const formatHsl = ([h, s, l]) => `${round(h, 2)} ${round(s, 2)}% ${round(l, 2)}%`;
+function tripletOf(rgb) {
+  return formatHsl(toHsl(rgb));
+}
+function fromHsl([h, s, l]) {
+  const hue = (h % 360 + 360) % 360 / 60;
+  const chroma = (1 - Math.abs(2 * l / 100 - 1)) * (s / 100);
+  const second = chroma * (1 - Math.abs(hue % 2 - 1));
+  const base = l / 100 - chroma / 2;
+  const [r, g, b] = hue < 1 ? [chroma, second, 0] : hue < 2 ? [second, chroma, 0] : hue < 3 ? [0, chroma, second] : hue < 4 ? [0, second, chroma] : hue < 5 ? [second, 0, chroma] : [chroma, 0, second];
+  return [r, g, b].map((c) => Math.round(clamp(c + base, 0, 1) * 255) / 255);
+}
+function inkLightness(h, s, from, surface) {
+  const clears = (l) => {
+    const ink = luminanceOf(fromHsl([h, s, l]));
+    const [hi, lo] = ink >= surface ? [ink, surface] : [surface, ink];
+    return (hi + 0.05) / (lo + 0.05) >= AA_NORMAL_TEXT;
+  };
+  const start = clamp(from, 0, 100);
+  if (clears(start)) return start;
+  const limit = surface > CONTRAST_PIVOT ? 0 : 1e3;
+  let fails = clamp(limit === 0 ? Math.floor(start * 10) : Math.ceil(start * 10), 0, 1e3);
+  if (clears(fails / 10)) return fails / 10;
+  let passes = limit;
+  if (!clears(passes / 10)) return passes / 10;
+  while (Math.abs(passes - fails) > 1) {
+    const mid = Math.round((passes + fails) / 2);
+    if (clears(mid / 10)) passes = mid;
+    else fails = mid;
+  }
+  return passes / 10;
+}
+function toHsl(rgb) {
+  const [r, g, b] = rgb;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  const lightness = (max + min) / 2;
+  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
+  const hue = delta === 0 ? 0 : 60 * (max === r ? ((g - b) / delta + 6) % 6 : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4);
+  return [hue, clamp(saturation, 0, 1) * 100, lightness * 100];
+}
+const EMPTY = Object.freeze({
+  primary: null,
+  foreground: null,
+  contrast: 0,
+  meetsAA: false,
+  vars: Object.freeze({})
+});
+function tenantTheme(primary, options = {}) {
+  const seed = parseHex(primary);
+  if (seed === null) return EMPTY;
+  const supplied = options.foreground ? parseHex(options.foreground) : null;
+  const label = supplied ?? (luminanceOf(seed) > CONTRAST_PIVOT ? [0, 0, 0] : [1, 1, 1]);
+  const seedLuminance = luminanceOf(seed);
+  const labelLuminance = luminanceOf(label);
+  const [hi, lo] = labelLuminance >= seedLuminance ? [labelLuminance, seedLuminance] : [seedLuminance, labelLuminance];
+  const contrast = (hi + 0.05) / (lo + 0.05);
+  if (isDevelopment() && supplied !== null && contrast < AA_NORMAL_TEXT) {
+    console.warn(
+      `[godxjp-ui] tenantTheme: the supplied foreground ${toHex(label)} measures ${round(contrast, 2)}:1 on ${toHex(seed)} \u2014 below WCAG 2.2 SC 1.4.3 AA (4.5:1). Text on this brand fill will be hard to read. Omit \`foreground\` to let the contrast-safe label be chosen, or raise the pair upstream.`
+    );
+  }
+  const steps = STEPS[labelLuminance > 0.5 ? "darken" : "lighten"];
+  const [h, s, l] = toHsl(seed);
+  const surface = luminanceOf(
+    (options.surface ? parseHex(options.surface) : null) ?? parseHex(INK_SURFACE_LIGHT)
+  );
+  const ink = INK_STEPS[surface > CONTRAST_PIVOT ? "light" : "dark"];
+  const [inkH, inkS] = [round(h, 2), round(s, 2)];
+  const inkAt = (step) => formatHsl([inkH, inkS, inkLightness(inkH, inkS, round(step(l), 2), surface)]);
+  const [linkInk, pressedInk] = [inkAt(ink.link), inkAt(ink.pressed)];
+  return Object.freeze({
+    primary: toHex(seed),
+    foreground: toHex(label),
+    contrast,
+    meetsAA: contrast >= AA_NORMAL_TEXT,
+    vars: Object.freeze({
+      "--primary": tripletOf(seed),
+      "--primary-foreground": tripletOf(label),
+      // derived.css declares `--ring: var(--primary)` at `:root`, where a var() substitutes ONCE;
+      // a scope below it inherits the root's ring unless it restates it (the freeze rule).
+      "--ring": tripletOf(seed),
+      "--primary-hover": formatHsl([h, s, clamp(steps.hover(l), 0, 100)]),
+      "--primary-active": formatHsl([h, s, clamp(steps.active(l), 0, 100)]),
+      // The three brand INKS, each ≥ 4.5:1 on `surface` — the roles derived.css already publishes,
+      // now with the floor its lightness steps never had. `--text-primary` also seeds `--mark-*`.
+      "--text-link": linkInk,
+      "--text-brand": linkInk,
+      "--text-primary": pressedInk
+    })
+  });
+}
+export {
+  AA_LARGE_TEXT,
+  AA_NORMAL_TEXT,
+  CONTRAST_PIVOT,
+  contrastRatio,
+  hexToHsl,
+  relativeLuminance,
+  tenantTheme
+};

package/dist/app/theme-axes.d.ts

@@ -43,5 +43,18 @@ export declare const isAppFontSize: (v: unknown) => v is AppFontSize;
  * `data-brand` so the app's own `--primary` token applies.
  */
 export declare function applyThemeAxes(el: HTMLElement, axes: Partial<AppThemeAxes>): void;
-/** Apply an entity's action palette, including portals. Call the returned cleanup on scope exit. */
+/**
+ * Apply an entity's action palette to an existing themed tree, including portals. Call the returned
+ * cleanup on scope exit.
+ *
+ * The arithmetic — hex → HSL triplet, and the WCAG 2.2 label choice — is {@link tenantTheme}'s, so
+ * there is one formula rather than two. This entry point adds what a RE-SEED needs and a fresh
+ * region does not: the knobs an ancestor service theme may have pinned to the PREVIOUS brand are
+ * reset to `initial`, so the new seed cannot be outranked by a stale literal (gh#678, gh#664). The
+ * three brand INKS are reset and then re-declared from the seed, because `tenantTheme` computes a
+ * 4.5:1 floor for them and a bare reset would discard it (gh#887 — see the palette below).
+ *
+ * Use {@link tenantTheme} instead when you are painting a region with a customer's colour — it
+ * returns declarations to put in `style`, with no effect, no unmount restore and no SSR flash.
+ */
 export declare function applyPrimaryColor(root: HTMLElement, color: string, foreground?: string | null): () => void;

package/dist/app/theme-axes.js

@@ -1,3 +1,4 @@
+import { relativeLuminance, tenantTheme } from "./tenant-theme.js";
 const APP_THEMES = ["light", "dark", "system"];
 const APP_BRANDS = [
   "brand",
@@ -40,43 +41,35 @@ function applyThemeAxes(el, axes) {
   }
 }
 function applyPrimaryColor(root, color, foreground) {
-  const parse = (value) => {
-    if (!/^#[\da-f]{6}$/i.test(value)) return null;
-    return [1, 3, 5].map((offset) => parseInt(value.slice(offset, offset + 2), 16) / 255);
+  const seed = tenantTheme(color, { foreground });
+  if (seed.primary === null) return () => {
   };
-  const rgb = parse(color);
-  if (!rgb) return () => {
-  };
-  const luminance = (channels) => channels.reduce(
-    (sum, value, index) => sum + (value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4) * [0.2126, 0.7152, 0.0722][index],
-    0
-  );
-  const text = foreground && parse(foreground) || (luminance(rgb) > 0.179 ? [0, 0, 0] : [1, 1, 1]);
-  const hsl = (channels) => {
-    const [r, g, b] = channels;
-    const max = Math.max(r, g, b), min = Math.min(r, g, b);
-    const delta = max - min, lightness = (max + min) / 2;
-    const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
-    const hue = delta === 0 ? 0 : 60 * (max === r ? ((g - b) / delta + 6) % 6 : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4);
-    return `${hue} ${saturation * 100}% ${lightness * 100}%`;
-  };
-  const polarity = luminance(text) > 0.5 ? "darken" : "lighten";
+  const polarity = (relativeLuminance(seed.foreground) ?? 0) > 0.5 ? "darken" : "lighten";
   const palette = {
-    "--primary": hsl(rgb),
-    "--primary-foreground": hsl(text),
-    "--primary-hover": "initial",
-    "--primary-active": "initial",
-    "--primary-border": "initial",
-    "--control-outline": "initial",
-    /* The brand TEXT roles derive from the seed too (gh#664), so they are reset for the same
-     * reason: an ancestor theme that pinned a link colour for the previous brand would otherwise
-     * outrank the seed just set, and a re-tinted product would keep the old brand's links. */
+    /* THE STALE-PIN RESETS COME FIRST, AND THE ORDER IS THE WHOLE POINT (gh#887).
+     *
+     * They exist because a theme above this element may have pinned a knob to the PREVIOUS brand,
+     * and an inherited literal would outrank a seed that only re-derives in CSS (gh#678, gh#664):
+     * a link colour pinned for the old brand would survive on a re-tinted product. That reason
+     * still holds, so nothing is deleted.
+     *
+     * But `tenantTheme` now RETURNS the three brand inks as clamped literals (gh#887), and these
+     * three keys used to sit AFTER the spread — so the same call that walked each ink to 4.5:1 on
+     * the surface threw the result away one line later, and a re-seeded tree got the unclamped
+     * ramp step back. Declared BEFORE the spread they are overwritten by those literals, which
+     * defeat an ancestor's pin on their own (a literal ON the element beats an inherited one), and
+     * the guard still stands if that emission ever stops.
+     *
+     * `--primary-border` / `--control-outline` are NOT in `vars` — the reset IS their value here,
+     * and they go on deriving in CSS from the `--primary` in scope. */
     "--text-link": "initial",
     "--text-brand": "initial",
     "--text-primary": "initial",
+    ...seed.vars,
+    "--primary-border": "initial",
+    "--control-outline": "initial",
     "--primary-hover-channels": `var(--primary-hover-${polarity}-channels)`,
-    "--primary-active-channels": `var(--primary-active-${polarity}-channels)`,
-    "--ring": hsl(rgb)
+    "--primary-active-channels": `var(--primary-active-${polarity}-channels)`
   };
   const previous = Object.keys(palette).map((key) => [
     key,

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

@@ -17,16 +17,20 @@ type CartesianChartProps = {
     height?: number;
     showLegend?: boolean;
     showGrid?: boolean;
+    valueDomain?: [number, number];
+    valueTicks?: number[];
     numberFormat?: Intl.NumberFormatOptions;
     emptyMessage?: string;
     className?: string;
     id?: string;
     /** line/area */
     curved?: boolean;
+    /** line/area */
+    showDots?: boolean;
     /** bar/area */
     stacked?: boolean;
     /** bar */
     horizontal?: boolean;
 };
-export declare function CartesianChart({ kind, data, series, categoryKey, label, showCaption, description, size, height, showLegend, showGrid, numberFormat, emptyMessage, className, id, curved, stacked, horizontal, }: CartesianChartProps): React.JSX.Element;
+export declare function CartesianChart({ kind, data, series, categoryKey, label, showCaption, description, size, height, showLegend, showGrid, valueDomain, valueTicks, numberFormat, emptyMessage, className, id, curved, showDots, stacked, horizontal, }: CartesianChartProps): React.JSX.Element;
 export {};

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

@@ -35,11 +35,14 @@ function CartesianChart({
   height,
   showLegend = true,
   showGrid = true,
+  valueDomain,
+  valueTicks,
   numberFormat,
   emptyMessage,
   className,
   id,
   curved = false,
+  showDots = false,
   stacked = false,
   horizontal = false
 }) {
@@ -59,6 +62,10 @@ function CartesianChart({
   const resolvedHeight = chartHeight(size, height);
   const tickFormatter = (value) => fmt.format(value);
   const curve = curved ? "monotone" : "linear";
+  const valueAxisScale = {
+    ...valueDomain ? { domain: valueDomain } : null,
+    ...valueTicks ? { ticks: valueTicks } : null
+  };
   const measuresCategoryAxis = kind === "bar" && horizontal;
   const canvasRef = React.useRef(null);
   const probeRef = React.useRef(null);
@@ -95,7 +102,7 @@ function CartesianChart({
     );
   };
   const axes = (numberAxisVertical) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    showGrid ? /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }) : null,
+    showGrid ? /* @__PURE__ */ jsx(CartesianGrid, { stroke: "hsl(var(--border))" }) : null,
     numberAxisVertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         XAxis,
@@ -112,7 +119,8 @@ function CartesianChart({
           tickFormatter,
           tickLine: false,
           stroke: "hsl(var(--muted-foreground))",
-          fontSize: 12
+          fontSize: 12,
+          ...valueAxisScale
         }
       )
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -123,7 +131,8 @@ function CartesianChart({
           tickFormatter,
           tickLine: false,
           stroke: "hsl(var(--muted-foreground))",
-          fontSize: 12
+          fontSize: 12,
+          ...valueAxisScale
         }
       ),
       /* @__PURE__ */ jsx(
@@ -153,8 +162,7 @@ function CartesianChart({
             dataKey: s.dataKey,
             name: s.label ?? s.dataKey,
             stroke: chartColor(i, s.color),
-            strokeWidth: 2,
-            dot: false
+            dot: showDots
           },
           s.dataKey
         ))
@@ -171,9 +179,8 @@ function CartesianChart({
             name: s.label ?? s.dataKey,
             stackId: stacked ? "stack" : void 0,
             stroke: chartColor(i, s.color),
-            fill: chartColor(i, s.color),
-            fillOpacity: 0.2,
-            strokeWidth: 2
+            fill: s.fillColor ?? chartColor(i, s.color),
+            dot: showDots
           },
           s.dataKey
         ))

package/dist/components/data-display/badge.d.ts

@@ -9,7 +9,7 @@ export type BadgeVariant = "default" | "secondary" | "outline" | "dashed";
  */
 export type BadgeTone = ToneProp | "primary";
 declare const badgeVariants: (props?: ({
-    variant?: "dashed" | "default" | "outline" | "secondary" | "tinted" | null | undefined;
+    variant?: "dashed" | "default" | "outline" | "secondary" | "tinted" | "toned" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, Omit<VariantProps<typeof badgeVariants>, "variant" | "shape"> {

package/dist/components/data-display/badge.js

@@ -55,7 +55,7 @@ const badgeVariants = cva(
   // `ui-focus-ring` = the system's single focus source (styles/focus-ring.css). It replaces a
   // hand-rolled `focus:ring-2 focus:ring-ring`, which was token-blind (no --focus-ring-* knob
   // reached it) and fired on `:focus`, so a mouse click on an interactive badge lit a ring.
-  "ui-focus-ring inline-flex items-center border font-medium transition-colors",
+  "ui-focus-ring inline-flex items-center font-medium transition-colors",
   {
     variants: {
       variant: {
@@ -68,7 +68,22 @@ const badgeVariants = cva(
          * off the element so badge-layout.css's `[data-tinted]` rule is
          * reachable (a utility beats a components-layer rule whatever the
          * specificity). Selected by the `color` prop, never by hand. */
-        tinted: ""
+        tinted: "",
+        /* A STATUS TONE owns the whole chip — fill, border and ink — so the variant contributes
+         * none of them. Selected automatically whenever `tone` is not `default`, never by hand.
+         *
+         * This used to be left to `cn` (tailwind-merge): `default` painted `bg-primary`, the tone
+         * added `bg-success/10`, twMerge saw one conflict group and deleted the first. gh#866
+         * respelled the tone fill as `[background-color:var(--surface-success, …)]` so a brand's
+         * own pale ground could reach it — and an ARBITRARY PROPERTY is a different twMerge group,
+         * so nothing was deleted, both survived, and plain CSS source order handed the chip to
+         * `bg-primary`. Every toned Badge painted violet under tone-coloured ink: measured 1.07:1
+         * (warning) to 1.30:1 (info), against 4.5:1 for AA.
+         *
+         * The classes were "correct" before and after; only the cascade moved. So the fix is to
+         * stop emitting the conflict at all rather than to restore a spelling that happened to
+         * collide — a fill deleted by a class-merging library is a fill nobody declared. */
+        toned: ""
       },
       // Corner shape — default inherits the badge radius token; pill/sharp override via the tokens.
       shape: {
@@ -137,7 +152,10 @@ function Badge({
       "data-removable": onRemove ? "" : void 0,
       className: cn(
         badgeVariants({
-          variant: tinted ? "tinted" : variant ?? "default",
+          // A status tone paints the chip itself (`badgeToneClass` below), so the variant must not
+          // also paint one — see the `toned` variant. An EXPLICIT `variant` still wins, which is
+          // how `<Badge variant="outline" tone="success">` keeps its border treatment.
+          variant: tinted ? "tinted" : variant ?? (resolvedTone === "default" ? "default" : "toned"),
           shape: shape ?? "default"
         }),
         tinted ? void 0 : badgeToneClass[resolvedTone],

package/dist/components/data-display/carousel.js

@@ -131,7 +131,7 @@ const CarouselItem = React.forwardRef(
   )
 );
 CarouselItem.displayName = "CarouselItem";
-const CarouselPrevious = React.forwardRef(({ className, ...props }, ref) => {
+const CarouselPrevious = React.forwardRef(({ className, children, ...props }, ref) => {
   const { t } = useTranslation();
   const { canScrollPrev, scrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxs(
@@ -145,14 +145,14 @@ const CarouselPrevious = React.forwardRef(({ className, ...props }, ref) => {
       onClick: scrollPrev,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ChevronLeft, { className: "ui-carousel-arrow", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "ui-carousel-arrow", "aria-hidden": "true", children: children ?? /* @__PURE__ */ jsx(ChevronLeft, {}) }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.carousel.previous") })
       ]
     }
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-const CarouselNext = React.forwardRef(({ className, ...props }, ref) => {
+const CarouselNext = React.forwardRef(({ className, children, ...props }, ref) => {
   const { t } = useTranslation();
   const { canScrollNext, scrollNext } = useCarousel();
   return /* @__PURE__ */ jsxs(
@@ -166,7 +166,7 @@ const CarouselNext = React.forwardRef(({ className, ...props }, ref) => {
       onClick: scrollNext,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ChevronRight, { className: "ui-carousel-arrow", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "ui-carousel-arrow", "aria-hidden": "true", children: children ?? /* @__PURE__ */ jsx(ChevronRight, {}) }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.carousel.next") })
       ]
     }

package/dist/components/data-display/data-table.js

@@ -86,6 +86,11 @@ function columnHideBelowProps(col) {
   const step = resolveColumnHideBelow(col);
   return step ? { "data-hide-below": step } : {};
 }
+function stackedCellLabel(col) {
+  const header = col.header;
+  const headerIsEmpty = header == null || header === "" || header === false;
+  return headerIsEmpty ? col.ariaLabel : header;
+}
 function dataTableFeatures() {
   return tableFeatures({
     rowSortingFeature,
@@ -798,6 +803,7 @@ DataTable.Content = function DataTableContent() {
   } = useDataTableContext();
   const { t } = useTranslation();
   const presetAttr = preset === "default" ? void 0 : preset;
+  const stacked = preset === "stacked-record-collection";
   const isDenied = denied != null && denied !== false;
   const isError = !isDenied && error != null && error !== false;
   const rowPadding = tableRowHeightClass;
@@ -1166,7 +1172,11 @@ DataTable.Content = function DataTableContent() {
                           // Hover highlight when rows are clickable OR explicitly hoverable… The
                           // --accent step TableRow itself uses, not --muted/50: that sat BELOW the
                           // zebra stripe (--muted/0.8, gh#700), so hovering a striped row lightened it.
-                          (onRowClick || hoverable) && "hover:bg-accent/70",
+                          // Same token-driven formula as TableRow's own hover fill (gh#894) — a bare
+                          // `/70` here would silently outrank a theme's retuned default at equal
+                          // specificity, and `color-mix` (not `hsl(x / var(y, 70%))`) because a `/`
+                          // inside a Tailwind arbitrary property is read as ITS OWN opacity suffix.
+                          (onRowClick || hoverable) && "hover:[background-color:color-mix(in_oklab,hsl(var(--accent))_var(--table-row-hover-background-alpha,70%),transparent)]",
                           // …but the affordance (cursor + focus mark) only when clickable.
                           //
                           // `ui-focus-ring` = the single focus source (styles/focus-ring.css). It
@@ -1282,6 +1292,7 @@ DataTable.Content = function DataTableContent() {
                                 priority: col.priority,
                                 "data-align": col.align,
                                 title,
+                                label: stacked ? stackedCellLabel(col) : void 0,
                                 ...fixedCellProps(col.key, fixedEdge(col)),
                                 ...columnHideBelowProps(col),
                                 style: columnCellStyle(col),
@@ -1379,12 +1390,12 @@ function NumberedPagination({ pageSizeOptions, className }) {
             {
               value: String(pageSize),
               onValueChange: (v) => table.setPageSize(Number(v)),
+              "aria-label": t("dataGrid.rowsPerPage"),
               children: [
                 /* @__PURE__ */ jsx(
                   SelectTrigger,
                   {
                     size: "sm",
-                    "aria-label": t("dataGrid.rowsPerPage"),
                     className: "ui-data-table-page-size-trigger w-auto shrink-0 tabular-nums",
                     children: /* @__PURE__ */ jsx(SelectValue, {})
                   }

package/dist/components/data-display/permission-matrix.js

@@ -162,7 +162,7 @@ const PermissionMatrix = React.forwardRef(
             return /* @__PURE__ */ jsxs(
               TableRow,
               {
-                className: cn(isDiffRow && "bg-warning/[0.07] hover:bg-warning/10"),
+                "data-tone": isDiffRow ? "warning" : void 0,
                 children: [
                   /* @__PURE__ */ jsx(TableCell, { className: cn(PIN_START, "align-middle"), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col leading-tight", children: [
                     /* @__PURE__ */ jsxs("span", { className: "ui-permission-matrix-name", children: [

package/dist/components/data-display/table.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { BreakpointProp, FlushProp, LabelProp, TableCellIndentProp, TableColumnPriorityProp, TablePresetProp, WidthProp } from "../../props/vocabulary/index.js";
+import type { BreakpointProp, FlushProp, LabelProp, TableCellIndentProp, TableColumnPriorityProp, TablePresetProp, TableRowToneProp, WidthProp } from "../../props/vocabulary/index.js";
 export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
     /**
      * Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a table
@@ -157,7 +157,16 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
 } & React.RefAttributes<HTMLTableElement>>;
 export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+/**
+ * The row's STATE — same wash/rail/`--surface-*` grounding `DataTable`'s own `rowTone` already
+ * writes onto `data-tone` (gh#866). Typed here so a hand-composed row can discover it instead of
+ * reaching for the raw attribute; the attribute keeps working (`TableRow data-tone="warning"`
+ * is untouched — this is an addition, not a migration), and `tone` writes the same attribute.
+ */
+type TableRowTone = {
+    tone?: TableRowToneProp;
+};
+export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & TableRowTone & React.RefAttributes<HTMLTableRowElement>>;
 /**
  * Column priority carried by BOTH the header cell and the body cells of a column. Read only by
  * `Table preset="action-collection"` below its collapse step, where it selects the column's