@eifi1/ui-kit 0.6.0 → 0.7.0

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;

package/src/components/toggle-group.tsx

@@ -1,5 +1,6 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement } from "react";
 import { cn } from "../lib/cn";
+import { horizontalStep } from "../lib/direction";
 
 export interface ToggleOption<T extends string> {
   value: T;
@@ -74,7 +75,19 @@ export type ToggleGroupProps<T extends string> =
   | ToggleGroupRequiredProps<T>
   | ToggleGroupClearableProps<T>;
 
-export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>) {
+/**
+ * Overloaded rather than typed by the union alone (keksdose, "Gaps found adopting
+ * 0.6.0" #7). Inferring `T` through a union of prop shapes let TypeScript settle on
+ * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a
+ * `useState<Status | null>` did not compile unless the caller spelled
+ * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own
+ * `value`/`onChange`/`options`; the third keeps a caller that forwards a
+ * {@link ToggleGroupProps} union (a wrapper component) compiling.
+ */
+export function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;
+export function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;
+export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;
+export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {
   const {
     value,
     options,
@@ -93,6 +106,27 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>) {
     else props.onChange(next);
   };
   const clearable = props.allowEmpty === true;
+  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move
+  // the choice — the pattern `role="radiogroup"` promises a screen-reader user. Before
+  // 0.7.0 each segment was its own tab stop with no arrow keys. The clearable mode is a
+  // row of toggle buttons, where separate tab stops are the pattern.
+  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;
+  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {
+    const last = options.length - 1;
+    let next: number | null = null;
+    const step = horizontalStep(e.key, e.currentTarget);
+    if (step !== 0) next = index + step;
+    else if (e.key === "ArrowDown") next = index + 1;
+    else if (e.key === "ArrowUp") next = index - 1;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = last;
+    if (next === null) return;
+    e.preventDefault();
+    next = next < 0 ? last : next > last ? 0 : next;
+    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(":scope > button");
+    buttons?.[next]?.focus();
+    choose(options[next].value);
+  };
   return (
     <div
       // The audit's named example of a closed prop list (§"Public API design"): the
@@ -135,7 +169,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>) {
         className,
       )}
     >
-      {options.map((opt) => {
+      {options.map((opt, index) => {
         const active = opt.value === value;
         return (
           <button
@@ -145,6 +179,8 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>) {
             aria-checked={clearable ? undefined : active}
             aria-pressed={clearable ? active : undefined}
             disabled={disabled}
+            tabIndex={clearable ? undefined : opt.value === tabStop ? 0 : -1}
+            onKeyDown={clearable ? undefined : (e) => onRadioKey(e, index)}
             onClick={() => choose(opt.value)}
             className={cn(
               // `truncate` (which carries whitespace-nowrap) rather than letting a

package/src/components/toggle-legend.tsx

@@ -198,7 +198,11 @@ export function LegendGroup({ title, children }: { title: ReactNode; children: R
  *  front of it.
  *
  *  A stroke is an SVG line with the chart's own `strokeDasharray`, not a CSS gradient
- *  approximating it: a gradient can say "solid or dashed" and nothing more. */
+ *  approximating it: a gradient can say "solid or dashed" and nothing more.
+ *
+ *  A hidden stroke is NOT faded here: the button around it already is (`opacity-35`),
+ *  and the line used to take its own 0.35 on top — 0.35 × 0.35, about 12 %, a mark
+ *  gone rather than dimmed, while the square beside it read at the full 35 %. */
 function LegendMark({ entry, off }: { entry: LegendEntry; off: boolean }) {
   if (entry.marker === "stroke") {
     return (
@@ -211,7 +215,6 @@ function LegendMark({ entry, off }: { entry: LegendEntry; off: boolean }) {
           stroke={entry.color}
           strokeWidth={2}
           strokeDasharray={strokeDash(entry.dash ?? 0)}
-          opacity={off ? 0.35 : 1}
         />
       </svg>
     );

package/src/components/treemap.tsx

@@ -8,12 +8,13 @@
 // chart. The one thing it cannot take from a CSS var is the tile colour: the label ink
 // is MEASURED against the fill, and a `var(--chart-3)` string measures as nothing — see
 // `useChartTokenHex` below for how the concrete hex is found instead.
-import { useSyncExternalStore } from "react";
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import type { ComponentProps, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from "react";
 import { Treemap as RechartsTreemap } from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "./chart";
 import { PALETTE_HEX, textOn } from "../theme/chart-palette";
 import { parseHex } from "../theme/color";
+import { dirOf, type Direction } from "../lib/direction";
 
 /**
  * One tile.
@@ -174,6 +175,10 @@ export interface TreemapCellProps {
   onNodeClick?: (id: string, name: string) => void;
   redactNames?: boolean;
   nodeNote?: (id: string) => string | undefined;
+  /** The page's reading direction, which `Treemap` reads off its own root. In `rtl`
+   *  the label stands in the tile's top RIGHT corner and is shaped right-to-left, so a
+   *  clipped name ends in its ellipsis on the reading end. Default `ltr`. */
+  dir?: Direction;
 }
 
 /**
@@ -199,6 +204,7 @@ export function TreemapCell({
   onNodeClick,
   redactNames,
   nodeNote,
+  dir = "ltr",
 }: TreemapCellProps) {
   // Depth 0 is recharts' synthetic root, which spans the whole chart.
   if (!depth) return null;
@@ -220,6 +226,11 @@ export function TreemapCell({
   const rawNote = id != null && nodeNote ? nodeNote(id) : undefined;
   const note =
     label != null && rawNote != null && ph >= 36 ? fitLabel(rawNote, pw, NOTE_FONT_SIZE) : null;
+  // The label's START edge, 6px in from the tile's. The tiles themselves are laid out
+  // physically (the plot is not mirrored, see `ChartContainer`) and the chart's SVG is
+  // pinned `ltr`, so the direction is set on each <text> explicitly: `start` is then
+  // the right end in RTL, and the label grows leftwards from the tile's right edge.
+  const textX = dir === "rtl" ? px + pw - 6 : px + 6;
   const activate = id != null && onNodeClick ? () => onNodeClick(id, name ?? "") : undefined;
   const onKeyDown = activate
     ? (e: KeyboardEvent<SVGGElement>) => {
@@ -261,8 +272,9 @@ export function TreemapCell({
           // A plain attribute, so the host's `[data-private]` rule reaches an SVG
           // <text> exactly as it reaches a table cell.
           data-private={redactNames ? "" : undefined}
-          x={px + 6}
+          x={textX}
           y={py + 15}
+          direction={dir}
           fill={ink}
           stroke={tileFill}
           strokeWidth={2.5}
@@ -277,8 +289,9 @@ export function TreemapCell({
       )}
       {note != null && (
         <text
-          x={px + 6}
+          x={textX}
           y={py + 29}
+          direction={dir}
           fill={ink}
           fillOpacity={0.85}
           stroke={tileFill}
@@ -350,6 +363,14 @@ export function Treemap({
   ...rest
 }: TreemapProps) {
   const tokenHex = useChartTokenHex();
+  // Read off the DOM after mount: the `dir` a treemap sits under is an ancestor's
+  // attribute, and SVG text anchoring cannot follow it by CSS (see TreemapCell). Again
+  // on new data, because a map that had nothing to draw rendered no root to read.
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [dir, setDir] = useState<Direction>("ltr");
+  useLayoutEffect(() => {
+    setDir(dirOf(rootRef.current));
+  }, [data]);
   const ramp = colors && colors.length > 0 ? colors : tokenHex;
   // Coloured by index into `data` AS GIVEN, before anything is dropped: a caller
   // painting a legend or a second map from the same list must land on the same hue
@@ -373,7 +394,7 @@ export function Treemap({
   };
   const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;
   return (
-    <ChartContainer {...rest} config={TREEMAP_CONFIG} style={{ ...style, height }}>
+    <ChartContainer {...rest} ref={rootRef} config={TREEMAP_CONFIG} style={{ ...style, height }}>
       {/* No chart-level `stroke`: recharts spreads it onto the <svg> root, from where
           it inherits into every label (see TreemapCell). Each cell strokes its own rect. */}
       <RechartsTreemap
@@ -381,7 +402,9 @@ export function Treemap({
         dataKey="size"
         fill="var(--chart-1)"
         isAnimationActive={false}
-        content={<TreemapCell onNodeClick={onNodeClick} redactNames={redactNames} nodeNote={nodeNote} />}
+        content={
+          <TreemapCell onNodeClick={onNodeClick} redactNames={redactNames} nodeNote={nodeNote} dir={dir} />
+        }
       >
         <ChartTooltip content={<Content hideLabel valueFormatter={format} />} />
       </RechartsTreemap>

package/src/components/ui.tsx

@@ -1,7 +1,8 @@
 import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
 import { ChevronDown, Eye, EyeOff, HelpCircle, Plus, X } from "lucide-react";
-import type { ButtonHTMLAttributes, ComponentPropsWithoutRef, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+import type { ButtonHTMLAttributes, ComponentPropsWithoutRef, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, Ref, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { cn } from "../lib/cn";
+import { horizontalStep } from "../lib/direction";
 import { useMediaQuery } from "../hooks/use-media-query";
 import { Tooltip } from "./tooltip";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
@@ -49,6 +50,10 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** In a flex row next to a taller labelled field, fill the field's height so the
    *  two line up. No effect outside a flex row. */
   stretch?: boolean;
+  /** The `<button>` element. React 19 passes `ref` to a function component as an
+   *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —
+   *  declared here only because `ButtonHTMLAttributes` does not carry it. */
+  ref?: Ref<HTMLButtonElement>;
 }
 
 export function Button({ variant = "primary", stretch, className, ...rest }: ButtonProps) {
@@ -275,7 +280,7 @@ export const FIELD_DISPLAY =
 // button the way the native Select does.
 export const FIELD_TRIGGER = cn(
   FIELD_BASE,
-  "relative flex items-center justify-between gap-2 text-left hover:bg-[var(--bg-hover)]",
+  "relative flex items-center justify-between gap-2 text-start hover:bg-[var(--bg-hover)]",
 );
 
 /** An alias rather than an interface: the chevron adds nothing of its own to an
@@ -290,7 +295,10 @@ export type FieldChevronProps = Omit<ComponentPropsWithoutRef<"svg">, "children"
  * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)
  * pushes that box's midline down — so a labelled currency/multi-select chevron
  * sat visibly lower than the native select's right beside it (feedback #400).
- * Pair it with `pr-9` on the trigger so the value can't run underneath. */
+ * Pair it with `pe-9` on the trigger so the value can't run underneath. At the
+ * inline END, not the right: a right-to-left form reads the value from the right,
+ * and a chevron parked on top of its first word hid exactly the part that says
+ * what was picked. */
 export function FieldChevron({ className, ...rest }: FieldChevronProps) {
   return (
     <ChevronDown
@@ -300,7 +308,7 @@ export function FieldChevron({ className, ...rest }: FieldChevronProps) {
       // announcement of the same field.
       aria-hidden
       className={cn(
-        "pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
+        "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
         className,
       )}
     />
@@ -311,7 +319,7 @@ export function FieldChevron({ className, ...rest }: FieldChevronProps) {
 // floats up INSIDE the top strip on focus or once the field has a value. Sits on
 // the field's own surface, so no background chip and nothing to mismatch the card.
 export const FLOATING_LABEL_CLASS = cn(
-  "pointer-events-none absolute left-3 top-2.5 text-sm text-[var(--text-placeholder)] transition-all",
+  "pointer-events-none absolute start-3 top-2.5 text-sm text-[var(--text-placeholder)] transition-all",
   "max-w-[calc(100%-1.5rem)] truncate",
   "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
   "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
@@ -324,13 +332,13 @@ export const FLOATING_LABEL_CLASS = cn(
 // selector, so the classes have to sit on the element that is actually a sibling
 // of the input, and a label nested inside a wrapper is not one.
 //
-// Wider right clearance than the label alone takes (`3rem` rather than `1.5rem`),
+// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),
 // because the controls that carry an animated label are the ones with something
-// at the right edge of the field — NumberInput's calculator is the case this was
+// at the end edge of the field — NumberInput's calculator is the case this was
 // written for. The label truncates a little sooner; the alternative was the "?"
 // sitting on top of a button (steering-design feedback #48).
 const FLOATING_ROW_CLASS = cn(
-  "pointer-events-none absolute left-3 top-2.5 flex items-center gap-1 transition-all",
+  "pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all",
   "max-w-[calc(100%-3rem)] text-sm text-[var(--text-placeholder)]",
   "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
   "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
@@ -348,7 +356,7 @@ const STATIC_LABEL_TYPE =
 // A field that always has a value (select / dropdown trigger) keeps the label
 // permanently in the floated position — small, in the top strip, value below.
 export const FLOATING_LABEL_STATIC = cn(
-  "pointer-events-none absolute left-3 top-1",
+  "pointer-events-none absolute start-3 top-1",
   STATIC_LABEL_TYPE,
   "max-w-[calc(100%-1.5rem)] truncate",
 );
@@ -377,7 +385,7 @@ export interface FloatingFieldProps extends ComponentPropsWithoutRef<"div"> {
    *  It rides an ANIMATED label too, and the two cases place it differently on
    *  purpose. A static label has a field-wide strip to itself, so the hint sits
    *  at the far end of it and a long label truncates into the gap. An animated
-   *  one belongs to a control with something at the right edge of the field — a
+   *  one belongs to a control with something at the end edge of the field — a
    *  calculator, a stepper — so the hint follows the label instead, and it is
    *  the label that gives way (steering-design feedback #48). */
   hint?: ReactNode;
@@ -422,8 +430,8 @@ export function FloatingField({
     <div {...rest} className={cn("relative", className)}>
       {children}
       {withHint ? (
-        // Static: `inset-x-3` rather than `left-3`, so a long label truncates at
-        // the field's own right padding instead of running under the chevron.
+        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at
+        // the field's own end padding instead of running under the chevron.
         // Animated: the row floats with the label and is only as wide as it needs
         // to be. Either way the hint keeps its width (`shrink-0`) and the label
         // is the one that gives way.
@@ -765,7 +773,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       disabled={rest.disabled}
       aria-label={revealed ? passwordText.hide : passwordText.show}
       aria-pressed={revealed}
-      className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2.5 text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--brand)] disabled:cursor-default disabled:opacity-50"
+      className="absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--brand)] disabled:cursor-default disabled:opacity-50"
     >
       {revealed ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
     </button>
@@ -804,7 +812,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
             {...rest}
             aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
             aria-describedby={describedBy}
-            className={cn(FIELD_BASE, "pr-9", inputClassName, isInvalid && FIELD_INVALID)}
+            className={cn(FIELD_BASE, "pe-9", inputClassName, isInvalid && FIELD_INVALID)}
           />
           {revealToggle}
         </div>
@@ -831,7 +839,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
             asDisplay
               ? cn(FIELD_DISPLAY, "text-xl font-semibold leading-snug")
               : FLOATING_INPUT_CLASS,
-            isPassword && "pr-9",
+            isPassword && "pe-9",
             inputClassName,
             isInvalid && FIELD_INVALID,
           )}
@@ -858,7 +866,9 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
    * the tall box to float in, so a labelled Select ignores `"sm"`.
    *
    * A NUMBER is still the native attribute (the rows of a list box) and is passed
-   * straight through, so the one HTML meaning of `size` keeps working.
+   * straight through, so the one HTML meaning of `size` keeps working. Above 1 (as
+   * with `multiple`) the browser draws a list box, and the Select drops its chevron
+   * and the end padding reserved for it.
    */
   size?: "sm" | "md" | number;
   /** Classes for the `<select>` itself. `className` styles the WRAPPER — the box
@@ -870,7 +880,7 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
 // The compact select: the field's colours, a toolbar button's height. `py-0` and a
 // fixed height rather than a smaller padding, so the box is 28px whatever line
 // height the caller's type brings with it.
-const SELECT_SM = "h-7 py-0 pl-2 pr-7 text-xs";
+const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
   { className, label, id, children, invalid, error, hint, size, selectClassName, ...rest },
@@ -879,6 +889,12 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
   const generated = useId();
   // Only a number reaches the DOM; the two words are this component's own.
   const nativeSize = typeof size === "number" ? size : undefined;
+  // A numeric size above 1 (or `multiple`) makes the browser draw a LIST BOX — all
+  // the rows in the field, no menu to drop. The dropdown dress did not fit it: the
+  // chevron was centred on a box several rows tall, sat on top of the rows' text
+  // at the end edge, and `pe-9` clipped every option nine units early. A list box
+  // gets the plain field instead — its own native scroll, no chevron, even padding.
+  const listBox = (nativeSize !== undefined && nativeSize > 1) || Boolean(rest.multiple);
   const small = size === "sm" && label === undefined;
   const fieldId = id ?? generated;
   const { isInvalid, describedBy, errorEl } = useFieldError(
@@ -888,13 +904,16 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
     rest["aria-invalid"],
   );
   // Custom chevron (native arrow hidden via appearance-none) so it sits a touch
-  // in from the right border and matches both themes — feedback #223. A DISABLED
+  // in from the end border and matches both themes — feedback #223. A DISABLED
   // select has no menu to drop, so it drops the chevron too: the arrow is the one
   // thing on the control that promises a choice (Keksdose dev#474, where the
   // account type became read-only and still looked exactly like a picker).
-  const chevron = rest.disabled ? null : (
-    <FieldChevron className={small ? "right-1.5 size-3.5" : undefined} />
-  );
+  const chevron =
+    rest.disabled || listBox ? null : (
+      <FieldChevron className={small ? "end-1.5 size-3.5" : undefined} />
+    );
+  // `pe-9` is the room the chevron takes; a list box has none to make room for.
+  const dress = listBox ? "overflow-y-auto" : "appearance-none pe-9";
   if (label === undefined) {
     return (
       <FieldGroup errorEl={errorEl}>
@@ -919,7 +938,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
             aria-describedby={describedBy}
             className={cn(
               FIELD_BASE,
-              "appearance-none pr-9",
+              dress,
               small && SELECT_SM,
               selectClassName,
               isInvalid && FIELD_INVALID,
@@ -944,8 +963,11 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
           aria-describedby={describedBy}
           className={cn(
             FIELD_BASE,
-            FIELD_FLOATING_PAD,
-            "peer appearance-none pr-9",
+            // The floated label takes the top strip of a list box too, so its first
+            // row starts under the label rather than behind it.
+            listBox ? "pt-5 pb-1" : FIELD_FLOATING_PAD,
+            "peer",
+            dress,
             selectClassName,
             isInvalid && FIELD_INVALID,
           )}
@@ -1320,7 +1342,8 @@ export interface TabsProps<T extends string>
    */
   panelId?: string;
   /**
-   * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab.
+   * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab
+   * (only on the open one with `removeOn="active"`).
    *
    * The × is on the open tab only — a row of tabs each carrying one is a row of
    * things to hit by accident, and the tab you can remove should be the one you
@@ -1328,7 +1351,7 @@ export interface TabsProps<T extends string>
    * tab never widens it and never pushes the rest of the strip along (lenkbank
    * feedback #72). It is named "Remove <tab>" and is not a tab stop of its own: the
    * strip stays one stop, and the keyboard path is Delete (announced through
-   * `aria-keyshortcuts`), which removes whichever tab has focus.
+   * `aria-keyshortcuts`), which removes whichever tab has focus (see `removeOn`).
    *
    * The strip only ASKS: it calls this, and the tab goes when the caller drops it
    * from `tabs` — after a confirmation, a request, whatever it needs. When it does,
@@ -1336,6 +1359,20 @@ export interface TabsProps<T extends string>
    * removed one was open, else to its neighbour, instead of falling to the page.
    */
   onRemove?: (id: T) => void;
+  /**
+   * Which tabs the Delete key removes.
+   *
+   * - `"every"` (default): any focused removable tab — the ARIA pattern's reading.
+   * - `"active"`: only the OPEN tab, the same one that wears the ×. For a strip whose
+   *   remove is immediate and unconfirmed (lenkbank's sheet tabs delete a measurement
+   *   sheet at once), so arrowing across the strip and pressing Delete cannot take
+   *   out a sheet the user is not looking at. Delete on a closed tab does nothing,
+   *   and only the open tab announces the shortcut (`aria-keyshortcuts`).
+   *
+   * Either way the × is drawn on the open tab only and its room stays reserved on
+   * every removable tab, so the strip never relayouts when the selection moves.
+   */
+  removeOn?: "every" | "active";
   /** Renders an "add" button after the last tab, outside the tablist — it is an
    *  action, not a tab, and a tablist may own only tabs. */
   onAdd?: () => void;
@@ -1401,6 +1438,7 @@ export function Tabs<T extends string>({
   label,
   panelId,
   onRemove,
+  removeOn = "every",
   onAdd,
   addLabel,
   labels,
@@ -1411,6 +1449,9 @@ export function Tabs<T extends string>({
   const text = useKitLabels("tabs", DEFAULT_TABS_LABELS, labels);
   const stripRef = useRef<HTMLDivElement>(null);
   const isRemovable = (tab: TabItem<T>) => onRemove !== undefined && tab.removable !== false;
+  // Whether Delete reaches this tab: every removable tab, or only the open one.
+  const deletesOnKey = (tab: TabItem<T>) =>
+    isRemovable(tab) && (removeOn === "every" || tab.id === active);
   const nameOf = (tab: TabItem<T>) =>
     tab.name ?? (typeof tab.label === "string" ? tab.label : tab.id);
 
@@ -1463,13 +1504,16 @@ export function Tabs<T extends string>({
   const onTabKeyDown = (e: KeyboardEvent<HTMLElement>, tab: TabItem<T>) => {
     // Delete removes the FOCUSED tab (the ARIA pattern's optional key for deletable
     // tabs) — the keyboard's way to the × that is not a tab stop. `busy` swallows it
-    // rather than letting it fall through to the page.
-    if (e.key === "Delete" && isRemovable(tab)) {
+    // rather than letting it fall through to the page. With `removeOn="active"` only
+    // the open tab answers; a closed one lets the key pass untouched.
+    if (e.key === "Delete" && deletesOnKey(tab)) {
       e.preventDefault();
       if (!busy) requestRemove(tab.id);
       return;
     }
-    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+    // Along the reading direction: the strip is a flex row, so in RTL the NEXT tab sits
+    // to the left, and ArrowLeft has to reach it.
+    const step = horizontalStep(e.key, e.currentTarget);
     if (step === 0 && e.key !== "Home" && e.key !== "End") return;
     const strip = e.currentTarget.closest('[role="tablist"]');
     if (!strip) return;
@@ -1526,7 +1570,7 @@ export function Tabs<T extends string>({
           // Only the open tab: see `panelId`.
           "aria-controls": isActive ? panelId : undefined,
           id: isActive && panelId ? `${panelId}-tab` : undefined,
-          "aria-keyshortcuts": removable ? "Delete" : undefined,
+          "aria-keyshortcuts": deletesOnKey(tab) ? "Delete" : undefined,
           onKeyDown: (e: KeyboardEvent<HTMLElement>) => onTabKeyDown(e, tab),
           className: cn(
             wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,

package/src/components/use-anchor-dir.ts

@@ -0,0 +1,20 @@
+import { useLayoutEffect, useState } from "react";
+import type { RefObject } from "react";
+import { dirOf, type Direction } from "../lib/direction";
+
+/**
+ * The reading direction at a portalled panel's anchor — internal, not exported from
+ * the barrel. The field pickers' panels are portalled to `<body>`, out of the subtree
+ * their `dir` came from, so they carry it across on their own root.
+ *
+ * Read in a layout effect while `open`, rather than off the ref during render: the
+ * anchored rect these panels also wait for is measured the same way, so the panel's
+ * first painted frame already has both, and a render never reads a ref.
+ */
+export function useAnchorDir(ref: RefObject<Element | null>, open: boolean): Direction {
+  const [dir, setDir] = useState<Direction>("ltr");
+  useLayoutEffect(() => {
+    if (open) setDir(dirOf(ref.current));
+  }, [open, ref]);
+  return dir;
+}

package/src/components/use-mobile-reveal.ts

@@ -11,6 +11,11 @@ import { useEffect, useRef, useState } from "react";
  * is why nothing resets it: narrowing a filter cannot leave the limit pointing past the
  * end, and widening one does not have to re-reveal what the user already scrolled past.
  *
+ * `paginated={false}` opts out entirely: a table that is short by construction (an
+ * invoice's line items) renders every row on a phone too. It used to be chunked here
+ * regardless, so a twelve-line invoice showed its first ten lines and a "Loading…"
+ * sentinel for rows that were already in memory.
+ *
  * Lifted out of `DataTable` with the rest of its state; the sentinel ref belongs to the
  * caller's `<li>`.
  */
@@ -19,6 +24,7 @@ export function useMobileReveal<T>({
   slice,
   isServer,
   isMdUp,
+  unpaged = false,
   defaultPageSize,
 }: {
   /** The whole sorted list — what there is to reveal. */
@@ -27,11 +33,13 @@ export function useMobileReveal<T>({
   slice: T[];
   isServer: boolean;
   isMdUp: boolean;
+  /** `paginated={false}` on a client-side table: show every row, reveal nothing. */
+  unpaged?: boolean;
   defaultPageSize: number;
 }) {
   const [mobileLimit, setMobileLimit] = useState(defaultPageSize);
-  const mobileSlice = isServer ? slice : rows.slice(0, mobileLimit);
-  const canRevealMoreMobile = !isServer && !isMdUp && mobileLimit < rows.length;
+  const mobileSlice = isServer ? slice : unpaged ? rows : rows.slice(0, mobileLimit);
+  const canRevealMoreMobile = !isServer && !unpaged && !isMdUp && mobileLimit < rows.length;
   const loadMoreRef = useRef<HTMLLIElement | null>(null);
 
   useEffect(() => {