@squadbase/vantage 0.7.1-dev1.9d223a2 → 0.7.1-dev1.9d23147

package/registry/ui/line-chart.tsx

@@ -171,10 +171,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
- */
-const ChartFrameContext = createContext(false)
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
+ */
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -398,6 +413,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -2273,6 +2290,10 @@ function legendLines(items: readonly string[], plotWidth?: number, reserve = 0):
 
 /** Width (px) kept free at the legend's right for the PNG action buttons (two 32px buttons + gaps). */
 const ACTIONS_RESERVE = 80
+/** Bars stay slim on wide cards (px); stacked segments round all corners and are parted by a hairline of the surface colour (px). */
+const BAR_MAX_WIDTH = 40
+const BAR_RADIUS = 3
+const STACK_GAP = 1.5
 
 /** Room (px) one time label (`2026年1月`) needs, gap included. */
 const TIME_LABEL_WIDTH = 80
@@ -2486,6 +2507,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const compared = cartesianSeriesValues(data, [categories[compIdx]!], "default")[0]!
     return categories.map((_, i) => (i === compIdx ? compared : main[mainIdx.indexOf(i)]!))
   })()
+  // Any negative bar: the part lays out the diverging view itself (a solid zero line, category labels kept at the axis end).
+  const diverging = kind === "bar" && values.some((s) => s.some((v) => typeof v === "number" && v < 0))
   const comparisonColor = guideColor ? withAlpha(guideColor, COMPARISON_OPACITY) : undefined
 
   /* -- x labels: the actual rows, then the forecast rows that extend them */
@@ -2695,15 +2718,17 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const seriesData = pad(values[c]!)
     if (kind === "bar") {
       const rounded = horizontalBars ? [0, 4, 4, 0] : [4, 4, 0, 0]
-      // Stacked: only the topmost segment is rounded.
-      const radius = stacked && c !== categories.length - 1 ? 0 : rounded
+      // Stacked: every segment is rounded, with a hairline of the surface colour between segments (the gap).
+      const radius = stacked ? BAR_RADIUS : rounded
+      const gapStyle = stacked && labelBackground ? { borderColor: labelBackground, borderWidth: STACK_GAP } : {}
       return {
         id: SERIES_ID_PREFIX + category,
         type: "bar" as const,
         name: category,
         stack: stacked ? "total" : undefined,
         barCategoryGap,
-        itemStyle: { color, borderRadius: radius },
+        barMaxWidth: BAR_MAX_WIDTH,
+        itemStyle: { color, borderRadius: radius, ...gapStyle },
         markPoint: markPointFor(c, solid),
         markLine: undefined,
         data: seriesData.map((value, i) => {
@@ -2999,6 +3024,14 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       },
     })
   }
+  if (diverging) {
+    markLines.push({
+      name: "zero",
+      [horizontalBars ? "xAxis" : "yAxis"]: 0,
+      lineStyle: { type: "solid", width: 1, color: guideColor },
+      label: { show: false },
+    })
+  }
   if (forecast) {
     const forecastSpan =
       plotWidth && labels.length > 1
@@ -3144,6 +3177,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     show: horizontalBars ? showYAxis : showXAxis,
     boundaryGap: kind === "bar",
     inverse: horizontalBars,
+    // Diverging: the axis stays at the plot's edge (not at 0, where labels would hit the negative bars); the zero line is a mark line.
+    axisLine: diverging ? { show: false, onZero: false } : undefined,
     axisTick: { show: false },
     axisLabel: {
       hideOverlap: true,
@@ -3246,7 +3281,7 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       // Narrow: left-aligned and wrapping above the plot, so nothing is cut off at the right edge.
       ...(plotWidth !== undefined && plotWidth < NARROW_PLOT_WIDTH
         ? { left: 0, right: 0 }
-        : { right: reserveActions ? ACTIONS_RESERVE : 0 }),
+        : { left: 0, right: reserveActions ? ACTIONS_RESERVE : 0 }),
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",

package/registry/ui/page-shell.tsx

@@ -197,6 +197,8 @@ export interface PageShellHeaderProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 /**
+ * PageShellHeader — the page header band (title and update time, source / period, overall status); inside `PageShell` without `title`, with the title in `PageShellHeading`.
+ *
  * A wrapping flex row, not a two-column grid: when the heading cannot keep its
  * 20rem basis next to `PageShellHeaderEnd`, the end block drops below it. A
  * `1fr auto` grid would instead hand the heading whatever the end block leaves,

package/registry/ui/paired-chart.tsx

@@ -171,10 +171,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
  */
-const ChartFrameContext = createContext(false)
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -398,6 +413,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -2273,6 +2290,10 @@ function legendLines(items: readonly string[], plotWidth?: number, reserve = 0):
 
 /** Width (px) kept free at the legend's right for the PNG action buttons (two 32px buttons + gaps). */
 const ACTIONS_RESERVE = 80
+/** Bars stay slim on wide cards (px); stacked segments round all corners and are parted by a hairline of the surface colour (px). */
+const BAR_MAX_WIDTH = 40
+const BAR_RADIUS = 3
+const STACK_GAP = 1.5
 
 /** Room (px) one time label (`2026年1月`) needs, gap included. */
 const TIME_LABEL_WIDTH = 80
@@ -2486,6 +2507,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const compared = cartesianSeriesValues(data, [categories[compIdx]!], "default")[0]!
     return categories.map((_, i) => (i === compIdx ? compared : main[mainIdx.indexOf(i)]!))
   })()
+  // Any negative bar: the part lays out the diverging view itself (a solid zero line, category labels kept at the axis end).
+  const diverging = kind === "bar" && values.some((s) => s.some((v) => typeof v === "number" && v < 0))
   const comparisonColor = guideColor ? withAlpha(guideColor, COMPARISON_OPACITY) : undefined
 
   /* -- x labels: the actual rows, then the forecast rows that extend them */
@@ -2695,15 +2718,17 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const seriesData = pad(values[c]!)
     if (kind === "bar") {
       const rounded = horizontalBars ? [0, 4, 4, 0] : [4, 4, 0, 0]
-      // Stacked: only the topmost segment is rounded.
-      const radius = stacked && c !== categories.length - 1 ? 0 : rounded
+      // Stacked: every segment is rounded, with a hairline of the surface colour between segments (the gap).
+      const radius = stacked ? BAR_RADIUS : rounded
+      const gapStyle = stacked && labelBackground ? { borderColor: labelBackground, borderWidth: STACK_GAP } : {}
       return {
         id: SERIES_ID_PREFIX + category,
         type: "bar" as const,
         name: category,
         stack: stacked ? "total" : undefined,
         barCategoryGap,
-        itemStyle: { color, borderRadius: radius },
+        barMaxWidth: BAR_MAX_WIDTH,
+        itemStyle: { color, borderRadius: radius, ...gapStyle },
         markPoint: markPointFor(c, solid),
         markLine: undefined,
         data: seriesData.map((value, i) => {
@@ -2999,6 +3024,14 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       },
     })
   }
+  if (diverging) {
+    markLines.push({
+      name: "zero",
+      [horizontalBars ? "xAxis" : "yAxis"]: 0,
+      lineStyle: { type: "solid", width: 1, color: guideColor },
+      label: { show: false },
+    })
+  }
   if (forecast) {
     const forecastSpan =
       plotWidth && labels.length > 1
@@ -3144,6 +3177,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     show: horizontalBars ? showYAxis : showXAxis,
     boundaryGap: kind === "bar",
     inverse: horizontalBars,
+    // Diverging: the axis stays at the plot's edge (not at 0, where labels would hit the negative bars); the zero line is a mark line.
+    axisLine: diverging ? { show: false, onZero: false } : undefined,
     axisTick: { show: false },
     axisLabel: {
       hideOverlap: true,
@@ -3246,7 +3281,7 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       // Narrow: left-aligned and wrapping above the plot, so nothing is cut off at the right edge.
       ...(plotWidth !== undefined && plotWidth < NARROW_PLOT_WIDTH
         ? { left: 0, right: 0 }
-        : { right: reserveActions ? ACTIONS_RESERVE : 0 }),
+        : { left: 0, right: reserveActions ? ACTIONS_RESERVE : 0 }),
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",
@@ -3939,7 +3974,7 @@ export function buildPairedOption(cfg: PairedOptionConfig): EChartsOption {
 
   const option: AnyRecord = {
     ...barOpt,
-    legend: { ...barOpt.legend, show: showLegend, data: legendNames, right: cfg.reserveActions ? 80 : 0 },
+    legend: { ...barOpt.legend, show: showLegend, data: legendNames, left: 0, right: cfg.reserveActions ? 80 : 0 },
     grid: [
       { top, height: upper, left: gridLeft, right, containLabel: true },
       { top: top + upper + PANEL_GAP, bottom: 4, left: gridLeft, right, containLabel: true },

package/registry/ui/progress.tsx

@@ -31,7 +31,7 @@ function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
   return (
     <ProgressPrimitive.Track
       className={cn(
-        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-border",
         className
       )}
       data-slot="progress-track"

package/registry/ui/scatter-chart.tsx

@@ -183,10 +183,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
  */
-const ChartFrameContext = createContext(false)
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -410,6 +425,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -1446,6 +1463,10 @@ function legendLines(items: readonly string[], plotWidth?: number, reserve = 0):
 
 /** Width (px) kept free at the legend's right for the PNG action buttons (two 32px buttons + gaps). */
 const ACTIONS_RESERVE = 80
+/** Bars stay slim on wide cards (px); stacked segments round all corners and are parted by a hairline of the surface colour (px). */
+const BAR_MAX_WIDTH = 40
+const BAR_RADIUS = 3
+const STACK_GAP = 1.5
 
 /** Room (px) one time label (`2026年1月`) needs, gap included. */
 const TIME_LABEL_WIDTH = 80
@@ -1659,6 +1680,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const compared = cartesianSeriesValues(data, [categories[compIdx]!], "default")[0]!
     return categories.map((_, i) => (i === compIdx ? compared : main[mainIdx.indexOf(i)]!))
   })()
+  // Any negative bar: the part lays out the diverging view itself (a solid zero line, category labels kept at the axis end).
+  const diverging = kind === "bar" && values.some((s) => s.some((v) => typeof v === "number" && v < 0))
   const comparisonColor = guideColor ? withAlpha(guideColor, COMPARISON_OPACITY) : undefined
 
   /* -- x labels: the actual rows, then the forecast rows that extend them */
@@ -1868,15 +1891,17 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const seriesData = pad(values[c]!)
     if (kind === "bar") {
       const rounded = horizontalBars ? [0, 4, 4, 0] : [4, 4, 0, 0]
-      // Stacked: only the topmost segment is rounded.
-      const radius = stacked && c !== categories.length - 1 ? 0 : rounded
+      // Stacked: every segment is rounded, with a hairline of the surface colour between segments (the gap).
+      const radius = stacked ? BAR_RADIUS : rounded
+      const gapStyle = stacked && labelBackground ? { borderColor: labelBackground, borderWidth: STACK_GAP } : {}
       return {
         id: SERIES_ID_PREFIX + category,
         type: "bar" as const,
         name: category,
         stack: stacked ? "total" : undefined,
         barCategoryGap,
-        itemStyle: { color, borderRadius: radius },
+        barMaxWidth: BAR_MAX_WIDTH,
+        itemStyle: { color, borderRadius: radius, ...gapStyle },
         markPoint: markPointFor(c, solid),
         markLine: undefined,
         data: seriesData.map((value, i) => {
@@ -2172,6 +2197,14 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       },
     })
   }
+  if (diverging) {
+    markLines.push({
+      name: "zero",
+      [horizontalBars ? "xAxis" : "yAxis"]: 0,
+      lineStyle: { type: "solid", width: 1, color: guideColor },
+      label: { show: false },
+    })
+  }
   if (forecast) {
     const forecastSpan =
       plotWidth && labels.length > 1
@@ -2317,6 +2350,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     show: horizontalBars ? showYAxis : showXAxis,
     boundaryGap: kind === "bar",
     inverse: horizontalBars,
+    // Diverging: the axis stays at the plot's edge (not at 0, where labels would hit the negative bars); the zero line is a mark line.
+    axisLine: diverging ? { show: false, onZero: false } : undefined,
     axisTick: { show: false },
     axisLabel: {
       hideOverlap: true,
@@ -2419,7 +2454,7 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       // Narrow: left-aligned and wrapping above the plot, so nothing is cut off at the right edge.
       ...(plotWidth !== undefined && plotWidth < NARROW_PLOT_WIDTH
         ? { left: 0, right: 0 }
-        : { right: reserveActions ? ACTIONS_RESERVE : 0 }),
+        : { left: 0, right: reserveActions ? ACTIONS_RESERVE : 0 }),
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",
@@ -4226,8 +4261,8 @@ export function buildScatterOption(config: ScatterOptionConfig): EChartsOption {
     legend: {
       show: showLegend,
       ...(legendBelow ? { bottom: 0 } : { top: 0 }),
-      // With a heading the legend reads from the left, after it; otherwise it sits at the right edge.
-      ...(headingWidth > 0 ? { left: headingWidth } : legendBelow ? { left: 0 } : { right: config.reserveActions ? 72 : 0 }),
+      // With a heading the legend reads from the left, after it; otherwise it sits at the left edge (as in every chart).
+      ...(headingWidth > 0 ? { left: headingWidth } : { left: 0, ...(legendBelow ? {} : { right: config.reserveActions ? 72 : 0 }) }),
       type: "plain",
       icon: "circle",
       itemWidth: 8,
@@ -4242,7 +4277,9 @@ export function buildScatterOption(config: ScatterOptionConfig): EChartsOption {
         (guides.some((line) => line.axis === "x" && line.label) && (!showLegend || legendBelow) ? 14 : 0),
       right: 24,
       bottom: legendBelow ? 24 + 24 * legendLineCount : 24,
-      left: 24,
+      // The rotated y axis name lies outside `containLabel`'s reach (its right edge is `nameGap` left of the axis line): the
+      // margin holds its height, so the name is never cut at the chart's left edge.
+      left: 36,
       containLabel: true,
     },
     ...(headingWidth > 0
@@ -4300,7 +4337,7 @@ export function buildScatterOption(config: ScatterOptionConfig): EChartsOption {
               label: {
                 show: keptLabels === null,
                 position: "right" as const,
-                distance: 6,
+                distance: 8,
                 fontSize: 11,
                 color: config.textColors?.label,
                 // Plain text: an outline / shadow reads as a halo on a dark surface.
@@ -4308,7 +4345,8 @@ export function buildScatterOption(config: ScatterOptionConfig): EChartsOption {
                 textShadowBlur: 0,
                 formatter: (p: { data?: { point?: ScatterPoint } }) => p.data?.point?.label ?? "",
               },
-              labelLayout: { hideOverlap: true, moveOverlap: "shiftY" as const },
+              // A name stays beside its own dot: one that would collide with another is hidden, not pushed onto a neighbouring dot.
+              labelLayout: { hideOverlap: true },
             }
           : {}),
         // The guide lines hang off the first series (a markLine belongs to one).

package/registry/ui/sparkline.tsx

@@ -11,7 +11,7 @@
 import { forwardRef, useEffect, useState, type SVGAttributes } from "react"
 
 import { cn } from "@squadbase/vantage/ui"
-import type { ChartHighlight } from "@squadbase/vantage/components"
+import type { ChartColor, ChartHighlight } from "@squadbase/vantage/components"
 
 export type SparklineVariant = "line" | "bar"
 
@@ -24,8 +24,14 @@ export interface SparklineProps extends SVGAttributes<SVGSVGElement> {
   data: SparklineDataPoint[]
   variant?: SparklineVariant
   height?: number
-  /** Tailwind text-colour class; drives both stroke and fill via `currentColor`. */
-  color?: string
+  /**
+   * Line / bar colour: a theme series token (`"chart-1"`〜`"chart-5"`), a meaning colour
+   * (`"positive"` / `"negative"` / `"warning"` / `"neutral"` / `"info"`), or any CSS colour
+   * (`"#16a34a"`, `"var(--destructive)"`) — the same {@link ChartColor} the other charts take.
+   * Drives both stroke and fill via `currentColor`. Defaults to `"chart-1"`.
+   * Tailwind text-colour classes (`"text-primary"`) still work for compatibility; prefer the tokens above.
+   */
+  color?: ChartColor
   area?: boolean
   /** マウント時に線を引く / 棒を伸ばす。既定 `false`(`prefers-reduced-motion` では常に無効)。 */
   animate?: boolean
@@ -41,6 +47,32 @@ export interface SparklineProps extends SVGAttributes<SVGSVGElement> {
 
 const VB_WIDTH = 100
 
+/** Literal class names (not built from a template) so Tailwind's scanner keeps them. */
+const TOKEN_CLASS: Record<string, string> = {
+  "chart-1": "text-chart-1",
+  "chart-2": "text-chart-2",
+  "chart-3": "text-chart-3",
+  "chart-4": "text-chart-4",
+  "chart-5": "text-chart-5",
+  positive: "text-positive",
+  warning: "text-warning",
+  negative: "text-negative",
+  neutral: "text-neutral",
+  info: "text-info",
+}
+
+/**
+ * `color` を class か inline の CSS colour に振り分ける。トークン・意味色は `text-*` に、
+ * `text-` で始まる旧来の class 指定はそのまま class に、それ以外(`#hex` / `var(--x)` / `rgb()` …)は CSS colour として扱う。
+ */
+function resolveSparklineColor(color: string): { className?: string; css?: string } {
+  const value = color.trim()
+  const tokenClass = TOKEN_CLASS[value]
+  if (tokenClass) return { className: tokenClass }
+  if (/^(?:[\w-]+:)*!?text-/.test(value) || (/\s/.test(value) && !value.includes("("))) return { className: color }
+  return { css: value }
+}
+
 /** Map raw values onto SVG y-coordinates (inverted, padded). */
 function normalizeData(values: number[], height: number, vPad = 2): number[] {
   const min = Math.min(...values)
@@ -117,7 +149,7 @@ export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Spar
     data = NO_ROWS,
     variant = "line",
     height = 40,
-    color = "text-chart-1",
+    color = "chart-1",
     area = false,
     animate = false,
     highlight = "auto",
@@ -135,6 +167,8 @@ export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Spar
 
   if (data.length === 0) return null
 
+  const { className: colorClass, css: colorCss } = resolveSparklineColor(color)
+
   const values = data.map((d) => d.value)
   const ys = normalizeData(values, height)
   const step = ys.length > 1 ? VB_WIDTH / (ys.length - 1) : 0
@@ -160,6 +194,7 @@ export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Spar
       aria-hidden={ariaLabel ? undefined : true}
       className={cn("overflow-visible", className)}
       {...props}
+      style={colorCss ? { color: colorCss, ...props.style } : props.style}
     >
       {variant === "line" && (
         <>
@@ -167,7 +202,7 @@ export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Spar
             <path
               d={buildAreaPath(ys, height)}
               strokeWidth={0}
-              className={cn("fill-current opacity-15", color)}
+              className={cn("fill-current opacity-15", colorClass)}
             />
           )}
           <path
@@ -180,7 +215,7 @@ export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Spar
             pathLength={animate ? 1 : undefined}
             strokeDasharray={animate ? 1 : undefined}
             strokeDashoffset={animate ? (mounted ? 0 : 1) : undefined}
-            className={cn("stroke-current", animate && "motion-reduce:transition-none!", color)}
+            className={cn("stroke-current", animate && "motion-reduce:transition-none!", colorClass)}
             style={animate ? { transition: "stroke-dashoffset 0.6s ease-in-out" } : undefined}
           />
           {/* A zero-length round-capped stroke with a non-scaling width stays a
@@ -198,7 +233,7 @@ export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Spar
                 strokeWidth={p.kind === "latest" ? 5 : 4}
                 strokeLinecap="round"
                 vectorEffect="non-scaling-stroke"
-                className={cn("stroke-current", p.kind === "latest" ? color : "text-muted-foreground")}
+                className={cn("stroke-current", p.kind === "latest" ? colorClass : "text-muted-foreground")}
               />
             )
           })}
@@ -214,7 +249,7 @@ export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Spar
             width={rect.w}
             height={animate ? (mounted ? rect.h : 0) : rect.h}
             rx={0.5}
-            className={cn("fill-current", animate && "motion-reduce:transition-none!", color)}
+            className={cn("fill-current", animate && "motion-reduce:transition-none!", colorClass)}
             style={
               animate
                 ? {

package/registry/ui/states.tsx

@@ -7,6 +7,7 @@
  * business users. Defaults follow the page language (`<html lang>`: Japanese for `ja`, else
  * English) and say what is happening, not why the system failed: keep raw errors
  * ("upstream timeout after 30s") in `details`, which stays folded behind "Show details" (ja: "詳細を表示").
+ * `variant="inline"` renders one line of muted text (no panel, no action, no `details`) for a card row or table cell.
  *
  * @example
  * import { ErrorState } from "@/components/ui/states"
@@ -175,8 +176,26 @@ const TEXT = {
 
 const useText = () => TEXT[uiLanguage(useLocale())]
 
-export function Loading({ label, className }: { label?: string; className?: string }) {
+export type StateVariant = "default" | "inline"
+
+export function Loading({
+  label,
+  variant = "default",
+  className,
+}: {
+  label?: string
+  variant?: StateVariant
+  className?: string
+}) {
   const t = useText()
+  if (variant === "inline") {
+    return (
+      <span className={cn("inline-flex items-center gap-2 text-sm text-muted-foreground", className)} role="status" aria-live="polite">
+        <span className="size-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
+        {label ?? t.loading}
+      </span>
+    )
+  }
   return (
     <div className={cn("flex min-h-[30vh] items-center justify-center", className)} role="status" aria-live="polite">
       <div className="flex items-center gap-3 text-sm text-muted-foreground">
@@ -192,15 +211,20 @@ export function Empty({
   description,
   icon,
   action,
+  variant = "default",
   className,
 }: {
   title?: string
   description?: string
   icon?: ReactNode
   action?: ReactNode
+  variant?: StateVariant
   className?: string
 }) {
   const t = useText()
+  if (variant === "inline") {
+    return <span className={cn("text-sm text-muted-foreground", className)}>{title ?? t.empty}</span>
+  }
   return (
     <div className={cn("flex flex-col items-center justify-center gap-2 p-10 text-center", className)}>
       {icon ? <div className="text-3xl text-muted-foreground">{icon}</div> : null}
@@ -216,6 +240,7 @@ export function ErrorState({
   message,
   details,
   action,
+  variant = "default",
   className,
 }: {
   title?: string
@@ -224,9 +249,17 @@ export function ErrorState({
   /** Technical detail (error message, status code), folded behind "Show details" (ja: "詳細を表示"). */
   details?: ReactNode
   action?: ReactNode
+  variant?: StateVariant
   className?: string
 }) {
   const t = useText()
+  if (variant === "inline") {
+    return (
+      <span className={cn("text-sm text-destructive", className)} role="alert">
+        {title ?? t.errorTitle}
+      </span>
+    )
+  }
   const shownMessage = message === undefined ? t.errorMessage : message
   return (
     <div

package/registry/ui/status-badge.tsx

@@ -239,12 +239,12 @@ const legacyColorTones: Record<string, StatusTone> = {
  * One literal class set per tone — Tailwind only emits classes it can see
  * literally in the source.
  */
-const toneStyles: Record<StatusTone, { dot: string; bg: string; text: string; border: string }> = {
-  positive: { dot: "bg-positive", bg: "bg-positive-subtle", text: "text-positive", border: "border-positive/20 dark:border-positive/25" },
-  negative: { dot: "bg-negative", bg: "bg-negative-subtle", text: "text-negative", border: "border-negative/20 dark:border-negative/25" },
-  warning: { dot: "bg-warning", bg: "bg-warning-subtle", text: "text-warning", border: "border-warning/20 dark:border-warning/25" },
-  info: { dot: "bg-info", bg: "bg-info-subtle", text: "text-info", border: "border-info/20 dark:border-info/25" },
-  neutral: { dot: "bg-neutral", bg: "bg-neutral-subtle", text: "text-neutral", border: "border-neutral/20 dark:border-neutral/25" },
+const toneStyles: Record<StatusTone, { dot: string; bg: string; text: string }> = {
+  positive: { dot: "bg-positive", bg: "bg-positive-subtle", text: "text-positive" },
+  negative: { dot: "bg-negative", bg: "bg-negative-subtle", text: "text-negative" },
+  warning: { dot: "bg-warning", bg: "bg-warning-subtle", text: "text-warning" },
+  info: { dot: "bg-info", bg: "bg-info-subtle", text: "text-info" },
+  neutral: { dot: "bg-neutral", bg: "bg-neutral-subtle", text: "text-neutral" },
 }
 
 const resolveTone = (color: string | undefined): StatusTone => {
@@ -275,7 +275,7 @@ export const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(functio
       ref={ref}
       data-slot="status-badge"
       variant="outline"
-      className={cn("gap-1.5 rounded-md", style.border, style.bg, style.text, className)}
+      className={cn("gap-1.5 rounded-md border-transparent", style.bg, style.text, className)}
       aria-label={displayLabel}
     >
       <span className={cn("inline-block size-1.5 rounded-full", style.dot)} aria-hidden="true" />

package/registry/ui/tabs.tsx

@@ -63,6 +63,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
         "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-[color,background-color,border-color,box-shadow] group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "[&_[data-slot=badge]]:h-4 [&_[data-slot=badge]]:min-w-4 [&_[data-slot=badge]]:px-1.5 [&_[data-slot=badge]]:tabular-nums [&_[data-slot=badge][data-variant=secondary]]:bg-foreground/10 [&_[data-slot=badge][data-variant=secondary]]:text-current",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}