@jcsoftdev/ui 0.1.6 → 0.2.0

package/src/charts/icicle-chart/icicle-chart.tsx

@@ -445,7 +445,7 @@ function IcicleCell({
         <text
           x={cell.x + 7}
           y={cell.y + 16}
-          className="pointer-events-none select-none font-semibold text-[12px]"
+          className="pointer-events-none select-none font-semibold text-fs-120"
           style={{ fill: ink }}
         >
           {label}
@@ -453,7 +453,7 @@ function IcicleCell({
             <tspan
               x={cell.x + 7}
               dy={16}
-              className="font-bold text-[11px] tabular-nums"
+              className="font-bold text-fs-110 tabular-nums"
               style={{ fill: ink, opacity: 0.78 }}
             >
               {value}

package/src/charts/isotype-rows/isotype-rows.tsx

@@ -99,7 +99,7 @@ export function IsotypeRows({
       skeleton="bars"
       footer={
         keyShown ? (
-          <p className="m-0 flex items-center gap-1.5 text-[12px] text-ink-3">
+          <p className="m-0 flex items-center gap-1.5 text-fs-120 text-ink-3">
             <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24">
               <path
                 d={keyShape.path}
@@ -242,7 +242,7 @@ function IsotypePlot({
           key={item.id}
           aria-hidden="true"
           className={cn(
-            "absolute left-0 truncate font-semibold text-[12px] text-ink-2 transition-opacity duration-150",
+            "absolute left-0 truncate font-semibold text-fs-120 text-ink-2 transition-opacity duration-150",
             activeItem && activeItem.id !== item.id && "opacity-40",
           )}
           style={{
@@ -298,7 +298,7 @@ function IsotypePlot({
                   x={(track ? geometry.trackEnd : row.end) + 8}
                   y={row.center}
                   dominantBaseline="central"
-                  className="fill-ink font-bold text-[12px] tabular-nums"
+                  className="fill-ink font-bold text-fs-120 tabular-nums"
                 >
                   {format(item.value)}
                 </text>

package/src/charts/lollipop-chart/lollipop-chart.tsx

@@ -356,7 +356,7 @@ function LollipopPlot({
                     y={vertical ? cy + (negative ? radius + 14 : -(radius + 6)) : cy}
                     dy={vertical ? undefined : "0.34em"}
                     textAnchor={vertical ? "middle" : negative ? "end" : "start"}
-                    className="font-bold text-[11px] tabular-nums"
+                    className="font-bold text-fs-110 tabular-nums"
                     style={{ fill: "var(--ink-2)" }}
                   >
                     {fmt(row.value)}

package/src/charts/maps/geo/map-data-table.tsx

@@ -74,7 +74,7 @@ export function MapDataTable({
         className="inline-flex cursor-pointer items-center gap-1 rounded-xs border-0 bg-transparent p-0 font-bold text-ink outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-2"
       >
         {text}
-        <span aria-hidden="true" className="text-[10px] text-ink-3">
+        <span aria-hidden="true" className="text-fs-100 text-ink-3">
           {sort.key === key ? (sort.direction === "asc" ? "▲" : "▼") : ""}
         </span>
       </button>
@@ -82,7 +82,7 @@ export function MapDataTable({
   );
   return (
     <div className="@container/table overflow-auto rounded-event border-divider" style={{ height }}>
-      <table className="w-full border-collapse text-[12.5px]">
+      <table className="w-full border-collapse text-fs-125">
         <caption className="sr-only">{caption}</caption>
         <thead>
           <tr className="border-b-divider">
@@ -107,7 +107,7 @@ export function MapDataTable({
                 <span className="inline-flex items-center gap-2">
                   <span
                     aria-hidden="true"
-                    className="size-2.5 shrink-0 rounded-[3px] border border-line"
+                    className="size-2.5 shrink-0 rounded-xs border border-line"
                     style={{ background: row.color }}
                   />
                   {row.name}

package/src/charts/maps/geo/map-legend.tsx

@@ -33,10 +33,10 @@ export function MapLegend({
   noData,
 }: MapLegendProps) {
   const missing = noData ? (
-    <span className="inline-flex items-center gap-1.5 font-semibold text-[12px] text-ink-2">
+    <span className="inline-flex items-center gap-1.5 font-semibold text-fs-120 text-ink-2">
       <span
         aria-hidden="true"
-        className="size-2.5 shrink-0 rounded-[3px] border border-line"
+        className="size-2.5 shrink-0 rounded-xs border border-line"
         style={{ background: "var(--surface-2)" }}
       />
       {noData}
@@ -45,7 +45,7 @@ export function MapLegend({
   return (
     <div className="@md/chart:-order-1 flex flex-wrap items-end gap-x-4 gap-y-2 @md/chart:justify-end">
       {ranges && ranges.length > 0 ? (
-        <ul className="m-0 flex list-none flex-wrap gap-x-3 gap-y-1 p-0 text-[12px]">
+        <ul className="m-0 flex list-none flex-wrap gap-x-3 gap-y-1 p-0 text-fs-120">
           {ranges.map((range, index) => (
             <li
               key={range.label}
@@ -53,7 +53,7 @@ export function MapLegend({
             >
               <span
                 aria-hidden="true"
-                className="size-2.5 shrink-0 rounded-[3px]"
+                className="size-2.5 shrink-0 rounded-xs"
                 style={{ background: rangeColor(range, index, ranges.length).color }}
               />
               <span className="truncate">{range.label}</span>
@@ -63,7 +63,7 @@ export function MapLegend({
       ) : (
         <div
           aria-hidden="true"
-          className="flex w-full max-w-[220px] flex-col gap-1 text-[11px] text-ink-3 tabular-nums"
+          className="flex w-full max-w-[220px] flex-col gap-1 text-fs-110 text-ink-3 tabular-nums"
         >
           <span
             className="h-2 w-full rounded-pill"

package/src/charts/maps/geo/map-viewport.tsx

@@ -194,7 +194,7 @@ function RegionLabels({
           y={y}
           textAnchor="middle"
           dominantBaseline="central"
-          className="fill-ink font-semibold text-[11px]"
+          className="fill-ink font-semibold text-fs-110"
           style={LABEL_STYLE}
         >
           {text}

package/src/charts/parliament-chart/parliament-chart.tsx

@@ -348,7 +348,7 @@ function ParliamentPlot({
               x={cx}
               y={cy - radius * (1 + geometry.sr) - 8}
               textAnchor="middle"
-              className="fill-ink-2 font-semibold text-[11px]"
+              className="fill-ink-2 font-semibold text-fs-110"
             >
               {majorityLabel}: {formatNumber(majorityAt)}
             </text>
@@ -365,7 +365,7 @@ function ParliamentPlot({
             >
               {formatNumber(total)}
             </text>
-            <text x={cx} y={cy - 1} textAnchor="middle" className="fill-ink-3 text-[11px]">
+            <text x={cx} y={cy - 1} textAnchor="middle" className="fill-ink-3 text-fs-110">
               {centerLabel}
             </text>
           </g>

package/src/charts/pictogram-chart/pictogram-chart.tsx

@@ -117,7 +117,7 @@ export function PictogramChart({
   const icons = new Set(data.map((item) => item.icon ?? icon));
   const keyShape = resolveUnitShape(icons.size > 1 ? MIXED_KEY : icon);
   const footer = keyShown ? (
-    <p className="m-0 flex items-center gap-1.5 text-[12px] text-ink-3">
+    <p className="m-0 flex items-center gap-1.5 text-fs-120 text-ink-3">
       <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24">
         <path d={keyShape.path} style={{ fill: "var(--ink-3)", fillRule: keyShape.fillRule }} />
       </svg>

package/src/charts/polar-area-chart/polar-area-chart.tsx

@@ -408,7 +408,7 @@ function RosePlot({
             x={cx + 4}
             y={cy - ring.r - 3}
             {...DECORATIVE}
-            className="pointer-events-none fill-ink-3 text-[9.5px] tabular-nums"
+            className="pointer-events-none fill-ink-3 text-fs-95 tabular-nums"
             style={{ paintOrder: "stroke", stroke: "var(--surface)", strokeWidth: 3 }}
           >
             {axisFormat(ring.value)}
@@ -431,7 +431,7 @@ function RosePlot({
                   textAnchor={sin > 0.25 ? "start" : sin < -0.25 ? "end" : "middle"}
                   {...DECORATIVE}
                   className={cn(
-                    "pointer-events-none text-[11px] motion-safe:transition-opacity motion-safe:duration-150",
+                    "pointer-events-none text-fs-110 motion-safe:transition-opacity motion-safe:duration-150",
                     focusIndex === sector.index ? "fill-ink font-bold" : "fill-ink-2 font-semibold",
                   )}
                   style={{ opacity: focusIndex != null && focusIndex !== sector.index ? 0.4 : 1 }}

package/src/charts/progress-units/progress-units.tsx

@@ -200,7 +200,7 @@ function ProgressRow({
         ))}
       </svg>
       {showValue ? (
-        <span aria-hidden="true" className="truncate font-bold text-[13px] text-ink tabular-nums">
+        <span aria-hidden="true" className="truncate font-bold text-fs-130 text-ink tabular-nums">
           {text}
         </span>
       ) : null}

package/src/charts/radar-chart/radar-chart.tsx

@@ -405,7 +405,7 @@ function RadarPlot({
                 x={cx + 4}
                 y={cy - ring.r - 2}
                 {...DECORATIVE}
-                className="fill-ink-3 text-[9.5px] tabular-nums"
+                className="fill-ink-3 text-fs-95 tabular-nums"
               >
                 {axisFormat(ring.value)}
               </text>

package/src/charts/radial-bar-chart/radial-bar-chart.tsx

@@ -424,7 +424,7 @@ function RadialPlot({
                   textAnchor="end"
                   dominantBaseline="central"
                   {...DECORATIVE}
-                  className="pointer-events-none text-[11px] motion-safe:transition-opacity motion-safe:duration-150"
+                  className="pointer-events-none text-fs-110 motion-safe:transition-opacity motion-safe:duration-150"
                   style={{ opacity: dimmed ? 0.35 : 1 }}
                 >
                   <tspan className="fill-ink-2 font-medium">

package/src/charts/sankey-chart/sankey-chart.tsx

@@ -324,12 +324,12 @@ function DiffLegend({ labels }: { labels: SankeyLabels }) {
     [labels.previous, "var(--ink-3)", "0.3"],
   ];
   return (
-    <ul className="m-0 flex list-none flex-wrap gap-x-4 gap-y-0.5 p-0 text-[12px] text-ink-2">
+    <ul className="m-0 flex list-none flex-wrap gap-x-4 gap-y-0.5 p-0 text-fs-120 text-ink-2">
       {items.map(([name, color, opacity]) => (
         <li key={name} className="flex items-center gap-1.5">
           <span
             aria-hidden="true"
-            className="h-2 w-4 rounded-[3px]"
+            className="h-2 w-4 rounded-xs"
             style={{ background: color, opacity }}
           />
           {name}
@@ -627,7 +627,7 @@ function SankeyPlot({
                   x={x}
                   y={12}
                   textAnchor={anchor}
-                  className="select-none font-bold text-[11px] uppercase tracking-wide"
+                  className="select-none font-bold text-fs-110 uppercase tracking-wide"
                   style={{ fill: "var(--ink-3)" }}
                 >
                   {text}
@@ -1058,7 +1058,7 @@ function SankeyNodeLabels({ graph, format, inside, showValues, room, lit }: Sank
             y={twoLines ? y - 7 : y}
             dominantBaseline="middle"
             textAnchor={end ? "end" : "start"}
-            className="font-semibold text-[12px] motion-safe:transition-opacity motion-safe:duration-150"
+            className="font-semibold text-fs-120 motion-safe:transition-opacity motion-safe:duration-150"
             style={{
               fill: "var(--ink)",
               opacity: lit && !lit.has(node.id) ? 0.4 : 1,
@@ -1074,7 +1074,7 @@ function SankeyNodeLabels({ graph, format, inside, showValues, room, lit }: Sank
               <tspan
                 x={x}
                 dy={15}
-                className="font-bold text-[11px] tabular-nums"
+                className="font-bold text-fs-110 tabular-nums"
                 style={{ fill: inside ? "var(--ink-2)" : "var(--ink-3)" }}
               >
                 {value}

package/src/charts/slope-chart/slope-chart.tsx

@@ -355,7 +355,7 @@ function SlopePlot({
         height={height}
         className="block overflow-visible"
       >
-        <g className="font-bold text-[11px]" style={{ fill: "var(--ink-3)" }}>
+        <g className="font-bold text-fs-110" style={{ fill: "var(--ink-3)" }}>
           <text x={xL} y={12} textAnchor="middle">
             {fit(fromLabel, leftWidth + 40, 11)}
           </text>

package/src/charts/sparkline/sparkline.tsx

@@ -252,7 +252,7 @@ export function Sparkline({
       {activePoint && activeValue != null ? (
         <div
           aria-hidden="true"
-          className="-translate-x-1/2 pointer-events-none absolute bottom-full z-10 mb-1.5 whitespace-nowrap rounded-popover surface-overlay px-2 py-1 font-bold text-[11px] text-ink tabular-nums shadow-overlay"
+          className="-translate-x-1/2 pointer-events-none absolute bottom-full z-10 mb-1.5 whitespace-nowrap rounded-popover surface-overlay px-2 py-1 font-bold text-fs-110 text-ink tabular-nums shadow-overlay"
           style={{ left: Math.min(Math.max(activePoint.x, 24), width - 24) }}
         >
           {categories?.[active as number] ? (

package/src/charts/stock-chart/stock-chart.tsx

@@ -444,7 +444,7 @@ export function StockChart({
                       setRange(rangeWindow(dates, preset));
                     }}
                     className={cn(
-                      "cursor-pointer rounded-button px-2 py-1 font-semibold text-[11.5px] tabular-nums outline-none focus-visible:outline-2 focus-visible:outline-accent-ink @md/chart:px-2.5",
+                      "cursor-pointer rounded-button px-2 py-1 font-semibold text-fs-115 tabular-nums outline-none focus-visible:outline-2 focus-visible:outline-accent-ink @md/chart:px-2.5",
                       activePreset?.id === preset.id
                         ? "bg-surface text-ink shadow-xs"
                         : "text-ink-3 hover:text-ink",

package/src/charts/stock-chart/stock-drawing-layer.tsx

@@ -134,7 +134,7 @@ export function DrawingShape({
         <text
           x={6}
           y={py - 5}
-          className="font-semibold text-[10.5px] tabular-nums"
+          className="font-semibold text-fs-105 tabular-nums"
           style={{ fill: COLORS.horizontal }}
         >
           {fmt(drawing.price)}
@@ -189,7 +189,7 @@ export function DrawingShape({
         <text
           x={left + 6}
           y={top + 14}
-          className="font-bold text-[10.5px] tabular-nums"
+          className="font-bold text-fs-105 tabular-nums"
           style={{ fill: COLORS.range }}
         >
           {change > 0 ? "+" : ""}
@@ -232,7 +232,7 @@ export function DrawingShape({
               x={geometry.innerWidth - 4}
               y={py - 4}
               textAnchor="end"
-              className="font-semibold text-[10px] tabular-nums"
+              className="font-semibold text-fs-100 tabular-nums"
               style={{ fill: COLORS.fib }}
             >
               {level.ratio} · {fmt(level.price)}
@@ -289,7 +289,7 @@ export function MeasureShape({
         y={boxY + 11}
         dy="0.34em"
         textAnchor="middle"
-        className="font-bold text-[10.5px] tabular-nums"
+        className="font-bold text-fs-105 tabular-nums"
         style={{ fill: "var(--surface)" }}
       >
         {label}

package/src/charts/stock-chart/stock-plot.tsx

@@ -803,7 +803,7 @@ export function StockPlot({
                   y={top + 8}
                   dy="0.34em"
                   textAnchor="middle"
-                  className="font-bold text-[10px]"
+                  className="font-bold text-fs-100"
                   style={{ fill: "var(--surface)" }}
                 >
                   {flag.label}
@@ -813,7 +813,7 @@ export function StockPlot({
           })}
           {lower && oscillator ? (
             <g transform={`translate(0,${lowerTop})`}>
-              <text {...DECORATIVE} x={0} y={-7} className="fill-ink-3 font-semibold text-[10.5px]">
+              <text {...DECORATIVE} x={0} y={-7} className="fill-ink-3 font-semibold text-fs-105">
                 {oscillator.name}
                 {(() => {
                   const index = active ?? view.length - 1;
@@ -1123,7 +1123,7 @@ function AxisTag({
         y={0}
         dy="0.34em"
         textAnchor="middle"
-        className="font-bold text-[10.5px] tabular-nums"
+        className="font-bold text-fs-105 tabular-nums"
         style={{ fill: "var(--surface)" }}
       >
         {text}

package/src/charts/stream-graph/stream-graph.tsx

@@ -456,7 +456,7 @@ function StreamPlot({
                     y={cy}
                     dy="0.34em"
                     textAnchor="middle"
-                    className="pointer-events-none font-bold text-[12px]"
+                    className="pointer-events-none font-bold text-fs-120"
                     strokeWidth={3}
                     strokeLinejoin="round"
                     style={{

package/src/charts/sunburst-chart/sunburst-chart.tsx

@@ -549,7 +549,7 @@ function SegmentLabel({
       transform={`rotate(${rotate.toFixed(2)} ${x.toFixed(2)} ${y.toFixed(2)})`}
       textAnchor="middle"
       dominantBaseline="central"
-      className="pointer-events-none select-none font-semibold text-[11px]"
+      className="pointer-events-none select-none font-semibold text-fs-110"
       style={{ fill: ink, opacity: dimmed ? 0.4 : 1, transition: "opacity 150ms ease-out" }}
     >
       {name}

package/src/charts/timeline-chart/timeline-chart.tsx

@@ -164,7 +164,7 @@ const BarMark = memo(function BarMark({
           x={x + 8}
           y={y + height / 2}
           dy="0.34em"
-          className="pointer-events-none font-bold text-[11px]"
+          className="pointer-events-none font-bold text-fs-110"
           style={{ fill: "var(--surface)" }}
         >
           {text}
@@ -527,7 +527,7 @@ function TimelinePlot({
                 y={band.top + band.height / 2}
                 dy="0.34em"
                 textAnchor="end"
-                className="font-semibold text-[12px]"
+                className="font-semibold text-fs-120"
                 style={{ fill: "var(--ink-2)" }}
               >
                 {fitText(band.row.label, left - 18, 12)}
@@ -574,7 +574,7 @@ function TimelinePlot({
                 y={-MARGIN.top + 10}
                 dy="0.34em"
                 textAnchor="middle"
-                className="font-bold text-[10px]"
+                className="font-bold text-fs-100"
                 style={{ fill: "var(--surface)" }}
               >
                 {texts.now}

package/src/charts/tree-chart/tree-card.tsx

@@ -53,7 +53,7 @@ export function TreeCard({ node, state }: TreeCardProps) {
         style={{ background: node.color }}
       />
       <span
-        className="grid size-9 shrink-0 place-items-center overflow-hidden rounded-avatar font-bold text-[12px] text-ink"
+        className="grid size-9 shrink-0 place-items-center overflow-hidden rounded-avatar font-bold text-fs-120 text-ink"
         style={{ background: tint(node.color, 24) }}
       >
         {node.image ? (
@@ -63,19 +63,19 @@ export function TreeCard({ node, state }: TreeCardProps) {
         )}
       </span>
       <span className="flex min-w-0 flex-1 flex-col gap-0.5">
-        <span className="truncate font-semibold text-[13px] text-ink leading-tight">
+        <span className="truncate font-semibold text-fs-130 text-ink leading-tight">
           {node.name}
         </span>
         {node.subtitle || node.badge ? (
           <span className="flex min-w-0 items-center gap-1.5">
             {node.subtitle ? (
-              <span className="min-w-0 flex-1 truncate text-[11px] text-ink-3 leading-tight">
+              <span className="min-w-0 flex-1 truncate text-fs-110 text-ink-3 leading-tight">
                 {node.subtitle}
               </span>
             ) : null}
             {node.badge ? (
               <span
-                className="max-w-[60%] shrink-0 truncate rounded-badge px-1.5 font-bold text-[10px] text-ink-2 leading-[16px]"
+                className="max-w-[60%] shrink-0 truncate rounded-badge px-1.5 font-bold text-fs-100 text-ink-2 leading-4"
                 style={{ background: tint(node.color, 16) }}
               >
                 {node.badge}
@@ -94,7 +94,7 @@ function CountBadge({ state, color }: { state: TreeNodeState; color: string }) {
   if (!state.showCount || state.descendants === 0) return null;
   return (
     <span
-      className="grid h-[18px] min-w-[18px] shrink-0 place-items-center rounded-badge px-1 font-bold text-[10px] text-ink tabular-nums"
+      className="grid h-4.5 min-w-4.5 shrink-0 place-items-center rounded-badge px-1 font-bold text-fs-100 text-ink tabular-nums"
       style={{ background: tint(color, 22) }}
       title={`+${state.descendants}`}
     >
@@ -123,7 +123,7 @@ export function TreeChip({ node, state }: TreeCardProps) {
         className="size-2 shrink-0 rounded-pill"
         style={{ background: node.color }}
       />
-      <span className="min-w-0 flex-1 truncate font-semibold text-[11px] text-ink leading-none">
+      <span className="min-w-0 flex-1 truncate font-semibold text-fs-110 text-ink leading-none">
         {node.name}
       </span>
       <CountBadge state={state} color={node.color} />

package/src/charts/tree-chart/tree-chart.tsx

@@ -745,7 +745,7 @@ function TreePlot({
                         event.stopPropagation();
                         if (!panZoom.wasDrag()) toggle(node);
                       }}
-                      className="absolute top-0 left-0 grid h-5 min-w-5 cursor-pointer place-items-center rounded-badge border-divider bg-surface-control px-1 font-bold text-[10px] text-ink-2 tabular-nums shadow-control hover:text-ink"
+                      className="absolute top-0 left-0 grid h-5 min-w-5 cursor-pointer place-items-center rounded-badge border-divider bg-surface-control px-1 font-bold text-fs-100 text-ink-2 tabular-nums shadow-control hover:text-ink"
                       style={{
                         transform: `translate(${tx}px, ${ty}px) translate(-50%, -50%)`,
                         opacity: pose.opacity,
@@ -837,13 +837,13 @@ function TreePlot({
                 stepMatch(event.shiftKey ? -1 : 1);
               } else if (event.key === "Escape") onSearch("");
             }}
-            className="h-7 min-w-0 flex-1 border-0 bg-transparent px-1.5 text-[12px] text-ink outline-none placeholder:text-ink-3"
+            className="h-7 min-w-0 flex-1 border-0 bg-transparent px-1.5 text-fs-120 text-ink outline-none placeholder:text-ink-3"
           />
           {query ? (
             <>
               <span
                 aria-live="polite"
-                className="hidden shrink-0 px-1 text-[11px] text-ink-3 tabular-nums @sm/chart:inline"
+                className="hidden shrink-0 px-1 text-fs-110 text-ink-3 tabular-nums @sm/chart:inline"
               >
                 {matches.length > 0
                   ? `${matchIndex + 1} ${labels.of} ${matches.length}`
@@ -901,7 +901,7 @@ function TreePlot({
           aria-label={labels.controls}
           className="absolute top-2 right-2 flex items-center gap-1 rounded-control border-divider bg-surface-control p-0.5 shadow-control"
         >
-          <span className="hidden px-1.5 font-semibold text-[11px] text-ink-3 tabular-nums @sm/chart:inline">
+          <span className="hidden px-1.5 font-semibold text-fs-110 text-ink-3 tabular-nums @sm/chart:inline">
             {Math.round(view.k * 100)}%
           </span>
           <ToolButton label={labels.zoomOut} onClick={() => panZoom.zoomBy(1 / ZOOM_STEP)}>
@@ -916,7 +916,7 @@ function TreePlot({
         </div>
       ) : null}
       {wheelZoom === "modifier" ? (
-        <p className="pointer-events-none absolute bottom-1.5 left-2 m-0 hidden text-[11px] text-ink-3 @md/chart:block">
+        <p className="pointer-events-none absolute bottom-1.5 left-2 m-0 hidden text-fs-110 text-ink-3 @md/chart:block">
           {labels.zoomHint}
         </p>
       ) : null}

package/src/charts/treemap-chart/treemap-chart.tsx

@@ -397,7 +397,7 @@ const TreemapCells = memo(function TreemapCells({
               <text
                 x={cell.x0 + 8}
                 y={cell.y0 + 16}
-                className="pointer-events-none select-none font-bold text-[12px]"
+                className="pointer-events-none select-none font-bold text-fs-120"
                 style={{ fill: "var(--ink)" }}
               >
                 {label}
@@ -411,7 +411,7 @@ const TreemapCells = memo(function TreemapCells({
               <text
                 x={cell.x0 + 8}
                 y={cell.y0 + 18}
-                className="pointer-events-none select-none font-semibold text-[12px]"
+                className="pointer-events-none select-none font-semibold text-fs-120"
                 style={{ fill: ink }}
               >
                 {label}
@@ -419,7 +419,7 @@ const TreemapCells = memo(function TreemapCells({
                   <tspan
                     x={cell.x0 + 8}
                     dy={17}
-                    className="font-bold text-[11px] tabular-nums"
+                    className="font-bold text-fs-110 tabular-nums"
                     style={{ fill: ink, opacity: 0.78 }}
                   >
                     {value}

package/src/charts/waterfall-chart/waterfall-chart.tsx

@@ -366,7 +366,7 @@ function WaterfallPlot({
                     x={shape.x + x.bandwidth / 2}
                     y={shape.top - 6}
                     textAnchor="middle"
-                    className="font-bold text-[11px] tabular-nums"
+                    className="font-bold text-fs-110 tabular-nums"
                     style={{
                       fill:
                         shape.bar.kind === "increase"
@@ -570,7 +570,7 @@ function HorizontalWaterfallPlot({
                   x={shape.right + 6}
                   y={shape.y + band.bandwidth / 2}
                   dy="0.34em"
-                  className="font-bold text-[11px] tabular-nums"
+                  className="font-bold text-fs-110 tabular-nums"
                   style={{
                     fill:
                       shape.bar.kind === "increase"

package/src/containers/action-bar/action-bar.tsx

@@ -1,9 +1,12 @@
 "use client";
 
-import { X } from "lucide-react";
 import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from "react";
+import { X } from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
+export type ActionBarPart = "root" | "count" | "actions" | "clear";
+
 export interface ActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
   /** Number of selected items. The bar renders nothing while it is 0. */
   selectedCount: number;
@@ -18,6 +21,8 @@ export interface ActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "c
    * ancestor (a card, a table wrapper); `static` renders inline.
    */
   position?: "fixed" | "absolute" | "static";
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<ActionBarPart>;
 }
 
 const positionClasses = {
@@ -34,6 +39,7 @@ export function ActionBar({
   children,
   position = "absolute",
   className,
+  classNames,
   onKeyDown,
   ...props
 }: ActionBarProps) {
@@ -55,20 +61,31 @@ export function ActionBar({
       className={cn(
         "@container/action-bar z-40 flex w-fit max-w-[calc(100%-1rem)] flex-wrap items-center gap-density rounded-popover border-card surface-overlay bg-surface-overlay px-control-x py-density-sm shadow-overlay",
         positionClasses[position],
+        classNames?.root,
         className,
       )}
       {...props}
     >
-      <span aria-live="polite" className="whitespace-nowrap font-semibold text-control text-ink">
+      <span
+        aria-live="polite"
+        className={cn("whitespace-nowrap font-semibold text-control text-ink", classNames?.count)}
+      >
         {selectedCount} {selectedCount === 1 ? noun[0] : noun[1]}
       </span>
-      <div className="flex min-w-0 flex-wrap items-center gap-density-sm">{children}</div>
+      <div
+        className={cn("flex min-w-0 flex-wrap items-center gap-density-sm", classNames?.actions)}
+      >
+        {children}
+      </div>
       {onClear ? (
         <button
           type="button"
           aria-label="Limpiar selección"
           onClick={onClear}
-          className="pressable inline-flex size-control-sm cursor-pointer items-center justify-center rounded-button text-ink-2 hover:bg-surface-2 hover:text-ink focus-visible:focus-ring"
+          className={cn(
+            "pressable inline-flex size-control-sm cursor-pointer items-center justify-center rounded-button text-ink-2 hover:bg-surface-2 hover:text-ink focus-visible:focus-ring",
+            classNames?.clear,
+          )}
         >
           <X className="size-4" aria-hidden="true" />
         </button>

package/src/containers/action-bar/index.ts

@@ -1 +1 @@
-export { ActionBar, type ActionBarProps } from "./action-bar.js";
+export { ActionBar, type ActionBarPart, type ActionBarProps } from "./action-bar.js";