@eifi1/ui-kit 0.10.0 → 0.12.0

package/src/components/table.tsx

@@ -13,11 +13,37 @@ export type TableDensity = "comfortable" | "compact" | "none";
  *  figures for room. */
 export type TableLayout = "auto" | "fixed";
 export type TableAlign = "start" | "center" | "end";
+/**
+ * Vertical alignment of a cell's content (0.11.0). The defaults stay as they were — a
+ * head cell sits on the `bottom` (a wrapped heading ends on the line above the
+ * figures), a body cell at the `top` (a wrapped note starts level with its row). A
+ * table whose cells are INPUTS wants `middle`: keksdose's VAT summary
+ * (invoices/vat-summary.tsx) sets fields beside derived read-out figures in one row,
+ * and a figure at the top of its cell sat above the middle of the field next to it —
+ * so it writes `<tr className="align-middle">` over raw `<th>`/`<td>`, because the
+ * kit's cells each stated `align-top` and a class on the row could not reach them.
+ */
+export type TableVAlign = "top" | "middle" | "bottom";
+/** The head cell's type size: `xs` (the head's default) or `sm` (the body's). */
+export type TableHeaderCellSize = "xs" | "sm";
+/** The header cell's weight. Default `medium`. */
+export type TableHeaderCellWeight = "normal" | "medium" | "semibold";
+
+/**
+ * What a {@link TableRow} is in a statement-style table (0.12.0): an ordinary `row`, a
+ * `group` heading ("Current assets", a tinted full-width label row), a `subtotal` under
+ * a group, or the `total` of the whole table. kastlan's balance sheet, income statement
+ * and journal entry each spelled these as `className="font-medium"`, `"font-bold
+ * border-t-2"` and `bg-muted/50` on the cell — three pages, three sets of classes for
+ * the same four kinds of line.
+ */
+export type TableRowVariant = "row" | "group" | "subtotal" | "total";
 
 interface TableContextValue {
   density: TableDensity;
   zebra: boolean;
   hover: boolean;
+  rowDividers: boolean;
   captionId: string;
   registerCaption: () => () => void;
 }
@@ -26,12 +52,66 @@ const TableContext = createContext<TableContextValue>({
   density: "comfortable",
   zebra: false,
   hover: false,
+  rowDividers: true,
   captionId: "",
   registerCaption: () => () => {},
 });
 
-/** Which section a row sits in — zebra and hover apply to body rows only. */
-const SectionContext = createContext<"head" | "body" | "foot">("body");
+type TableSection = "head" | "body" | "foot";
+
+/** Which section a row sits in — zebra and hover apply to body rows only. `undefined`
+ *  outside the kit's section parts: a raw `<thead>` / `<tbody>`, which
+ *  {@link useSection} then reads off the DOM. */
+const SectionContext = createContext<TableSection | undefined>(undefined);
+
+const SECTION_OF_TAG: Record<string, TableSection> = { THEAD: "head", TBODY: "body", TFOOT: "foot" };
+
+/**
+ * The section a row or cell sits in: the kit part's context where there is one, else the
+ * nearest `<thead>` / `<tbody>` / `<tfoot>` in the DOM.
+ *
+ * keksdose's VAT summary writes a raw `<thead>` round kit cells in places, and a
+ * `TableHeaderCell` there took itself for a BODY cell — `scope="row"`, body type — with
+ * nothing on the page to say why. React cannot see an ancestor's tag, so the fallback
+ * reads it after mount; a layout effect, so the corrected cell is what gets painted.
+ */
+function useSection<E extends HTMLElement>(): [TableSection, ((el: E | null) => void) | undefined] {
+  const fromContext = useContext(SectionContext);
+  const [node, setNode] = useState<E | null>(null);
+  const [detected, setDetected] = useState<TableSection | undefined>(undefined);
+  useLayoutEffect(() => {
+    if (fromContext !== undefined || !node) return;
+    const section = node.closest("thead, tbody, tfoot");
+    const found = section ? SECTION_OF_TAG[section.tagName] : undefined;
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- read off the DOM, which only exists after mount
+    if (found !== detected) setDetected(found);
+  }, [fromContext, node, detected]);
+  // No ref at all under a kit section: holding the node would cost every row and cell
+  // a second render on mount for an answer the context already gave.
+  return [fromContext ?? detected ?? "body", fromContext === undefined ? setNode : undefined];
+}
+
+/** A {@link TableRow}'s `valign`, which its cells take unless they set their own. It
+ *  cannot be left to CSS inheritance: every cell states its own default alignment,
+ *  and a class on the cell beats one on the row. */
+const RowVAlignContext = createContext<TableVAlign | undefined>(undefined);
+
+const VALIGN: Record<TableVAlign, string> = {
+  top: "align-top",
+  middle: "align-middle",
+  bottom: "align-bottom",
+};
+
+const HEADER_SIZE: Record<TableHeaderCellSize, string> = {
+  xs: "text-xs",
+  sm: "text-sm",
+};
+
+const HEADER_WEIGHT: Record<TableHeaderCellWeight, string> = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+};
 
 const CELL_PAD: Record<TableDensity, string> = {
   comfortable: "px-3 py-2",
@@ -65,6 +145,22 @@ export interface TableProps extends ComponentPropsWithoutRef<"table"> {
   wrapperClassName?: string;
   /** See {@link TableLayout}. Unset leaves the browser's `auto` and adds no class. */
   layout?: TableLayout;
+  /**
+   * A rounded border round the whole table (0.12.0) — for a table standing on the page
+   * or in a dialog rather than inside a card. kastlan wraps six of them in
+   * `<div className="rounded-md border">` by hand (payment allocation, the new-budget
+   * lines, the meter readings, the deposit transactions, the unit values editor, the
+   * maintenance detail), and a hand-made frame outside the scroll wrapper does not clip
+   * the rows' tint to its corners.
+   */
+  framed?: boolean;
+  /**
+   * The rule between body rows. Default true. `false` for a small table whose rows are
+   * spaced by their own content — keksdose's VAT summary, a block of three quiet
+   * columns inside a card — which otherwise had to drop to raw `<tr>`s to lose it. One
+   * row can still say otherwise with {@link TableRowProps.bordered}.
+   */
+  rowDividers?: boolean;
 }
 
 /**
@@ -90,6 +186,8 @@ export function Table({
   hover = false,
   wrapperClassName,
   layout,
+  framed = false,
+  rowDividers = true,
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -104,13 +202,14 @@ export function Table({
       density,
       zebra,
       hover,
+      rowDividers,
       captionId,
       registerCaption: () => {
         setCaptions((n) => n + 1);
         return () => setCaptions((n) => n - 1);
       },
     }),
-    [density, zebra, hover, captionId],
+    [density, zebra, hover, rowDividers, captionId],
   );
 
   const regionName = captions > 0 ? { "aria-labelledby": captionId } : ariaLabel ? { "aria-label": ariaLabel } : null;
@@ -125,9 +224,14 @@ export function Table({
         {...(overflowing ? regionName : null)}
         tabIndex={overflowing ? 0 : undefined}
         data-overflowing={overflowing || undefined}
+        data-clips=""
+        data-framed={framed || undefined}
         className={cn(
           // `relative`: the containing block for an `sr-only` caption.
           "relative w-full overflow-x-auto",
+          // On the scroll wrapper itself, so its clipping keeps the rows inside the
+          // rounded corners.
+          framed && "rounded-md border border-[var(--border)]",
           THIN_SCROLLBAR_CLASS,
           "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
           wrapperClassName,
@@ -149,12 +253,16 @@ export function Table({
   );
 }
 
-export type TableHeadProps = ComponentPropsWithoutRef<"thead">;
+export interface TableHeadProps extends ComponentPropsWithoutRef<"thead"> {
+  /** The rule under the head. Default true; `false` for a quiet header over a small
+   *  table (keksdose's VAT summary wrote `className="border-b-0"` to lose it). */
+  bordered?: boolean;
+}
 
-export function TableHead({ className, ...rest }: TableHeadProps) {
+export function TableHead({ bordered = true, className, ...rest }: TableHeadProps) {
   return (
     <SectionContext.Provider value="head">
-      <thead {...rest} className={cn("border-b border-[var(--border)]", className)} />
+      <thead {...rest} className={cn(bordered && "border-b border-[var(--border)]", className)} />
     </SectionContext.Provider>
   );
 }
@@ -252,23 +360,49 @@ export function TableFoot({ className, ...rest }: TableFootProps) {
   );
 }
 
-export type TableRowProps = ComponentPropsWithoutRef<"tr">;
+const ROW_VARIANT: Record<TableRowVariant, string | false> = {
+  row: false,
+  group: "bg-[var(--bg-surface-2)] font-semibold",
+  subtotal: "font-medium",
+  // A 2px rule over the 1px divider the row above draws on its bottom: collapsed
+  // borders meet on one line, the wider wins, and the heavier rule is what says "sum".
+  total: "border-t-2 border-t-[var(--border-strong)] font-semibold",
+};
 
-export function TableRow({ className, ...rest }: TableRowProps) {
-  const { zebra, hover } = useContext(TableContext);
-  const section = useContext(SectionContext);
+/** The deprecated HTML `valign` attribute is replaced by a class-backed one. */
+export interface TableRowProps extends ComponentPropsWithoutRef<"tr"> {
+  /** Vertical alignment for every cell of the row that does not set its own. See
+   *  {@link TableVAlign}. Left out, each cell keeps its default. */
+  valign?: TableVAlign;
+  /** See {@link TableRowVariant}. Default `row`. Zebra and hover tint ordinary rows
+   *  only: a group heading or a total is not one more record. */
+  variant?: TableRowVariant;
+  /** The rule under this body row. Default: the table's `rowDividers`. */
+  bordered?: boolean;
+}
+
+export function TableRow({ valign, variant = "row", bordered, className, ...rest }: TableRowProps) {
+  const { zebra, hover, rowDividers } = useContext(TableContext);
+  const [section, ref] = useSection<HTMLTableRowElement>();
   const body = section === "body";
-  return (
+  const record = body && variant === "row";
+  const row = (
     <tr
+      ref={ref}
       {...rest}
+      data-variant={variant === "row" ? undefined : variant}
       className={cn(
-        body && "border-b border-[var(--border)]",
-        body && zebra && "even:bg-[var(--bg-surface-2)]",
-        body && hover && "transition-colors hover:bg-[var(--bg-hover)]",
+        body && (bordered ?? rowDividers) && "border-b border-[var(--border)]",
+        record && zebra && "even:bg-[var(--bg-surface-2)]",
+        record && hover && "transition-colors hover:bg-[var(--bg-hover)]",
+        ROW_VARIANT[variant],
+        // On the row as well, for a raw `<td>` of the caller's, which inherits it.
+        valign && VALIGN[valign],
         className,
       )}
     />
   );
+  return valign ? <RowVAlignContext.Provider value={valign}>{row}</RowVAlignContext.Provider> : row;
 }
 
 interface CellAlignProps {
@@ -276,45 +410,74 @@ interface CellAlignProps {
   numeric?: boolean;
   /** Logical alignment. Default `start` (`end` when `numeric`). */
   align?: TableAlign;
+  /** Vertical alignment. Default: the row's `valign`, else `bottom` for a head cell and
+   *  `top` for a body cell. See {@link TableVAlign}. */
+  valign?: TableVAlign;
 }
 
-/** The deprecated HTML `align` attribute is replaced by a logical one. */
-export interface TableHeaderCellProps extends Omit<ComponentPropsWithoutRef<"th">, "align">, CellAlignProps {}
+/** The deprecated HTML `align` and `valign` attributes are replaced by class-backed ones. */
+export interface TableHeaderCellProps extends Omit<ComponentPropsWithoutRef<"th">, "align" | "valign">, CellAlignProps {
+  /**
+   * Type size. Left out: `xs` in the head, the table's own size in the body — as
+   * before. keksdose's VAT summary heads its columns at the body size and normal weight
+   * (vat-summary.tsx:158–168, `font-normal` on each `<th>`), a quiet header over a
+   * small table of figures, and could not say so without overriding classes.
+   */
+  size?: TableHeaderCellSize;
+  /** Default `medium`. `normal` for the quiet header above; see {@link size}. */
+  weight?: TableHeaderCellWeight;
+}
 
 /**
  * A `<th>`. `scope` defaults to `col` in the head and `row` in the body — a header
  * cell in a body row is the row's label ("Net rent" in a key-value table), and a
  * reader needs the scope to read it with each cell beside it.
  */
-export function TableHeaderCell({ numeric = false, align, scope, className, ...rest }: TableHeaderCellProps) {
+export function TableHeaderCell({
+  numeric = false,
+  align,
+  valign,
+  size,
+  weight = "medium",
+  scope,
+  className,
+  ...rest
+}: TableHeaderCellProps) {
   const { density } = useContext(TableContext);
-  const section = useContext(SectionContext);
+  const [section, ref] = useSection<HTMLTableCellElement>();
+  const rowVAlign = useContext(RowVAlignContext);
+  const head = section === "head";
+  const textSize = size ?? (head ? "xs" : undefined);
   return (
     <th
+      ref={ref}
       {...rest}
       scope={scope ?? (section === "head" ? "col" : "row")}
       className={cn(
         CELL_PAD[density],
         ALIGN[align ?? (numeric ? "end" : "start")],
         numeric && "tabular-nums",
-        "align-bottom font-medium",
-        section === "head" ? "text-xs text-[var(--text-muted)]" : "align-top text-[var(--text-secondary)]",
+        VALIGN[valign ?? rowVAlign ?? (head ? "bottom" : "top")],
+        HEADER_WEIGHT[weight],
+        head ? "text-[var(--text-muted)]" : "text-[var(--text-secondary)]",
+        textSize && HEADER_SIZE[textSize],
         className,
       )}
     />
   );
 }
 
-export interface TableCellProps extends Omit<ComponentPropsWithoutRef<"td">, "align">, CellAlignProps {}
+export interface TableCellProps extends Omit<ComponentPropsWithoutRef<"td">, "align" | "valign">, CellAlignProps {}
 
-export function TableCell({ numeric = false, align, className, ...rest }: TableCellProps) {
+export function TableCell({ numeric = false, align, valign, className, ...rest }: TableCellProps) {
   const { density } = useContext(TableContext);
+  const rowVAlign = useContext(RowVAlignContext);
   return (
     <td
       {...rest}
       className={cn(
         CELL_PAD[density],
-        "align-top",
+        VALIGN[valign ?? rowVAlign ?? "top"],
         ALIGN[align ?? (numeric ? "end" : "start")],
         numeric && "tabular-nums whitespace-nowrap",
         className,

package/src/components/text-link.tsx

@@ -0,0 +1,248 @@
+import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from "react";
+import { ExternalLink } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "../lib/cn";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels";
+import type { KitLinkComponent } from "../i18n/kit-labels";
+
+/* ── Choosing what draws a link ──────────────────────────────────────────── */
+
+/**
+ * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a
+ * protocol-relative `//host`. A router's link is for paths inside the app, so the
+ * provider's `linkComponent` is never handed one of these — they stay a plain `<a>`.
+ *
+ * NOT external, and so handed to the router link: a path (`/x`, `x`, `?q=1`) and the
+ * hash-router form `#/x` — that IS a route in a `HashRouter` app, which maps it to
+ * `to="/x"`. A plain in-page anchor (`#section`) is not external either, but it is not
+ * a route: see {@link isInPageAnchor}.
+ */
+export function isExternalHref(href: string): boolean {
+  return /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href);
+}
+
+/**
+ * An `href` that only scrolls the current page: `#section` (or a bare `#`). The
+ * hash-router form `#/x` is a ROUTE, not an anchor, and is not one of these. A router
+ * link must not get an anchor — under a `HashRouter` `#section` would navigate to the
+ * path `/section` — so every kit link draws it as a plain `<a>`.
+ */
+export function isInPageAnchor(href: string): boolean {
+  return href.startsWith("#") && !href.startsWith("#/");
+}
+
+/**
+ * Whether the provider's `linkComponent` (or a kit component's router fallback) draws
+ * `href`: an in-app path, `#/x` included — not an external `href`
+ * ({@link isExternalHref}) and not an in-page `#anchor` ({@link isInPageAnchor}).
+ */
+export function isRoutableHref(href: string): boolean {
+  return !isExternalHref(href) && !isInPageAnchor(href);
+}
+
+/**
+ * What draws a kit link to `href`: the component's own `renderLink` when it was given
+ * one (it always wins — the caller asked for it by name), else the
+ * `<UiKitProvider linkComponent>` for a routable `href` ({@link isRoutableHref}), else
+ * `undefined` — a plain `<a>`. The one rule every kit link follows: `https:` /
+ * `mailto:` / `//host` and `#section` stay plain anchors; `/x`, `x` and a hash-router
+ * `#/x` go to the router link. Every kit link props type is a subset of the anchor
+ * attributes `KitLinkProps` describes, which is what makes the cast sound.
+ * @internal Shared by the kit's link-bearing components; not part of the barrel.
+ */
+export function pickLinkRenderer<P>(
+  own: ((props: P) => ReactElement) | undefined,
+  kitLink: KitLinkComponent | undefined,
+  href: string | undefined,
+): ((props: P) => ReactElement) | undefined {
+  if (own) return own;
+  if (!kitLink || href === undefined || !isRoutableHref(href)) return undefined;
+  return kitLink as unknown as (props: P) => ReactElement;
+}
+
+/**
+ * Draws `props` through `render` as a component of its own, so a router link's hooks
+ * belong to it and not to the kit component calling it — for the kit components that
+ * call their own `renderLink` inline and reach the provider's link through here.
+ * @internal
+ */
+export function RenderedKitLink<P>({ render, props }: { render: (props: P) => ReactElement; props: P }) {
+  return render(props);
+}
+
+/* ── TextLink ─────────────────────────────────────────────────────────────── */
+
+/** `brand` (default) for a link in running text, `muted` for footer and meta links
+ *  that should not compete with the content, `danger` for a destructive one ("Leave
+ *  group"), `inherit` for a link that takes its surroundings' colour. */
+export type TextLinkTone = "brand" | "muted" | "danger" | "inherit";
+
+/** `hover` (default): underlined under the pointer — the idiom all three apps draw.
+ *  `always` for a link inside prose, where colour alone must not be the only mark
+ *  (WCAG 1.4.1). `none` where the context already says "link" (a footer nav). */
+export type TextLinkUnderline = "hover" | "always" | "none";
+
+/** The `aria-current` token. `true` on {@link TextLinkProps.current} means `page`. */
+export type TextLinkCurrent = "page" | "step" | "location" | "date" | "time" | "true";
+
+/** What {@link TextLinkProps.renderLink} (and the provider's `linkComponent`) is
+ *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */
+export interface TextLinkRenderProps {
+  href: string;
+  /** The link's look — keep it, or the tone, underline and focus ring go. */
+  className: string;
+  children: ReactNode;
+  ref?: Ref<HTMLAnchorElement>;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;
+  "aria-current"?: TextLinkCurrent;
+  id?: string;
+  title?: string;
+  [key: `aria-${string}`]: string | boolean | number | undefined;
+  [key: `data-${string}`]: unknown;
+}
+
+export interface TextLinkProps
+  extends Omit<ComponentPropsWithoutRef<"a">, "href" | "children" | "aria-current" | "onClick" | "onKeyDown"> {
+  href: string;
+  children: ReactNode;
+  /** Default `brand`. */
+  tone?: TextLinkTone;
+  /** Default `hover`. */
+  underline?: TextLinkUnderline;
+  /**
+   * The link leaves the app: a plain `<a target="_blank" rel="noopener noreferrer">`
+   * (never the router's), an external-link mark after the text (mirrored in RTL), and
+   * "opens in a new tab" (`common.opensInNewTab`) read after it — the mark says it
+   * only to the eye. kastlan's BWO / BFS source links (rent-increase-calculator-page).
+   */
+  external?: boolean;
+  /**
+   * Keep the click (and the Enter that activates the link) from reaching an ancestor —
+   * a link in a DataTable row with `onRowClick` goes to its own target instead of
+   * running the row's action. kastlan's `CellLink` did this by hand.
+   */
+  stopPropagation?: boolean;
+  /** Mark the link as the current one of a set — `true` is `aria-current="page"`, the
+   *  legal footer's link to the page you are on. Drawn in semibold. */
+  current?: boolean | TextLinkCurrent;
+  /** A Lucide icon before the text, at the text's size — kastlan's "← Back" link. */
+  icon?: LucideIcon;
+  /** Your router's link for an in-app `href`. Default: the `<UiKitProvider
+   *  linkComponent>`, then a plain `<a>`. Ignored on an `external` link. */
+  renderLink?: (props: TextLinkRenderProps) => ReactElement;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;
+  ref?: Ref<HTMLAnchorElement>;
+}
+
+const TONE: Record<TextLinkTone, string> = {
+  brand: "text-[var(--brand)] hover:text-[var(--brand-hover)]",
+  muted: "text-[var(--text-muted)] hover:text-[var(--text-primary)]",
+  danger: "text-[var(--danger)] hover:text-[var(--danger-hover)]",
+  inherit: "",
+};
+
+const UNDERLINE: Record<TextLinkUnderline, string> = {
+  hover: "no-underline hover:underline",
+  always: "underline",
+  none: "no-underline",
+};
+
+/**
+ * The one inline link: a real `<a href>` (middle click, "open in new tab", link
+ * semantics) through the app's router for an in-app path, in one of four tones.
+ *
+ * kastlan draws this link a dozen ways by hand — `EntityLink` and `CellLink` (text-primary,
+ * hover underline, one stopping the row click), the legal pages' back link and footer,
+ * the feedback page's URL links, the calculator's external sources with a hand-placed
+ * ↗ and no word for a screen reader — and the lease wizard's unit step (lease-unit-step)
+ * used a raw `<a>` to an in-app route, which reloads the whole app. Here the router
+ * link comes from `<UiKitProvider linkComponent>`, set once.
+ *
+ * Inline, not `inline-flex`: a link inside a sentence must wrap with it. The icons sit
+ * on the text's baseline at the text's size, so they scale with whatever type the link
+ * is set in. The focus ring is an outline, which follows every line of a wrapped link.
+ */
+export function TextLink({
+  href,
+  children,
+  tone = "brand",
+  underline = "hover",
+  external = false,
+  stopPropagation = false,
+  current,
+  icon: Icon,
+  renderLink,
+  className,
+  onClick,
+  onKeyDown,
+  ref,
+  ...rest
+}: TextLinkProps) {
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const kitLink = useKitLink();
+  const ariaCurrent: TextLinkCurrent | undefined =
+    current === true ? "page" : current === false ? undefined : current;
+
+  const look = cn(
+    "rounded-sm underline-offset-2 transition-colors",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
+    TONE[tone],
+    UNDERLINE[underline],
+    ariaCurrent && "font-semibold",
+    className,
+  );
+
+  const body = (
+    <>
+      {Icon && <Icon aria-hidden className="me-1 inline size-[1em] shrink-0 align-[-0.125em]" />}
+      {children}
+      {external && (
+        <>
+          <ExternalLink aria-hidden className="ms-1 inline size-[0.85em] align-[-0.1em] rtl:-scale-x-100" />
+          {" "}
+          <span className="sr-only">({common.opensInNewTab})</span>
+        </>
+      )}
+    </>
+  );
+
+  const props: TextLinkRenderProps = {
+    ...(rest as Partial<TextLinkRenderProps>),
+    ref,
+    href,
+    className: look,
+    "aria-current": ariaCurrent,
+    onClick: stopPropagation
+      ? (event) => {
+          event.stopPropagation();
+          onClick?.(event);
+        }
+      : onClick,
+    onKeyDown: stopPropagation
+      ? (event) => {
+          if (event.key === "Enter") event.stopPropagation();
+          onKeyDown?.(event);
+        }
+      : onKeyDown,
+    children: body,
+  };
+
+  const render = external ? undefined : pickLinkRenderer(renderLink, kitLink, href);
+  if (render) return <RenderedTextLink render={render} {...props} />;
+  const { children: content, ...anchor } = props;
+  return (
+    <a {...anchor} {...(external ? { target: "_blank", rel: "noopener noreferrer" } : null)}>
+      {content}
+    </a>
+  );
+}
+
+/** Calls the link renderer as a component, so a router link's hooks are its own. */
+function RenderedTextLink({
+  render,
+  ...props
+}: TextLinkRenderProps & { render: (props: TextLinkRenderProps) => ReactElement }) {
+  return render(props);
+}

package/src/components/text.tsx

@@ -9,8 +9,15 @@ import { cn } from "../lib/cn";
  * (control-page.tsx:119/123/127) draw. Two sizes because the label sits either inside a
  * dense panel (a legend, a menu) or above a block of page content, and one size looked
  * wrong in the other place.
+ *
+ * `md` (0.11.0) is 11px, the rung between them: keksdose's budget-summary card labels
+ * its figures ("Assigned", "Activity", "Upcoming", "Available" —
+ * budget-summary-card:258/264/286/297) and its support thread its day divider and a message's meta line
+ * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a
+ * figure that size, 12px competed with it. Named `md` rather than slotted in order
+ * because `sm` was already the default and renaming it would move every caller.
  */
-export type SectionLabelSize = "xs" | "sm";
+export type SectionLabelSize = "xs" | "md" | "sm";
 
 /**
  * The small, uppercase, tracked, muted label — as a class string, per size.
@@ -23,6 +30,7 @@ export type SectionLabelSize = "xs" | "sm";
  */
 export const SECTION_LABEL_CLASS: Record<SectionLabelSize, string> = {
   xs: "text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
+  md: "text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
   sm: "text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]",
 };