@eifi1/ui-kit 0.6.1 → 0.7.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/tooltip.tsx

@@ -13,8 +13,22 @@ import { createPortal } from "react-dom";
 import { cn } from "../lib/cn";
 import { useEscapeKey } from "../hooks/use-dismiss";
 import { useAnchoredRect, type AnchorRect } from "../hooks/use-anchored-rect";
+import { dirOf, type Direction } from "../lib/direction";
 
-type TooltipSide = "top" | "bottom" | "left" | "right";
+/** Where the bubble sits. `start` / `end` follow the reading direction — `end` is the
+ *  right in LTR and the left in RTL — and are what a layout that mirrors should ask
+ *  for. `left` / `right` stay physical, for a bubble tied to something that does not
+ *  mirror (a chart axis, a map). */
+export type TooltipSide = "top" | "bottom" | "left" | "right" | "start" | "end";
+
+/** The placement the maths works in: a logical side resolved against the trigger. */
+type PhysicalSide = "top" | "bottom" | "left" | "right";
+
+function physicalSide(side: TooltipSide, dir: Direction): PhysicalSide {
+  if (side === "start") return dir === "rtl" ? "right" : "left";
+  if (side === "end") return dir === "rtl" ? "left" : "right";
+  return side;
+}
 
 /** The floating bubble itself. Uses the shared surface/border/text tokens so it
  *  reads as part of the app's chrome (like the top bar and cards) rather than the
@@ -37,6 +51,10 @@ const sidePositionClass: Record<TooltipSide, string> = {
   bottom: "top-full left-1/2 -translate-x-1/2 mt-1",
   left: "right-full top-1/2 -translate-y-1/2 mr-1",
   right: "left-full top-1/2 -translate-y-1/2 ml-1",
+  // Logical insets, so CSS resolves the side from the inherited direction with no
+  // JavaScript: `end-full` pins the bubble's END edge to the trigger's start.
+  start: "end-full top-1/2 -translate-y-1/2 me-1",
+  end: "start-full top-1/2 -translate-y-1/2 ms-1",
 };
 
 /**
@@ -248,7 +266,7 @@ const TOOLTIP_GAP = 4;
  *  against the glass reads as clipped even when every character is on screen. */
 const TOOLTIP_MARGIN = 4;
 
-const portalTransformBySide: Record<TooltipSide, string> = {
+const portalTransformBySide: Record<PhysicalSide, string> = {
   right: "translate(0, -50%)",
   left: "translate(-100%, -50%)",
   top: "translate(-50%, -100%)",
@@ -259,7 +277,7 @@ const portalTransformBySide: Record<TooltipSide, string> = {
  *  with {@link portalTransformBySide}, which shifts the box onto that point. */
 function tooltipAnchor(
   r: AnchorRect,
-  side: TooltipSide,
+  side: PhysicalSide,
 ): { left: number; top: number } {
   switch (side) {
     case "right":
@@ -287,10 +305,10 @@ export interface TooltipPlacement {
   left: number;
   top: number;
   /** Which side it ended up on, which need not be the one that was asked for. */
-  side: TooltipSide;
+  side: PhysicalSide;
 }
 
-const opposite: Record<TooltipSide, TooltipSide> = {
+const opposite: Record<PhysicalSide, PhysicalSide> = {
   left: "right",
   right: "left",
   top: "bottom",
@@ -300,7 +318,7 @@ const opposite: Record<TooltipSide, TooltipSide> = {
 /** Whether the bubble clears the viewport edge on `side` of the trigger. */
 function roomOn(
   r: AnchorRect,
-  side: TooltipSide,
+  side: PhysicalSide,
   size: TooltipSize,
   viewport: TooltipViewport,
 ): boolean {
@@ -359,7 +377,7 @@ function clamp(value: number, low: number, high: number): number {
  */
 export function placeTooltip(
   r: AnchorRect,
-  side: TooltipSide,
+  side: PhysicalSide,
   size: TooltipSize,
   viewport: TooltipViewport,
 ): TooltipPlacement {
@@ -394,6 +412,14 @@ function PortalTooltip({
   const triggerRef = useRef<HTMLSpanElement | null>(null);
   const bubbleRef = useRef<HTMLSpanElement | null>(null);
   const [visible, setVisible] = useState(false);
+  // The trigger's reading direction, read when the bubble is asked for (an event, not a
+  // render): it resolves `start` / `end`, and the portalled bubble — which has left the
+  // subtree it would have inherited `dir` from — carries it too.
+  const [dir, setDir] = useState<Direction>("ltr");
+  const show = (el: Element) => {
+    setDir(dirOf(el));
+    setVisible(true);
+  };
   const id = useId();
   // Escape closes it outright, since this variant's bubble only exists while it is
   // shown. The next mouseenter/focus brings it back, which is the behaviour WCAG
@@ -424,11 +450,12 @@ function PortalTooltip({
     });
   }, [visible, rect, label]);
 
-  const point = rect ? tooltipAnchor(rect, side) : null;
+  const physical = physicalSide(side, dir);
+  const point = rect ? tooltipAnchor(rect, physical) : null;
   // Unmeasured on the very first pass, where the anchor point plus the side's
   // own transform is exactly what this always did. One layout effect later the
   // size is known and the placement is decided properly.
-  const placed = rect && room ? placeTooltip(rect, side, room.size, room.viewport) : null;
+  const placed = rect && room ? placeTooltip(rect, physical, room.size, room.viewport) : null;
 
   return (
     <>
@@ -440,9 +467,9 @@ function PortalTooltip({
         {...rest}
         ref={triggerRef}
         className={cn("relative inline-flex", className)}
-        onMouseEnter={() => setVisible(true)}
+        onMouseEnter={(e) => show(e.currentTarget)}
         onMouseLeave={() => setVisible(false)}
-        onFocus={() => setVisible(true)}
+        onFocus={(e) => show(e.currentTarget)}
         onBlur={() => setVisible(false)}
       >
         {describedBy(children, visible ? id : undefined)}
@@ -455,6 +482,7 @@ function PortalTooltip({
             ref={bubbleRef}
             id={id}
             role="tooltip"
+            dir={dir}
             data-private={redact ? "" : undefined}
             style={
               placed
@@ -463,7 +491,7 @@ function PortalTooltip({
                     position: "fixed",
                     left: point.left,
                     top: point.top,
-                    transform: portalTransformBySide[side],
+                    transform: portalTransformBySide[physical],
                   }
             }
             className={cn(TOOLTIP_SURFACE, "pointer-events-none z-50")}

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,9 +1,10 @@
 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 { Tooltip, type TooltipSide } from "./tooltip";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
 
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand";
@@ -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.
@@ -464,12 +472,14 @@ export interface FieldHintProps extends Omit<ComponentPropsWithoutRef<"button">,
   /** The explanation. It is both the tooltip's text and, by default, the button's
    *  accessible name, so a screen reader gets it without the bubble ever opening. */
   label: string;
-  side?: "left" | "right" | "top" | "bottom";
+  /** Default `"start"`: before the hint in the reading direction (the left in LTR, the
+   *  right in RTL). `left` / `right` stay physical. */
+  side?: TooltipSide;
 }
 
 export function FieldHint({
   label,
-  side = "left",
+  side = "start",
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -765,7 +775,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 +814,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 +841,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 +868,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 +882,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 +891,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 +906,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 +940,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 +965,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 +1344,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 +1353,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 +1361,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 +1440,7 @@ export function Tabs<T extends string>({
   label,
   panelId,
   onRemove,
+  removeOn = "every",
   onAdd,
   addLabel,
   labels,
@@ -1411,6 +1451,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 +1506,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 +1572,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,