@eifi1/ui-kit 0.6.1 → 0.7.0

package/src/components/mini-calendar.tsx

@@ -2,6 +2,7 @@ import { useEffect, useId, useMemo, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, KeyboardEvent } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
+import { horizontalStep } from "../lib/direction";
 import { useAnnounce } from "../hooks/use-announce";
 import { parseIsoDate, sameYmd, toLocalIso } from "../lib/dates";
 import { useKitLabels, useKitLocale, useKitWeekStart } from "../i18n/kit-labels";
@@ -322,12 +323,13 @@ export function MiniCalendar({
    */
   const onDayKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
     const next = new Date(activeDate);
-    switch (e.key) {
-      case "ArrowLeft":
-        next.setDate(next.getDate() - 1);
-        break;
-      case "ArrowRight":
-        next.setDate(next.getDate() + 1);
+    // ←/→ are "previous/next day" along the READING direction: the grid's columns run
+    // right-to-left in RTL (it is a CSS grid, so the browser mirrors it), and ArrowLeft
+    // there moves to the day that sits to the left — the next one.
+    const step = horizontalStep(e.key, e.currentTarget);
+    switch (step ? "horizontal" : e.key) {
+      case "horizontal":
+        next.setDate(next.getDate() + step);
         break;
       case "ArrowUp":
         next.setDate(next.getDate() - 7);
@@ -419,7 +421,8 @@ export function MiniCalendar({
           aria-label={labels.previousMonth}
           className="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]"
         >
-          <ChevronLeft className="size-4" />
+          {/* Mirrored in RTL: "previous" points to the reading START, which is right. */}
+          <ChevronLeft className="size-4 rtl:-scale-x-100" aria-hidden />
         </button>
         {/* Named by this element rather than by a string of its own, and `aria-live`
             so paging months says which month you have landed on — the caption is the
@@ -438,7 +441,7 @@ export function MiniCalendar({
           aria-label={labels.nextMonth}
           className="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]"
         >
-          <ChevronRight className="size-4" />
+          <ChevronRight className="size-4 rtl:-scale-x-100" aria-hidden />
         </button>
       </div>
       <div

package/src/components/month-picker.tsx

@@ -2,6 +2,7 @@ import { useEffect, useId, useMemo, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from "react";
 import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
+import { dirOf, horizontalStep, type Direction } from "../lib/direction";
 import { monthKey, pad } from "../lib/dates";
 import { FieldLabel, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER } from "./ui";
 import { Popover } from "./popover";
@@ -309,17 +310,14 @@ function MonthGrid({
 
   const onCellKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
     // Left and right are VISUAL directions: in a right-to-left page the grid runs the
-    // other way, so "right" is the previous month there. Read from the nearest `dir`
-    // up the tree, which for this portalled panel is in practice <html>'s.
-    const rtl = e.currentTarget.closest("[dir]")?.getAttribute("dir") === "rtl";
+    // other way, so "right" is the previous month there. The panel is portalled, but
+    // it carries the field's `dir` (see MonthPicker), so the nearest `dir` is right.
+    const step = horizontalStep(e.key, e.currentTarget);
     const col = (active.month - 1) % COLUMNS;
     let delta: number;
-    switch (e.key) {
-      case "ArrowLeft":
-        delta = rtl ? 1 : -1;
-        break;
-      case "ArrowRight":
-        delta = rtl ? -1 : 1;
+    switch (step ? "horizontal" : e.key) {
+      case "horizontal":
+        delta = step;
         break;
       case "ArrowUp":
         delta = -COLUMNS;
@@ -502,9 +500,14 @@ export function MonthPicker({
   const panelId = `${id}-panel`;
   // Only a STRING label can double as a name; a ReactNode may hold its own controls.
   const named = typeof label === "string";
+  // The panel is portalled to <body>, out of the subtree whose `dir` it inherited — an
+  // RTL form got an LTR grid. Read when opening (`toggle` is the popover's only way
+  // open) and put back on the panel. Also what the arrow keys above read.
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [dir, setDir] = useState<Direction>("ltr");
 
   return (
-    <div {...wrapperRest} className={cn("relative", className)}>
+    <div {...wrapperRest} ref={rootRef} className={cn("relative", className)}>
       {label !== undefined && <FieldLabel>{label}</FieldLabel>}
       {/* The hidden twin the trigger is named by — see DateField. `sr-only-fixed`,
           and inside this `relative` root either way. */}
@@ -517,10 +520,14 @@ export function MonthPicker({
         width={256}
         panelId={panelId}
         labels={{ panel: labels.panel }}
+        dir={dir}
         trigger={({ open, toggle, ref }) => (
           <MonthFieldTrigger
             open={open}
-            toggle={toggle}
+            toggle={() => {
+              setDir(dirOf(rootRef.current));
+              toggle();
+            }}
             triggerRef={ref}
             triggerText={triggerText}
             hasValue={selected != null}

package/src/components/multi-entity-combobox.tsx

@@ -200,7 +200,7 @@ export function MultiEntityCombobox<V extends string | number>({
         }}
         className={cn(
           FIELD_TRIGGER,
-          "pr-9",
+          "pe-9",
           label !== undefined && FIELD_FLOATING_PAD,
           disabled && "cursor-not-allowed opacity-50",
           field.isInvalid && FIELD_INVALID,
@@ -226,7 +226,7 @@ export function MultiEntityCombobox<V extends string | number>({
               e.stopPropagation();
               onChange([]);
             }}
-            className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]"
+            className="absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]"
           >
             <X className="size-4" />
           </span>

package/src/components/multi-select.tsx

@@ -8,7 +8,7 @@ import { Check } from "lucide-react";
 import { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from "./ui";
 import { cn } from "../lib/cn";
 import { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from "./dropdown";
-import { useActiveOptionScroll } from "./combobox-core";
+import { useActiveOptionScroll, useComboboxFieldError } from "./combobox-core";
 import {
   DEFAULT_COMMON_LABELS,
   DEFAULT_MULTI_SELECT_LABELS,
@@ -50,6 +50,14 @@ export interface MultiSelectProps extends Omit<ComponentPropsWithoutRef<"div">,
    *  this package carries it now, so a form can mark any of its fields rather than
    *  only the one that happened to have it first. */
   invalid?: boolean;
+  /** What is wrong with the selection, in the caller's words. Rendered under the
+   *  field, pointed at by the trigger's `aria-describedby` (merged with any the
+   *  caller passed) and implies `invalid` — {@link Input}'s `error`, on the same
+   *  rules. */
+  error?: ReactNode;
+  /** The trigger cannot be opened: FIELD_BASE's settled grey, no chevron (as a
+   *  disabled {@link Select} drops its own), and a dimmed label. */
+  disabled?: boolean;
 }
 
 export function MultiSelect({
@@ -66,7 +74,10 @@ export function MultiSelect({
   className,
   panelClassName,
   invalid,
+  error,
+  disabled,
   "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
   ...rest
 }: MultiSelectProps) {
   const { open, setOpen, wrapperRef, triggerRef, closeToTrigger, query, setQuery, inputRef } =
@@ -81,6 +92,7 @@ export function MultiSelect({
     selectedCount: itemLabel,
   });
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const field = useComboboxFieldError(error, invalid, ariaDescribedBy);
   // One id per instance: `aria-controls` on the trigger names the list while the
   // list is still closed.
   const uid = useId();
@@ -151,10 +163,11 @@ export function MultiSelect({
     // the thing with a role. Spread FIRST so the ARIA the trigger composes, and the
     // handlers that open the list, cannot be replaced by accident from outside.
     <div {...rest} ref={wrapperRef} className={cn("relative", className)}>
-      {label !== undefined && <FieldLabel>{label}</FieldLabel>}
+      {label !== undefined && <FieldLabel className={disabled ? "opacity-50" : undefined}>{label}</FieldLabel>}
       <button
         ref={triggerRef}
         type="button"
+        disabled={disabled}
         // A combobox, not a bare button: this trigger carried `aria-invalid`, which
         // `button` does not support, so a required-and-empty filter painted its rose
         // border and announced nothing (ESLint's `role-supports-aria-props`, the
@@ -187,15 +200,25 @@ export function MultiSelect({
             setActive(0);
           }
         }}
-        aria-invalid={invalid || undefined}
-        className={cn(FIELD_TRIGGER, "pr-9", label !== undefined && FIELD_FLOATING_PAD, invalid && FIELD_INVALID)}
+        aria-invalid={field.isInvalid || undefined}
+        // On the TRIGGER, where focus lands — the `aria-describedby` a caller put on
+        // the component is taken off the wrapper for the same reason.
+        aria-describedby={field.describedBy}
+        className={cn(
+          FIELD_TRIGGER,
+          "pe-9",
+          label !== undefined && FIELD_FLOATING_PAD,
+          // FIELD_TRIGGER's hover would still light a trigger nothing can open.
+          "disabled:hover:bg-[var(--bg-surface-2)]",
+          field.isInvalid && FIELD_INVALID,
+        )}
       >
         {/* The summary IS the field's value, so it inherits FIELD_BASE's ink rather
             than restating a lighter one (Keksdose dev#477). */}
         <span className="truncate">{selectedSummary}</span>
-        <FieldChevron />
+        {!disabled && <FieldChevron />}
       </button>
-      {open && (
+      {open && !disabled && (
         <DropdownPanel
           // 16rem by default; `panelClassName` is how a caller widens it (Keksdose
           // feedback #147: the market picker's rows carry a postcode, a town, a
@@ -266,7 +289,7 @@ export function MultiSelect({
                     onClick={() => toggle(o.value)}
                     onMouseEnter={() => setActive(i)}
                     className={cn(
-                      "flex w-full items-center justify-between gap-2 px-3 py-1.5 text-sm text-left hover:bg-[var(--bg-hover)]",
+                      "flex w-full items-center justify-between gap-2 px-3 py-1.5 text-sm text-start hover:bg-[var(--bg-hover)]",
                       checked && "bg-[var(--bg-active)]",
                       i === active && "bg-[var(--bg-hover)]",
                     )}
@@ -298,6 +321,10 @@ export function MultiSelect({
             })}
         </DropdownPanel>
       )}
+      {/* After the panel, not before it: the panel is `absolute` with no `top`, so it
+          opens at its place in the flow — under the message, had the message come
+          first. */}
+      {field.errorEl}
     </div>
   );
 }

package/src/components/number-input.tsx

@@ -234,7 +234,7 @@ export function NumberInput({
         }}
         onKeyDown={onKeyDown}
         aria-invalid={invalid || undefined}
-        // The right-padding sits last so it always wins over an inputClassName that
+        // The end padding sits last so it always wins over an inputClassName that
         // sets its own px. Both trailing controls can be on at once, so the room
         // they need is reserved together rather than by whichever happens to render:
         // the calculator is ~36px and a short unit ~24px, and a field that reserved
@@ -246,7 +246,7 @@ export function NumberInput({
               ? FLOATING_INPUT_CLASS
               : FIELD_BASE,
           inputClassName,
-          showCalc && suffix !== undefined ? "pr-16" : showCalc ? "pr-9" : suffix !== undefined ? "pr-8" : undefined,
+          showCalc && suffix !== undefined ? "pe-16" : showCalc ? "pe-9" : suffix !== undefined ? "pe-8" : undefined,
           invalid && FIELD_INVALID,
         )}
       />
@@ -254,7 +254,7 @@ export function NumberInput({
         // One flex track for both, so the unit and the calculator sit side by side
         // instead of stacking on the same corner — AmountInput's arrangement, which
         // has carried a chip and a calculator together since #430.
-        <div className="absolute inset-y-0 right-0 flex items-center">
+        <div className="absolute inset-y-0 end-0 flex items-center">
           {showCalc && (
             <CalculatorButton
               value={value}
@@ -267,7 +267,7 @@ export function NumberInput({
           {suffix !== undefined && (
             <span
               aria-hidden
-              className="pointer-events-none pr-3 text-xs font-medium text-[var(--text-muted)]"
+              className="pointer-events-none pe-3 text-xs font-medium text-[var(--text-muted)]"
             >
               {suffix}
             </span>

package/src/components/numpad-sheet.tsx

@@ -203,9 +203,11 @@ export function NumberPadSheet({
         {label != null && (
           <span className="truncate pb-1 text-xs font-medium text-[var(--money-neutral)]">{label}</span>
         )}
-        <div className="ml-auto min-w-0 text-right">
-          <div className="truncate font-mono text-lg leading-tight text-[var(--text-primary)]">{value || "0"}</div>
-          <div className="h-4 font-mono text-xs text-[var(--money-neutral)]">{preview}</div>
+        {/* At the logical end, opposite the label; the figures themselves stay
+            left-to-right and right-aligned, like the desktop calculator's. */}
+        <div className="ms-auto min-w-0">
+          <div dir="ltr" className="truncate text-right font-mono text-lg leading-tight text-[var(--text-primary)]">{value || "0"}</div>
+          <div dir="ltr" className="h-4 text-right font-mono text-xs text-[var(--money-neutral)]">{preview}</div>
         </div>
       </div>
 

package/src/components/picker-sheet.tsx

@@ -246,6 +246,6 @@ export function PickerSheet({
 /** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,
  *  so a list is comfortable to hit with a thumb rather than merely legible. */
 export const SHEET_ROW_CLASS = cn(
-  "flex min-h-11 w-full items-center gap-2 px-4 py-2 text-left text-base",
+  "flex min-h-11 w-full items-center gap-2 px-4 py-2 text-start text-base",
   "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
 );

package/src/components/popover.tsx

@@ -5,6 +5,8 @@ import { useAnchoredPanel } from "../hooks/use-anchored-panel";
 import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss";
 import { useFocusTrap } from "../hooks/use-focus-trap";
 import { cn } from "../lib/cn";
+import { dirOf } from "../lib/direction";
+import type { Direction } from "../lib/direction";
 import { useKitLabels } from "../i18n/kit-labels";
 
 /** The panel's accessible name. A `role="dialog"` with no name announces as "dialog"
@@ -101,13 +103,22 @@ export function Popover({
   const triggerRef = useRef<HTMLButtonElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
+  // The trigger's reading direction, read when it is pressed. The panel is portalled to
+  // <body>, out of any `dir="rtl"` subtree the trigger sits in, so without carrying it
+  // across a right-to-left calendar or filter rendered left-to-right.
+  const [dir, setDir] = useState<Direction>("ltr");
   const close = () => setOpen(false);
-  const toggle = () => setOpen((v) => !v);
+  const toggle = () => {
+    setDir(dirOf(triggerRef.current));
+    setOpen((v) => !v);
+  };
   // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's
   // `popover.panel` is only the last-resort name for a panel no caller named.
   const text = useKitLabels("popover", DEFAULT_POPOVER_LABELS, labels);
 
-  // Align the panel's right edge to the trigger's and clamp it horizontally; the
+  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was
+  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it
+  // horizontally; the
   // hook owns the vertical half — below by default, flipped above (and height-capped)
   // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom
   // of the screen (feedback #135). It re-measures on scroll/resize.
@@ -116,7 +127,10 @@ export function Popover({
   const pos = rect
     ? {
         top: placement.top,
-        left: Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8),
+        left: Math.min(
+          Math.max(8, dir === "rtl" ? rect.left : rect.right - width),
+          window.innerWidth - width - 8,
+        ),
       }
     : null;
 
@@ -169,6 +183,7 @@ export function Popover({
             // element; the DOM spelling is the one being standardised on, so where both
             // are present it is the one that survives.
             aria-label={ariaLabel ?? text.panel}
+            dir={rest.dir ?? dir}
             // Without it the panel cannot take focus at all, and the trap above would
             // silently do nothing on a panel whose children are not yet tabbable.
             tabIndex={-1}

package/src/components/series-chart-ticks.ts

@@ -0,0 +1,52 @@
+// Round tick values for `SeriesChart` — internal, not re-exported by `@eifi1/ui-kit/chart`.
+//
+// Handed an explicit numeric domain, recharts divides it into equal parts and prints
+// wherever those land: a fitted band of [-11, 811] comes out as -11, 189, 389 … and a
+// padded [89, 1011] as 89, 289, 489 — numbers nobody can put a ruler against. These
+// are the ticks a person would draw instead: every multiple of a 1, 2 or 5 × 10^n step
+// that lies INSIDE the domain. The domain itself is left alone, so the 4 % of air the
+// fit leaves and a zoom window's exact edges both survive; the frame simply does not
+// get a number of its own.
+
+/** Roughly how many ticks to aim for. The 1/2/5 ladder lands anywhere from about half
+ *  to about twice this, which is the price of every tick being a round number. */
+const TARGET_TICKS = 5;
+
+/** The round step closest to `span / target`: 1, 2 or 5 times a power of ten. */
+export function niceStep(span: number, target: number = TARGET_TICKS): number {
+  const rough = span / Math.max(1, target);
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const norm = rough / magnitude;
+  const factor = norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10;
+  return factor * magnitude;
+}
+
+/**
+ * The round ticks inside `[low, high]`, ascending — or `undefined` when there is no
+ * span to divide (no domain, a zero-height one, anything non-finite), which leaves the
+ * choice to recharts.
+ *
+ * Each tick is computed as `k × step` and then rounded to the step's own decimals:
+ * accumulating `+= 0.1` would print 0.30000000000000004 on the third tick.
+ */
+export function niceTicks(
+  domain: readonly [number, number] | undefined,
+  target: number = TARGET_TICKS,
+): number[] | undefined {
+  if (!domain) return undefined;
+  const [low, high] = domain;
+  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high > low)) return undefined;
+  const step = niceStep(high - low, target);
+  if (!(step > 0) || !Number.isFinite(step)) return undefined;
+  const decimals = Math.max(0, -Math.floor(Math.log10(step)));
+  const ticks: number[] = [];
+  // Half a step's tolerance per end would admit ticks outside the frame; a millionth
+  // of one only forgives the float error in `low / step`.
+  const first = Math.ceil(low / step - 1e-6);
+  const last = Math.floor(high / step + 1e-6);
+  for (let k = first; k <= last; k++) {
+    // `+ 0` turns the -0 that `Number("-0.00")` gives back into a plain 0.
+    ticks.push(Number((k * step).toFixed(decimals)) + 0);
+  }
+  return ticks.length ? ticks : undefined;
+}

package/src/components/series-chart.tsx

@@ -24,6 +24,7 @@ import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } f
 import { DEFAULT_Y_AXIS, withChartZoom, type ZoomBinding } from "./chart-zoom";
 import { STEP_DASH, strokeDash } from "./toggle-legend";
 import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-chart-labels";
+import { niceTicks } from "./series-chart-ticks";
 import { paletteFor } from "../theme/chart-palette";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
@@ -353,6 +354,8 @@ export function StaticSeriesChart({
   };
 
   // Fitted with air around it, unless the reader has zoomed or the caller pinned it.
+  // Ticks are the round values INSIDE whichever domain that is (see
+  // `series-chart-ticks.ts`), so a zoom window still gets round numbers, just finer.
   const fittedX = zoom?.xDomain ?? paddedDomain(rows.map((row) => row[xKey]));
   const fittedY = (axis: SeriesChartAxis) =>
     zoom?.yDomains[axis.id] ??
@@ -375,6 +378,7 @@ export function StaticSeriesChart({
           // category axis would straighten exactly the curvature the chart is for.
           type="number"
           domain={fittedX ?? ["dataMin", "dataMax"]}
+          ticks={niceTicks(fittedX)}
           // Clip the lines to a zoom window instead of recharts widening it back out.
           allowDataOverflow={zoom?.xDomain !== undefined}
           tickLine={false}
@@ -395,37 +399,41 @@ export function StaticSeriesChart({
             />
           )}
         </XAxis>
-        {axes.map((axis) => (
-          <YAxis
-            key={axis.id}
-            yAxisId={axis.id}
-            hide={axis.hide}
-            domain={fittedY(axis)}
-            allowDataOverflow={zoom?.yDomains[axis.id] !== undefined}
-            orientation={axis.orientation ?? "left"}
-            width={axisBandWidth(axis.width, Boolean(axis.title) && !axis.hide)}
-            tickLine={false}
-            axisLine={false}
-            tickFormatter={axis.format ?? number}
-            // With an axis per channel the tint is the only thing saying which
-            // numbers belong to which line.
-            tick={axis.color ? { fill: axis.color } : undefined}
-          >
-            {axis.title && !axis.hide && (
-              <Label
-                value={axis.title}
-                // Rotated so both sides read upward from the bottom of their axis.
-                angle={axis.orientation === "right" ? 90 : -90}
-                position={axis.orientation === "right" ? "insideRight" : "insideLeft"}
-                // Inline, so a sole series' colour beats the class's neutral fill —
-                // and absent for a shared axis, so the class draws it.
-                style={{ textAnchor: "middle", fill: soleSeriesColor(axis, series) }}
-                offset={AXIS_TITLE_OFFSET}
-                className="fill-[var(--text-muted)] text-[11px]"
-              />
-            )}
-          </YAxis>
-        ))}
+        {axes.map((axis) => {
+          const domain = fittedY(axis);
+          return (
+            <YAxis
+              key={axis.id}
+              yAxisId={axis.id}
+              hide={axis.hide}
+              domain={domain}
+              ticks={niceTicks(domain)}
+              allowDataOverflow={zoom?.yDomains[axis.id] !== undefined}
+              orientation={axis.orientation ?? "left"}
+              width={axisBandWidth(axis.width, Boolean(axis.title) && !axis.hide)}
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={axis.format ?? number}
+              // With an axis per channel the tint is the only thing saying which
+              // numbers belong to which line.
+              tick={axis.color ? { fill: axis.color } : undefined}
+            >
+              {axis.title && !axis.hide && (
+                <Label
+                  value={axis.title}
+                  // Rotated so both sides read upward from the bottom of their axis.
+                  angle={axis.orientation === "right" ? 90 : -90}
+                  position={axis.orientation === "right" ? "insideRight" : "insideLeft"}
+                  // Inline, so a sole series' colour beats the class's neutral fill —
+                  // and absent for a shared axis, so the class draws it.
+                  style={{ textAnchor: "middle", fill: soleSeriesColor(axis, series) }}
+                  offset={AXIS_TITLE_OFFSET}
+                  className="fill-[var(--text-muted)] text-[11px]"
+                />
+              )}
+            </YAxis>
+          );
+        })}
         <ChartTooltip
           content={
             <ChartTooltipContent

package/src/components/swatch-picker.tsx

@@ -59,6 +59,15 @@ export interface SwatchPickerProps<T extends string>
   activation?: "automatic" | "manual";
   /** 28 / 32 / 44px tiles. Default "md"; "lg" is the touch-target size. */
   size?: TileSize;
+  /**
+   * Classes for every tile's frame, merged after the kit's own — so a caller's
+   * `size-*` beats `size`'s. For a tile that has to follow a container query or a
+   * breakpoint (keksdose grows its tiles to 40px in a narrow card:
+   * `tileClassName="@max-md:size-10"`) without reaching into the kit's markup with an
+   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s
+   * dimensions; the tile grows round it.
+   */
+  tileClassName?: string;
   disabled?: boolean;
   labels?: Partial<SwatchPickerLabels>;
 }
@@ -83,6 +92,7 @@ export function SwatchPicker<T extends string>({
   mixed = false,
   activation = "automatic",
   size = "md",
+  tileClassName,
   disabled = false,
   labels,
   className,
@@ -112,6 +122,7 @@ export function SwatchPicker<T extends string>({
         activation={activation}
         disabled={disabled}
         size={size}
+        tileClassName={tileClassName ? () => tileClassName : undefined}
         renderTile={(item) => {
           const opt = item.key === null ? undefined : byValue.get(item.key);
           return (

package/src/components/swipeable-row.tsx

@@ -24,10 +24,19 @@ export interface SwipeAction {
   armedClassName: string;
 }
 
+/**
+ * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on
+ * purpose: a swipe is a movement of the finger across the glass, the gesture hook
+ * measures it in screen pixels, and "which way is destructive" is an app decision that
+ * RTL guidelines do not agree on. An app that wants mirrored actions in RTL swaps the
+ * two arrays itself. What the component does mirror is everything it lays out: the
+ * reveal panel's contents hug the physical edge being uncovered, and the keyboard
+ * buttons sit at the row's logical END.
+ */
 export interface SwipeableRowProps {
-  /** Actions committed by dragging RIGHT, nearest threshold first. */
+  /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */
   right?: SwipeAction[];
-  /** Actions committed by dragging LEFT, nearest threshold first. */
+  /** Actions committed by dragging (physically) LEFT, nearest threshold first. */
   left?: SwipeAction[];
   /** Turn the gesture off — an open editor, a pending mutation, a locked row. This
    *  also withdraws the keyboard buttons below: a row that must not be acted on must
@@ -180,8 +189,10 @@ export function SwipeableRow({
             armed ? "opacity-100" : "opacity-60",
             armed ? shown.armedClassName : shown.className,
             // The panel is anchored to the edge the row is uncovering, so the label
-            // sits where the eye already is rather than across the screen.
-            draggingLeft && "flex-row-reverse",
+            // sits where the eye already is rather than across the screen. That edge is
+            // physical, while a flex row starts at the INLINE start — so in RTL the two
+            // directions swap, or the label sat under the row on the covered side.
+            draggingLeft ? "flex-row-reverse rtl:flex-row" : "rtl:flex-row-reverse",
           )}
         >
           {shown.icon && (
@@ -236,10 +247,14 @@ export function SwipeableRow({
           //
           // `pointer-events-none` here, restored on a button only once it HAS focus: a
           // sr-only button is clipped to nothing but is still a hit target, and this
-          // strip sits at the row's right edge — exactly where a leftward drag begins.
+          // strip sits at the row's trailing edge — exactly where a drag toward the
+          // start begins.
+          //
+          // `end-0`/`pe-2`, not `right-0`/`pr-2`: in RTL the right edge is where the
+          // row's title starts, and a focused button there covered it.
           // A gesture that silently failed to start because it landed on an invisible
           // button is not a bug anyone would find by looking at the screen.
-          className="pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center gap-1 pr-2"
+          className="pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center gap-1 pe-2"
         >
           {/* Both sides, each still nearest-threshold first, so the tab order reads in
               the order the gesture arms them. */}

package/src/components/tile-radio.tsx

@@ -2,6 +2,7 @@ import { useId, useRef } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
 import { Ban, Check } from "lucide-react";
 import { cn } from "../lib/cn";
+import { horizontalStep } from "../lib/direction";
 import { Tooltip } from "./tooltip";
 
 /**
@@ -97,14 +98,11 @@ export function TileRadioGroup<T extends string>({
     // Left and right are VISUAL directions: in a right-to-left page the row runs the
     // other way. Up and down follow reading order either way — the APG's radio group
     // treats them as previous/next, and the tiles wrap, so there is no column to keep.
-    const rtl = e.currentTarget.closest("[dir]")?.getAttribute("dir") === "rtl";
+    const horizontal = horizontalStep(e.key, e.currentTarget);
     let step: number | "first" | "last";
-    switch (e.key) {
-      case "ArrowRight":
-        step = rtl ? -1 : 1;
-        break;
-      case "ArrowLeft":
-        step = rtl ? 1 : -1;
+    switch (horizontal ? "horizontal" : e.key) {
+      case "horizontal":
+        step = horizontal;
         break;
       case "ArrowDown":
         step = 1;