@eifi1/ui-kit 0.34.0 → 0.36.0

package/dist/components/swipeable-row.d.ts

@@ -42,33 +42,18 @@ interface SwipeActionBase {
  * dark-mode pastel.
  *
  * **`paint`** follows the same rule for an app's documented exception (see
- * {@link SwipePaint}). **`className` / `armedClassName`** is the old path, kept so
- * existing call sites compile; there the label is white unless the classes set a
- * colour, and the idle panel is still dimmed.
+ * {@link SwipePaint}). The old path, a `className` / `armedClassName` pair under a white
+ * label and dimmed idle, was deprecated in 0.33 and removed in 0.35 (round 0.35 R1).
  */
 export type SwipeAction = SwipeActionBase & ({
     /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */
     tone: SwipeTone;
     paint?: never;
-    className?: never;
-    armedClassName?: never;
 } | {
     /** A documented app exception: idle a 14 % wash of `fill` under the body ink,
      *  armed `fill` under `foreground`. */
     paint: SwipePaint;
     tone?: never;
-    className?: never;
-    armedClassName?: never;
-} | {
-    tone?: never;
-    paint?: never;
-    /** @deprecated 0.33 — pass `tone`, or `paint` for an exception; removed in 0.35.
-     *  Background utility class while the action is previewed but not yet armed; the
-     *  panel is dimmed then, and its text is white unless this sets a text colour. */
-    className: string;
-    /** @deprecated 0.33 — pass `tone`, or `paint`; removed in 0.35. Background
-     *  utility class once the drag has passed this action's threshold. */
-    armedClassName: string;
 });
 /**
  * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a

package/dist/components/swipeable-row.js

@@ -23,18 +23,14 @@ const SWIPE_TONE = {
 const PAINT_IDLE = "bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary";
 const PAINT_ARMED = "bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]";
 function panelLook(action, armed) {
-  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? "armed" : "idle"], dim: false };
-  if (action.paint) {
-    return {
-      className: armed ? PAINT_ARMED : PAINT_IDLE,
-      style: {
-        "--swipe-paint-fill": action.paint.fill,
-        "--swipe-paint-fg": action.paint.foreground
-      },
-      dim: false
-    };
-  }
-  return { className: cn("text-white", armed ? action.armedClassName : action.className), dim: !armed };
+  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? "armed" : "idle"] };
+  return {
+    className: armed ? PAINT_ARMED : PAINT_IDLE,
+    style: {
+      "--swipe-paint-fill": action.paint.fill,
+      "--swipe-paint-fg": action.paint.foreground
+    }
+  };
 }
 const PEEK_PX = 40;
 function SwipeableRow({
@@ -97,11 +93,10 @@ function SwipeableRow({
         className: cn(
           "pointer-events-none absolute inset-0 flex items-center gap-2 px-4",
           "text-xs font-medium transition-all",
+          // No dimming: a tone or a paint says "not yet armed" with the soft→solid
+          // step, which keeps its label readable at both ends (the 0.33 rule; the
+          // dimmed path went with `className` / `armedClassName` in 0.35).
           look.className,
-          // The old path only: dimmed until the drag has passed a threshold. A tone
-          // or a paint says it with the soft→solid step instead, which keeps its
-          // label readable at both ends.
-          look.dim && "opacity-60",
           // 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. That edge is
           // physical, while a flex row starts at the INLINE start — so in RTL the two

package/dist/components/swipeable-row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { StatusDotTone } from \"./status-dot\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * What a swipe action's panel means — the vocabulary Chip, ProgressBar and StatusDot\n * already share, so a curtain can be \"the colour of the status it produces\" by name:\n * brand, neutral, success, warning, danger, info, income, expense, and the categorical\n * hues blue, indigo, purple, teal and orange.\n */\nexport type SwipeTone = StatusDotTone;\n\n/**\n * An app's own fill for a documented exception (0.33, docs/colour-roles-harmonization.md\n * §12.6) — a curtain that must be exactly its status pill's palette fill, or two\n * strengths of one tone. CSS colours or `var()`s, the same in both themes unless the app\n * passes a variable it declares per theme in its own stylesheet. The kit cannot measure\n * these, so the app's tests pin the pair.\n */\nexport interface SwipePaint {\n  /** The armed panel's fill; idle shows a 14 % wash of it on the card. */\n  fill: string;\n  /** The text and icon colour ON `fill`, armed. Idle text is the body ink. */\n  foreground: string;\n}\n\ninterface SwipeActionBase {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n}\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The panel has two states. Before the first threshold is crossed it previews the\n * nearest action IDLE, so the user can see what a little more drag will do; crossing\n * the threshold ARMS it — \"let go and this fires\".\n *\n * **`tone`** (0.33) is how the kit paints it: idle, the tone's soft wash under the\n * tone's own text colour (`bg-danger-soft text-danger`, Chip's soft look, ≥ 4.5:1);\n * armed, the tone's solid fill under its `-contrast` foreground (≥ 5:1). The soft→solid\n * step is the signal. It replaces a panel dimmed to 60 % at idle, whose label sat at\n * 2.4–4.5:1 on the kit's own swipes, and a white label that was unreadable on every\n * dark-mode pastel.\n *\n * **`paint`** follows the same rule for an app's documented exception (see\n * {@link SwipePaint}). **`className` / `armedClassName`** is the old path, kept so\n * existing call sites compile; there the label is white unless the classes set a\n * colour, and the idle panel is still dimmed.\n */\nexport type SwipeAction = SwipeActionBase &\n  (\n    | {\n        /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */\n        tone: SwipeTone;\n        paint?: never;\n        className?: never;\n        armedClassName?: never;\n      }\n    | {\n        /** A documented app exception: idle a 14 % wash of `fill` under the body ink,\n         *  armed `fill` under `foreground`. */\n        paint: SwipePaint;\n        tone?: never;\n        className?: never;\n        armedClassName?: never;\n      }\n    | {\n        tone?: never;\n        paint?: never;\n        /** @deprecated 0.33 — pass `tone`, or `paint` for an exception; removed in 0.35.\n         *  Background utility class while the action is previewed but not yet armed; the\n         *  panel is dimmed then, and its text is white unless this sets a text colour. */\n        className: string;\n        /** @deprecated 0.33 — pass `tone`, or `paint`; removed in 0.35. Background\n         *  utility class once the drag has passed this action's threshold. */\n        armedClassName: string;\n      }\n  );\n\n/**\n * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a\n * class by reading the source. Idle is Chip's soft recipe for the tone (the money pair\n * takes Chip's soft money look, the well under the money colour; neutral the active\n * fill under the secondary ink); armed is the plain fill, not `-hover`, under the\n * fill's own foreground. Measured in every shipped preset by\n * theme/__tests__/tokens-css-audit.test.ts.\n */\nexport const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {\n  brand: { idle: \"bg-brand-soft text-brand-muted\", armed: \"bg-brand text-brand-contrast\" },\n  neutral: { idle: \"bg-active text-secondary\", armed: \"bg-neutral text-neutral-contrast\" },\n  success: { idle: \"bg-success-soft text-success\", armed: \"bg-success text-success-contrast\" },\n  warning: { idle: \"bg-warning-soft text-warning\", armed: \"bg-warning text-warning-contrast\" },\n  danger: { idle: \"bg-danger-soft text-danger\", armed: \"bg-danger text-danger-contrast\" },\n  info: { idle: \"bg-info-soft text-info\", armed: \"bg-info text-info-contrast\" },\n  income: { idle: \"bg-surface-2 text-money-pos\", armed: \"bg-money-pos text-money-income-contrast\" },\n  expense: { idle: \"bg-surface-2 text-money-neg\", armed: \"bg-money-neg text-money-expense-contrast\" },\n  blue: { idle: \"bg-hue-blue-soft text-hue-blue\", armed: \"bg-hue-blue text-hue-blue-contrast\" },\n  indigo: { idle: \"bg-hue-indigo-soft text-hue-indigo\", armed: \"bg-hue-indigo text-hue-indigo-contrast\" },\n  purple: { idle: \"bg-hue-purple-soft text-hue-purple\", armed: \"bg-hue-purple text-hue-purple-contrast\" },\n  teal: { idle: \"bg-hue-teal-soft text-hue-teal\", armed: \"bg-hue-teal text-hue-teal-contrast\" },\n  orange: { idle: \"bg-hue-orange-soft text-hue-orange\", armed: \"bg-hue-orange text-hue-orange-contrast\" },\n};\n\n/** `paint`'s two looks, from the two custom properties the panel carries inline. The\n *  idle wash is `--brand-bg`'s recipe (14 % of the fill into the card). */\nconst PAINT_IDLE = \"bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary\";\nconst PAINT_ARMED = \"bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]\";\n\n/** The panel's colour classes, inline style and dimming for one action and state. */\nfunction panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties; dim: boolean } {\n  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? \"armed\" : \"idle\"], dim: false };\n  if (action.paint) {\n    return {\n      className: armed ? PAINT_ARMED : PAINT_IDLE,\n      style: {\n        \"--swipe-paint-fill\": action.paint.fill,\n        \"--swipe-paint-fg\": action.paint.foreground,\n      } as CSSProperties,\n      dim: false,\n    };\n  }\n  // The deprecated path, as it was: white text under the caller's fill, dimmed idle.\n  return { className: cn(\"text-white\", armed ? action.armedClassName : action.className), dim: !armed };\n}\n\n/**\n * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on\n * purpose: a swipe is a movement of the finger across the glass, the gesture hook\n * measures it in screen pixels, and \"which way is destructive\" is an app decision that\n * RTL guidelines do not agree on. An app that wants mirrored actions in RTL swaps the\n * two arrays itself. What the component does mirror is everything it lays out: the\n * reveal panel's contents hug the physical edge being uncovered, and the keyboard\n * buttons sit at the row's logical END.\n */\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging (physically) LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. This\n   *  also withdraws the keyboard buttons below: a row that must not be acted on must\n   *  not be actionable by ANY input. */\n  enabled?: boolean;\n  /** Names the revealed action buttons as a set (\"Row actions\"), for a reader that\n   *  reaches the group before it reaches any one button. Default:\n   *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */\n  actionsLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from the tone's soft wash to its solid fill, the icon grows and gains a\n * filled disc, and the label turns bold — plus the existing haptic tick per newly armed\n * stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n *\n * ## The keyboard path is buttons, and deliberately not a typed gesture\n *\n * Every action here used to live exclusively inside a pointer drag — `onCommit` had no\n * other caller — so with a keyboard, with a screen reader, or on any input that cannot\n * express 120px of horizontal travel, the row's actions did not exist at all. That is\n * not a rough edge on a phone control: {@link DataTable} mounts this for every row of\n * its mobile layout, and the actions an app puts here are its destructive ones.\n *\n * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that\n * \"swipes\". That invents a private idiom with nothing to discover it by, and it makes\n * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.\n * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at\n * the row's trailing edge, firing the identical `onCommit`: one definition of what an\n * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from\n * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be\n * done to it rather than keeping it behind a gesture nobody can hear.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  actionsLabel,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const labels = useKitLabels(\"swipeableRow\", DEFAULT_SWIPEABLE_ROW_LABELS, {\n    actions: actionsLabel,\n  });\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Adjusted during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms). State set while rendering re-renders this component\n  // before anything is committed, so the released frame already has the right side.\n  const [lastSide, setLastSide] = useState<\"left\" | \"right\">(\"right\");\n  const side = dx === 0 ? null : dx < 0 ? \"left\" : \"right\";\n  if (side && side !== lastSide) setLastSide(side);\n  const draggingLeft = side ? side === \"left\" : lastSide === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n  const look = shown ? panelLook(shown, armed) : null;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {/* The card under the panel. A dark theme's washes are translucent, and a tone's\n          idle pair is measured as that wash ON the card — so the card is there, whatever\n          the row happens to sit in. */}\n      {active && shown && <div aria-hidden className=\"pointer-events-none absolute inset-0 bg-surface\" />}\n      {active && shown && look && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium transition-all\",\n            look.className,\n            // The old path only: dimmed until the drag has passed a threshold. A tone\n            // or a paint says it with the soft→solid step instead, which keeps its\n            // label readable at both ends.\n            look.dim && \"opacity-60\",\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen. That edge is\n            // physical, while a flex row starts at the INLINE start — so in RTL the two\n            // directions swap, or the label sat under the row on the covered side.\n            draggingLeft ? \"flex-row-reverse rtl:flex-row\" : \"rtl:flex-row-reverse\",\n          )}\n          style={look.style}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance. In\n                // the label's own colour (0.33): a white disc vanished on a dark\n                // theme's pastel fill, and the label's colour works on every pair.\n                armed ? \"size-8 scale-110 bg-current/20\" : \"size-7 bg-current/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-surface\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150 motion-reduce:transition-none\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n      {active && (\n        <div\n          role=\"group\"\n          aria-label={labels.actions}\n          // OUTSIDE the sliding div on purpose: an action that travels with the row it\n          // acts on is a moving target, and the drag transform would carry it off the\n          // screen mid-gesture.\n          //\n          // `pointer-events-none` here, restored on a button only once it HAS focus: a\n          // sr-only button is clipped to nothing but is still a hit target, and this\n          // strip sits at the row's trailing edge — exactly where a drag toward the\n          // start begins.\n          //\n          // `end-0`/`pe-2`, not `right-0`/`pr-2`: in RTL the right edge is where the\n          // row's title starts, and a focused button there covered it.\n          // A gesture that silently failed to start because it landed on an invisible\n          // button is not a bug anyone would find by looking at the screen.\n          className=\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center gap-1 pe-2\"\n        >\n          {/* Both sides, each still nearest-threshold first, so the tab order reads in\n              the order the gesture arms them. */}\n          {[...rightActions, ...leftActions].map((action, i) => (\n            <button\n              key={`${action.label}-${i}`}\n              type=\"button\"\n              onClick={action.onCommit}\n              className={cn(\n                \"sr-only whitespace-nowrap rounded-md border-subtle bg-surface text-xs font-medium text-primary shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                // The box's padding and border only once it shows (0.32.1, keksdose's\n                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s\n                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px\n                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running\n                // past the row's end from the strip's start — invisible under its clip,\n                // but counted in the page's scroll width (§4: nothing overflows).\n                \"focus:border focus:px-2 focus:py-1\",\n                FOCUS_RING,\n              )}\n            >\n              {/* The label is the button's accessible name, so the caller's icon is\n                  decoration on top of it rather than a second reading of it. */}\n              {action.icon && (\n                <span aria-hidden=\"true\" className=\"[&_svg]:size-4\">\n                  {action.icon}\n                </span>\n              )}\n              {action.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { StatusDotTone } from \"./status-dot\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * What a swipe action's panel means — the vocabulary Chip, ProgressBar and StatusDot\n * already share, so a curtain can be \"the colour of the status it produces\" by name:\n * brand, neutral, success, warning, danger, info, income, expense, and the categorical\n * hues blue, indigo, purple, teal and orange.\n */\nexport type SwipeTone = StatusDotTone;\n\n/**\n * An app's own fill for a documented exception (0.33, docs/colour-roles-harmonization.md\n * §12.6) — a curtain that must be exactly its status pill's palette fill, or two\n * strengths of one tone. CSS colours or `var()`s, the same in both themes unless the app\n * passes a variable it declares per theme in its own stylesheet. The kit cannot measure\n * these, so the app's tests pin the pair.\n */\nexport interface SwipePaint {\n  /** The armed panel's fill; idle shows a 14 % wash of it on the card. */\n  fill: string;\n  /** The text and icon colour ON `fill`, armed. Idle text is the body ink. */\n  foreground: string;\n}\n\ninterface SwipeActionBase {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n}\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The panel has two states. Before the first threshold is crossed it previews the\n * nearest action IDLE, so the user can see what a little more drag will do; crossing\n * the threshold ARMS it — \"let go and this fires\".\n *\n * **`tone`** (0.33) is how the kit paints it: idle, the tone's soft wash under the\n * tone's own text colour (`bg-danger-soft text-danger`, Chip's soft look, ≥ 4.5:1);\n * armed, the tone's solid fill under its `-contrast` foreground (≥ 5:1). The soft→solid\n * step is the signal. It replaces a panel dimmed to 60 % at idle, whose label sat at\n * 2.4–4.5:1 on the kit's own swipes, and a white label that was unreadable on every\n * dark-mode pastel.\n *\n * **`paint`** follows the same rule for an app's documented exception (see\n * {@link SwipePaint}). The old path, a `className` / `armedClassName` pair under a white\n * label and dimmed idle, was deprecated in 0.33 and removed in 0.35 (round 0.35 R1).\n */\nexport type SwipeAction = SwipeActionBase &\n  (\n    | {\n        /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */\n        tone: SwipeTone;\n        paint?: never;\n      }\n    | {\n        /** A documented app exception: idle a 14 % wash of `fill` under the body ink,\n         *  armed `fill` under `foreground`. */\n        paint: SwipePaint;\n        tone?: never;\n      }\n  );\n\n/**\n * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a\n * class by reading the source. Idle is Chip's soft recipe for the tone (the money pair\n * takes Chip's soft money look, the well under the money colour; neutral the active\n * fill under the secondary ink); armed is the plain fill, not `-hover`, under the\n * fill's own foreground. Measured in every shipped preset by\n * theme/__tests__/tokens-css-audit.test.ts.\n */\nexport const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {\n  brand: { idle: \"bg-brand-soft text-brand-muted\", armed: \"bg-brand text-brand-contrast\" },\n  neutral: { idle: \"bg-active text-secondary\", armed: \"bg-neutral text-neutral-contrast\" },\n  success: { idle: \"bg-success-soft text-success\", armed: \"bg-success text-success-contrast\" },\n  warning: { idle: \"bg-warning-soft text-warning\", armed: \"bg-warning text-warning-contrast\" },\n  danger: { idle: \"bg-danger-soft text-danger\", armed: \"bg-danger text-danger-contrast\" },\n  info: { idle: \"bg-info-soft text-info\", armed: \"bg-info text-info-contrast\" },\n  income: { idle: \"bg-surface-2 text-money-pos\", armed: \"bg-money-pos text-money-income-contrast\" },\n  expense: { idle: \"bg-surface-2 text-money-neg\", armed: \"bg-money-neg text-money-expense-contrast\" },\n  blue: { idle: \"bg-hue-blue-soft text-hue-blue\", armed: \"bg-hue-blue text-hue-blue-contrast\" },\n  indigo: { idle: \"bg-hue-indigo-soft text-hue-indigo\", armed: \"bg-hue-indigo text-hue-indigo-contrast\" },\n  purple: { idle: \"bg-hue-purple-soft text-hue-purple\", armed: \"bg-hue-purple text-hue-purple-contrast\" },\n  teal: { idle: \"bg-hue-teal-soft text-hue-teal\", armed: \"bg-hue-teal text-hue-teal-contrast\" },\n  orange: { idle: \"bg-hue-orange-soft text-hue-orange\", armed: \"bg-hue-orange text-hue-orange-contrast\" },\n};\n\n/** `paint`'s two looks, from the two custom properties the panel carries inline. The\n *  idle wash is `--brand-bg`'s recipe (14 % of the fill into the card). */\nconst PAINT_IDLE = \"bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary\";\nconst PAINT_ARMED = \"bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]\";\n\n/** The panel's colour classes and inline style for one action and state. */\nfunction panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties } {\n  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? \"armed\" : \"idle\"] };\n  return {\n    className: armed ? PAINT_ARMED : PAINT_IDLE,\n    style: {\n      \"--swipe-paint-fill\": action.paint.fill,\n      \"--swipe-paint-fg\": action.paint.foreground,\n    } as CSSProperties,\n  };\n}\n\n/**\n * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on\n * purpose: a swipe is a movement of the finger across the glass, the gesture hook\n * measures it in screen pixels, and \"which way is destructive\" is an app decision that\n * RTL guidelines do not agree on. An app that wants mirrored actions in RTL swaps the\n * two arrays itself. What the component does mirror is everything it lays out: the\n * reveal panel's contents hug the physical edge being uncovered, and the keyboard\n * buttons sit at the row's logical END.\n */\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging (physically) LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. This\n   *  also withdraws the keyboard buttons below: a row that must not be acted on must\n   *  not be actionable by ANY input. */\n  enabled?: boolean;\n  /** Names the revealed action buttons as a set (\"Row actions\"), for a reader that\n   *  reaches the group before it reaches any one button. Default:\n   *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */\n  actionsLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from the tone's soft wash to its solid fill, the icon grows and gains a\n * filled disc, and the label turns bold — plus the existing haptic tick per newly armed\n * stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n *\n * ## The keyboard path is buttons, and deliberately not a typed gesture\n *\n * Every action here used to live exclusively inside a pointer drag — `onCommit` had no\n * other caller — so with a keyboard, with a screen reader, or on any input that cannot\n * express 120px of horizontal travel, the row's actions did not exist at all. That is\n * not a rough edge on a phone control: {@link DataTable} mounts this for every row of\n * its mobile layout, and the actions an app puts here are its destructive ones.\n *\n * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that\n * \"swipes\". That invents a private idiom with nothing to discover it by, and it makes\n * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.\n * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at\n * the row's trailing edge, firing the identical `onCommit`: one definition of what an\n * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from\n * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be\n * done to it rather than keeping it behind a gesture nobody can hear.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  actionsLabel,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const labels = useKitLabels(\"swipeableRow\", DEFAULT_SWIPEABLE_ROW_LABELS, {\n    actions: actionsLabel,\n  });\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Adjusted during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms). State set while rendering re-renders this component\n  // before anything is committed, so the released frame already has the right side.\n  const [lastSide, setLastSide] = useState<\"left\" | \"right\">(\"right\");\n  const side = dx === 0 ? null : dx < 0 ? \"left\" : \"right\";\n  if (side && side !== lastSide) setLastSide(side);\n  const draggingLeft = side ? side === \"left\" : lastSide === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n  const look = shown ? panelLook(shown, armed) : null;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {/* The card under the panel. A dark theme's washes are translucent, and a tone's\n          idle pair is measured as that wash ON the card — so the card is there, whatever\n          the row happens to sit in. */}\n      {active && shown && <div aria-hidden className=\"pointer-events-none absolute inset-0 bg-surface\" />}\n      {active && shown && look && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium transition-all\",\n            // No dimming: a tone or a paint says \"not yet armed\" with the soft→solid\n            // step, which keeps its label readable at both ends (the 0.33 rule; the\n            // dimmed path went with `className` / `armedClassName` in 0.35).\n            look.className,\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen. That edge is\n            // physical, while a flex row starts at the INLINE start — so in RTL the two\n            // directions swap, or the label sat under the row on the covered side.\n            draggingLeft ? \"flex-row-reverse rtl:flex-row\" : \"rtl:flex-row-reverse\",\n          )}\n          style={look.style}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance. In\n                // the label's own colour (0.33): a white disc vanished on a dark\n                // theme's pastel fill, and the label's colour works on every pair.\n                armed ? \"size-8 scale-110 bg-current/20\" : \"size-7 bg-current/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-surface\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150 motion-reduce:transition-none\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n      {active && (\n        <div\n          role=\"group\"\n          aria-label={labels.actions}\n          // OUTSIDE the sliding div on purpose: an action that travels with the row it\n          // acts on is a moving target, and the drag transform would carry it off the\n          // screen mid-gesture.\n          //\n          // `pointer-events-none` here, restored on a button only once it HAS focus: a\n          // sr-only button is clipped to nothing but is still a hit target, and this\n          // strip sits at the row's trailing edge — exactly where a drag toward the\n          // start begins.\n          //\n          // `end-0`/`pe-2`, not `right-0`/`pr-2`: in RTL the right edge is where the\n          // row's title starts, and a focused button there covered it.\n          // A gesture that silently failed to start because it landed on an invisible\n          // button is not a bug anyone would find by looking at the screen.\n          className=\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center gap-1 pe-2\"\n        >\n          {/* Both sides, each still nearest-threshold first, so the tab order reads in\n              the order the gesture arms them. */}\n          {[...rightActions, ...leftActions].map((action, i) => (\n            <button\n              key={`${action.label}-${i}`}\n              type=\"button\"\n              onClick={action.onCommit}\n              className={cn(\n                \"sr-only whitespace-nowrap rounded-md border-subtle bg-surface text-xs font-medium text-primary shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                // The box's padding and border only once it shows (0.32.1, keksdose's\n                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s\n                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px\n                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running\n                // past the row's end from the strip's start — invisible under its clip,\n                // but counted in the page's scroll width (§4: nothing overflows).\n                \"focus:border focus:px-2 focus:py-1\",\n                FOCUS_RING,\n              )}\n            >\n              {/* The label is the button's accessible name, so the caller's icon is\n                  decoration on top of it rather than a second reading of it. */}\n              {action.icon && (\n                <span aria-hidden=\"true\" className=\"[&_svg]:size-4\">\n                  {action.icon}\n                </span>\n              )}\n              {action.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/text-link.js

@@ -37,7 +37,9 @@ function RenderedKitLink({ render, props }) {
   return render(props);
 }
 const TONE = {
-  brand: "text-brand hover:text-[var(--brand-hover)]",
+  // Under More contrast the brand as text, `--brand-muted`, at rest and hovered (0.36,
+  // colour-roles §13.3 decision 8): `--brand` is a mark's colour, solved to 3:1.
+  brand: "text-brand hover:text-[var(--brand-hover)] contrast:text-brand-muted contrast:hover:text-brand-muted",
   muted: "text-muted hover:text-primary",
   danger: "text-danger hover:text-[var(--danger-hover)]",
   inherit: "",

package/dist/components/text-link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/text-link.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { ExternalLink } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent } from \"../i18n/kit-labels\";\nimport { documentNavigation } from \"../lib/document-navigation\";\n\n/* ── Choosing what draws a link ──────────────────────────────────────────── */\n\n/**\n * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a\n * protocol-relative `//host`. A router's link is for paths inside the app, so the\n * provider's `linkComponent` is never handed one of these — they stay a plain `<a>`.\n *\n * NOT external, and so handed to the router link: a path (`/x`, `x`, `?q=1`) and the\n * hash-router form `#/x` — that IS a route in a `HashRouter` app, which maps it to\n * `to=\"/x\"`. A plain in-page anchor (`#section`) is not external either, but it is not\n * a route: see {@link isInPageAnchor}.\n */\nexport function isExternalHref(href: string): boolean {\n  return /^(?:[a-z][a-z\\d+.-]*:|\\/\\/)/i.test(href);\n}\n\n/**\n * An `href` that only scrolls the current page: `#section` (or a bare `#`). The\n * hash-router form `#/x` is a ROUTE, not an anchor, and is not one of these. A router\n * link must not get an anchor — under a `HashRouter` `#section` would navigate to the\n * path `/section` — so every kit link draws it as a plain `<a>`.\n */\nexport function isInPageAnchor(href: string): boolean {\n  return href.startsWith(\"#\") && !href.startsWith(\"#/\");\n}\n\n/**\n * Whether the provider's `linkComponent` (or a kit component's router fallback) draws\n * `href`: an in-app path, `#/x` included — not an external `href`\n * ({@link isExternalHref}) and not an in-page `#anchor` ({@link isInPageAnchor}).\n */\nexport function isRoutableHref(href: string): boolean {\n  return !isExternalHref(href) && !isInPageAnchor(href);\n}\n\n/**\n * What draws a kit link to `href`: the component's own `renderLink` when it was given\n * one (it always wins — the caller asked for it by name), else the\n * `<UiKitProvider linkComponent>` for a routable `href` ({@link isRoutableHref}), else\n * `undefined` — a plain `<a>`. The one rule every kit link follows: `https:` /\n * `mailto:` / `//host` and `#section` stay plain anchors; `/x`, `x` and a hash-router\n * `#/x` go to the router link. Every kit link props type is a subset of the anchor\n * attributes `KitLinkProps` describes, which is what makes the cast sound.\n * @internal Shared by the kit's link-bearing components; not part of the barrel.\n */\nexport function pickLinkRenderer<P>(\n  own: ((props: P) => ReactElement) | undefined,\n  kitLink: KitLinkComponent | undefined,\n  href: string | undefined,\n): ((props: P) => ReactElement) | undefined {\n  if (own) return own;\n  if (!kitLink || href === undefined || !isRoutableHref(href)) return undefined;\n  return kitLink as unknown as (props: P) => ReactElement;\n}\n\n/** The plain primary click a page navigates on — not a middle click, not ⌘ / Ctrl /\n *  Shift / Alt (new tab, new window, download), and not one a handler already took. */\nfunction isPlainNavigationClick(event: MouseEvent<HTMLAnchorElement>): boolean {\n  return (\n    !event.defaultPrevented &&\n    event.button === 0 &&\n    !event.metaKey &&\n    !event.ctrlKey &&\n    !event.shiftKey &&\n    !event.altKey\n  );\n}\n\n/**\n * The `onClick` of a PLAIN `<a>` whose kit link was asked to `replace` (keksdose F1).\n *\n * A router link replaces the history entry itself (it is handed `replace`, see\n * {@link routerLinkNavigation}); a plain `<a>` has no attribute that says so, and the\n * browser's own navigation always pushes. So a plain click is taken over — the caller's\n * `onClick` runs first and may still `preventDefault` — and becomes\n * `location.replace(href)`: the same document load, with Back skipping the one-shot URL.\n * That is the case of `replace` together with `reloadDocument`, or an app with no\n * `linkComponent`. A modified click (new tab) and a `target` other than `_self` are left\n * to the browser: they do not navigate THIS history. Without `replace`, `onClick` comes\n * back untouched.\n * @internal\n */\nexport function replacingClick(\n  onClick: ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined,\n  href: string,\n  replace: boolean | undefined,\n  target?: string,\n): ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined {\n  if (!replace || (target !== undefined && target !== \"\" && target !== \"_self\")) return onClick;\n  return (event) => {\n    onClick?.(event);\n    if (!isPlainNavigationClick(event)) return;\n    event.preventDefault();\n    documentNavigation.replace(href);\n  };\n}\n\n/**\n * What a ROUTER link is handed for `replace`: `{ replace: true }` when asked, else\n * nothing at all — so a provider link that spreads its props onto a DOM `<a>` never\n * receives an unknown attribute from a link that did not ask (see `KitLinkProps.replace`).\n * @internal\n */\nexport function routerLinkNavigation(replace: boolean | undefined): { replace?: true } {\n  return replace ? { replace: true } : {};\n}\n\n/**\n * Draws `props` through `render` as a component of its own, so a router link's hooks\n * belong to it and not to the kit component calling it — for the kit components that\n * call their own `renderLink` inline and reach the provider's link through here.\n * @internal\n */\nexport function RenderedKitLink<P>({ render, props }: { render: (props: P) => ReactElement; props: P }) {\n  return render(props);\n}\n\n/* ── TextLink ─────────────────────────────────────────────────────────────── */\n\n/**\n * `brand` (default) for a link in running text, `muted` for footer and meta links\n * that should not compete with the content, `danger` for a destructive one (\"Leave\n * group\"), `inherit` for a link that takes its surroundings' colour.\n *\n * `primary` and `secondary` are the body and the secondary text colour, UNDERLINED\n * (keksdose F3): a link that must read as part of the text around it — a name in a\n * list row, a reference in a card's meta line — where `brand` repaints it in the accent\n * and `muted` is a step too light to read as content. `secondary` darkens to the body\n * colour under the pointer, as `muted` does; `primary` has nowhere darker to go, so its\n * underline thickens instead.\n *\n * `warning` is the kit's `--warning` text colour, underlined (kastlan 46): a link inside\n * a `<Tone tone=\"warning\">` sentence or a warning banner, which `brand` would paint in a\n * second hue and `inherit` would leave indistinguishable from the sentence. Like\n * `primary`, it keeps its colour on hover and thickens the underline.\n *\n * The three colours that sit IN the text default to `underline=\"always\"`: with the\n * colour of their surroundings, the underline is the only thing that says \"link\"\n * (WCAG 1.4.1). An explicit `underline` still wins.\n */\nexport type TextLinkTone = \"brand\" | \"muted\" | \"danger\" | \"inherit\" | \"primary\" | \"secondary\" | \"warning\";\n\n/** `hover` (the default for `brand`, `muted`, `danger`, `inherit`): underlined under\n *  the pointer — the idiom all three apps draw. `always` (the default for `primary`,\n *  `secondary`, `warning`) for a link inside prose, where colour alone must not be the\n *  only mark (WCAG 1.4.1). `none` where the context already says \"link\" (a footer nav). */\nexport type TextLinkUnderline = \"hover\" | \"always\" | \"none\";\n\n/** The `aria-current` token. `true` on {@link TextLinkProps.current} means `page`. */\nexport type TextLinkCurrent = \"page\" | \"step\" | \"location\" | \"date\" | \"time\" | \"true\";\n\n/** What {@link TextLinkProps.renderLink} (and the provider's `linkComponent`) is\n *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface TextLinkRenderProps {\n  href: string;\n  /** The link's look — keep it, or the tone, underline and focus ring go. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: TextLinkCurrent;\n  id?: string;\n  title?: string;\n  /** Present, as `true`, only when the link was given `replace` — see\n   *  `KitLinkProps.replace`. Map it to your router's replace; never onto a DOM `<a>`. */\n  replace?: boolean;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface TextLinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"children\" | \"aria-current\" | \"onClick\" | \"onKeyDown\"> {\n  href: string;\n  children: ReactNode;\n  /** Default `brand`. */\n  tone?: TextLinkTone;\n  /** Default `always` for `primary`, `secondary` and `warning`, else `hover`. */\n  underline?: TextLinkUnderline;\n  /**\n   * Navigate by replacing the current history entry, so Back does not return to this\n   * URL — keksdose F1, a one-shot URL (a confirmation landing, a `?done=1` hop). Handed\n   * to the router link as `replace` (see `KitLinkProps.replace` for mapping it); on a\n   * plain `<a>` (no `linkComponent`, or `reloadDocument`) a plain click becomes\n   * `location.replace(href)`. Ignored on an `external` link, which opens a new tab.\n   */\n  replace?: boolean;\n  /**\n   * A plain `<a>` for an in-app `href`: the browser loads the whole document instead of\n   * the router swapping the view — keksdose F1, a route served outside the SPA (a file\n   * download, a server-rendered page, a logout that must drop every in-memory cache).\n   * Wins over `renderLink` and the provider's `linkComponent`: it is the caller saying\n   * \"not the router\" for this one link.\n   */\n  reloadDocument?: boolean;\n  /**\n   * The link leaves the app: a plain `<a target=\"_blank\" rel=\"noopener noreferrer\">`\n   * (never the router's), an external-link mark after the text (mirrored in RTL), and\n   * \"opens in a new tab\" (`common.opensInNewTab`) read after it — the mark says it\n   * only to the eye. kastlan's BWO / BFS source links (rent-increase-calculator-page).\n   */\n  external?: boolean;\n  /**\n   * Keep the click (and the Enter that activates the link) from reaching an ancestor —\n   * a link in a DataTable row with `onRowClick` goes to its own target instead of\n   * running the row's action. kastlan's `CellLink` did this by hand.\n   */\n  stopPropagation?: boolean;\n  /** Mark the link as the current one of a set — `true` is `aria-current=\"page\"`, the\n   *  legal footer's link to the page you are on. Drawn in semibold. */\n  current?: boolean | TextLinkCurrent;\n  /** A Lucide icon before the text, at the text's size — kastlan's \"← Back\" link. */\n  icon?: LucideIcon;\n  /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then a plain `<a>`. Ignored on an `external` link. */\n  renderLink?: (props: TextLinkRenderProps) => ReactElement;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst TONE: Record<TextLinkTone, string> = {\n  brand: \"text-brand hover:text-[var(--brand-hover)]\",\n  muted: \"text-muted hover:text-primary\",\n  danger: \"text-danger hover:text-[var(--danger-hover)]\",\n  inherit: \"\",\n  primary: \"text-primary hover:decoration-2\",\n  secondary: \"text-secondary hover:text-primary\",\n  warning: \"text-warning hover:decoration-2\",\n};\n\n/** The tones whose colour is their surroundings' — underlined by default; see\n *  {@link TextLinkTone}. */\nconst UNDERLINED_BY_DEFAULT = new Set<TextLinkTone>([\"primary\", \"secondary\", \"warning\"]);\n\nconst UNDERLINE: Record<TextLinkUnderline, string> = {\n  hover: \"no-underline hover:underline\",\n  always: \"underline\",\n  none: \"no-underline\",\n};\n\n/**\n * The one inline link: a real `<a href>` (middle click, \"open in new tab\", link\n * semantics) through the app's router for an in-app path, in one of four tones.\n *\n * kastlan draws this link a dozen ways by hand — `EntityLink` and `CellLink` (text-primary,\n * hover underline, one stopping the row click), the legal pages' back link and footer,\n * the feedback page's URL links, the calculator's external sources with a hand-placed\n * ↗ and no word for a screen reader — and the lease wizard's unit step (lease-unit-step)\n * used a raw `<a>` to an in-app route, which reloads the whole app. Here the router\n * link comes from `<UiKitProvider linkComponent>`, set once.\n *\n * Inline, not `inline-flex`: a link inside a sentence must wrap with it. The icons sit\n * on the text's baseline at the text's size, so they scale with whatever type the link\n * is set in. The focus ring is an outline, which follows every line of a wrapped link.\n */\nexport function TextLink({\n  href,\n  children,\n  tone = \"brand\",\n  underline: underlineProp,\n  external = false,\n  replace,\n  reloadDocument = false,\n  stopPropagation = false,\n  current,\n  icon: Icon,\n  renderLink,\n  className,\n  onClick,\n  onKeyDown,\n  ref,\n  ...rest\n}: TextLinkProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const kitLink = useKitLink();\n  const underline = underlineProp ?? (UNDERLINED_BY_DEFAULT.has(tone) ? \"always\" : \"hover\");\n  const ariaCurrent: TextLinkCurrent | undefined =\n    current === true ? \"page\" : current === false ? undefined : current;\n\n  const look = cn(\n    \"rounded-sm underline-offset-2 transition-colors\",\n    \"focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:outline-brand\",\n    TONE[tone],\n    UNDERLINE[underline],\n    ariaCurrent && \"font-semibold\",\n    className,\n  );\n\n  const body = (\n    <>\n      {Icon && <Icon aria-hidden className=\"me-1 inline size-[1em] shrink-0 align-[-0.125em]\" />}\n      {children}\n      {external && (\n        <>\n          <ExternalLink aria-hidden className=\"ms-1 inline size-[0.85em] align-[-0.1em] rtl:-scale-x-100\" />\n          {\" \"}\n          <span className=\"sr-only\">({common.opensInNewTab})</span>\n        </>\n      )}\n    </>\n  );\n\n  const handleClick: TextLinkRenderProps[\"onClick\"] = stopPropagation\n    ? (event) => {\n        event.stopPropagation();\n        onClick?.(event);\n      }\n    : onClick;\n  const props: TextLinkRenderProps = {\n    ...(rest as Partial<TextLinkRenderProps>),\n    ref,\n    href,\n    className: look,\n    \"aria-current\": ariaCurrent,\n    onClick: handleClick,\n    onKeyDown: stopPropagation\n      ? (event) => {\n          if (event.key === \"Enter\") event.stopPropagation();\n          onKeyDown?.(event);\n        }\n      : onKeyDown,\n    children: body,\n  };\n\n  const render = external || reloadDocument ? undefined : pickLinkRenderer(renderLink, kitLink, href);\n  if (render) return <RenderedTextLink render={render} {...props} {...routerLinkNavigation(replace)} />;\n  // A plain `<a>` never gets `replace` as an attribute; asked for, it takes the click.\n  const plainClick = external ? handleClick : replacingClick(handleClick, href, replace, rest.target);\n  const { children: content, ...anchor } = props;\n  return (\n    <a\n      {...anchor}\n      href={href}\n      onClick={plainClick}\n      {...(external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : null)}\n    >\n      {content}\n    </a>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedTextLink({\n  render,\n  ...props\n}: TextLinkRenderProps & { render: (props: TextLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/text-link.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { ExternalLink } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent } from \"../i18n/kit-labels\";\nimport { documentNavigation } from \"../lib/document-navigation\";\n\n/* ── Choosing what draws a link ──────────────────────────────────────────── */\n\n/**\n * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a\n * protocol-relative `//host`. A router's link is for paths inside the app, so the\n * provider's `linkComponent` is never handed one of these — they stay a plain `<a>`.\n *\n * NOT external, and so handed to the router link: a path (`/x`, `x`, `?q=1`) and the\n * hash-router form `#/x` — that IS a route in a `HashRouter` app, which maps it to\n * `to=\"/x\"`. A plain in-page anchor (`#section`) is not external either, but it is not\n * a route: see {@link isInPageAnchor}.\n */\nexport function isExternalHref(href: string): boolean {\n  return /^(?:[a-z][a-z\\d+.-]*:|\\/\\/)/i.test(href);\n}\n\n/**\n * An `href` that only scrolls the current page: `#section` (or a bare `#`). The\n * hash-router form `#/x` is a ROUTE, not an anchor, and is not one of these. A router\n * link must not get an anchor — under a `HashRouter` `#section` would navigate to the\n * path `/section` — so every kit link draws it as a plain `<a>`.\n */\nexport function isInPageAnchor(href: string): boolean {\n  return href.startsWith(\"#\") && !href.startsWith(\"#/\");\n}\n\n/**\n * Whether the provider's `linkComponent` (or a kit component's router fallback) draws\n * `href`: an in-app path, `#/x` included — not an external `href`\n * ({@link isExternalHref}) and not an in-page `#anchor` ({@link isInPageAnchor}).\n */\nexport function isRoutableHref(href: string): boolean {\n  return !isExternalHref(href) && !isInPageAnchor(href);\n}\n\n/**\n * What draws a kit link to `href`: the component's own `renderLink` when it was given\n * one (it always wins — the caller asked for it by name), else the\n * `<UiKitProvider linkComponent>` for a routable `href` ({@link isRoutableHref}), else\n * `undefined` — a plain `<a>`. The one rule every kit link follows: `https:` /\n * `mailto:` / `//host` and `#section` stay plain anchors; `/x`, `x` and a hash-router\n * `#/x` go to the router link. Every kit link props type is a subset of the anchor\n * attributes `KitLinkProps` describes, which is what makes the cast sound.\n * @internal Shared by the kit's link-bearing components; not part of the barrel.\n */\nexport function pickLinkRenderer<P>(\n  own: ((props: P) => ReactElement) | undefined,\n  kitLink: KitLinkComponent | undefined,\n  href: string | undefined,\n): ((props: P) => ReactElement) | undefined {\n  if (own) return own;\n  if (!kitLink || href === undefined || !isRoutableHref(href)) return undefined;\n  return kitLink as unknown as (props: P) => ReactElement;\n}\n\n/** The plain primary click a page navigates on — not a middle click, not ⌘ / Ctrl /\n *  Shift / Alt (new tab, new window, download), and not one a handler already took. */\nfunction isPlainNavigationClick(event: MouseEvent<HTMLAnchorElement>): boolean {\n  return (\n    !event.defaultPrevented &&\n    event.button === 0 &&\n    !event.metaKey &&\n    !event.ctrlKey &&\n    !event.shiftKey &&\n    !event.altKey\n  );\n}\n\n/**\n * The `onClick` of a PLAIN `<a>` whose kit link was asked to `replace` (keksdose F1).\n *\n * A router link replaces the history entry itself (it is handed `replace`, see\n * {@link routerLinkNavigation}); a plain `<a>` has no attribute that says so, and the\n * browser's own navigation always pushes. So a plain click is taken over — the caller's\n * `onClick` runs first and may still `preventDefault` — and becomes\n * `location.replace(href)`: the same document load, with Back skipping the one-shot URL.\n * That is the case of `replace` together with `reloadDocument`, or an app with no\n * `linkComponent`. A modified click (new tab) and a `target` other than `_self` are left\n * to the browser: they do not navigate THIS history. Without `replace`, `onClick` comes\n * back untouched.\n * @internal\n */\nexport function replacingClick(\n  onClick: ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined,\n  href: string,\n  replace: boolean | undefined,\n  target?: string,\n): ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined {\n  if (!replace || (target !== undefined && target !== \"\" && target !== \"_self\")) return onClick;\n  return (event) => {\n    onClick?.(event);\n    if (!isPlainNavigationClick(event)) return;\n    event.preventDefault();\n    documentNavigation.replace(href);\n  };\n}\n\n/**\n * What a ROUTER link is handed for `replace`: `{ replace: true }` when asked, else\n * nothing at all — so a provider link that spreads its props onto a DOM `<a>` never\n * receives an unknown attribute from a link that did not ask (see `KitLinkProps.replace`).\n * @internal\n */\nexport function routerLinkNavigation(replace: boolean | undefined): { replace?: true } {\n  return replace ? { replace: true } : {};\n}\n\n/**\n * Draws `props` through `render` as a component of its own, so a router link's hooks\n * belong to it and not to the kit component calling it — for the kit components that\n * call their own `renderLink` inline and reach the provider's link through here.\n * @internal\n */\nexport function RenderedKitLink<P>({ render, props }: { render: (props: P) => ReactElement; props: P }) {\n  return render(props);\n}\n\n/* ── TextLink ─────────────────────────────────────────────────────────────── */\n\n/**\n * `brand` (default) for a link in running text, `muted` for footer and meta links\n * that should not compete with the content, `danger` for a destructive one (\"Leave\n * group\"), `inherit` for a link that takes its surroundings' colour.\n *\n * `primary` and `secondary` are the body and the secondary text colour, UNDERLINED\n * (keksdose F3): a link that must read as part of the text around it — a name in a\n * list row, a reference in a card's meta line — where `brand` repaints it in the accent\n * and `muted` is a step too light to read as content. `secondary` darkens to the body\n * colour under the pointer, as `muted` does; `primary` has nowhere darker to go, so its\n * underline thickens instead.\n *\n * `warning` is the kit's `--warning` text colour, underlined (kastlan 46): a link inside\n * a `<Tone tone=\"warning\">` sentence or a warning banner, which `brand` would paint in a\n * second hue and `inherit` would leave indistinguishable from the sentence. Like\n * `primary`, it keeps its colour on hover and thickens the underline.\n *\n * The three colours that sit IN the text default to `underline=\"always\"`: with the\n * colour of their surroundings, the underline is the only thing that says \"link\"\n * (WCAG 1.4.1). An explicit `underline` still wins.\n */\nexport type TextLinkTone = \"brand\" | \"muted\" | \"danger\" | \"inherit\" | \"primary\" | \"secondary\" | \"warning\";\n\n/** `hover` (the default for `brand`, `muted`, `danger`, `inherit`): underlined under\n *  the pointer — the idiom all three apps draw. `always` (the default for `primary`,\n *  `secondary`, `warning`) for a link inside prose, where colour alone must not be the\n *  only mark (WCAG 1.4.1). `none` where the context already says \"link\" (a footer nav). */\nexport type TextLinkUnderline = \"hover\" | \"always\" | \"none\";\n\n/** The `aria-current` token. `true` on {@link TextLinkProps.current} means `page`. */\nexport type TextLinkCurrent = \"page\" | \"step\" | \"location\" | \"date\" | \"time\" | \"true\";\n\n/** What {@link TextLinkProps.renderLink} (and the provider's `linkComponent`) is\n *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface TextLinkRenderProps {\n  href: string;\n  /** The link's look — keep it, or the tone, underline and focus ring go. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: TextLinkCurrent;\n  id?: string;\n  title?: string;\n  /** Present, as `true`, only when the link was given `replace` — see\n   *  `KitLinkProps.replace`. Map it to your router's replace; never onto a DOM `<a>`. */\n  replace?: boolean;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface TextLinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"children\" | \"aria-current\" | \"onClick\" | \"onKeyDown\"> {\n  href: string;\n  children: ReactNode;\n  /** Default `brand`. */\n  tone?: TextLinkTone;\n  /** Default `always` for `primary`, `secondary` and `warning`, else `hover`. */\n  underline?: TextLinkUnderline;\n  /**\n   * Navigate by replacing the current history entry, so Back does not return to this\n   * URL — keksdose F1, a one-shot URL (a confirmation landing, a `?done=1` hop). Handed\n   * to the router link as `replace` (see `KitLinkProps.replace` for mapping it); on a\n   * plain `<a>` (no `linkComponent`, or `reloadDocument`) a plain click becomes\n   * `location.replace(href)`. Ignored on an `external` link, which opens a new tab.\n   */\n  replace?: boolean;\n  /**\n   * A plain `<a>` for an in-app `href`: the browser loads the whole document instead of\n   * the router swapping the view — keksdose F1, a route served outside the SPA (a file\n   * download, a server-rendered page, a logout that must drop every in-memory cache).\n   * Wins over `renderLink` and the provider's `linkComponent`: it is the caller saying\n   * \"not the router\" for this one link.\n   */\n  reloadDocument?: boolean;\n  /**\n   * The link leaves the app: a plain `<a target=\"_blank\" rel=\"noopener noreferrer\">`\n   * (never the router's), an external-link mark after the text (mirrored in RTL), and\n   * \"opens in a new tab\" (`common.opensInNewTab`) read after it — the mark says it\n   * only to the eye. kastlan's BWO / BFS source links (rent-increase-calculator-page).\n   */\n  external?: boolean;\n  /**\n   * Keep the click (and the Enter that activates the link) from reaching an ancestor —\n   * a link in a DataTable row with `onRowClick` goes to its own target instead of\n   * running the row's action. kastlan's `CellLink` did this by hand.\n   */\n  stopPropagation?: boolean;\n  /** Mark the link as the current one of a set — `true` is `aria-current=\"page\"`, the\n   *  legal footer's link to the page you are on. Drawn in semibold. */\n  current?: boolean | TextLinkCurrent;\n  /** A Lucide icon before the text, at the text's size — kastlan's \"← Back\" link. */\n  icon?: LucideIcon;\n  /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then a plain `<a>`. Ignored on an `external` link. */\n  renderLink?: (props: TextLinkRenderProps) => ReactElement;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst TONE: Record<TextLinkTone, string> = {\n  // Under More contrast the brand as text, `--brand-muted`, at rest and hovered (0.36,\n  // colour-roles §13.3 decision 8): `--brand` is a mark's colour, solved to 3:1.\n  brand: \"text-brand hover:text-[var(--brand-hover)] contrast:text-brand-muted contrast:hover:text-brand-muted\",\n  muted: \"text-muted hover:text-primary\",\n  danger: \"text-danger hover:text-[var(--danger-hover)]\",\n  inherit: \"\",\n  primary: \"text-primary hover:decoration-2\",\n  secondary: \"text-secondary hover:text-primary\",\n  warning: \"text-warning hover:decoration-2\",\n};\n\n/** The tones whose colour is their surroundings' — underlined by default; see\n *  {@link TextLinkTone}. */\nconst UNDERLINED_BY_DEFAULT = new Set<TextLinkTone>([\"primary\", \"secondary\", \"warning\"]);\n\nconst UNDERLINE: Record<TextLinkUnderline, string> = {\n  hover: \"no-underline hover:underline\",\n  always: \"underline\",\n  none: \"no-underline\",\n};\n\n/**\n * The one inline link: a real `<a href>` (middle click, \"open in new tab\", link\n * semantics) through the app's router for an in-app path, in one of four tones.\n *\n * kastlan draws this link a dozen ways by hand — `EntityLink` and `CellLink` (text-primary,\n * hover underline, one stopping the row click), the legal pages' back link and footer,\n * the feedback page's URL links, the calculator's external sources with a hand-placed\n * ↗ and no word for a screen reader — and the lease wizard's unit step (lease-unit-step)\n * used a raw `<a>` to an in-app route, which reloads the whole app. Here the router\n * link comes from `<UiKitProvider linkComponent>`, set once.\n *\n * Inline, not `inline-flex`: a link inside a sentence must wrap with it. The icons sit\n * on the text's baseline at the text's size, so they scale with whatever type the link\n * is set in. The focus ring is an outline, which follows every line of a wrapped link.\n */\nexport function TextLink({\n  href,\n  children,\n  tone = \"brand\",\n  underline: underlineProp,\n  external = false,\n  replace,\n  reloadDocument = false,\n  stopPropagation = false,\n  current,\n  icon: Icon,\n  renderLink,\n  className,\n  onClick,\n  onKeyDown,\n  ref,\n  ...rest\n}: TextLinkProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const kitLink = useKitLink();\n  const underline = underlineProp ?? (UNDERLINED_BY_DEFAULT.has(tone) ? \"always\" : \"hover\");\n  const ariaCurrent: TextLinkCurrent | undefined =\n    current === true ? \"page\" : current === false ? undefined : current;\n\n  const look = cn(\n    \"rounded-sm underline-offset-2 transition-colors\",\n    \"focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:outline-brand\",\n    TONE[tone],\n    UNDERLINE[underline],\n    ariaCurrent && \"font-semibold\",\n    className,\n  );\n\n  const body = (\n    <>\n      {Icon && <Icon aria-hidden className=\"me-1 inline size-[1em] shrink-0 align-[-0.125em]\" />}\n      {children}\n      {external && (\n        <>\n          <ExternalLink aria-hidden className=\"ms-1 inline size-[0.85em] align-[-0.1em] rtl:-scale-x-100\" />\n          {\" \"}\n          <span className=\"sr-only\">({common.opensInNewTab})</span>\n        </>\n      )}\n    </>\n  );\n\n  const handleClick: TextLinkRenderProps[\"onClick\"] = stopPropagation\n    ? (event) => {\n        event.stopPropagation();\n        onClick?.(event);\n      }\n    : onClick;\n  const props: TextLinkRenderProps = {\n    ...(rest as Partial<TextLinkRenderProps>),\n    ref,\n    href,\n    className: look,\n    \"aria-current\": ariaCurrent,\n    onClick: handleClick,\n    onKeyDown: stopPropagation\n      ? (event) => {\n          if (event.key === \"Enter\") event.stopPropagation();\n          onKeyDown?.(event);\n        }\n      : onKeyDown,\n    children: body,\n  };\n\n  const render = external || reloadDocument ? undefined : pickLinkRenderer(renderLink, kitLink, href);\n  if (render) return <RenderedTextLink render={render} {...props} {...routerLinkNavigation(replace)} />;\n  // A plain `<a>` never gets `replace` as an attribute; asked for, it takes the click.\n  const plainClick = external ? handleClick : replacingClick(handleClick, href, replace, rest.target);\n  const { children: content, ...anchor } = props;\n  return (\n    <a\n      {...anchor}\n      href={href}\n      onClick={plainClick}\n      {...(external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : null)}\n    >\n      {content}\n    </a>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedTextLink({\n  render,\n  ...props\n}: TextLinkRenderProps & { render: (props: TextLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":[]}

package/dist/components/textarea.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode, Ref, TextareaHTMLAttributes } from "react";
+import { type FieldHelpProps } from "./field-parts.js";
 import { type CharacterCountLabels } from "./field-base.js";
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldHelpProps {
     label?: ReactNode;
     /** See {@link Input}'s `invalid`. */
     invalid?: boolean;

package/dist/components/textarea.js

@@ -2,7 +2,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useLayoutEffect, useRef } from "react";
 import { cn } from "../lib/cn.js";
-import { EndHintRow, FieldCaption, mergeDescribedBy, useFieldError, useFieldHint } from "./field-parts.js";
+import {
+  EndHintRow,
+  FieldCaption,
+  mergeDescribedBy,
+  useFieldError,
+  useFieldHint
+} from "./field-parts.js";
 import {
   CharacterCount,
   FIELD_BASE,
@@ -86,12 +92,12 @@ function TextareaLabelStrip() {
   return /* @__PURE__ */ jsx("span", { ref, "aria-hidden": true, "data-slot": "label-strip", className: TEXTAREA_LABEL_STRIP });
 }
 function Textarea(props) {
-  const { ref, className, label, id, placeholder, invalid, error, hint, showCount, countLabels, ...rest } = props;
+  const { ref, className, label, id, placeholder, invalid, error, hint, help, showCount, countLabels, ...rest } = props;
   const reserve = "error" in props || "hint" in props || "showCount" in props;
   const generated = useId();
   const fieldId = id ?? generated;
   const countId = useId();
-  const hintParts = useFieldHint(hint, rest["aria-describedby"]);
+  const hintParts = useFieldHint(hint, rest["aria-describedby"], { help, name: label ?? rest["aria-label"] });
   const maxLength = rest.maxLength;
   const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
   const length = useTypedLength(rest.value, rest.defaultValue);

package/dist/components/textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef } from \"react\";\nimport type { ChangeEvent, ReactNode, Ref, TextareaHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { EndHintRow, FieldCaption, mergeDescribedBy, useFieldError, useFieldHint } from \"./field-parts\";\nimport {\n  CharacterCount,\n  FIELD_BASE,\n  FIELD_INVALID,\n  FieldGroup,\n  FloatingField,\n  FLOATING_INPUT_CLASS,\n  FLOATING_PLACEHOLDER_ON_FOCUS,\n  fieldBelow,\n  hasPlaceholderText,\n  useCharacterCountLabels,\n  useTypedLength,\n  type CharacterCountLabels,\n} from \"./field-base\";\n\n/**\n * The lower edge of {@link TEXTAREA_LABEL_STRIP} (0.25, Kurvenschmiede).\n *\n * The 0.24 strip ends on a hard line, and a line of text scrolled most of the way under\n * it left its lower edge showing below that line: in a pasted table, a row of comma\n * tails between the strip and the first whole line (`0,5;1,9` cut above its baseline is\n * `, ,`). This layer, hung under the strip, closes that gap. What it draws depends on\n * how much of the line on its way out is still below the strip ({@link labelEdge}):\n *\n * - **Half a line or less** — its descenders, the feet of its letters: covered, solid,\n *   down to exactly where that line's box ends. The strip's bottom snaps to the line\n *   box, so the row of tails is gone and the next line, which starts there, is not\n *   touched.\n * - **More than half** — a line you can still read: a soft edge, the strip's surface\n *   fading into it over {@link LABEL_EDGE_SOFT_PX}, where 0.24 cut it hard. Never taller\n *   than the part of that line already gone, so it grows from nothing as a line starts\n *   to move and never reaches the next one.\n * - **Nothing to cover** — at rest, or a line boundary right on the strip's edge:\n *   nothing drawn. An unscrolled first line is never covered (at rest the strip covers\n *   the top padding and nothing else, as in 0.24), and neither is any whole line.\n *\n * Why not one of the two alone. A plain fade under the strip, as tall as the tails,\n * dims the top of the first WHOLE line whenever it sits right under the strip (its\n * capitals start about 4px into a 20px line), and only half-hides the tails, which sit\n * in its fading part. A plain snap to the line box would hide a whole line the moment\n * one starts to scroll. The half-line threshold keeps what is shown legible: a line is\n * either hidden or shown with most of its letters, never as a row of stray marks.\n *\n * Its height and solid part are `--label-strip-edge` / `--label-strip-edge-solid`,\n * written by {@link TextareaLabelStrip} from the textarea's `scrollTop` and line height\n * on every scroll; unset (no layout, no script yet) the height is 0 and nothing shows.\n * A pseudo-element of the strip, so it inherits everything the strip already gets\n * right: shown only while the label is floated, the same horizontal insets (stopped\n * short of a classic scrollbar, on either side — RTL included), painted under the\n * label. Its colour is INHERITED from the strip (`bg-inherit`): `--bg-surface`, and the\n * disabled / `[readonly]` `--bg-surface-2`, in both themes, with no second copy of\n * those selectors to keep in step. The soft part is a mask over that colour (alpha\n * only — the `#000` is the mask's opacity, not a colour on screen).\n */\nconst TEXTAREA_LABEL_EDGE = cn(\n  \"after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--label-strip-edge,0px)] after:content-['']\",\n  \"after:bg-inherit after:[mask-image:linear-gradient(#000_var(--label-strip-edge-solid,0px),transparent)]\",\n);\n\n/** The soft edge over a line still more than half in view, in px: \"a few pixels\" —\n *  enough to take the cut off its letters, little enough to leave them legible. */\nconst LABEL_EDGE_SOFT_PX = 3;\n\n/**\n * {@link TEXTAREA_LABEL_EDGE}'s height and solid part, in px, for a field scrolled\n * `scrollTop` with lines `lineHeight` tall.\n *\n * The strip covers the top padding exactly, so line boxes meet its lower edge whenever\n * `scrollTop` is a whole number of lines; `gone` is how far the line now on its way out\n * has passed under it, `left` how much of it is still below. A line height that is not\n * a length (`normal`) gives no line boxes to snap to: only the soft edge then.\n */\nfunction labelEdge(scrollTop: number, lineHeight: number): { height: number; solid: number } {\n  if (!(scrollTop > 0)) return { height: 0, solid: 0 };\n  if (!(lineHeight > 0)) return { height: Math.min(scrollTop, LABEL_EDGE_SOFT_PX), solid: 0 };\n  const gone = scrollTop % lineHeight;\n  const left = gone === 0 ? 0 : lineHeight - gone;\n  if (left > 0 && left <= lineHeight / 2) return { height: left, solid: left };\n  return { height: Math.min(gone, LABEL_EDGE_SOFT_PX), solid: 0 };\n}\n\n/**\n * The backdrop of a labelled {@link Textarea}'s label strip (Kurvenschmiede, 0.24).\n *\n * The report: paste a long table into ColumnMapper, the field scrolls, and the floated\n * \"Paste a table\" / \"Tabelle einfügen\" sits ON the first visible line of text — on\n * desktop and on a phone. Not a ColumnMapper bug: every labelled textarea that scrolls\n * did it. An `<input>` has one line that never moves, so the strip FIELD_FLOATING_PAD\n * leaves for the label is always empty there; a textarea's top padding is part of its\n * SCROLLING area, and once the content scrolls the lines travel up through the strip\n * and under the label.\n *\n * The fix makes that padding stay put: this layer is a later sibling of the textarea\n * (so `peer-*` reaches it, and as a positioned box it paints above the textarea's\n * text), the label paints above it in turn, and it covers exactly the top padding —\n * `top-px` / `inset-x-px` inside the 1px border, `h-4` = `pt-4`. At rest it covers\n * padding and nothing else, so no pixel of an unscrolled line is ever hidden; scrolled\n * text slides out of sight under it instead of through the label.\n *\n * Why a layer and not \"start the scrolling area below the strip\" (a wrapper that draws\n * the border and background, the textarea transparent inside it): the box would stop\n * being the textarea. Its focus outline, its brand border on focus, the invalid ring,\n * the disabled and read-only greys and every caller's `[&_textarea]:…` would all have\n * to be rebuilt on the wrapper with `focus-within:` / `has-[…]:`, and a caller's\n * `style={{ height }}` would size the scroller rather than the field. The layer leaves\n * all of that exactly where it was.\n *\n * What it has to match, it matches from the same tokens the field uses: the surface is\n * FIELD_BASE's `--bg-surface`, and `--bg-surface-2` for `disabled` and `[readonly]` —\n * on the same ATTRIBUTE selector FIELD_BASE uses, for the reason given there. Focus and\n * `invalid` change only the border and the ring, which are outside the layer, so they\n * need nothing. Both themes come with the variables. The inner corners are the field's\n * radius (`rounded-md`, 0.375rem) less the 1px border, so the rounded border is never\n * cut into — `calc(0.375rem - 1px)` rather than `var(--radius-md)`, which Tailwind emits\n * only where a utility uses it and the kit's token check refuses (token-vars-declared).\n * Since 0.32 in rem (§3.2): the field's own corner grows with the text, so a fixed 5px\n * left the strip's corner square of the border's at 125 %.\n *\n * Hidden (`display: none`) until the label floats: an empty, unfocused field has\n * nothing that could scroll, and it renders exactly as it did before 0.24. Pointer\n * events pass through, so a click on the strip still lands in the field.\n *\n * The one thing CSS cannot know is a classic scrollbar's width, and a strip across the\n * whole inner width would hide the scrollbar's top arrow — see {@link TextareaLabelStrip}.\n *\n * Its lower edge, where a line scrolled half under it used to leave its tails showing,\n * is {@link TEXTAREA_LABEL_EDGE} (0.25).\n */\nconst TEXTAREA_LABEL_STRIP = cn(\n  \"pointer-events-none absolute inset-x-px top-px hidden h-4 rounded-t-[calc(0.375rem-1px)] bg-surface\",\n  // Never at Large (0.33, §10.17): the label stands above the field, so there is no\n  // strip to keep scrolled text out of, and a layer here would hide the first line.\n  \"not-large:peer-focus:block not-large:peer-[:not(:placeholder-shown)]:block\",\n  \"peer-disabled:bg-surface-2 peer-[[readonly]]:bg-surface-2\",\n  TEXTAREA_LABEL_EDGE,\n);\n\n/**\n * {@link TEXTAREA_LABEL_STRIP}, stopped short of a classic scrollbar.\n *\n * A Windows / Linux desktop draws a textarea's vertical scrollbar INSIDE the border, in\n * a gutter it takes from the content box (15px in Chromium); a strip across the full\n * inner width would sit on top of the scrollbar's up arrow. So the gutter is measured —\n * border box less client width less the borders — and the strip ends where it begins.\n * On whichever side it is: `clientLeft` includes a gutter on the LEFT, which is where\n * Chromium and Firefox put it in a right-to-left field. The side is applied as an\n * inline-start / inline-end inset, so when `dir` flips afterwards and the scrollbar\n * follows it to the other edge, the strip does too without a re-measure. That corner\n * also loses its rounding, since it no longer meets the border.\n *\n * Overlay scrollbars (macOS, phones) take no gutter: the measurement is zero and the\n * strip spans the field. A ResizeObserver on the textarea re-measures when the\n * scrollbar comes or goes (it takes the content box with it) and when the field is\n * resized by hand. Not laid out — hidden in a closed panel, or jsdom — the CSS insets\n * stand until it is.\n *\n * It also writes the strip's lower edge (0.25, {@link TEXTAREA_LABEL_EDGE}) from the\n * textarea's scroll position: a passive `scroll` listener, plus the same observer, since\n * a resize can move the scroll without the user scrolling.\n */\nfunction TextareaLabelStrip() {\n  const ref = useRef<HTMLSpanElement>(null);\n  useLayoutEffect(() => {\n    const strip = ref.current;\n    const field = strip?.previousElementSibling;\n    if (!strip || !(field instanceof HTMLTextAreaElement)) return;\n    const fit = () => {\n      if (field.offsetWidth === 0) return;\n      const style = getComputedStyle(field);\n      const borderLeft = parseFloat(style.borderLeftWidth) || 0;\n      const borderRight = parseFloat(style.borderRightWidth) || 0;\n      const gutter = field.offsetWidth - field.clientWidth - borderLeft - borderRight;\n      // offsetWidth and clientWidth are whole pixels, so a field with no scrollbar can\n      // read ±1 here; no scrollbar is that thin.\n      const bar = gutter > 1.5;\n      const onLeft = field.clientLeft - borderLeft > 1.5;\n      // Kept as a LOGICAL side: a `dir` flipped later (a language switch) moves the\n      // scrollbar across without resizing anything, so nothing would re-measure —\n      // but it stays at the inline end, and so does an inline-end inset.\n      const rtl = style.direction === \"rtl\";\n      const atEnd = onLeft === rtl;\n      const border = (end: boolean) => (end === rtl ? borderLeft : borderRight);\n      strip.style.insetInlineEnd = bar && atEnd ? `${border(true) + gutter}px` : \"\";\n      strip.style.insetInlineStart = bar && !atEnd ? `${border(false) + gutter}px` : \"\";\n      strip.style.borderStartEndRadius = bar && atEnd ? \"0\" : \"\";\n      strip.style.borderStartStartRadius = bar && !atEnd ? \"0\" : \"\";\n    };\n    // The edge under the strip follows the scroll — see TEXTAREA_LABEL_EDGE. The line\n    // height is read each time, since a caller's class can change the type. Nothing to\n    // draw is no property at all (the CSS default is a 0px edge), so a field at rest\n    // carries exactly the strip it did in 0.24.\n    const follow = () => {\n      const edge = labelEdge(field.scrollTop, parseFloat(getComputedStyle(field).lineHeight));\n      if (edge.height > 0) {\n        strip.style.setProperty(\"--label-strip-edge\", `${edge.height}px`);\n        strip.style.setProperty(\"--label-strip-edge-solid\", `${edge.solid}px`);\n      } else {\n        strip.style.removeProperty(\"--label-strip-edge\");\n        strip.style.removeProperty(\"--label-strip-edge-solid\");\n      }\n    };\n    fit();\n    follow();\n    field.addEventListener(\"scroll\", follow, { passive: true });\n    if (typeof ResizeObserver === \"undefined\") return () => field.removeEventListener(\"scroll\", follow);\n    // A resize can move the scroll too (a taller field clamps it).\n    const observer = new ResizeObserver(() => {\n      fit();\n      follow();\n    });\n    observer.observe(field);\n    return () => {\n      field.removeEventListener(\"scroll\", follow);\n      observer.disconnect();\n    };\n  }, []);\n  return <span ref={ref} aria-hidden data-slot=\"label-strip\" className={TEXTAREA_LABEL_STRIP} />;\n}\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: ReactNode;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`. */\n  error?: ReactNode;\n  /** See {@link Input}'s `hint` (keksdose K4): text is a caption under the field, a\n   *  {@link FieldHint} rides the label line (or, unlabelled, the end edge). */\n  hint?: ReactNode;\n  /** See {@link Input}'s `showCount` (keksdose K11): a live \"12/80\" under the field,\n   *  with `maxLength`, announced only near and at the limit. */\n  showCount?: boolean;\n  /** The counter's words. See {@link CharacterCountLabels}. */\n  countLabels?: Partial<CharacterCountLabels>;\n  /** The `<textarea>`. A React 19 ref prop since 0.34 — see {@link InputProps.ref}. */\n  ref?: Ref<HTMLTextAreaElement>;\n}\n\nexport function Textarea(props: TextareaProps) {\n  const { ref, className, label, id, placeholder, invalid, error, hint, showCount, countLabels, ...rest } = props;\n  // See Input's `reserve`.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const countId = useId();\n  const hintParts = useFieldHint(hint, rest[\"aria-describedby\"]);\n  const maxLength = rest.maxLength;\n  const counting = Boolean(showCount) && typeof maxLength === \"number\" && maxLength > 0;\n  const length = useTypedLength(rest.value, rest.defaultValue);\n  const countText = useCharacterCountLabels(countLabels);\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    mergeDescribedBy(hintParts.describedBy, counting && countId),\n    rest[\"aria-invalid\"],\n  );\n  const counter = counting ? (\n    <CharacterCount\n      id={countId}\n      used={length.used}\n      max={maxLength}\n      labels={countText}\n      caption={<FieldCaption parts={hintParts} className=\"mt-0\" />}\n    />\n  ) : null;\n  const below = fieldBelow(hintParts, counter, errorEl);\n  const onChange = counting\n    ? (e: ChangeEvent<HTMLTextAreaElement>) => {\n        length.track(e.target.value);\n        rest.onChange?.(e);\n      }\n    : rest.onChange;\n  if (label === undefined) {\n    const endHint = hintParts.labelHint;\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        <EndHintRow hint={endHint} className={className}>\n          <textarea\n            ref={ref}\n            id={id}\n            placeholder={placeholder}\n            {...rest}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            onChange={onChange}\n            className={cn(FIELD_BASE, endHint === undefined && className, isInvalid && FIELD_INVALID)}\n          />\n        </EndHintRow>\n      </FieldGroup>\n    );\n  }\n  const ownPlaceholder = hasPlaceholderText(placeholder);\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      <FloatingField className={className} htmlFor={fieldId} label={label} hint={hintParts.labelHint}>\n        <textarea\n          ref={ref}\n          id={fieldId}\n          // The float trick's single space, unless the caller has a placeholder of its\n          // own — then that, shown on focus once the label is out of its way (kastlan\n          // 8, see FLOATING_PLACEHOLDER_ON_FOCUS).\n          placeholder={ownPlaceholder ? placeholder : \" \"}\n          {...rest}\n          aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={describedBy}\n          onChange={onChange}\n          className={cn(\n            FLOATING_INPUT_CLASS,\n            ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS,\n            isInvalid && FIELD_INVALID,\n          )}\n        />\n        {/* Between the textarea and the label, on purpose: after the textarea so it\n            is its `peer` and paints over its text, before the label so the label\n            paints over it. See TEXTAREA_LABEL_STRIP. */}\n        <TextareaLabelStrip />\n      </FloatingField>\n    </FieldGroup>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef } from \"react\";\nimport type { ChangeEvent, ReactNode, Ref, TextareaHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  mergeDescribedBy,\n  useFieldError,\n  useFieldHint,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport {\n  CharacterCount,\n  FIELD_BASE,\n  FIELD_INVALID,\n  FieldGroup,\n  FloatingField,\n  FLOATING_INPUT_CLASS,\n  FLOATING_PLACEHOLDER_ON_FOCUS,\n  fieldBelow,\n  hasPlaceholderText,\n  useCharacterCountLabels,\n  useTypedLength,\n  type CharacterCountLabels,\n} from \"./field-base\";\n\n/**\n * The lower edge of {@link TEXTAREA_LABEL_STRIP} (0.25, Kurvenschmiede).\n *\n * The 0.24 strip ends on a hard line, and a line of text scrolled most of the way under\n * it left its lower edge showing below that line: in a pasted table, a row of comma\n * tails between the strip and the first whole line (`0,5;1,9` cut above its baseline is\n * `, ,`). This layer, hung under the strip, closes that gap. What it draws depends on\n * how much of the line on its way out is still below the strip ({@link labelEdge}):\n *\n * - **Half a line or less** — its descenders, the feet of its letters: covered, solid,\n *   down to exactly where that line's box ends. The strip's bottom snaps to the line\n *   box, so the row of tails is gone and the next line, which starts there, is not\n *   touched.\n * - **More than half** — a line you can still read: a soft edge, the strip's surface\n *   fading into it over {@link LABEL_EDGE_SOFT_PX}, where 0.24 cut it hard. Never taller\n *   than the part of that line already gone, so it grows from nothing as a line starts\n *   to move and never reaches the next one.\n * - **Nothing to cover** — at rest, or a line boundary right on the strip's edge:\n *   nothing drawn. An unscrolled first line is never covered (at rest the strip covers\n *   the top padding and nothing else, as in 0.24), and neither is any whole line.\n *\n * Why not one of the two alone. A plain fade under the strip, as tall as the tails,\n * dims the top of the first WHOLE line whenever it sits right under the strip (its\n * capitals start about 4px into a 20px line), and only half-hides the tails, which sit\n * in its fading part. A plain snap to the line box would hide a whole line the moment\n * one starts to scroll. The half-line threshold keeps what is shown legible: a line is\n * either hidden or shown with most of its letters, never as a row of stray marks.\n *\n * Its height and solid part are `--label-strip-edge` / `--label-strip-edge-solid`,\n * written by {@link TextareaLabelStrip} from the textarea's `scrollTop` and line height\n * on every scroll; unset (no layout, no script yet) the height is 0 and nothing shows.\n * A pseudo-element of the strip, so it inherits everything the strip already gets\n * right: shown only while the label is floated, the same horizontal insets (stopped\n * short of a classic scrollbar, on either side — RTL included), painted under the\n * label. Its colour is INHERITED from the strip (`bg-inherit`): `--bg-surface`, and the\n * disabled / `[readonly]` `--bg-surface-2`, in both themes, with no second copy of\n * those selectors to keep in step. The soft part is a mask over that colour (alpha\n * only — the `#000` is the mask's opacity, not a colour on screen).\n */\nconst TEXTAREA_LABEL_EDGE = cn(\n  \"after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--label-strip-edge,0px)] after:content-['']\",\n  \"after:bg-inherit after:[mask-image:linear-gradient(#000_var(--label-strip-edge-solid,0px),transparent)]\",\n);\n\n/** The soft edge over a line still more than half in view, in px: \"a few pixels\" —\n *  enough to take the cut off its letters, little enough to leave them legible. */\nconst LABEL_EDGE_SOFT_PX = 3;\n\n/**\n * {@link TEXTAREA_LABEL_EDGE}'s height and solid part, in px, for a field scrolled\n * `scrollTop` with lines `lineHeight` tall.\n *\n * The strip covers the top padding exactly, so line boxes meet its lower edge whenever\n * `scrollTop` is a whole number of lines; `gone` is how far the line now on its way out\n * has passed under it, `left` how much of it is still below. A line height that is not\n * a length (`normal`) gives no line boxes to snap to: only the soft edge then.\n */\nfunction labelEdge(scrollTop: number, lineHeight: number): { height: number; solid: number } {\n  if (!(scrollTop > 0)) return { height: 0, solid: 0 };\n  if (!(lineHeight > 0)) return { height: Math.min(scrollTop, LABEL_EDGE_SOFT_PX), solid: 0 };\n  const gone = scrollTop % lineHeight;\n  const left = gone === 0 ? 0 : lineHeight - gone;\n  if (left > 0 && left <= lineHeight / 2) return { height: left, solid: left };\n  return { height: Math.min(gone, LABEL_EDGE_SOFT_PX), solid: 0 };\n}\n\n/**\n * The backdrop of a labelled {@link Textarea}'s label strip (Kurvenschmiede, 0.24).\n *\n * The report: paste a long table into ColumnMapper, the field scrolls, and the floated\n * \"Paste a table\" / \"Tabelle einfügen\" sits ON the first visible line of text — on\n * desktop and on a phone. Not a ColumnMapper bug: every labelled textarea that scrolls\n * did it. An `<input>` has one line that never moves, so the strip FIELD_FLOATING_PAD\n * leaves for the label is always empty there; a textarea's top padding is part of its\n * SCROLLING area, and once the content scrolls the lines travel up through the strip\n * and under the label.\n *\n * The fix makes that padding stay put: this layer is a later sibling of the textarea\n * (so `peer-*` reaches it, and as a positioned box it paints above the textarea's\n * text), the label paints above it in turn, and it covers exactly the top padding —\n * `top-px` / `inset-x-px` inside the 1px border, `h-4` = `pt-4`. At rest it covers\n * padding and nothing else, so no pixel of an unscrolled line is ever hidden; scrolled\n * text slides out of sight under it instead of through the label.\n *\n * Why a layer and not \"start the scrolling area below the strip\" (a wrapper that draws\n * the border and background, the textarea transparent inside it): the box would stop\n * being the textarea. Its focus outline, its brand border on focus, the invalid ring,\n * the disabled and read-only greys and every caller's `[&_textarea]:…` would all have\n * to be rebuilt on the wrapper with `focus-within:` / `has-[…]:`, and a caller's\n * `style={{ height }}` would size the scroller rather than the field. The layer leaves\n * all of that exactly where it was.\n *\n * What it has to match, it matches from the same tokens the field uses: the surface is\n * FIELD_BASE's `--bg-surface`, and `--bg-surface-2` for `disabled` and `[readonly]` —\n * on the same ATTRIBUTE selector FIELD_BASE uses, for the reason given there. Focus and\n * `invalid` change only the border and the ring, which are outside the layer, so they\n * need nothing. Both themes come with the variables. The inner corners are the field's\n * radius (`rounded-md`, 0.375rem) less the 1px border, so the rounded border is never\n * cut into — `calc(0.375rem - 1px)` rather than `var(--radius-md)`, which Tailwind emits\n * only where a utility uses it and the kit's token check refuses (token-vars-declared).\n * Since 0.32 in rem (§3.2): the field's own corner grows with the text, so a fixed 5px\n * left the strip's corner square of the border's at 125 %.\n *\n * Hidden (`display: none`) until the label floats: an empty, unfocused field has\n * nothing that could scroll, and it renders exactly as it did before 0.24. Pointer\n * events pass through, so a click on the strip still lands in the field.\n *\n * The one thing CSS cannot know is a classic scrollbar's width, and a strip across the\n * whole inner width would hide the scrollbar's top arrow — see {@link TextareaLabelStrip}.\n *\n * Its lower edge, where a line scrolled half under it used to leave its tails showing,\n * is {@link TEXTAREA_LABEL_EDGE} (0.25).\n */\nconst TEXTAREA_LABEL_STRIP = cn(\n  \"pointer-events-none absolute inset-x-px top-px hidden h-4 rounded-t-[calc(0.375rem-1px)] bg-surface\",\n  // Never at Large (0.33, §10.17): the label stands above the field, so there is no\n  // strip to keep scrolled text out of, and a layer here would hide the first line.\n  \"not-large:peer-focus:block not-large:peer-[:not(:placeholder-shown)]:block\",\n  \"peer-disabled:bg-surface-2 peer-[[readonly]]:bg-surface-2\",\n  TEXTAREA_LABEL_EDGE,\n);\n\n/**\n * {@link TEXTAREA_LABEL_STRIP}, stopped short of a classic scrollbar.\n *\n * A Windows / Linux desktop draws a textarea's vertical scrollbar INSIDE the border, in\n * a gutter it takes from the content box (15px in Chromium); a strip across the full\n * inner width would sit on top of the scrollbar's up arrow. So the gutter is measured —\n * border box less client width less the borders — and the strip ends where it begins.\n * On whichever side it is: `clientLeft` includes a gutter on the LEFT, which is where\n * Chromium and Firefox put it in a right-to-left field. The side is applied as an\n * inline-start / inline-end inset, so when `dir` flips afterwards and the scrollbar\n * follows it to the other edge, the strip does too without a re-measure. That corner\n * also loses its rounding, since it no longer meets the border.\n *\n * Overlay scrollbars (macOS, phones) take no gutter: the measurement is zero and the\n * strip spans the field. A ResizeObserver on the textarea re-measures when the\n * scrollbar comes or goes (it takes the content box with it) and when the field is\n * resized by hand. Not laid out — hidden in a closed panel, or jsdom — the CSS insets\n * stand until it is.\n *\n * It also writes the strip's lower edge (0.25, {@link TEXTAREA_LABEL_EDGE}) from the\n * textarea's scroll position: a passive `scroll` listener, plus the same observer, since\n * a resize can move the scroll without the user scrolling.\n */\nfunction TextareaLabelStrip() {\n  const ref = useRef<HTMLSpanElement>(null);\n  useLayoutEffect(() => {\n    const strip = ref.current;\n    const field = strip?.previousElementSibling;\n    if (!strip || !(field instanceof HTMLTextAreaElement)) return;\n    const fit = () => {\n      if (field.offsetWidth === 0) return;\n      const style = getComputedStyle(field);\n      const borderLeft = parseFloat(style.borderLeftWidth) || 0;\n      const borderRight = parseFloat(style.borderRightWidth) || 0;\n      const gutter = field.offsetWidth - field.clientWidth - borderLeft - borderRight;\n      // offsetWidth and clientWidth are whole pixels, so a field with no scrollbar can\n      // read ±1 here; no scrollbar is that thin.\n      const bar = gutter > 1.5;\n      const onLeft = field.clientLeft - borderLeft > 1.5;\n      // Kept as a LOGICAL side: a `dir` flipped later (a language switch) moves the\n      // scrollbar across without resizing anything, so nothing would re-measure —\n      // but it stays at the inline end, and so does an inline-end inset.\n      const rtl = style.direction === \"rtl\";\n      const atEnd = onLeft === rtl;\n      const border = (end: boolean) => (end === rtl ? borderLeft : borderRight);\n      strip.style.insetInlineEnd = bar && atEnd ? `${border(true) + gutter}px` : \"\";\n      strip.style.insetInlineStart = bar && !atEnd ? `${border(false) + gutter}px` : \"\";\n      strip.style.borderStartEndRadius = bar && atEnd ? \"0\" : \"\";\n      strip.style.borderStartStartRadius = bar && !atEnd ? \"0\" : \"\";\n    };\n    // The edge under the strip follows the scroll — see TEXTAREA_LABEL_EDGE. The line\n    // height is read each time, since a caller's class can change the type. Nothing to\n    // draw is no property at all (the CSS default is a 0px edge), so a field at rest\n    // carries exactly the strip it did in 0.24.\n    const follow = () => {\n      const edge = labelEdge(field.scrollTop, parseFloat(getComputedStyle(field).lineHeight));\n      if (edge.height > 0) {\n        strip.style.setProperty(\"--label-strip-edge\", `${edge.height}px`);\n        strip.style.setProperty(\"--label-strip-edge-solid\", `${edge.solid}px`);\n      } else {\n        strip.style.removeProperty(\"--label-strip-edge\");\n        strip.style.removeProperty(\"--label-strip-edge-solid\");\n      }\n    };\n    fit();\n    follow();\n    field.addEventListener(\"scroll\", follow, { passive: true });\n    if (typeof ResizeObserver === \"undefined\") return () => field.removeEventListener(\"scroll\", follow);\n    // A resize can move the scroll too (a taller field clamps it).\n    const observer = new ResizeObserver(() => {\n      fit();\n      follow();\n    });\n    observer.observe(field);\n    return () => {\n      field.removeEventListener(\"scroll\", follow);\n      observer.disconnect();\n    };\n  }, []);\n  return <span ref={ref} aria-hidden data-slot=\"label-strip\" className={TEXTAREA_LABEL_STRIP} />;\n}\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldHelpProps {\n  label?: ReactNode;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`. */\n  error?: ReactNode;\n  /** See {@link Input}'s `hint` (keksdose K4): text is a caption under the field, a\n   *  {@link FieldHint} rides the label line (or, unlabelled, the end edge). */\n  hint?: ReactNode;\n  /** See {@link Input}'s `showCount` (keksdose K11): a live \"12/80\" under the field,\n   *  with `maxLength`, announced only near and at the limit. */\n  showCount?: boolean;\n  /** The counter's words. See {@link CharacterCountLabels}. */\n  countLabels?: Partial<CharacterCountLabels>;\n  /** The `<textarea>`. A React 19 ref prop since 0.34 — see {@link InputProps.ref}. */\n  ref?: Ref<HTMLTextAreaElement>;\n}\n\nexport function Textarea(props: TextareaProps) {\n  const { ref, className, label, id, placeholder, invalid, error, hint, help, showCount, countLabels, ...rest } = props;\n  // See Input's `reserve`.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const countId = useId();\n  const hintParts = useFieldHint(hint, rest[\"aria-describedby\"], { help, name: label ?? rest[\"aria-label\"] });\n  const maxLength = rest.maxLength;\n  const counting = Boolean(showCount) && typeof maxLength === \"number\" && maxLength > 0;\n  const length = useTypedLength(rest.value, rest.defaultValue);\n  const countText = useCharacterCountLabels(countLabels);\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    mergeDescribedBy(hintParts.describedBy, counting && countId),\n    rest[\"aria-invalid\"],\n  );\n  const counter = counting ? (\n    <CharacterCount\n      id={countId}\n      used={length.used}\n      max={maxLength}\n      labels={countText}\n      caption={<FieldCaption parts={hintParts} className=\"mt-0\" />}\n    />\n  ) : null;\n  const below = fieldBelow(hintParts, counter, errorEl);\n  const onChange = counting\n    ? (e: ChangeEvent<HTMLTextAreaElement>) => {\n        length.track(e.target.value);\n        rest.onChange?.(e);\n      }\n    : rest.onChange;\n  if (label === undefined) {\n    const endHint = hintParts.labelHint;\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        <EndHintRow hint={endHint} className={className}>\n          <textarea\n            ref={ref}\n            id={id}\n            placeholder={placeholder}\n            {...rest}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            onChange={onChange}\n            className={cn(FIELD_BASE, endHint === undefined && className, isInvalid && FIELD_INVALID)}\n          />\n        </EndHintRow>\n      </FieldGroup>\n    );\n  }\n  const ownPlaceholder = hasPlaceholderText(placeholder);\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      <FloatingField className={className} htmlFor={fieldId} label={label} hint={hintParts.labelHint}>\n        <textarea\n          ref={ref}\n          id={fieldId}\n          // The float trick's single space, unless the caller has a placeholder of its\n          // own — then that, shown on focus once the label is out of its way (kastlan\n          // 8, see FLOATING_PLACEHOLDER_ON_FOCUS).\n          placeholder={ownPlaceholder ? placeholder : \" \"}\n          {...rest}\n          aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={describedBy}\n          onChange={onChange}\n          className={cn(\n            FLOATING_INPUT_CLASS,\n            ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS,\n            isInvalid && FIELD_INVALID,\n          )}\n        />\n        {/* Between the textarea and the label, on purpose: after the textarea so it\n            is its `peer` and paints over its text, before the label so the label\n            paints over it. See TEXTAREA_LABEL_STRIP. */}\n        <TextareaLabelStrip />\n      </FloatingField>\n    </FieldGroup>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/toggle-group.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode, Ref } from "react";
 import { type CommitScope } from "./write-lock.js";
-import { type DisabledReasonDisplay } from "./field-parts.js";
+import { type DisabledReasonDisplay, type FieldHelpProps } from "./field-parts.js";
 export interface ToggleOption<T extends string> {
     value: T;
     label: string;
@@ -15,7 +15,7 @@ export interface ToggleOption<T extends string> {
  * accepted and the component ignored would be a prop that silently does nothing —
  * worse than one that does not compile.
  */
-export interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
+export interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children">, FieldHelpProps {
     options: ToggleOption<T>[];
     className?: string;
     /** Applied to every option button (e.g. to tune height/rounding to match

package/dist/components/toggle-group.js

@@ -12,6 +12,7 @@ import {
   DISABLED_REASON_LINE_CLASS,
   FIELD_CAPTION_CLASS,
   FIELD_ERROR_CLASS,
+  fieldHelpMark,
   isTextHint,
   LabelStrip,
   useDisabledReasonLine,
@@ -42,6 +43,7 @@ function ToggleGroup(props) {
     labelPlacement = "field",
     chromeClassName,
     hint,
+    help,
     error,
     disabledReason: ownDisabledReason,
     disabledReasonDisplay,
@@ -64,9 +66,11 @@ function ToggleGroup(props) {
   const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
   const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;
-  const inlineHint = useInlineHint(hint);
-  const hintAsCaption = isTextHint(hint) ? hint : inlineHint !== hint ? inlineHint : void 0;
-  const labelHint = hintAsCaption === void 0 ? hint : void 0;
+  const helpMark = fieldHelpMark(hasContent(label) ? help : void 0, label);
+  const withHelp = helpMark !== void 0;
+  const inlineHint = useInlineHint(hint, withHelp);
+  const hintAsCaption = withHelp ? hasContent(inlineHint) ? inlineHint : void 0 : isTextHint(hint) ? hint : inlineHint !== hint ? inlineHint : void 0;
+  const labelHint = helpMark ?? (hintAsCaption === void 0 ? hint : void 0);
   const dimmed = disabled || locked;
   const labelled = hasContent(label);
   const field = labelled && labelPlacement === "field";