@eifi1/ui-kit 0.33.0 → 0.34.0

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-[var(--brand)] hover:text-[var(--brand-hover)]\",\n  muted: \"text-[var(--text-muted)] hover:text-[var(--text-primary)]\",\n  danger: \"text-[var(--danger)] hover:text-[var(--danger-hover)]\",\n  inherit: \"\",\n  primary: \"text-[var(--text-primary)] hover:decoration-2\",\n  secondary: \"text-[var(--text-secondary)] hover:text-[var(--text-primary)]\",\n  warning: \"text-[var(--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-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--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  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":[]}

package/dist/components/text.d.ts

@@ -1,6 +1,4 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 /**
  * `xs` is 10px — the size `LegendGroup`'s title and the top-bar menus' heading row draw;
  * `sm` (default) is 12px — the size `StatTile`'s label and lenkbank's section headings
@@ -23,7 +21,7 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
  * control (legend, menu), `md` over a figure or a plot, `sm` over a block of page
  * content.
  */
-type SectionLabelSize = "xs" | "md" | "sm";
+export type SectionLabelSize = "xs" | "md" | "sm";
 /**
  * The small, uppercase, tracked, muted label — as a class string, per size.
  *
@@ -37,7 +35,7 @@ type SectionLabelSize = "xs" | "md" | "sm";
  * `text-caption` 0.6875rem — 10 and 11 px at Normal), so a label grows with the text
  * size like everything around it (docs/text-size-harmonization.md §3.2).
  */
-declare const SECTION_LABEL_CLASS: Record<SectionLabelSize, string>;
+export declare const SECTION_LABEL_CLASS: Record<SectionLabelSize, string>;
 /**
  * `plain` (default): the label alone, as above.
  *
@@ -50,9 +48,9 @@ declare const SECTION_LABEL_CLASS: Record<SectionLabelSize, string>;
  * `ListItem density="comfortable"` row below it; override it with `className` for a
  * list at another density. A sticky header is the caller's: add `sticky top-0`.
  */
-type SectionLabelVariant = "plain" | "band";
+export type SectionLabelVariant = "plain" | "band";
 type SectionLabelElement = "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "legend";
-interface SectionLabelProps extends ComponentPropsWithoutRef<"h3"> {
+export interface SectionLabelProps extends ComponentPropsWithoutRef<"h3"> {
     /**
      * The element — which is the heading LEVEL, and so is the caller's to pick: the kit
      * cannot know where in the outline the label sits. Default `h3`, which is what
@@ -65,6 +63,8 @@ interface SectionLabelProps extends ComponentPropsWithoutRef<"h3"> {
      *  header. See {@link SectionLabelVariant}. */
     variant?: SectionLabelVariant;
     children: ReactNode;
+    /** The element `as` names — hence `HTMLElement` (0.34, API-2, refactor audit 2026-10). */
+    ref?: Ref<HTMLElement>;
 }
 /**
  * A section's small uppercase label. lenkbank spells
@@ -73,7 +73,7 @@ interface SectionLabelProps extends ComponentPropsWithoutRef<"h3"> {
  * 10px version on a menu row. One component, the token colour, and the level chosen
  * where the outline is known.
  */
-declare function SectionLabel({ as, size, variant, className, children, ...rest }: SectionLabelProps): react.JSX.Element;
+export declare function SectionLabel({ as, size, variant, className, children, ...rest }: SectionLabelProps): import("react").JSX.Element;
 /**
  * The caption type as a class string: `text-caption` (0.6875rem, 11 px at Normal, §3.2),
  * snug, muted. lenkbank's `CAPTION`
@@ -83,17 +83,18 @@ declare function SectionLabel({ as, size, variant, className, children, ...rest
  * differently (`mt-1`, `self-end pb-2`, `border-t`), and what must be one thing is the
  * type, not the box.
  */
-declare const CAPTION_CLASS = "text-caption leading-snug text-[var(--text-muted)]";
-interface CaptionProps extends ComponentPropsWithoutRef<"p"> {
+export declare const CAPTION_CLASS = "text-caption leading-snug text-muted";
+export interface CaptionProps extends ComponentPropsWithoutRef<"p"> {
     /** Default `p`; `span` for a caption inside a line of other content. */
     as?: "p" | "span" | "div";
     children: ReactNode;
+    /** The element `as` names — hence `HTMLElement` (0.34, API-2, refactor audit 2026-10). */
+    ref?: Ref<HTMLElement>;
 }
 /**
  * The small grey sentence under a field, a table or a button — prose ABOUT the thing
  * above it. Not `FieldHint`, which hides behind a field label's "?" so a paragraph does
  * not make one field taller than its neighbour (lenkbank feedback #27).
  */
-declare function Caption({ as, className, children, ...rest }: CaptionProps): react.JSX.Element;
-
-export { CAPTION_CLASS, Caption, type CaptionProps, SECTION_LABEL_CLASS, SectionLabel, type SectionLabelProps, type SectionLabelSize, type SectionLabelVariant };
+export declare function Caption({ as, className, children, ...rest }: CaptionProps): import("react").JSX.Element;
+export {};

package/dist/components/text.js

@@ -2,16 +2,16 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 const SECTION_LABEL_CLASS = {
-  xs: "text-micro font-semibold uppercase tracking-wide text-[var(--text-muted)]",
-  md: "text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]",
-  sm: "text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]"
+  xs: "text-micro font-semibold uppercase tracking-wide text-muted",
+  md: "text-caption font-semibold uppercase tracking-wide text-muted",
+  sm: "text-xs font-semibold uppercase tracking-wide text-muted"
 };
 const SECTION_LABEL_BAND_CLASS = {
   xs: "text-micro",
   md: "text-caption",
   sm: "text-xs"
 };
-const BAND = "block border-b border-[var(--border)] bg-[var(--bg-surface-2)] px-4 py-2 font-medium uppercase tracking-wide text-[var(--text-secondary)]";
+const BAND = "block border-b border-subtle bg-surface-2 px-4 py-2 font-medium uppercase tracking-wide text-secondary";
 function SectionLabel({
   as = "h3",
   size = "sm",
@@ -24,7 +24,7 @@ function SectionLabel({
   const type = variant === "band" ? cn(SECTION_LABEL_BAND_CLASS[size], BAND) : SECTION_LABEL_CLASS[size];
   return /* @__PURE__ */ jsx(Tag, { ...rest, className: cn(type, className), children });
 }
-const CAPTION_CLASS = "text-caption leading-snug text-[var(--text-muted)]";
+const CAPTION_CLASS = "text-caption leading-snug text-muted";
 function Caption({ as = "p", className, children, ...rest }) {
   const Tag = as;
   return /* @__PURE__ */ jsx(Tag, { ...rest, className: cn(CAPTION_CLASS, className), children });

package/dist/components/text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/* ── SectionLabel ─────────────────────────────────────────────────────────── */\n\n/**\n * `xs` is 10px — the size `LegendGroup`'s title and the top-bar menus' heading row draw;\n * `sm` (default) is 12px — the size `StatTile`'s label and lenkbank's section headings\n * (control-page.tsx:119/123/127) draw. Two sizes because the label sits either inside a\n * dense panel (a legend, a menu) or above a block of page content, and one size looked\n * wrong in the other place.\n *\n * `md` (0.11.0) is 11px, the rung between them: keksdose's budget-summary card labels\n * its figures (\"Assigned\", \"Activity\", \"Upcoming\", \"Available\" —\n * budget-summary-card:258/264/286/297) and its support thread its day divider and a message's meta line\n * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a\n * figure that size, 12px competed with it. Named `md` rather than slotted in order\n * because `sm` was already the default and renaming it would move every caller.\n *\n * `md` is also the heading over a CHART COLUMN (lenkbank P9): the small label centred\n * over each of a pair of facing charts, or over each column of a small-multiples grid.\n * There the label names a plot, not a section of the page, so `sm` (12px, the page's\n * section heading) out-ranks the card title above it, and `xs` (10px, a legend's\n * title) sinks below the axis ticks it sits beside. Rule of thumb: `xs` inside a\n * control (legend, menu), `md` over a figure or a plot, `sm` over a block of page\n * content.\n */\nexport type SectionLabelSize = \"xs\" | \"md\" | \"sm\";\n\n/**\n * The small, uppercase, tracked, muted label — as a class string, per size.\n *\n * Exported because `LegendGroup` and `StatTile` already draw it inline, and a class a\n * caller has to position itself (a `<th>`, a `<legend>`, a menu `<li>`) is better\n * reached as a string than wrapped in a component that only takes a `className`. The\n * uppercase is CSS, so a screen reader reads the text as written: write it in normal\n * case.\n *\n * The sizes are the kit's named rem steps since 0.32 (`text-micro` 0.625rem,\n * `text-caption` 0.6875rem — 10 and 11 px at Normal), so a label grows with the text\n * size like everything around it (docs/text-size-harmonization.md §3.2).\n */\nexport const SECTION_LABEL_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-micro font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  md: \"text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  sm: \"text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n};\n\n/**\n * `plain` (default): the label alone, as above.\n *\n * `band` (0.13, keksdose F5): the label on a full-width `surface-2` bar with a bottom\n * border — the day-group header of keksdose's mobile transaction list\n * (mobile-transaction-list.tsx:171), which separates one day's rows from the next.\n * Its type is kept as keksdose drew it — `font-medium` in the SECONDARY text colour,\n * not the plain label's semibold muted — so adopting the kit does not restyle a live\n * list: the bar already sets the label apart, and needs no extra weight. The padding (`px-4 py-2`) lines the text up with a\n * `ListItem density=\"comfortable\"` row below it; override it with `className` for a\n * list at another density. A sticky header is the caller's: add `sticky top-0`.\n */\nexport type SectionLabelVariant = \"plain\" | \"band\";\n\n/** The band's own type and box, per size — spelled out rather than merged over\n *  {@link SECTION_LABEL_CLASS}, so the result does not hang on tailwind-merge telling\n *  a font-size arbitrary `text-` value from a colour one. (Not spelt out as class\n *  names here: Tailwind scans comments, and a literal one broke the showcase CSS.) */\nconst SECTION_LABEL_BAND_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-micro\",\n  md: \"text-caption\",\n  sm: \"text-xs\",\n};\nconst BAND =\n  \"block border-b border-[var(--border)] bg-[var(--bg-surface-2)] px-4 py-2 font-medium uppercase tracking-wide text-[var(--text-secondary)]\";\n\ntype SectionLabelElement = \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"div\" | \"legend\";\n\nexport interface SectionLabelProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * The element — which is the heading LEVEL, and so is the caller's to pick: the kit\n   * cannot know where in the outline the label sits. Default `h3`, which is what\n   * lenkbank's control page writes under its `h2` card title. Pass `span` or `p` for a\n   * label that is not a heading at all (a legend group's title).\n   */\n  as?: SectionLabelElement;\n  size?: SectionLabelSize;\n  /** `band` draws the label on a `surface-2` bar with a bottom border — a list's group\n   *  header. See {@link SectionLabelVariant}. */\n  variant?: SectionLabelVariant;\n  children: ReactNode;\n}\n\n/**\n * A section's small uppercase label. lenkbank spells\n * `text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400`\n * on every `<h3>` of its control page and more; keksdose's budget switcher writes the\n * 10px version on a menu row. One component, the token colour, and the level chosen\n * where the outline is known.\n */\nexport function SectionLabel({\n  as = \"h3\",\n  size = \"sm\",\n  variant = \"plain\",\n  className,\n  children,\n  ...rest\n}: SectionLabelProps) {\n  const Tag = as as ElementType;\n  const type = variant === \"band\" ? cn(SECTION_LABEL_BAND_CLASS[size], BAND) : SECTION_LABEL_CLASS[size];\n  return (\n    <Tag {...rest} className={cn(type, className)}>\n      {children}\n    </Tag>\n  );\n}\n\n/* ── Caption ──────────────────────────────────────────────────────────────── */\n\n/**\n * The caption type as a class string: `text-caption` (0.6875rem, 11 px at Normal, §3.2),\n * snug, muted. lenkbank's `CAPTION`\n * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a\n * token colour rather than `slate-500 dark:slate-400`, so it follows the palette.\n * Exported for the same reason lenkbank's is a string: every caller positions it\n * differently (`mt-1`, `self-end pb-2`, `border-t`), and what must be one thing is the\n * type, not the box.\n */\nexport const CAPTION_CLASS = \"text-caption leading-snug text-[var(--text-muted)]\";\n\nexport interface CaptionProps extends ComponentPropsWithoutRef<\"p\"> {\n  /** Default `p`; `span` for a caption inside a line of other content. */\n  as?: \"p\" | \"span\" | \"div\";\n  children: ReactNode;\n}\n\n/**\n * The small grey sentence under a field, a table or a button — prose ABOUT the thing\n * above it. Not `FieldHint`, which hides behind a field label's \"?\" so a paragraph does\n * not make one field taller than its neighbour (lenkbank feedback #27).\n */\nexport function Caption({ as = \"p\", className, children, ...rest }: CaptionProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(CAPTION_CLASS, className)}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";AA6GI;AA5GJ,SAAS,UAAU;AAyCZ,MAAM,sBAAwD;AAAA,EACnE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAoBA,MAAM,2BAA6D;AAAA,EACjE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,OACJ;AA0BK,SAAS,aAAa;AAAA,EAC3B,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,MAAM;AACZ,QAAM,OAAO,YAAY,SAAS,GAAG,yBAAyB,IAAI,GAAG,IAAI,IAAI,oBAAoB,IAAI;AACrG,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,MAAM,SAAS,GACzC,UACH;AAEJ;AAaO,MAAM,gBAAgB;AAatB,SAAS,QAAQ,EAAE,KAAK,KAAK,WAAW,UAAU,GAAG,KAAK,GAAiB;AAChF,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,eAAe,SAAS,GAClD,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/* ── SectionLabel ─────────────────────────────────────────────────────────── */\n\n/**\n * `xs` is 10px — the size `LegendGroup`'s title and the top-bar menus' heading row draw;\n * `sm` (default) is 12px — the size `StatTile`'s label and lenkbank's section headings\n * (control-page.tsx:119/123/127) draw. Two sizes because the label sits either inside a\n * dense panel (a legend, a menu) or above a block of page content, and one size looked\n * wrong in the other place.\n *\n * `md` (0.11.0) is 11px, the rung between them: keksdose's budget-summary card labels\n * its figures (\"Assigned\", \"Activity\", \"Upcoming\", \"Available\" —\n * budget-summary-card:258/264/286/297) and its support thread its day divider and a message's meta line\n * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a\n * figure that size, 12px competed with it. Named `md` rather than slotted in order\n * because `sm` was already the default and renaming it would move every caller.\n *\n * `md` is also the heading over a CHART COLUMN (lenkbank P9): the small label centred\n * over each of a pair of facing charts, or over each column of a small-multiples grid.\n * There the label names a plot, not a section of the page, so `sm` (12px, the page's\n * section heading) out-ranks the card title above it, and `xs` (10px, a legend's\n * title) sinks below the axis ticks it sits beside. Rule of thumb: `xs` inside a\n * control (legend, menu), `md` over a figure or a plot, `sm` over a block of page\n * content.\n */\nexport type SectionLabelSize = \"xs\" | \"md\" | \"sm\";\n\n/**\n * The small, uppercase, tracked, muted label — as a class string, per size.\n *\n * Exported because `LegendGroup` and `StatTile` already draw it inline, and a class a\n * caller has to position itself (a `<th>`, a `<legend>`, a menu `<li>`) is better\n * reached as a string than wrapped in a component that only takes a `className`. The\n * uppercase is CSS, so a screen reader reads the text as written: write it in normal\n * case.\n *\n * The sizes are the kit's named rem steps since 0.32 (`text-micro` 0.625rem,\n * `text-caption` 0.6875rem — 10 and 11 px at Normal), so a label grows with the text\n * size like everything around it (docs/text-size-harmonization.md §3.2).\n */\nexport const SECTION_LABEL_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-micro font-semibold uppercase tracking-wide text-muted\",\n  md: \"text-caption font-semibold uppercase tracking-wide text-muted\",\n  sm: \"text-xs font-semibold uppercase tracking-wide text-muted\",\n};\n\n/**\n * `plain` (default): the label alone, as above.\n *\n * `band` (0.13, keksdose F5): the label on a full-width `surface-2` bar with a bottom\n * border — the day-group header of keksdose's mobile transaction list\n * (mobile-transaction-list.tsx:171), which separates one day's rows from the next.\n * Its type is kept as keksdose drew it — `font-medium` in the SECONDARY text colour,\n * not the plain label's semibold muted — so adopting the kit does not restyle a live\n * list: the bar already sets the label apart, and needs no extra weight. The padding (`px-4 py-2`) lines the text up with a\n * `ListItem density=\"comfortable\"` row below it; override it with `className` for a\n * list at another density. A sticky header is the caller's: add `sticky top-0`.\n */\nexport type SectionLabelVariant = \"plain\" | \"band\";\n\n/** The band's own type and box, per size — spelled out rather than merged over\n *  {@link SECTION_LABEL_CLASS}, so the result does not hang on tailwind-merge telling\n *  a font-size arbitrary `text-` value from a colour one. (Not spelt out as class\n *  names here: Tailwind scans comments, and a literal one broke the showcase CSS.) */\nconst SECTION_LABEL_BAND_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-micro\",\n  md: \"text-caption\",\n  sm: \"text-xs\",\n};\nconst BAND =\n  \"block border-b border-subtle bg-surface-2 px-4 py-2 font-medium uppercase tracking-wide text-secondary\";\n\ntype SectionLabelElement = \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"div\" | \"legend\";\n\nexport interface SectionLabelProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * The element — which is the heading LEVEL, and so is the caller's to pick: the kit\n   * cannot know where in the outline the label sits. Default `h3`, which is what\n   * lenkbank's control page writes under its `h2` card title. Pass `span` or `p` for a\n   * label that is not a heading at all (a legend group's title).\n   */\n  as?: SectionLabelElement;\n  size?: SectionLabelSize;\n  /** `band` draws the label on a `surface-2` bar with a bottom border — a list's group\n   *  header. See {@link SectionLabelVariant}. */\n  variant?: SectionLabelVariant;\n  children: ReactNode;\n  /** The element `as` names — hence `HTMLElement` (0.34, API-2, refactor audit 2026-10). */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A section's small uppercase label. lenkbank spells\n * `text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400`\n * on every `<h3>` of its control page and more; keksdose's budget switcher writes the\n * 10px version on a menu row. One component, the token colour, and the level chosen\n * where the outline is known.\n */\nexport function SectionLabel({\n  as = \"h3\",\n  size = \"sm\",\n  variant = \"plain\",\n  className,\n  children,\n  ...rest\n}: SectionLabelProps) {\n  const Tag = as as ElementType;\n  const type = variant === \"band\" ? cn(SECTION_LABEL_BAND_CLASS[size], BAND) : SECTION_LABEL_CLASS[size];\n  return (\n    <Tag {...rest} className={cn(type, className)}>\n      {children}\n    </Tag>\n  );\n}\n\n/* ── Caption ──────────────────────────────────────────────────────────────── */\n\n/**\n * The caption type as a class string: `text-caption` (0.6875rem, 11 px at Normal, §3.2),\n * snug, muted. lenkbank's `CAPTION`\n * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a\n * token colour rather than `slate-500 dark:slate-400`, so it follows the palette.\n * Exported for the same reason lenkbank's is a string: every caller positions it\n * differently (`mt-1`, `self-end pb-2`, `border-t`), and what must be one thing is the\n * type, not the box.\n */\nexport const CAPTION_CLASS = \"text-caption leading-snug text-muted\";\n\nexport interface CaptionProps extends ComponentPropsWithoutRef<\"p\"> {\n  /** Default `p`; `span` for a caption inside a line of other content. */\n  as?: \"p\" | \"span\" | \"div\";\n  children: ReactNode;\n  /** The element `as` names — hence `HTMLElement` (0.34, API-2, refactor audit 2026-10). */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * The small grey sentence under a field, a table or a button — prose ABOUT the thing\n * above it. Not `FieldHint`, which hides behind a field label's \"?\" so a paragraph does\n * not make one field taller than its neighbour (lenkbank feedback #27).\n */\nexport function Caption({ as = \"p\", className, children, ...rest }: CaptionProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(CAPTION_CLASS, className)}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";AA+GI;AA9GJ,SAAS,UAAU;AAyCZ,MAAM,sBAAwD;AAAA,EACnE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAoBA,MAAM,2BAA6D;AAAA,EACjE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,OACJ;AA4BK,SAAS,aAAa;AAAA,EAC3B,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,MAAM;AACZ,QAAM,OAAO,YAAY,SAAS,GAAG,yBAAyB,IAAI,GAAG,IAAI,IAAI,oBAAoB,IAAI;AACrG,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,MAAM,SAAS,GACzC,UACH;AAEJ;AAaO,MAAM,gBAAgB;AAetB,SAAS,QAAQ,EAAE,KAAK,KAAK,WAAW,UAAU,GAAG,KAAK,GAAiB;AAChF,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,eAAe,SAAS,GAClD,UACH;AAEJ;","names":[]}

package/dist/components/textarea.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode, Ref, TextareaHTMLAttributes } from "react";
+import { type CharacterCountLabels } from "./field-base.js";
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: ReactNode;
+    /** See {@link Input}'s `invalid`. */
+    invalid?: boolean;
+    /** See {@link Input}'s `error`. */
+    error?: ReactNode;
+    /** See {@link Input}'s `hint` (keksdose K4): text is a caption under the field, a
+     *  {@link FieldHint} rides the label line (or, unlabelled, the end edge). */
+    hint?: ReactNode;
+    /** See {@link Input}'s `showCount` (keksdose K11): a live "12/80" under the field,
+     *  with `maxLength`, announced only near and at the limit. */
+    showCount?: boolean;
+    /** The counter's words. See {@link CharacterCountLabels}. */
+    countLabels?: Partial<CharacterCountLabels>;
+    /** The `<textarea>`. A React 19 ref prop since 0.34 — see {@link InputProps.ref}. */
+    ref?: Ref<HTMLTextAreaElement>;
+}
+export declare function Textarea(props: TextareaProps): import("react").JSX.Element;

package/dist/components/textarea.js

@@ -0,0 +1,161 @@
+"use client";
+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 {
+  CharacterCount,
+  FIELD_BASE,
+  FIELD_INVALID,
+  FieldGroup,
+  FloatingField,
+  FLOATING_INPUT_CLASS,
+  FLOATING_PLACEHOLDER_ON_FOCUS,
+  fieldBelow,
+  hasPlaceholderText,
+  useCharacterCountLabels,
+  useTypedLength
+} from "./field-base.js";
+const TEXTAREA_LABEL_EDGE = cn(
+  "after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--label-strip-edge,0px)] after:content-['']",
+  "after:bg-inherit after:[mask-image:linear-gradient(#000_var(--label-strip-edge-solid,0px),transparent)]"
+);
+const LABEL_EDGE_SOFT_PX = 3;
+function labelEdge(scrollTop, lineHeight) {
+  if (!(scrollTop > 0)) return { height: 0, solid: 0 };
+  if (!(lineHeight > 0)) return { height: Math.min(scrollTop, LABEL_EDGE_SOFT_PX), solid: 0 };
+  const gone = scrollTop % lineHeight;
+  const left = gone === 0 ? 0 : lineHeight - gone;
+  if (left > 0 && left <= lineHeight / 2) return { height: left, solid: left };
+  return { height: Math.min(gone, LABEL_EDGE_SOFT_PX), solid: 0 };
+}
+const TEXTAREA_LABEL_STRIP = cn(
+  "pointer-events-none absolute inset-x-px top-px hidden h-4 rounded-t-[calc(0.375rem-1px)] bg-surface",
+  // Never at Large (0.33, §10.17): the label stands above the field, so there is no
+  // strip to keep scrolled text out of, and a layer here would hide the first line.
+  "not-large:peer-focus:block not-large:peer-[:not(:placeholder-shown)]:block",
+  "peer-disabled:bg-surface-2 peer-[[readonly]]:bg-surface-2",
+  TEXTAREA_LABEL_EDGE
+);
+function TextareaLabelStrip() {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const strip = ref.current;
+    const field = strip?.previousElementSibling;
+    if (!strip || !(field instanceof HTMLTextAreaElement)) return;
+    const fit = () => {
+      if (field.offsetWidth === 0) return;
+      const style = getComputedStyle(field);
+      const borderLeft = parseFloat(style.borderLeftWidth) || 0;
+      const borderRight = parseFloat(style.borderRightWidth) || 0;
+      const gutter = field.offsetWidth - field.clientWidth - borderLeft - borderRight;
+      const bar = gutter > 1.5;
+      const onLeft = field.clientLeft - borderLeft > 1.5;
+      const rtl = style.direction === "rtl";
+      const atEnd = onLeft === rtl;
+      const border = (end) => end === rtl ? borderLeft : borderRight;
+      strip.style.insetInlineEnd = bar && atEnd ? `${border(true) + gutter}px` : "";
+      strip.style.insetInlineStart = bar && !atEnd ? `${border(false) + gutter}px` : "";
+      strip.style.borderStartEndRadius = bar && atEnd ? "0" : "";
+      strip.style.borderStartStartRadius = bar && !atEnd ? "0" : "";
+    };
+    const follow = () => {
+      const edge = labelEdge(field.scrollTop, parseFloat(getComputedStyle(field).lineHeight));
+      if (edge.height > 0) {
+        strip.style.setProperty("--label-strip-edge", `${edge.height}px`);
+        strip.style.setProperty("--label-strip-edge-solid", `${edge.solid}px`);
+      } else {
+        strip.style.removeProperty("--label-strip-edge");
+        strip.style.removeProperty("--label-strip-edge-solid");
+      }
+    };
+    fit();
+    follow();
+    field.addEventListener("scroll", follow, { passive: true });
+    if (typeof ResizeObserver === "undefined") return () => field.removeEventListener("scroll", follow);
+    const observer = new ResizeObserver(() => {
+      fit();
+      follow();
+    });
+    observer.observe(field);
+    return () => {
+      field.removeEventListener("scroll", follow);
+      observer.disconnect();
+    };
+  }, []);
+  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 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 maxLength = rest.maxLength;
+  const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
+  const length = useTypedLength(rest.value, rest.defaultValue);
+  const countText = useCharacterCountLabels(countLabels);
+  const { isInvalid, describedBy, errorEl } = useFieldError(
+    error,
+    invalid,
+    mergeDescribedBy(hintParts.describedBy, counting && countId),
+    rest["aria-invalid"]
+  );
+  const counter = counting ? /* @__PURE__ */ jsx(
+    CharacterCount,
+    {
+      id: countId,
+      used: length.used,
+      max: maxLength,
+      labels: countText,
+      caption: /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts, className: "mt-0" })
+    }
+  ) : null;
+  const below = fieldBelow(hintParts, counter, errorEl);
+  const onChange = counting ? (e) => {
+    length.track(e.target.value);
+    rest.onChange?.(e);
+  } : rest.onChange;
+  if (label === void 0) {
+    const endHint = hintParts.labelHint;
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className, children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id,
+        placeholder,
+        ...rest,
+        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+        "aria-describedby": describedBy,
+        onChange,
+        className: cn(FIELD_BASE, endHint === void 0 && className, isInvalid && FIELD_INVALID)
+      }
+    ) }) });
+  }
+  const ownPlaceholder = hasPlaceholderText(placeholder);
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, hint: hintParts.labelHint, children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id: fieldId,
+        placeholder: ownPlaceholder ? placeholder : " ",
+        ...rest,
+        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+        "aria-describedby": describedBy,
+        onChange,
+        className: cn(
+          FLOATING_INPUT_CLASS,
+          ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS,
+          isInvalid && FIELD_INVALID
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(TextareaLabelStrip, {})
+  ] }) });
+}
+export {
+  Textarea
+};
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea.js.map

@@ -0,0 +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":[]}

package/dist/components/tile-radio.d.ts

@@ -1,6 +1,4 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-
+import type { ReactNode } from "react";
 /**
  * A row of square tiles that behaves as ONE radio group — the machinery
  * {@link SwatchPicker} and {@link IconPicker} are built on, public since 0.22.0 for the
@@ -57,18 +55,18 @@ import { ReactNode } from 'react';
  * list after keksdose K3; {@link Button}'s `disabledReason`, one tile at a time).
  */
 /** A tile's size: 28 / 32 / 44px — see {@link TILE_SIZE}. */
-type TileSize = "sm" | "md" | "lg";
+export type TileSize = "sm" | "md" | "lg";
 /** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). `glyph`
  *  and `swatch` are the content sizes the kit's own pickers draw inside each — use them
  *  in `renderTile` so a tile of the app's own matches theirs. */
-declare const TILE_SIZE: Record<TileSize, {
+export declare const TILE_SIZE: Record<TileSize, {
     tile: string;
     glyph: string;
     swatch: string;
 }>;
 /** One tile, whatever it shows. `key` is `null` for the "none" entry — a tile of its
  *  own that leads back to nothing, since clicking a checked tile does not uncheck it. */
-interface TileItem<T extends string> {
+export interface TileItem<T extends string> {
     key: T | null;
     label: string;
     /** Said after the name, and shown in the bubble under it. Marks the tile with a
@@ -88,7 +86,7 @@ interface TileItem<T extends string> {
      */
     disabledReason?: ReactNode;
 }
-interface TileRadioGroupProps<T extends string> {
+export interface TileRadioGroupProps<T extends string> {
     /** The tiles, in reading order. Render them inside a `role="radiogroup"` element
      *  with a name — see the module note. */
     items: TileItem<T>[];
@@ -120,6 +118,4 @@ interface TileRadioGroupProps<T extends string> {
  * right follow the page's direction — Home and End to the ends, and by default the
  * arrows choose as they go.
  */
-declare function TileRadioGroup<T extends string>({ items, checked, onSelect, activation, disabled, size, renderTile, tileClassName, }: TileRadioGroupProps<T>): react.JSX.Element;
-
-export { TILE_SIZE, type TileItem, TileRadioGroup, type TileRadioGroupProps, type TileSize };
+export declare function TileRadioGroup<T extends string>({ items, checked, onSelect, activation, disabled, size, renderTile, tileClassName, }: TileRadioGroupProps<T>): import("react").JSX.Element;

package/dist/components/tile-radio.js

@@ -11,11 +11,11 @@ const TILE_SIZE = {
   md: { tile: "size-8", glyph: "size-4", swatch: "size-5" },
   lg: { tile: "size-11", glyph: "size-5", swatch: "size-6" }
 };
-const TILE_BASE = "relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors focus:outline-none " + FOCUS_RING + " focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] disabled:cursor-not-allowed disabled:opacity-50";
-const TILE_IDLE = "border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]";
-const TILE_SELECTED = "border-[var(--text-primary)] bg-[var(--bg-surface)] ring-1 ring-[var(--text-primary)]";
+const TILE_BASE = "relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors focus:outline-none " + FOCUS_RING + " focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-50";
+const TILE_IDLE = "border-subtle bg-surface hover:border-strong hover:bg-hover";
+const TILE_SELECTED = "border-[var(--text-primary)] bg-surface ring-1 ring-[var(--text-primary)]";
 const TILE_LOCKED = "cursor-not-allowed opacity-50";
-const TILE_LOCKED_IDLE = "hover:border-[var(--border)] hover:bg-[var(--bg-surface)]";
+const TILE_LOCKED_IDLE = "hover:border-subtle hover:bg-surface";
 function isLocked(item) {
   const r = item.disabledReason;
   return r !== void 0 && r !== null && r !== false && r !== "";
@@ -101,7 +101,7 @@ function TileRadioGroup({
           tileClassName?.(item, selected)
         ),
         children: [
-          item.key === null ? /* @__PURE__ */ jsx(Ban, { "aria-hidden": true, className: cn(s.glyph, "text-[var(--text-muted)]") }) : renderTile(item, selected),
+          item.key === null ? /* @__PURE__ */ jsx(Ban, { "aria-hidden": true, className: cn(s.glyph, "text-muted") }) : renderTile(item, selected),
           item.note && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               "span",
@@ -128,7 +128,7 @@ function TileRadioGroup({
         {
           label: item.note || locked ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: "block", children: item.label }),
-            item.note && /* @__PURE__ */ jsx("span", { className: "block font-normal text-[var(--text-muted)]", children: item.note }),
+            item.note && /* @__PURE__ */ jsx("span", { className: "block font-normal text-muted", children: item.note }),
             locked && /* @__PURE__ */ jsx("span", { className: "block font-normal", children: item.disabledReason })
           ] }) : item.label,
           portal: true,