@eifi1/ui-kit 0.11.0 → 0.12.0

package/dist/components/calendar-heatmap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/calendar-heatmap.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, horizontalStep } from \"../lib/direction\";\nimport { addMonthsClamped, localeWeekStart, parseIsoDate, toLocalIso } from \"../lib/dates\";\nimport { useKitLabels, useKitLocale, useKitWeekStart } from \"../i18n/kit-labels\";\nimport { Tooltip } from \"./tooltip\";\nimport type { WeekDay } from \"./mini-calendar\";\n\n/**\n * Every string the heatmap speaks — the `calendarHeatmap` namespace of\n * `<UiKitProvider labels>`, overridable per instance through `labels`. Dates and\n * values arrive already formatted (in `locale`, and through `formatValue`), so the\n * functions only arrange them.\n */\nexport interface CalendarHeatmapLabels {\n  /** Accessible name of the grid. */\n  grid: string;\n  /**\n   * One day: its accessible name, and the tooltip unless `tooltip` is given. `date`\n   * is the whole date in `locale` (\"Monday, 14 September 2026\"), `value` the day's\n   * figure through `formatValue`.\n   */\n  day: (date: string, value: string) => string;\n  /** The two ends of the legend's scale. */\n  less: string;\n  more: string;\n  /** `maxDays` cut the window: how many of its earliest days are not drawn. */\n  truncated: (count: number) => string;\n}\n\n/** English defaults, exported as the `calendarHeatmap` namespace of `UiKitLabels`. */\nexport const DEFAULT_CALENDAR_HEATMAP_LABELS: CalendarHeatmapLabels = {\n  grid: \"Daily values\",\n  day: (date, value) => `${date}: ${value}`,\n  less: \"Less\",\n  more: \"More\",\n  truncated: (count) =>\n    `Showing the most recent days; ${count} earlier ${count === 1 ? \"day is\" : \"days are\"} not shown.`,\n};\n\n/** One day's figure. Several entries for one date are added up. */\nexport interface CalendarHeatmapDatum {\n  /** \"YYYY-MM-DD\". */\n  date: string;\n  value: number;\n}\n\n/** What `tooltip` is told about the day under the pointer. */\nexport interface CalendarHeatmapDay {\n  iso: string;\n  date: Date;\n  /** The day's figure; `0` when `data` has no entry for it (see `hasData`). */\n  value: number;\n  hasData: boolean;\n  /** `0` = empty … `levels` = the busiest. */\n  level: number;\n  /** The whole date in `locale`. */\n  formattedDate: string;\n  /** `value` through `formatValue`. */\n  formattedValue: string;\n}\n\n/**\n * `onSelect` is omitted from the `<div>` attributes for the reason `MiniCalendar` gives:\n * the DOM event of that name is a text-selection event, and this one answers with a date.\n */\nexport interface CalendarHeatmapProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  data: readonly CalendarHeatmapDatum[];\n  /** The window, inclusive, as \"YYYY-MM-DD\". */\n  from: string;\n  to: string;\n  /**\n   * `\"weeks\"` (default): the contribution-graph shape — one COLUMN per week, the\n   * weekdays down the side, month names along the top; a year fits in ~53 small\n   * squares and scrolls sideways where it does not. `\"month\"`: a 7-column calendar\n   * with day numbers in large square cells, for a single month on a phone (switch on\n   * `useMediaQuery` and narrow `from`/`to` to the month).\n   */\n  layout?: \"weeks\" | \"month\";\n  /** The day shown as selected (\"YYYY-MM-DD\"). */\n  selected?: string;\n  /** Makes each day a button: a click (or Enter/Space) selects it — a drill-down into\n   *  that day's rows, a day panel. Without it the days are focusable but inert. */\n  onSelect?: (iso: string) => void;\n  /** How a value is written in the tooltip and the day's name. Default: `Intl.NumberFormat`\n   *  in `locale`. Pass a currency formatter for money. */\n  formatValue?: (value: number) => string;\n  /** Tooltip content for a day. Default: `labels.day(date, value)`. */\n  tooltip?: (day: CalendarHeatmapDay) => ReactNode;\n  /**\n   * Tag each tooltip `data-private`, so the host's demo-mode rule blurs it (the\n   * attribute `Tooltip redact` and `StatTile sensitive` carry). ON by default: a heatmap\n   * is almost always the user's own figures, and a missing tag is silent — the grid\n   * looks anonymous and the bubble spells the amount out on hover.\n   */\n  sensitive?: boolean;\n  /** The value that reaches the top of the scale. Default: the largest value ON SCREEN,\n   *  so a peak outside the window does not wash the drawn days out to empty. */\n  max?: number;\n  /** How many non-empty intensity steps. Default 4. */\n  levels?: number;\n  /** The scale's colour, as any CSS colour. Default `var(--brand)`; each step is this\n   *  mixed into `--bg-surface`, so the ramp follows the theme. */\n  color?: string;\n  /**\n   * The most days to draw. A longer window keeps its LATEST `maxDays` and says how many\n   * it left out (`labels.truncated`) rather than silently ending. Default: no cap.\n   */\n  maxDays?: number;\n  /** Draw the Less … More legend. Default `true`. */\n  legend?: boolean;\n  /** BCP 47 tag for the dates, month and weekday names and numbers. */\n  locale?: string;\n  /** `0` = Sunday … `6` = Saturday. Default: the provider's, else the locale's. */\n  weekStartsOn?: WeekDay;\n  labels?: Partial<CalendarHeatmapLabels>;\n  className?: string;\n}\n\nconst DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {\n  weekday: \"long\",\n  day: \"numeric\",\n  month: \"long\",\n  year: \"numeric\",\n};\n\n/** The empty day: a wash of the text colour, like `--bg-hover`, so it reads as a cell\n *  on both themes without claiming any value. */\nconst EMPTY_FILL = \"color-mix(in oklab, var(--text-primary) 8%, var(--bg-surface))\";\n\nconst weekdayIndex = (d: Date, weekStart: WeekDay) => (d.getDay() - weekStart + 7) % 7;\n\n/** The step a value falls on: 0 for nothing, else 1…levels by its share of `max`. */\nexport function heatmapLevel(value: number, max: number, levels: number): number {\n  if (!(value > 0) || !(max > 0) || levels < 1) return 0;\n  return Math.min(levels, Math.max(1, Math.ceil((value / max) * levels)));\n}\n\n/** How much of `color` a step mixes into the surface: 20% for the first step, 100% for\n *  the last — the floor keeps the smallest value visibly apart from an empty day. */\nfunction levelPercent(level: number, levels: number): number {\n  if (levels <= 1) return 100;\n  return Math.round(20 + (80 * (level - 1)) / (levels - 1));\n}\n\nfunction levelFill(level: number, levels: number, color: string): string {\n  if (level === 0) return EMPTY_FILL;\n  return `color-mix(in oklab, ${color} ${levelPercent(level, levels)}%, var(--bg-surface))`;\n}\n\n/**\n * Days as a grid of shaded squares — how much happened on each, at a glance\n * (a contribution graph, a spending calendar).\n *\n * **Every day is a cell you can reach.** The grid is a `role=\"grid\"` with ONE tab\n * stop (the roving tabindex, as in `MiniCalendar`); the arrows move by the grid's own\n * geometry — in `\"weeks\"` ↑/↓ are the previous/next day and ←/→ a week, in `\"month\"`\n * the other way round, mirrored in RTL — PageUp/PageDown move a month and Home/End go\n * to the window's first/last day. Each cell is named with its whole date AND its value,\n * because the colour is not something a screen reader can say, and carries\n * `data-day=\"YYYY-MM-DD\"` as its identity for tests and for the host.\n *\n * The tooltip is portalled (a year of squares always sits in a sideways scroller) and\n * `data-private` unless `sensitive={false}`. Cell size in `\"weeks\"` is the CSS variable\n * `--heatmap-cell` (default `0.75rem`): `style={{ \"--heatmap-cell\": \"1rem\" }}`.\n */\nexport function CalendarHeatmap({\n  data,\n  from,\n  to,\n  layout = \"weeks\",\n  selected,\n  onSelect,\n  formatValue: formatValueProp,\n  tooltip,\n  sensitive = true,\n  max: maxProp,\n  levels = 4,\n  color = \"var(--brand)\",\n  maxDays,\n  legend = true,\n  locale: localeProp,\n  weekStartsOn,\n  labels: labelsProp,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: CalendarHeatmapProps) {\n  const labels = useKitLabels(\"calendarHeatmap\", DEFAULT_CALENDAR_HEATMAP_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const providerWeekStart = useKitWeekStart();\n  const weekStart: WeekDay = weekStartsOn ?? providerWeekStart ?? localeWeekStart(locale);\n  const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const formatValue = formatValueProp ?? ((v: number) => numberFormat.format(v));\n\n  const values = useMemo(() => {\n    const m = new Map<string, number>();\n    for (const p of data) m.set(p.date, (m.get(p.date) ?? 0) + p.value);\n    return m;\n  }, [data]);\n\n  // The window, trimmed from the FRONT: the days a person looks for are the recent\n  // ones, and a cap that kept the oldest would end the calendar before today.\n  const { days, dropped } = useMemo(() => {\n    const start = parseIsoDate(from);\n    const end = parseIsoDate(to);\n    const list: Date[] = [];\n    if (!start || !end || end < start) return { days: list, dropped: 0 };\n    const cursor = new Date(end);\n    const cap = maxDays && maxDays > 0 ? maxDays : Infinity;\n    while (cursor >= start && list.length < cap) {\n      list.unshift(new Date(cursor));\n      cursor.setDate(cursor.getDate() - 1);\n    }\n    const first = list[0];\n    const trimmed = first ? Math.round((first.getTime() - start.getTime()) / 86_400_000) : 0;\n    return { days: list, dropped: Math.max(0, trimmed) };\n  }, [from, to, maxDays]);\n\n  const firstIso = days.length ? toLocalIso(days[0]) : \"\";\n  const lastIso = days.length ? toLocalIso(days[days.length - 1]) : \"\";\n\n  const max = useMemo(() => {\n    if (maxProp !== undefined) return maxProp;\n    let m = 0;\n    for (const d of days) m = Math.max(m, values.get(toLocalIso(d)) ?? 0);\n    return m;\n  }, [maxProp, days, values]);\n\n  const clampIso = (iso: string) => (iso < firstIso ? firstIso : iso > lastIso ? lastIso : iso);\n\n  // The roving tab stop: the selected day, else the latest one.\n  const [activeState, setActiveIso] = useState(() => selected || lastIso);\n  const [lastSelected, setLastSelected] = useState(selected);\n  if (lastSelected !== selected) {\n    setLastSelected(selected);\n    if (selected) setActiveIso(selected);\n  }\n  const activeIso = days.length ? clampIso(activeState || lastIso) : \"\";\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const scrollerRef = useRef<HTMLDivElement>(null);\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const iso = pendingFocus.current;\n    if (!iso) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-day=\"${iso}\"]`)?.focus();\n  });\n\n  // Open the sideways scroller on the latest weeks, not the oldest. In RTL the end is\n  // on the left, where browsers count scrollLeft down from 0.\n  //\n  // And KEEP it there while the box changes size — a sidebar or a contents rail that\n  // appears after mount narrows the scroller, which leaves scrollLeft where it was and\n  // so shows older weeks than it opened on. The pin holds only while the view sits at\n  // the end: a user who scrolls back through the year unpins it, and a resize then\n  // leaves their position alone. (Scrolling back to the end pins it again.)\n  useLayoutEffect(() => {\n    const el = scrollerRef.current;\n    if (!el || layout !== \"weeks\") return;\n    const toEnd = () => {\n      el.scrollLeft = dirOf(el) === \"rtl\" ? -el.scrollWidth : el.scrollWidth;\n    };\n    toEnd();\n    if (typeof ResizeObserver === \"undefined\") return;\n    // |scrollLeft| covers both directions: 0 → max in LTR, 0 → -max in RTL.\n    let pinned = true;\n    const onScroll = () => {\n      pinned = Math.abs(el.scrollLeft) >= el.scrollWidth - el.clientWidth - 1;\n    };\n    const ro = new ResizeObserver(() => {\n      if (pinned) toEnd();\n    });\n    el.addEventListener(\"scroll\", onScroll, { passive: true });\n    ro.observe(el);\n    return () => {\n      ro.disconnect();\n      el.removeEventListener(\"scroll\", onScroll);\n    };\n  }, [layout, firstIso, lastIso]);\n\n  const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);\n\n  const weekdayLabels = useMemo(() => {\n    const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(ref);\n      d.setDate(ref.getDate() + i);\n      return {\n        short: d.toLocaleDateString(locale, { weekday: \"short\" }),\n        long: d.toLocaleDateString(locale, { weekday: \"long\" }),\n      };\n    });\n  }, [locale, weekStart]);\n\n  const lead = days.length ? weekdayIndex(days[0], weekStart) : 0;\n  const weekCount = Math.ceil((lead + days.length) / 7);\n  /** The day at position `i` of the week-aligned sequence (blanks before the first). */\n  const dayAt = (i: number): Date | null => (i >= lead && i - lead < days.length ? days[i - lead] : null);\n\n  const move = (e: KeyboardEvent<HTMLElement>) => {\n    const current = parseIsoDate(activeIso);\n    if (!current) return;\n    const next = new Date(current);\n    const step = horizontalStep(e.key, e.currentTarget);\n    // In \"weeks\" a row is a weekday, so sideways is a week and up/down is a day.\n    const across = layout === \"weeks\" ? 7 : 1;\n    const down = layout === \"weeks\" ? 1 : 7;\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        next.setDate(next.getDate() + step * across);\n        break;\n      case \"ArrowUp\":\n        next.setDate(next.getDate() - down);\n        break;\n      case \"ArrowDown\":\n        next.setDate(next.getDate() + down);\n        break;\n      case \"PageUp\":\n        next.setTime(addMonthsClamped(next, -1).getTime());\n        break;\n      case \"PageDown\":\n        next.setTime(addMonthsClamped(next, 1).getTime());\n        break;\n      case \"Home\":\n        next.setTime(days[0].getTime());\n        break;\n      case \"End\":\n        next.setTime(days[days.length - 1].getTime());\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    const iso = clampIso(toLocalIso(next));\n    if (iso === activeIso) return;\n    pendingFocus.current = iso;\n    setActiveIso(iso);\n  };\n\n  const legendLevels = Array.from({ length: levels + 1 }, (_, l) => l);\n\n  const cell = (d: Date, wrapClass: string, cellClass: string, withNumber: boolean) => {\n    const iso = toLocalIso(d);\n    const raw = values.get(iso);\n    const value = raw ?? 0;\n    const level = heatmapLevel(value, max, levels);\n    const fill = levelFill(level, levels, color);\n    const formattedDate = formatDay(d);\n    const formattedValue = formatValue(value);\n    const name = labels.day(formattedDate, formattedValue);\n    const label = tooltip\n      ? tooltip({ iso, date: d, value, hasData: raw !== undefined, level, formattedDate, formattedValue })\n      : name;\n    const isSelected = selected === iso;\n    // Light text once the fill is the stronger half of the mix — `--bg-surface` is the\n    // colour the scale is mixed INTO, so it is the one that contrasts with its far end\n    // on either theme.\n    const strong = level > 0 && levelPercent(level, levels) >= 45;\n    const shared = {\n      role: \"gridcell\",\n      \"data-day\": iso,\n      \"data-level\": level,\n      tabIndex: iso === activeIso ? 0 : -1,\n      \"aria-label\": name,\n      \"aria-selected\": onSelect ? isSelected : undefined,\n      onKeyDown: move,\n      onFocus: () => {\n        if (iso !== activeIso) setActiveIso(iso);\n      },\n      style: { background: fill, color: strong ? \"var(--bg-surface)\" : \"var(--text-primary)\" },\n      className: cn(\n        cellClass,\n        isSelected && \"ring-2 ring-[var(--text-primary)]\",\n        onSelect && \"cursor-pointer hover:ring-1 hover:ring-[var(--brand)]\",\n      ),\n    } as const;\n    const inner = withNumber ? (\n      <span aria-hidden className=\"text-[11px] leading-none tabular-nums\">\n        {numberFormat.format(d.getDate())}\n      </span>\n    ) : null;\n    return (\n      <Tooltip key={iso} label={label} portal redact={sensitive} role=\"none\" className={wrapClass}>\n        {onSelect ? (\n          <button type=\"button\" {...shared} onClick={() => onSelect(iso)}>\n            {inner}\n          </button>\n        ) : (\n          <div {...shared}>{inner}</div>\n        )}\n      </Tooltip>\n    );\n  };\n\n  const gridName = ariaLabel ?? labels.grid;\n  let body: ReactNode;\n  if (layout === \"weeks\") {\n    const columns = { gridTemplateColumns: `var(--heatmap-label, 2rem) repeat(${weekCount}, var(--heatmap-cell, 0.75rem))` } as CSSProperties;\n    const cellSize = \"size-[var(--heatmap-cell,0.75rem)]\";\n    // A month's name over the first column that holds its 1st — or over the first\n    // column, when the window opens far enough before the next month for it to fit.\n    const monthLabels = Array.from({ length: weekCount }, (_, w) => {\n      for (let r = 0; r < 7; r++) {\n        const d = dayAt(w * 7 + r);\n        if (d && (d.getDate() === 1 || (w === 0 && r === lead && d.getDate() <= 14))) {\n          return d.toLocaleDateString(locale, { month: \"short\" });\n        }\n      }\n      return \"\";\n    });\n    body = (\n      <div ref={scrollerRef} className=\"overflow-x-auto pb-1\">\n        <div ref={gridRef} role=\"grid\" aria-label={gridName} className=\"inline-grid gap-0.5\">\n          {/* Decoration: every cell's name already carries its month. */}\n          <div aria-hidden className=\"grid gap-0.5 text-[10px] leading-3 text-[var(--text-muted)]\" style={columns}>\n            <span />\n            {monthLabels.map((m, w) => (\n              <span key={w} className=\"overflow-visible whitespace-nowrap\">\n                {m}\n              </span>\n            ))}\n          </div>\n          {Array.from({ length: 7 }, (_, r) => (\n            <div key={r} role=\"row\" className=\"grid gap-0.5\" style={columns}>\n              <div\n                role=\"rowheader\"\n                aria-label={weekdayLabels[r].long}\n                className=\"overflow-hidden pe-1 text-[10px] leading-3 text-[var(--text-muted)]\"\n              >\n                {/* Every other weekday, as a contribution graph does: seven labels\n                    at this size are a smear. The name is there for all seven. */}\n                {r % 2 === 1 ? weekdayLabels[r].short : \"\"}\n              </div>\n              {Array.from({ length: weekCount }, (_, w) => {\n                const d = dayAt(w * 7 + r);\n                return d ? (\n                  cell(d, cellSize, cn(cellSize, \"block rounded-sm\"), false)\n                ) : (\n                  <div key={`pad-${w}`} role=\"gridcell\" className={cellSize} />\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  } else {\n    const rows = Array.from({ length: weekCount }, (_, w) => w);\n    body = (\n      <div ref={gridRef} role=\"grid\" aria-label={gridName} className=\"grid gap-1\">\n        <div role=\"row\" className=\"grid grid-cols-7 gap-1\">\n          {weekdayLabels.map((w, i) => (\n            <div\n              key={i}\n              role=\"columnheader\"\n              aria-label={w.long}\n              className=\"pb-0.5 text-center text-[10px] uppercase tracking-wide text-[var(--text-muted)]\"\n            >\n              {w.short}\n            </div>\n          ))}\n        </div>\n        {rows.map((w) => (\n          <div key={w} role=\"row\" className=\"grid grid-cols-7 gap-1\">\n            {Array.from({ length: 7 }, (_, c) => {\n              const d = dayAt(w * 7 + c);\n              return d ? (\n                cell(d, \"aspect-square w-full\", \"flex h-full w-full items-center justify-center rounded\", true)\n              ) : (\n                <div key={`pad-${c}`} role=\"gridcell\" className=\"aspect-square\" />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cn(\"min-w-0\", className)}>\n      {dropped > 0 && (\n        <div className=\"mb-2 text-xs text-[var(--text-muted)]\">{labels.truncated(dropped)}</div>\n      )}\n      {body}\n      {legend && (\n        <div aria-hidden className=\"mt-2 flex items-center justify-end gap-1 text-[10px] text-[var(--text-muted)]\">\n          <span className=\"me-0.5\">{labels.less}</span>\n          {legendLevels.map((l) => (\n            <span\n              key={l}\n              data-legend-level={l}\n              className=\"size-2.5 rounded-sm\"\n              style={{ background: levelFill(l, levels, color) }}\n            />\n          ))}\n          <span className=\"ms-0.5\">{labels.more}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["_"]}
+{"version":3,"sources":["../../src/components/calendar-heatmap.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, horizontalStep } from \"../lib/direction\";\nimport { addMonthsClamped, localeWeekStart, parseIsoDate, toLocalIso } from \"../lib/dates\";\nimport { useKitLabels, useKitLocale, useKitWeekStart } from \"../i18n/kit-labels\";\nimport { lerpHex, textOn } from \"../theme/chart-palette\";\nimport { parseHex } from \"../theme/color\";\nimport { Tooltip } from \"./tooltip\";\nimport type { WeekDay } from \"./mini-calendar\";\n\n/**\n * Every string the heatmap speaks — the `calendarHeatmap` namespace of\n * `<UiKitProvider labels>`, overridable per instance through `labels`. Dates and\n * values arrive already formatted (in `locale`, and through `formatValue`), so the\n * functions only arrange them.\n */\nexport interface CalendarHeatmapLabels {\n  /** Accessible name of the grid. */\n  grid: string;\n  /**\n   * One day: its accessible name, and the tooltip unless `tooltip` is given. `date`\n   * is the whole date in `locale` (\"Monday, 14 September 2026\"), `value` the day's\n   * figure through `formatValue`.\n   */\n  day: (date: string, value: string) => string;\n  /** The two ends of the legend's scale. */\n  less: string;\n  more: string;\n  /** `maxDays` cut the window: how many of its earliest days are not drawn. */\n  truncated: (count: number) => string;\n}\n\n/** English defaults, exported as the `calendarHeatmap` namespace of `UiKitLabels`. */\nexport const DEFAULT_CALENDAR_HEATMAP_LABELS: CalendarHeatmapLabels = {\n  grid: \"Daily values\",\n  day: (date, value) => `${date}: ${value}`,\n  less: \"Less\",\n  more: \"More\",\n  truncated: (count) =>\n    `Showing the most recent days; ${count} earlier ${count === 1 ? \"day is\" : \"days are\"} not shown.`,\n};\n\n/** One day's figure. Several entries for one date are added up. */\nexport interface CalendarHeatmapDatum {\n  /** \"YYYY-MM-DD\". */\n  date: string;\n  value: number;\n}\n\n/** What `tooltip` is told about the day under the pointer. */\nexport interface CalendarHeatmapDay {\n  iso: string;\n  date: Date;\n  /** The day's figure; `0` when `data` has no entry for it (see `hasData`). */\n  value: number;\n  hasData: boolean;\n  /** `0` = empty … `levels` = the busiest. */\n  level: number;\n  /** The whole date in `locale`. */\n  formattedDate: string;\n  /** `value` through `formatValue`. */\n  formattedValue: string;\n}\n\n/**\n * `onSelect` is omitted from the `<div>` attributes for the reason `MiniCalendar` gives:\n * the DOM event of that name is a text-selection event, and this one answers with a date.\n */\nexport interface CalendarHeatmapProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  data: readonly CalendarHeatmapDatum[];\n  /** The window, inclusive, as \"YYYY-MM-DD\". */\n  from: string;\n  to: string;\n  /**\n   * `\"weeks\"` (default): the contribution-graph shape — one COLUMN per week, the\n   * weekdays down the side, month names along the top; a year fits in ~53 small\n   * squares and scrolls sideways where it does not. `\"month\"`: a 7-column calendar\n   * with day numbers in large square cells, for a single month on a phone (switch on\n   * `useMediaQuery` and narrow `from`/`to` to the month).\n   */\n  layout?: \"weeks\" | \"month\";\n  /** The day shown as selected (\"YYYY-MM-DD\"). */\n  selected?: string;\n  /** Makes each day a button: a click (or Enter/Space) selects it — a drill-down into\n   *  that day's rows, a day panel. Without it the days are focusable but inert. */\n  onSelect?: (iso: string) => void;\n  /** How a value is written in the tooltip and the day's name. Default: `Intl.NumberFormat`\n   *  in `locale`. Pass a currency formatter for money. */\n  formatValue?: (value: number) => string;\n  /** Tooltip content for a day. Default: `labels.day(date, value)`. */\n  tooltip?: (day: CalendarHeatmapDay) => ReactNode;\n  /**\n   * Tag each tooltip `data-private`, so the host's demo-mode rule blurs it (the\n   * attribute `Tooltip redact` and `StatTile sensitive` carry). ON by default: a heatmap\n   * is almost always the user's own figures, and a missing tag is silent — the grid\n   * looks anonymous and the bubble spells the amount out on hover.\n   */\n  sensitive?: boolean;\n  /** The value that reaches the top of the scale. Default: the largest value ON SCREEN,\n   *  so a peak outside the window does not wash the drawn days out to empty. */\n  max?: number;\n  /** How many non-empty intensity steps. Default 4. */\n  levels?: number;\n  /** The scale's colour, as any CSS colour. Default `var(--brand)`; each step is this\n   *  mixed into `--bg-surface`, so the ramp follows the theme. */\n  color?: string;\n  /**\n   * A CONTINUOUS scale from `colorFrom` (the smallest value) to `colorTo` (the busiest\n   * day), instead of `levels` steps of `color` — keksdose's palette-store ramp,\n   * `seqLow` → `seqHigh`. Both are needed; `color` is then unused. Two `#rrggbb`\n   * colours are interpolated in JS, so the fill is a concrete hex and the day number's\n   * ink (in `\"month\"`) is MEASURED against it; anything else (a `var()`) is mixed with\n   * `color-mix()`. `levels` still sets `data-level` and the legend's swatch count.\n   */\n  colorFrom?: string;\n  colorTo?: string;\n  /**\n   * A fill of the caller's own for a day with a value: handed the value and the\n   * scale's `max`, returns any CSS colour. Wins over `color` and `colorFrom`/`colorTo`.\n   * Also paints the legend, at `max × level / levels`.\n   */\n  fill?: (value: number, max: number) => string;\n  /** The fill of a day with no value (or a value of 0). Default: a wash of the text\n   *  colour over the surface, which reads as a cell on both themes. */\n  emptyColor?: string;\n  /**\n   * Where the window ENDS — the day `maxDays` counts back from, and the last one drawn:\n   *\n   * - `\"to\"` (default): on `to`.\n   * - `\"today\"`: on today.\n   * - `\"latest\"`: on the last day that can carry a figure — today, or a later day that\n   *   actually has a value. A window running into the future (a report's \"all\" preset\n   *   ends a year ahead) then spends its cells on the days a person is looking for,\n   *   not on a year of empty ones.\n   * - a `\"YYYY-MM-DD\"`: on that day.\n   *\n   * Always kept inside `from`…`to`.\n   */\n  anchor?: \"to\" | \"today\" | \"latest\" | (string & {});\n  /**\n   * The most days to draw. A longer window keeps its LATEST `maxDays` and says how many\n   * it left out (`labels.truncated`) rather than silently ending. Default: no cap.\n   */\n  maxDays?: number;\n  /** Draw the Less … More legend. Default `true`. */\n  legend?: boolean;\n  /** BCP 47 tag for the dates, month and weekday names and numbers. */\n  locale?: string;\n  /** `0` = Sunday … `6` = Saturday. Default: the provider's, else the locale's. */\n  weekStartsOn?: WeekDay;\n  labels?: Partial<CalendarHeatmapLabels>;\n  className?: string;\n}\n\nconst DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {\n  weekday: \"long\",\n  day: \"numeric\",\n  month: \"long\",\n  year: \"numeric\",\n};\n\n/** The empty day: a wash of the text colour, like `--bg-hover`, so it reads as a cell\n *  on both themes without claiming any value. */\nconst EMPTY_FILL = \"color-mix(in oklab, var(--text-primary) 8%, var(--bg-surface))\";\n\nconst weekdayIndex = (d: Date, weekStart: WeekDay) => (d.getDay() - weekStart + 7) % 7;\n\n/** Where the window ends for an {@link CalendarHeatmapProps.anchor}, kept in `[from, to]`.\n *  `latestData` is the latest ISO date carrying a value, or `\"\"`. */\nexport function heatmapWindowEnd(\n  from: string,\n  to: string,\n  anchor: string,\n  latestData: string,\n  today: string = toLocalIso(new Date()),\n): string {\n  let end: string;\n  if (anchor === \"today\") end = today;\n  else if (anchor === \"latest\") end = latestData > today ? latestData : today;\n  else if (anchor === \"to\" || !parseIsoDate(anchor)) end = to;\n  else end = anchor;\n  // ISO dates sort as strings, so the clamp is plain comparison.\n  if (end > to) end = to;\n  if (end < from) end = from;\n  return end;\n}\n\n/** The step a value falls on: 0 for nothing, else 1…levels by its share of `max`. */\nexport function heatmapLevel(value: number, max: number, levels: number): number {\n  if (!(value > 0) || !(max > 0) || levels < 1) return 0;\n  return Math.min(levels, Math.max(1, Math.ceil((value / max) * levels)));\n}\n\n/** How much of `color` a step mixes into the surface: 20% for the first step, 100% for\n *  the last — the floor keeps the smallest value visibly apart from an empty day. */\nfunction levelPercent(level: number, levels: number): number {\n  if (levels <= 1) return 100;\n  return Math.round(20 + (80 * (level - 1)) / (levels - 1));\n}\n\nfunction levelFill(level: number, levels: number, color: string): string {\n  if (level === 0) return EMPTY_FILL;\n  return `color-mix(in oklab, ${color} ${levelPercent(level, levels)}%, var(--bg-surface))`;\n}\n\n/**\n * Days as a grid of shaded squares — how much happened on each, at a glance\n * (a contribution graph, a spending calendar).\n *\n * **Every day is a cell you can reach.** The grid is a `role=\"grid\"` with ONE tab\n * stop (the roving tabindex, as in `MiniCalendar`); the arrows move by the grid's own\n * geometry — in `\"weeks\"` ↑/↓ are the previous/next day and ←/→ a week, in `\"month\"`\n * the other way round, mirrored in RTL — PageUp/PageDown move a month and Home/End go\n * to the window's first/last day. Each cell is named with its whole date AND its value,\n * because the colour is not something a screen reader can say, and carries\n * `data-day=\"YYYY-MM-DD\"` as its identity for tests and for the host. Note that in\n * `\"weeks\"` the cells are in DOM order by WEEKDAY ROW (all Mondays, then all\n * Tuesdays…), not by date — query by `data-day`, not by position.\n *\n * The tooltip is portalled (a year of squares always sits in a sideways scroller) and\n * `data-private` unless `sensitive={false}`. Cell size in `\"weeks\"` is the CSS variable\n * `--heatmap-cell` (default `0.75rem`): `style={{ \"--heatmap-cell\": \"1rem\" }}`.\n */\nexport function CalendarHeatmap({\n  data,\n  from,\n  to,\n  layout = \"weeks\",\n  selected,\n  onSelect,\n  formatValue: formatValueProp,\n  tooltip,\n  sensitive = true,\n  max: maxProp,\n  levels = 4,\n  color = \"var(--brand)\",\n  colorFrom,\n  colorTo,\n  fill: fillProp,\n  emptyColor,\n  anchor = \"to\",\n  maxDays,\n  legend = true,\n  locale: localeProp,\n  weekStartsOn,\n  labels: labelsProp,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: CalendarHeatmapProps) {\n  const labels = useKitLabels(\"calendarHeatmap\", DEFAULT_CALENDAR_HEATMAP_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const providerWeekStart = useKitWeekStart();\n  const weekStart: WeekDay = weekStartsOn ?? providerWeekStart ?? localeWeekStart(locale);\n  const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const formatValue = formatValueProp ?? ((v: number) => numberFormat.format(v));\n\n  const values = useMemo(() => {\n    const m = new Map<string, number>();\n    for (const p of data) m.set(p.date, (m.get(p.date) ?? 0) + p.value);\n    return m;\n  }, [data]);\n\n  // The window, trimmed from the FRONT: the days a person looks for are the recent\n  // ones, and a cap that kept the oldest would end the calendar before today.\n  const latestData = useMemo(() => {\n    let latest = \"\";\n    for (const [iso, v] of values) if (v !== 0 && iso > latest) latest = iso;\n    return latest;\n  }, [values]);\n  const windowEnd = heatmapWindowEnd(from, to, anchor, latestData);\n\n  const { days, dropped } = useMemo(() => {\n    const start = parseIsoDate(from);\n    const end = parseIsoDate(windowEnd);\n    const list: Date[] = [];\n    if (!start || !end || end < start) return { days: list, dropped: 0 };\n    const cursor = new Date(end);\n    const cap = maxDays && maxDays > 0 ? maxDays : Infinity;\n    while (cursor >= start && list.length < cap) {\n      list.unshift(new Date(cursor));\n      cursor.setDate(cursor.getDate() - 1);\n    }\n    const first = list[0];\n    const trimmed = first ? Math.round((first.getTime() - start.getTime()) / 86_400_000) : 0;\n    return { days: list, dropped: Math.max(0, trimmed) };\n  }, [from, windowEnd, maxDays]);\n\n  const firstIso = days.length ? toLocalIso(days[0]) : \"\";\n  const lastIso = days.length ? toLocalIso(days[days.length - 1]) : \"\";\n\n  const max = useMemo(() => {\n    if (maxProp !== undefined) return maxProp;\n    let m = 0;\n    for (const d of days) m = Math.max(m, values.get(toLocalIso(d)) ?? 0);\n    return m;\n  }, [maxProp, days, values]);\n\n  const clampIso = (iso: string) => (iso < firstIso ? firstIso : iso > lastIso ? lastIso : iso);\n\n  // The roving tab stop: the selected day, else the latest one.\n  const [activeState, setActiveIso] = useState(() => selected || lastIso);\n  const [lastSelected, setLastSelected] = useState(selected);\n  if (lastSelected !== selected) {\n    setLastSelected(selected);\n    if (selected) setActiveIso(selected);\n  }\n  const activeIso = days.length ? clampIso(activeState || lastIso) : \"\";\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const scrollerRef = useRef<HTMLDivElement>(null);\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const iso = pendingFocus.current;\n    if (!iso) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-day=\"${iso}\"]`)?.focus();\n  });\n\n  // Open the sideways scroller on the latest weeks, not the oldest. In RTL the end is\n  // on the left, where browsers count scrollLeft down from 0.\n  //\n  // And KEEP it there while the box changes size — a sidebar or a contents rail that\n  // appears after mount narrows the scroller, which leaves scrollLeft where it was and\n  // so shows older weeks than it opened on. The pin holds only while the view sits at\n  // the end: a user who scrolls back through the year unpins it, and a resize then\n  // leaves their position alone. (Scrolling back to the end pins it again.)\n  useLayoutEffect(() => {\n    const el = scrollerRef.current;\n    if (!el || layout !== \"weeks\") return;\n    const toEnd = () => {\n      el.scrollLeft = dirOf(el) === \"rtl\" ? -el.scrollWidth : el.scrollWidth;\n    };\n    toEnd();\n    if (typeof ResizeObserver === \"undefined\") return;\n    // |scrollLeft| covers both directions: 0 → max in LTR, 0 → -max in RTL.\n    let pinned = true;\n    const onScroll = () => {\n      pinned = Math.abs(el.scrollLeft) >= el.scrollWidth - el.clientWidth - 1;\n    };\n    const ro = new ResizeObserver(() => {\n      if (pinned) toEnd();\n    });\n    el.addEventListener(\"scroll\", onScroll, { passive: true });\n    ro.observe(el);\n    return () => {\n      ro.disconnect();\n      el.removeEventListener(\"scroll\", onScroll);\n    };\n  }, [layout, firstIso, lastIso]);\n\n  const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);\n\n  const weekdayLabels = useMemo(() => {\n    const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(ref);\n      d.setDate(ref.getDate() + i);\n      return {\n        short: d.toLocaleDateString(locale, { weekday: \"short\" }),\n        long: d.toLocaleDateString(locale, { weekday: \"long\" }),\n      };\n    });\n  }, [locale, weekStart]);\n\n  const lead = days.length ? weekdayIndex(days[0], weekStart) : 0;\n  const weekCount = Math.ceil((lead + days.length) / 7);\n  /** The day at position `i` of the week-aligned sequence (blanks before the first). */\n  const dayAt = (i: number): Date | null => (i >= lead && i - lead < days.length ? days[i - lead] : null);\n\n  const move = (e: KeyboardEvent<HTMLElement>) => {\n    const current = parseIsoDate(activeIso);\n    if (!current) return;\n    const next = new Date(current);\n    const step = horizontalStep(e.key, e.currentTarget);\n    // In \"weeks\" a row is a weekday, so sideways is a week and up/down is a day.\n    const across = layout === \"weeks\" ? 7 : 1;\n    const down = layout === \"weeks\" ? 1 : 7;\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        next.setDate(next.getDate() + step * across);\n        break;\n      case \"ArrowUp\":\n        next.setDate(next.getDate() - down);\n        break;\n      case \"ArrowDown\":\n        next.setDate(next.getDate() + down);\n        break;\n      case \"PageUp\":\n        next.setTime(addMonthsClamped(next, -1).getTime());\n        break;\n      case \"PageDown\":\n        next.setTime(addMonthsClamped(next, 1).getTime());\n        break;\n      case \"Home\":\n        next.setTime(days[0].getTime());\n        break;\n      case \"End\":\n        next.setTime(days[days.length - 1].getTime());\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    const iso = clampIso(toLocalIso(next));\n    if (iso === activeIso) return;\n    pendingFocus.current = iso;\n    setActiveIso(iso);\n  };\n\n  const legendLevels = Array.from({ length: levels + 1 }, (_, l) => l);\n  const empty = emptyColor ?? EMPTY_FILL;\n  const continuous = colorFrom !== undefined && colorTo !== undefined;\n  const hexRamp = continuous && parseHex(colorFrom) != null && parseHex(colorTo) != null;\n\n  /** A day's fill, and the ink its number is set in (`\"month\"`). */\n  const paint = (value: number, level: number): { fill: string; ink: string } => {\n    if (level === 0) return { fill: empty, ink: \"var(--text-primary)\" };\n    if (fillProp || continuous) {\n      const t = max > 0 ? Math.min(1, Math.max(0, value / max)) : 1;\n      const fill = fillProp\n        ? fillProp(value, max)\n        : hexRamp\n          ? lerpHex(colorFrom!, colorTo!, t)\n          : `color-mix(in oklab, ${colorTo} ${Math.round(t * 100)}%, ${colorFrom})`;\n      // Measured where the fill is a colour; a mix of references cannot be measured,\n      // and the page's own text colour is the safe answer there.\n      const measured = textOn(fill);\n      return { fill, ink: measured === \"currentColor\" ? \"var(--text-primary)\" : measured };\n    }\n    // Light text once the fill is the stronger half of the mix — `--bg-surface` is the\n    // colour the scale is mixed INTO, so it is the one that contrasts with its far end\n    // on either theme.\n    const strong = levelPercent(level, levels) >= 45;\n    return {\n      fill: levelFill(level, levels, color),\n      ink: strong ? \"var(--bg-surface)\" : \"var(--text-primary)\",\n    };\n  };\n  // The legend's swatches: a value that lands on each step (the top one on `max`).\n  const legendFill = (l: number) => paint(((max > 0 ? max : 1) * l) / levels, l).fill;\n\n  const cell = (d: Date, wrapClass: string, cellClass: string, withNumber: boolean) => {\n    const iso = toLocalIso(d);\n    const raw = values.get(iso);\n    const value = raw ?? 0;\n    const level = heatmapLevel(value, max, levels);\n    const { fill, ink } = paint(value, level);\n    const formattedDate = formatDay(d);\n    const formattedValue = formatValue(value);\n    const name = labels.day(formattedDate, formattedValue);\n    const label = tooltip\n      ? tooltip({ iso, date: d, value, hasData: raw !== undefined, level, formattedDate, formattedValue })\n      : name;\n    const isSelected = selected === iso;\n    const shared = {\n      role: \"gridcell\",\n      \"data-day\": iso,\n      \"data-level\": level,\n      tabIndex: iso === activeIso ? 0 : -1,\n      \"aria-label\": name,\n      \"aria-selected\": onSelect ? isSelected : undefined,\n      onKeyDown: move,\n      onFocus: () => {\n        if (iso !== activeIso) setActiveIso(iso);\n      },\n      style: { background: fill, color: ink },\n      className: cn(\n        cellClass,\n        isSelected && \"ring-2 ring-[var(--text-primary)]\",\n        onSelect && \"cursor-pointer hover:ring-1 hover:ring-[var(--brand)]\",\n      ),\n    } as const;\n    const inner = withNumber ? (\n      <span aria-hidden className=\"text-[11px] leading-none tabular-nums\">\n        {numberFormat.format(d.getDate())}\n      </span>\n    ) : null;\n    return (\n      <Tooltip key={iso} label={label} portal redact={sensitive} role=\"none\" className={wrapClass}>\n        {onSelect ? (\n          <button type=\"button\" {...shared} onClick={() => onSelect(iso)}>\n            {inner}\n          </button>\n        ) : (\n          <div {...shared}>{inner}</div>\n        )}\n      </Tooltip>\n    );\n  };\n\n  const gridName = ariaLabel ?? labels.grid;\n  let body: ReactNode;\n  if (layout === \"weeks\") {\n    const columns = { gridTemplateColumns: `var(--heatmap-label, 2rem) repeat(${weekCount}, var(--heatmap-cell, 0.75rem))` } as CSSProperties;\n    const cellSize = \"size-[var(--heatmap-cell,0.75rem)]\";\n    // A month's name over the first column that holds its 1st — or over the first\n    // column, when the window opens far enough before the next month for it to fit.\n    const monthLabels = Array.from({ length: weekCount }, (_, w) => {\n      for (let r = 0; r < 7; r++) {\n        const d = dayAt(w * 7 + r);\n        if (d && (d.getDate() === 1 || (w === 0 && r === lead && d.getDate() <= 14))) {\n          return d.toLocaleDateString(locale, { month: \"short\" });\n        }\n      }\n      return \"\";\n    });\n    body = (\n      <div ref={scrollerRef} className=\"overflow-x-auto pb-1\">\n        <div ref={gridRef} role=\"grid\" aria-label={gridName} className=\"inline-grid gap-0.5\">\n          {/* Decoration: every cell's name already carries its month. */}\n          <div aria-hidden className=\"grid gap-0.5 text-[10px] leading-3 text-[var(--text-muted)]\" style={columns}>\n            <span />\n            {monthLabels.map((m, w) => (\n              <span key={w} className=\"overflow-visible whitespace-nowrap\">\n                {m}\n              </span>\n            ))}\n          </div>\n          {Array.from({ length: 7 }, (_, r) => (\n            <div key={r} role=\"row\" className=\"grid gap-0.5\" style={columns}>\n              <div\n                role=\"rowheader\"\n                aria-label={weekdayLabels[r].long}\n                className=\"overflow-hidden pe-1 text-[10px] leading-3 text-[var(--text-muted)]\"\n              >\n                {/* Every other weekday, as a contribution graph does: seven labels\n                    at this size are a smear. The name is there for all seven. */}\n                {r % 2 === 1 ? weekdayLabels[r].short : \"\"}\n              </div>\n              {Array.from({ length: weekCount }, (_, w) => {\n                const d = dayAt(w * 7 + r);\n                return d ? (\n                  cell(d, cellSize, cn(cellSize, \"block rounded-sm\"), false)\n                ) : (\n                  <div key={`pad-${w}`} role=\"gridcell\" className={cellSize} />\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  } else {\n    const rows = Array.from({ length: weekCount }, (_, w) => w);\n    body = (\n      <div ref={gridRef} role=\"grid\" aria-label={gridName} className=\"grid gap-1\">\n        <div role=\"row\" className=\"grid grid-cols-7 gap-1\">\n          {weekdayLabels.map((w, i) => (\n            <div\n              key={i}\n              role=\"columnheader\"\n              aria-label={w.long}\n              className=\"pb-0.5 text-center text-[10px] uppercase tracking-wide text-[var(--text-muted)]\"\n            >\n              {w.short}\n            </div>\n          ))}\n        </div>\n        {rows.map((w) => (\n          <div key={w} role=\"row\" className=\"grid grid-cols-7 gap-1\">\n            {Array.from({ length: 7 }, (_, c) => {\n              const d = dayAt(w * 7 + c);\n              return d ? (\n                cell(d, \"aspect-square w-full\", \"flex h-full w-full items-center justify-center rounded\", true)\n              ) : (\n                <div key={`pad-${c}`} role=\"gridcell\" className=\"aspect-square\" />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cn(\"min-w-0\", className)}>\n      {dropped > 0 && (\n        <div className=\"mb-2 text-xs text-[var(--text-muted)]\">{labels.truncated(dropped)}</div>\n      )}\n      {body}\n      {legend && (\n        <div aria-hidden className=\"mt-2 flex items-center justify-end gap-1 text-[10px] text-[var(--text-muted)]\">\n          <span className=\"me-0.5\">{labels.less}</span>\n          {legendLevels.map((l) => (\n            <span\n              key={l}\n              data-legend-level={l}\n              className=\"size-2.5 rounded-sm\"\n              style={{ background: legendFill(l) }}\n            />\n          ))}\n          <span className=\"ms-0.5\">{labels.more}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["_"]}

package/dist/components/chip.d.ts

@@ -166,7 +166,8 @@ type ChipProps = ChipBaseProps & ({
     /**
      * Renders the link for `href` — pass your router's `<Link>` here, since a
      * plain `<a>` reloads a single-page app (keksdose's account-menu admin pill).
-     * Default: `<a>`. Ignored without `href`.
+     * Default: the `<UiKitProvider linkComponent>`, then `<a>`. Ignored without
+     * `href`.
      *
      * A render function rather than an `as={Link}`, for three reasons. It is the
      * API `StatTile` already has (`renderLink`), so a consumer learns it once.

package/dist/components/chip.js

@@ -5,7 +5,8 @@ import { Check, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { horizontalStep } from "../lib/direction.js";
 import { FIELD_INVALID } from "./ui.js";
-import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink, useKitLocale } from "../i18n/kit-labels.js";
+import { pickLinkRenderer } from "./text-link.js";
 const TONE = {
   neutral: {
     idle: "border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-secondary)]",
@@ -187,6 +188,7 @@ const Chip = forwardRef(function Chip2({
   ...rest
 }, ref) {
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { remove: removeLabel });
+  const kitLink = useKitLink();
   const s = SIZE[size];
   const interactive = !!href || !!onClick;
   const radius = shape === "square" ? size === "sm" || size === "xs" ? "rounded" : "rounded-md" : "rounded-full";
@@ -274,10 +276,11 @@ const Chip = forwardRef(function Chip2({
       className: remove ? inner : look,
       children: body
     };
-    const link = renderLink ? (
+    const render = pickLinkRenderer(renderLink, kitLink, href);
+    const link = render ? (
       // Through a component rather than called here, so the forwarded ref arrives as
       // an ordinary prop of an element and is never handed to a function mid-render.
-      /* @__PURE__ */ jsx(RenderedLink, { render: renderLink, ...linkProps })
+      /* @__PURE__ */ jsx(RenderedLink, { render, ...linkProps })
     ) : /* @__PURE__ */ jsx(
       "a",
       {

package/dist/components/chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/chip.tsx"],"sourcesContent":["import { forwardRef, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { Check, X } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID } from \"./ui\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/**\n * A chip: a compact pill carrying one value.\n *\n * Three jobs, deliberately one component. A chip can be inert (a tag on a row), a link\n * (a jump to a section), or a toggle (a filter that is on or off) — and the difference is\n * which prop you pass, not which component you pick. Keeping them together is what stops\n * an app growing three near-identical pills that drift apart; it is the shape this kit\n * already uses for `Button`, which is a link when it is given an href.\n *\n * A chip is not a `Button`. It is smaller, it is rounded to a pill, and it reads as a\n * VALUE rather than as an action — which matters because a row of eight buttons says\n * \"choose one of eight things to do\" and a row of eight chips says \"here are eight\n * things\". Using `Button` for both is the mistake this exists to prevent.\n */\n\nexport type ChipTone =\n  | \"neutral\"\n  | \"brand\"\n  | \"danger\"\n  | \"warning\"\n  | \"success\"\n  | \"info\"\n  | \"income\"\n  | \"expense\"\n  | ChipHue;\n/**\n * Categorical hues (0.10.0): colour that says \"a different value\" and nothing more —\n * kastlan's status-badge.tsx paints ~15 enums in 9 Tailwind hues by hand. Four of those\n * nine are semantic and already tones (green = `success`, yellow = `warning`, red =\n * `danger`, gray = `neutral`); these five are the rest, each a `--hue-*` token triple\n * in tokens.css with a light and a dark value. Use a semantic tone when the value HAS a\n * meaning (overdue is `danger`), a hue when it only needs telling apart (sent vs\n * accepted vs invoiced).\n */\nexport type ChipHue = \"blue\" | \"indigo\" | \"purple\" | \"teal\" | \"orange\";\n/** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px.\n *  `xs` (0.10.0) is 11px type at `px-1.5` — keksdose's goal markers and budget-cell\n *  badges, which sit inside a figure's line and must not make it taller. */\nexport type ChipSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n/**\n * How much of the tone the chip wears.\n *\n * - `soft` (default): the tinted surface every chip has had.\n * - `outline`: the tone's border and text on NO surface — keksdose's DEV badge in the\n *   account menu and kastlan's 27 shadcn `variant=\"outline\"` badges, which sit on\n *   coloured rows where a second tint would muddy the row.\n * - `solid`: the tone as a fill under contrasting text — the \"count\" pill (unread\n *   messages, open tasks). It centres its content and sets figures tabular, so a\n *   one-digit count is a round dot and \"9\" → \"10\" does not jiggle the row.\n * - `dot` (0.10.0): no pill at all — a dot in the tone's colour before plain text, for\n *   a status in a dense list or a table column where eight tinted pills in a column\n *   would outshout the figures beside them (kastlan's unit picker already draws its\n *   UnitStatus this way, from a separate `dotColor` map).\n */\nexport type ChipVariant = \"soft\" | \"outline\" | \"solid\" | \"dot\";\n/** `pill` (default) is fully rounded; `square` has the small radius of a field or a\n *  button — for a chip that sits in a table cell or beside square controls. */\nexport type ChipShape = \"pill\" | \"square\";\n\nconst TONE: Record<ChipTone, { idle: string; selected: string }> = {\n  neutral: {\n    idle: \"border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-secondary)]\",\n    selected: \"border-[var(--border-strong)] bg-[var(--bg-active)] text-[var(--text-primary)]\",\n  },\n  brand: {\n    idle: \"border-[var(--border)] bg-[var(--brand-bg)] text-[var(--brand-muted)]\",\n    selected: \"border-[var(--brand)] bg-[var(--brand)] text-[var(--brand-contrast)]\",\n  },\n  danger: {\n    idle: \"border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)]\",\n    selected: \"border-[var(--danger)] bg-[var(--danger)] text-[var(--danger-contrast)]\",\n  },\n  warning: {\n    idle: \"border-[var(--warning-border)] bg-[var(--warning-bg)] text-[var(--warning)]\",\n    selected: \"border-[var(--warning)] bg-[var(--warning-bg)] text-[var(--warning)]\",\n  },\n  success: {\n    idle: \"border-[var(--success-border)] bg-[var(--success-bg)] text-[var(--success)]\",\n    selected: \"border-[var(--success)] bg-[var(--success-bg)] text-[var(--success)]\",\n  },\n  info: {\n    idle: \"border-[var(--info-border)] bg-[var(--info-bg)] text-[var(--info)]\",\n    selected: \"border-[var(--info)] bg-[var(--info-bg)] text-[var(--info)]\",\n  },\n  // The money pair (Keksdose's direction toggle). Only the TEXT and the BORDER carry\n  // the tint, on the neutral chip's own surfaces: the money tokens are chosen for text\n  // contrast, and a filled amber pill beside an amber figure reads as one smear.\n  // `border-current` takes its hue from the text, so the two cannot drift apart.\n  income: {\n    idle: \"border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-income)]\",\n    selected: \"border-current bg-[var(--bg-active)] text-[var(--money-income)]\",\n  },\n  expense: {\n    idle: \"border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-expense)]\",\n    selected: \"border-current bg-[var(--bg-active)] text-[var(--money-expense)]\",\n  },\n  // The categorical hues: the `info` recipe with its own token triple, so a hue chip\n  // and a status chip in one row carry the same weight.\n  blue: {\n    idle: \"border-[var(--hue-blue-border)] bg-[var(--hue-blue-bg)] text-[var(--hue-blue)]\",\n    selected: \"border-[var(--hue-blue)] bg-[var(--hue-blue-bg)] text-[var(--hue-blue)]\",\n  },\n  indigo: {\n    idle: \"border-[var(--hue-indigo-border)] bg-[var(--hue-indigo-bg)] text-[var(--hue-indigo)]\",\n    selected: \"border-[var(--hue-indigo)] bg-[var(--hue-indigo-bg)] text-[var(--hue-indigo)]\",\n  },\n  purple: {\n    idle: \"border-[var(--hue-purple-border)] bg-[var(--hue-purple-bg)] text-[var(--hue-purple)]\",\n    selected: \"border-[var(--hue-purple)] bg-[var(--hue-purple-bg)] text-[var(--hue-purple)]\",\n  },\n  teal: {\n    idle: \"border-[var(--hue-teal-border)] bg-[var(--hue-teal-bg)] text-[var(--hue-teal)]\",\n    selected: \"border-[var(--hue-teal)] bg-[var(--hue-teal-bg)] text-[var(--hue-teal)]\",\n  },\n  orange: {\n    idle: \"border-[var(--hue-orange-border)] bg-[var(--hue-orange-bg)] text-[var(--hue-orange)]\",\n    selected: \"border-[var(--hue-orange)] bg-[var(--hue-orange-bg)] text-[var(--hue-orange)]\",\n  },\n};\n\n// `outline` idle looks: the tone's border and text, the surface left to whatever the\n// chip sits on. Selected still takes the tone's `selected` look (below), because an\n// outline toggle that stays an outline when on has no visible state.\nconst OUTLINE: Record<ChipTone, string> = {\n  neutral: \"border-[var(--border-strong)] bg-transparent text-[var(--text-secondary)]\",\n  brand: \"border-[var(--brand)] bg-transparent text-[var(--brand)]\",\n  danger: \"border-[var(--danger-border)] bg-transparent text-[var(--danger)]\",\n  warning: \"border-[var(--warning-border)] bg-transparent text-[var(--warning)]\",\n  success: \"border-[var(--success-border)] bg-transparent text-[var(--success)]\",\n  info: \"border-[var(--info-border)] bg-transparent text-[var(--info)]\",\n  income: \"border-current/60 bg-transparent text-[var(--money-income)]\",\n  expense: \"border-current/60 bg-transparent text-[var(--money-expense)]\",\n  blue: \"border-[var(--hue-blue-border)] bg-transparent text-[var(--hue-blue)]\",\n  indigo: \"border-[var(--hue-indigo-border)] bg-transparent text-[var(--hue-indigo)]\",\n  purple: \"border-[var(--hue-purple-border)] bg-transparent text-[var(--hue-purple)]\",\n  teal: \"border-[var(--hue-teal-border)] bg-transparent text-[var(--hue-teal)]\",\n  orange: \"border-[var(--hue-orange-border)] bg-transparent text-[var(--hue-orange)]\",\n};\n\n// `solid`: the fill under its contrast pair. Only brand and danger have a declared\n// `-contrast` token; the other hues are 700s in the light theme and 300s in the dark\n// one, so `--text-inverse` (the surface colour) is the side of the pair that contrasts\n// with them in both — which is what the inverse token is for. The border goes\n// transparent rather than away, so a solid chip is exactly as tall as a soft one.\nconst SOLID: Record<ChipTone, string> = {\n  neutral: \"border-transparent bg-[var(--bg-inverse)] text-[var(--text-inverse)]\",\n  brand: \"border-transparent bg-[var(--brand)] text-[var(--brand-contrast)]\",\n  danger: \"border-transparent bg-[var(--danger)] text-[var(--danger-contrast)]\",\n  warning: \"border-transparent bg-[var(--warning)] text-[var(--text-inverse)]\",\n  success: \"border-transparent bg-[var(--success)] text-[var(--text-inverse)]\",\n  info: \"border-transparent bg-[var(--info)] text-[var(--text-inverse)]\",\n  income: \"border-transparent bg-[var(--money-income)] text-[var(--text-inverse)]\",\n  expense: \"border-transparent bg-[var(--money-expense)] text-[var(--text-inverse)]\",\n  blue: \"border-transparent bg-[var(--hue-blue)] text-[var(--text-inverse)]\",\n  indigo: \"border-transparent bg-[var(--hue-indigo)] text-[var(--text-inverse)]\",\n  purple: \"border-transparent bg-[var(--hue-purple)] text-[var(--text-inverse)]\",\n  teal: \"border-transparent bg-[var(--hue-teal)] text-[var(--text-inverse)]\",\n  orange: \"border-transparent bg-[var(--hue-orange)] text-[var(--text-inverse)]\",\n};\n\n/** `dot`: the fill of the dot itself — the tone's strongest colour, which is the one\n *  chosen to read on the page surface in both themes. Neutral takes the muted ink: a\n *  grey dot is \"no particular state\", not a darker black. */\nconst DOT: Record<ChipTone, string> = {\n  neutral: \"bg-[var(--text-muted)]\",\n  brand: \"bg-[var(--brand)]\",\n  danger: \"bg-[var(--danger)]\",\n  warning: \"bg-[var(--warning)]\",\n  success: \"bg-[var(--success)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n  blue: \"bg-[var(--hue-blue)]\",\n  indigo: \"bg-[var(--hue-indigo)]\",\n  purple: \"bg-[var(--hue-purple)]\",\n  teal: \"bg-[var(--hue-teal)]\",\n  orange: \"bg-[var(--hue-orange)]\",\n};\n\n/** Per size: the dot's diameter. */\nconst DOT_SIZE: Record<ChipSize, string> = { xs: \"size-1.5\", sm: \"size-2\", md: \"size-2\", lg: \"size-2.5\" };\n\n/** The status-badge type (`caps`): a size step down, heavier and tracked, because\n *  capitals at body size shout and capitals untracked run together. Per size, so it\n *  replaces the size's own `text-*` through tailwind-merge. */\nconst CAPS: Record<ChipSize, string> = {\n  xs: \"text-[10px] font-semibold uppercase tracking-wider\",\n  sm: \"text-[10px] font-semibold uppercase tracking-wider\",\n  md: \"text-[11px] font-semibold uppercase tracking-wider\",\n  lg: \"text-xs font-semibold uppercase tracking-wider\",\n};\n\nfunction surfaceOf(tone: ChipTone, variant: ChipVariant, selected: boolean | undefined): string {\n  const palette = TONE[tone];\n  if (variant === \"dot\") {\n    // No surface and no border colour: the dot carries the tone, the text stays ink.\n    // The border goes transparent rather than away, so a dot chip lines up with a pill.\n    return selected\n      ? \"border-transparent bg-transparent font-medium text-[var(--text-primary)]\"\n      : \"border-transparent bg-transparent text-[var(--text-secondary)]\";\n  }\n  if (variant === \"solid\") {\n    // A solid chip is already the strongest look there is, so \"on\" is a ring round it.\n    return cn(SOLID[tone], selected && \"ring-2 ring-[var(--border-strong)] ring-offset-1 ring-offset-[var(--bg-surface)]\");\n  }\n  if (selected) return palette.selected;\n  return variant === \"outline\" ? OUTLINE[tone] : palette.idle;\n}\n\n/** What {@link ChipProps.renderLink} is handed: everything the chip would have put on\n *  its own `<a>`. Spread it onto your router's link, mapping `href` to what the link\n *  calls it — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface ChipLinkProps {\n  href: string;\n  /** The chip's whole look — keep it, or the pill is a bare link. */\n  className: string;\n  children: ReactNode;\n  /** The chip's forwarded ref. React 19 passes it to a function component as a prop. */\n  ref?: Ref<HTMLAnchorElement>;\n  \"aria-current\"?: \"true\";\n  /**\n   * The chip's `onClick`, when it was given one — spread it onto the link with the\n   * rest. Carried here so a caller need not close over it twice: keksdose's admin pill\n   * in the account menu closes the menu on the way to /admin (account-menu.tsx), and\n   * with `onClick` on the Chip its `renderLink` stays the one-liner\n   * `({ href, ...p }) => <Link to={href} {...p} />`.\n   */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  id?: string;\n  title?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\n/**\n * `body` is the whole pill when the chip is ONE element. When a link or a button also has\n * a dismiss control, the pill is a wrapper holding two siblings (see the note on\n * {@link Chip}): `split` is then the interactive part's own padding — the full start\n * inset, a short end one before the ×; `tail` is the wrapper's end inset after the ×.\n */\nconst SIZE: Record<\n  ChipSize,\n  { body: string; split: string; tail: string; icon: string; remove: string }\n> = {\n  xs: {\n    body: \"gap-1 px-1.5 py-0 text-[11px] leading-4\",\n    split: \"gap-1 ps-1.5 pe-0.5 py-0 text-[11px] leading-4\",\n    tail: \"pe-1\",\n    icon: \"size-3\",\n    remove: \"size-2.5\",\n  },\n  sm: {\n    body: \"gap-1 px-2 py-0.5 text-xs\",\n    split: \"gap-1 ps-2 pe-1 py-0.5 text-xs\",\n    tail: \"pe-1.5\",\n    icon: \"size-3\",\n    remove: \"size-3\",\n  },\n  md: {\n    body: \"gap-1.5 px-2.5 py-1 text-sm\",\n    split: \"gap-1.5 ps-2.5 pe-1.5 py-1 text-sm\",\n    tail: \"pe-2\",\n    icon: \"size-3.5\",\n    remove: \"size-3.5\",\n  },\n  lg: {\n    body: \"min-h-11 gap-2 px-4 py-2 text-sm\",\n    split: \"min-h-11 gap-2 ps-4 pe-2 py-2 text-sm\",\n    tail: \"min-h-11 pe-3.5\",\n    icon: \"size-4\",\n    remove: \"size-4\",\n  },\n};\n\nconst CHIP_PILL = \"inline-flex max-w-full items-center rounded-full border transition-colors\";\n// `focus-visible`, not `focus`: a chip commonly receives focus programmatically (the\n// ChipInput moves focus onto one after a removal) and a ring that appears on a\n// pointer click reads as a stuck selection.\nconst CHIP_RING =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]\";\nconst CHIP_BASE = `${CHIP_PILL} ${CHIP_RING}`;\n\ninterface ChipBaseProps {\n  children: ReactNode;\n  tone?: ChipTone;\n  size?: ChipSize;\n  /** See {@link ChipVariant}. Default `soft`. */\n  variant?: ChipVariant;\n  /** See {@link ChipShape}. Default `pill`. */\n  shape?: ChipShape;\n  /**\n   * The uppercase, tracked \"status badge\" type — keksdose's ~25 PAID / DRAFT /\n   * OVERDUE / ADMIN badges, each spelling `uppercase tracking-wide text-[10px]` by\n   * hand. A flag rather than a fourth `variant` because it is TYPE, not surface: a\n   * status badge is soft, outlined or solid as the row needs, and a `variant=\"tag\"`\n   * would have had to pick one. Screen readers read the text as written, not as\n   * drawn, so write it in normal case.\n   */\n  caps?: boolean;\n  icon?: LucideIcon;\n  /**\n   * Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a\n   * toggle.\n   *\n   * On an ON/OFF toggle, keep the LABEL the same in both states and let `selected`\n   * carry the state. A label that flips with it (\"Skip this month\" / \"Ask again this\n   * month\") is announced together with \"pressed\", and then says the opposite of what\n   * it does.\n   *\n   * A control that switches between two NAMED states (outflow ⇄ inflow) is not a\n   * toggle but an ACTION button: leave `selected` out, let the visible label and the\n   * tone follow the state (\"− Outflow\" / \"+ Inflow\"), and name the action in\n   * `aria-label` (\"Direction: outflow — tap for inflow\"). Without `selected` the chip\n   * reports no pressed state at all. A fixed label there contradicts the figure beside\n   * it — \"+ Outflow\" in green next to an inflow (keksdose #417).\n   */\n  selected?: boolean;\n  /**\n   * Checkbox mode (0.10.0), for a toggle chip (`onClick` + `selected`): a small box\n   * at the start that shows a tick when `selected`, and the button reports\n   * `role=\"checkbox\"` + `aria-checked` instead of `aria-pressed`. For a set of\n   * include/exclude choices where \"on\" must read as TICKED, not merely tinted —\n   * keksdose's add-group-card (the \"which categories come along\" pills), which put a\n   * real `<Checkbox>` inside a `<label>` pill by hand. The box is drawn in both\n   * states so ticking one never shifts its label.\n   */\n  checkbox?: boolean;\n  /** Renders a dismiss affordance. Works alongside `href`/`onClick` — see the note below. */\n  onRemove?: () => void;\n  /** Accessible name for the dismiss button. Default: `common.remove` from the\n   *  {@link UiKitProvider}, else \"Remove\". */\n  removeLabel?: string;\n  /** Disables the × ONLY — the chip itself stays a working link or toggle. For the\n   *  value that may not be removed right now (the last filter of a required set, a\n   *  tag the user may read but not edit) where `disabled` would also kill the chip's\n   *  own action. */\n  removeDisabled?: boolean;\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Roving focus, for a container that manages a row of chips (see {@link ChipInput}).\n   * A chip with no `href`/`onClick` is inert and unfocusable by default; give it a\n   * `tabIndex` and a `role` and it becomes the thing arrow keys move between.\n   */\n  tabIndex?: number;\n  role?: string;\n  onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;\n  onFocus?: () => void;\n  /** Accessible name, when the visible text is not the whole story. */\n  \"aria-label\"?: string;\n  /** Any other ARIA attribute — `aria-describedby`, `aria-expanded`, `aria-controls`,\n   *  `aria-haspopup` — reaches the chip's interactive element. */\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  /** A test id, a `data-tour` anchor, or any other data attribute. */\n  [key: `data-${string}`]: unknown;\n  id?: string;\n  /** A native tooltip. For anything a user must read, prefer the kit's `Tooltip`. */\n  title?: string;\n}\n\n/**\n * A chip is a link OR a button, never both — so the types say so. Before 0.7.0 both were\n * accepted and `onClick` was silently dropped whenever `href` was set. A LINK may still\n * run code on its way (close the menu it sits in): that is an `onClick` typed for the\n * anchor, on the link shape, and the pill stays a link — no `aria-pressed`, no button.\n * That shape wants a definite `href` string, so a bare `onClick` is always the\n * button's, with a button's event.\n */\nexport type ChipProps = ChipBaseProps &\n  (\n    | {\n        /** Renders the chip as a link. */\n        href?: string;\n        onClick?: never;\n        /**\n         * Renders the link for `href` — pass your router's `<Link>` here, since a\n         * plain `<a>` reloads a single-page app (keksdose's account-menu admin pill).\n         * Default: `<a>`. Ignored without `href`.\n         *\n         * A render function rather than an `as={Link}`, for three reasons. It is the\n         * API `StatTile` already has (`renderLink`), so a consumer learns it once.\n         * Router links do not take `href` — react-router's takes `to` — so an `as`\n         * would either have to pass props through untyped or teach the kit about one\n         * router; here the caller maps `href` onto its own link in one line, fully\n         * typed. And it keeps `href` as THE link prop, which is what the `href` /\n         * `onClick` exclusion below is typed on: the pill is a link because it has an\n         * href, whichever element draws it.\n         */\n        renderLink?: (props: ChipLinkProps) => ReactElement;\n      }\n    | {\n        /** The link shape again, with an `onClick`. `href` is a required string here,\n         *  which is what lets TypeScript tell this shape from the button's: a bare\n         *  `onClick` can only be the button's, and keeps its button event. */\n        href: string;\n        /** Runs on the link's click, before the navigation — keksdose's admin pill\n         *  closes the account menu with it. Reaches a `renderLink` link as\n         *  {@link ChipLinkProps.onClick}. Not called on a disabled chip, which renders\n         *  no link. */\n        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        /** See the link shape above. */\n        renderLink?: (props: ChipLinkProps) => ReactElement;\n      }\n    | {\n        href?: never;\n        renderLink?: never;\n        /** Renders the chip as a toggle button. Mutually exclusive with `href`. Receives\n         *  the click, so a chip inside a clickable row can `stopPropagation()`. */\n        onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n      }\n  );\n\n/**\n * Note on `onRemove` with `href`/`onClick`: a button cannot be nested inside a button or\n * a link, so when both are present the chip renders a wrapper holding TWO siblings — the\n * interactive body and the dismiss control. The WRAPPER is the visual pill (border, tone,\n * `className`) and the two sit inside it, so the × reads as part of the chip; the body's\n * focus ring is drawn on the body alone, and `ref`, `id` and the ARIA props still reach\n * the body — the interactive element.\n */\nexport const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(\n  {\n    children,\n    tone = \"neutral\",\n    size = \"md\",\n    variant = \"soft\",\n    shape = \"pill\",\n    caps = false,\n    icon: Icon,\n    selected,\n    checkbox = false,\n    href,\n    renderLink,\n    onClick,\n    onRemove,\n    removeLabel,\n    removeDisabled = false,\n    disabled = false,\n    className,\n    tabIndex,\n    role,\n    onKeyDown,\n    onFocus,\n    ...rest\n  },\n  ref,\n) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { remove: removeLabel });\n  const s = SIZE[size];\n  const interactive = !!href || !!onClick;\n  // One radius for every rounded piece — the pill, the body inside a split pill, the ×\n  // — so a square chip has no round focus ring inside it.\n  const radius =\n    shape === \"square\" ? (size === \"sm\" || size === \"xs\" ? \"rounded\" : \"rounded-md\") : \"rounded-full\";\n  const dot = variant === \"dot\";\n  const type = cn(caps && CAPS[size], variant === \"solid\" && \"justify-center tabular-nums\");\n  const surface = cn(\n    surfaceOf(tone, variant, selected),\n    disabled && \"cursor-default opacity-50\",\n  );\n  const look = cn(\n    CHIP_BASE,\n    s.body,\n    type,\n    radius,\n    surface,\n    interactive && !disabled && \"cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110\",\n    // An inert dot chip is text in a column: no inset, so it aligns with the header.\n    dot && !interactive && \"px-0\",\n    className,\n  );\n\n  // The checkbox box, only on the toggle shape it has meaning on.\n  const isCheckbox = checkbox && !!onClick && !href;\n  const body = (\n    <>\n      {isCheckbox && (\n        <span\n          aria-hidden\n          data-chip-check=\"\"\n          className={cn(\n            \"flex shrink-0 items-center justify-center rounded-sm border\",\n            s.icon,\n            selected ? \"border-current bg-current/15\" : \"border-current/50\",\n          )}\n        >\n          {selected && <Check className=\"size-full\" strokeWidth={3} />}\n        </span>\n      )}\n      {dot && <span aria-hidden data-chip-dot=\"\" className={cn(\"shrink-0 rounded-full\", DOT_SIZE[size], DOT[tone])} />}\n      {Icon && <Icon className={cn(s.icon, \"shrink-0\")} aria-hidden />}\n      <span className=\"min-w-0 truncate\">{children}</span>\n    </>\n  );\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      // The name carries WHAT is being removed, not just \"Remove\" — a screen-reader user\n      // tabbing a row of eight dismiss buttons otherwise hears the same word eight times\n      // with no way to tell which one they are on.\n      // Composed through `common.fieldValue` because the punctuation between the two\n      // halves is the language's, not ours. A chip whose content is not plain text\n      // has no value to name, and gets the bare verb rather than a dangling colon.\n      aria-label={\n        typeof children === \"string\" && children\n          ? common.fieldValue(common.remove, children)\n          : common.remove\n      }\n      onClick={(e) => {\n        // The chip may itself be a link; removing it must not also follow it.\n        e.preventDefault();\n        e.stopPropagation();\n        onRemove();\n      }}\n      disabled={disabled || removeDisabled}\n      className={cn(\n        // Logical margins: the × sits at the END of the pill, which is the left in RTL.\n        \"-me-0.5 ms-0.5 shrink-0 p-0.5 transition-colors\",\n        shape === \"square\" ? \"rounded-sm\" : \"rounded-full\",\n        \"hover:bg-[var(--bg-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        (disabled || removeDisabled) && \"pointer-events-none\",\n        // A disabled chip is already dimmed as a whole; dimming the × again on top\n        // would take it to a quarter. `removeDisabled` alone dims just the ×.\n        removeDisabled && !disabled && \"opacity-40\",\n      )}\n    >\n      <X className={s.remove} aria-hidden />\n    </button>\n  ) : null;\n\n  // ── The combined shape: one pill, two interactive siblings inside it.\n  const pill = (inner: ReactNode) => (\n    <span className={cn(CHIP_PILL, s.tail, radius, surface, className)}>\n      {inner}\n      {remove}\n    </span>\n  );\n  // The body inside a pill: no border or surface of its own (the pill has them), a\n  // hover wash in the text's own hue so it works on every tone.\n  const inner = cn(\n    \"inline-flex min-w-0 items-center self-stretch transition-colors\",\n    radius,\n    CHIP_RING,\n    s.split,\n    type,\n    !disabled && \"cursor-pointer hover:bg-current/10\",\n    disabled && \"cursor-default\",\n  );\n\n  // ── The three shapes.\n  if (href && !disabled) {\n    // On this shape `onClick` is the link shape's, typed for the anchor.\n    const onLinkClick = onClick as ChipLinkProps[\"onClick\"];\n    const linkProps: ChipLinkProps = {\n      ...rest,\n      ref: ref as Ref<HTMLAnchorElement>,\n      href,\n      onClick: onLinkClick,\n      \"aria-current\": selected ? \"true\" : undefined,\n      className: remove ? inner : look,\n      children: body,\n    };\n    const link = renderLink ? (\n      // Through a component rather than called here, so the forwarded ref arrives as\n      // an ordinary prop of an element and is never handed to a function mid-render.\n      <RenderedLink render={renderLink} {...linkProps} />\n    ) : (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        href={href}\n        aria-current={selected ? \"true\" : undefined}\n        onClick={onLinkClick}\n        className={remove ? inner : look}\n        {...rest}\n      >\n        {body}\n      </a>\n    );\n    return remove ? pill(link) : link;\n  }\n\n  // `!href`: a DISABLED link renders no link, and its link-shaped `onClick` must not\n  // turn it into a button instead — it falls through to the inert span, as before.\n  if (onClick && !href) {\n    const onButtonClick = onClick as (event: MouseEvent<HTMLButtonElement>) => void;\n    const button = (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        onClick={onButtonClick}\n        disabled={disabled}\n        // Only when `selected` is PASSED: a chip with `onClick` and no `selected` is an\n        // action button (it does something), not a toggle (it is on or off), and\n        // announcing it \"not pressed\" would claim a state it does not have.\n        // A checkbox chip says \"checked\", not \"pressed\" — the same state in the words\n        // of the control it looks like.\n        role={isCheckbox ? \"checkbox\" : undefined}\n        aria-pressed={isCheckbox ? undefined : selected}\n        aria-checked={isCheckbox ? !!selected : undefined}\n        className={remove ? inner : look}\n        {...rest}\n      >\n        {body}\n      </button>\n    );\n    return remove ? pill(button) : button;\n  }\n\n  return (\n    <span\n      ref={ref as React.Ref<HTMLSpanElement>}\n      className={look}\n      tabIndex={tabIndex}\n      role={role}\n      onKeyDown={onKeyDown}\n      onFocus={onFocus}\n      {...rest}\n    >\n      {body}\n      {remove}\n    </span>\n  );\n});\n\n/** Calls a chip's `renderLink` with the props it was given — see its call site. */\nfunction RenderedLink({\n  render,\n  ...props\n}: ChipLinkProps & { render: (props: ChipLinkProps) => ReactElement }) {\n  return render(props);\n}\n\n/* ── ChipInput ────────────────────────────────────────────────────────────── */\n\nexport interface ChipInputLabels {\n  /** Announced after a value is added. Receives the value. */\n  added: (value: string) => string;\n  /** Announced after a value is removed. Receives the value. */\n  removed: (value: string) => string;\n  /** Accessible name for each chip's dismiss button. */\n  remove: string;\n  /** Shown when `max` is reached. Receives the limit. */\n  atLimit: (max: number) => string;\n  /** Shown when a duplicate is rejected. Receives the value. */\n  duplicate: (value: string) => string;\n}\n\nexport const DEFAULT_CHIP_INPUT_LABELS: ChipInputLabels = {\n  added: (v) => `${v} added`,\n  removed: (v) => `${v} removed`,\n  remove: \"Remove\",\n  atLimit: (max) => `Limit of ${max} reached`,\n  duplicate: (v) => `${v} is already in the list`,\n};\n\nexport function resolveChipInputLabels(labels?: Partial<ChipInputLabels>): ChipInputLabels {\n  return labels ? { ...DEFAULT_CHIP_INPUT_LABELS, ...labels } : DEFAULT_CHIP_INPUT_LABELS;\n}\n\n/**\n * `onChange` is the field's own — the whole LIST, not a DOM event — so the wrapper\n * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this\n * component's, forwarded to the inner `<input>`; the div has none of its own.\n */\nexport interface ChipInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"placeholder\" | \"children\"> {\n  value: string[];\n  onChange: (next: string[]) => void;\n  placeholder?: string;\n  /** Visible label, rendered above the field. Without one, name the field with\n   *  `aria-label`. */\n  label?: string;\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling the rest of this kit\n   * now uses. Still honoured, and still second to `aria-label` when both are given.\n   */\n  ariaLabel?: string;\n  /** Reject or rewrite a value on commit. Return a string to reject WITH that message. */\n  validate?: (raw: string) => string | null;\n  /** Characters that commit the current text, besides Enter. Default: comma. */\n  separators?: string[];\n  allowDuplicates?: boolean;\n  max?: number;\n  tone?: ChipTone;\n  size?: ChipSize;\n  disabled?: boolean;\n  invalid?: boolean;\n  /** Error text. Wires `aria-describedby` and implies `invalid`. */\n  error?: ReactNode;\n  labels?: Partial<ChipInputLabels>;\n  className?: string;\n}\n\n/**\n * A field whose value is a LIST, entered as chips.\n *\n * The keyboard model is the whole component; the pills are the easy part. Per the WAI\n * pattern for a \"tag\" input:\n *\n *   Enter, or any separator  commit the typed text\n *   Backspace on empty text  move focus to the last chip (does NOT delete it)\n *   ← →  while on a chip     move between chips, in reading order (mirrored in RTL)\n *   Backspace / Delete       remove the focused chip, focus its neighbour\n *   Escape                   clear what is typed but keep the committed chips\n *   paste                    splits on the separators, so a pasted CSV becomes chips\n *\n * The Backspace-on-empty behaviour is the one worth arguing about. Deleting immediately\n * is more common and is a trap: it is a destructive action with no feedback on a key\n * people hit by reflex, and the value it destroys may have taken a while to type. Moving\n * focus first makes the second Backspace a deliberate one, and it is what lets a\n * keyboard user reach a chip at all.\n */\nexport function ChipInput({\n  value,\n  onChange,\n  placeholder,\n  label,\n  ariaLabel,\n  validate,\n  separators = [\",\"],\n  allowDuplicates = false,\n  max,\n  tone = \"neutral\",\n  size = \"md\",\n  disabled = false,\n  invalid = false,\n  error,\n  labels,\n  className,\n  \"aria-label\": ariaLabelAttr,\n  ...rest\n}: ChipInputProps) {\n  // `labels` over the provider's `chipInput` over English — the same order\n  // `resolveChipInputLabels` gives outside a provider.\n  const text = useKitLabels(\"chipInput\", DEFAULT_CHIP_INPUT_LABELS, labels);\n  // A batch of pasted values is announced as one list, joined the way the language\n  // joins a list in a sentence (\"a, b and c added\") — hence the long conjunction,\n  // where a trigger's summary would use the narrow one.\n  const locale = useKitLocale();\n  const [draft, setDraft] = useState(\"\");\n  const [message, setMessage] = useState(\"\");\n  // The last refusal, shown under the field until the next edit. The live region alone\n  // told only a screen-reader user why Enter did nothing; everyone else saw the text\n  // simply stay put.\n  const [rejected, setRejected] = useState<string | null>(null);\n  const [focusedChip, setFocusedChip] = useState<number | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const chipRefs = useRef<Array<HTMLElement | null>>([]);\n  const id = useId();\n  const listId = `${id}-list`;\n  const errorId = `${id}-error`;\n  const rejectedId = `${id}-rejected`;\n  const isInvalid = invalid || !!error;\n  const describedBy = [error ? errorId : null, rejected ? rejectedId : null]\n    .filter(Boolean)\n    .join(\" \");\n\n  const focusChip = (index: number | null) => {\n    setFocusedChip(index);\n    if (index === null) inputRef.current?.focus();\n    else chipRefs.current[index]?.focus();\n  };\n\n  /**\n   * Try to add every candidate, as ONE change.\n   *\n   * Batched rather than looped for a reason that bites immediately: `commit` closes over\n   * `value`, so calling it once per pasted item makes every call compute its result from\n   * the list as it was BEFORE the paste, and each `onChange` overwrites the last. A\n   * pasted \"one,two,three\" left only \"three\". Accumulating locally and emitting once is\n   * also the correct behaviour for an undo stack — a paste is one action.\n   */\n  const commitMany = (raws: string[]): { added: string[]; rejection: string | null } => {\n    const next = [...value];\n    const added: string[] = [];\n    let rejection: string | null = null;\n\n    for (const raw of raws) {\n      const candidate = raw.trim();\n      if (!candidate) continue;\n      if (max !== undefined && next.length >= max) {\n        rejection ??= text.atLimit(max);\n        break;\n      }\n      if (!allowDuplicates && next.includes(candidate)) {\n        rejection ??= text.duplicate(candidate);\n        continue;\n      }\n      const invalidReason = validate?.(candidate);\n      if (invalidReason) {\n        rejection ??= invalidReason;\n        continue;\n      }\n      next.push(candidate);\n      added.push(candidate);\n    }\n\n    if (added.length) onChange(next);\n    // A rejection is the more useful thing to say: \"three added\" is obvious from the\n    // chips appearing, whereas \"already in the list\" is the only sign of what did not.\n    const addedList = new Intl.ListFormat(locale, { type: \"conjunction\", style: \"long\" });\n    setMessage(rejection ?? (added.length ? text.added(addedList.format(added)) : \"\"));\n    setRejected(rejection);\n    return { added, rejection };\n  };\n\n  const commit = (raw: string): boolean => commitMany([raw]).added.length > 0;\n\n  const removeAt = (index: number) => {\n    const removed = value[index];\n    onChange(value.filter((_, i) => i !== index));\n    setMessage(text.removed(removed));\n    setRejected(null);\n    // Focus the neighbour that takes its place, or the input when the list empties —\n    // dropping focus to <body> here is how a keyboard user loses the field entirely.\n    const next = index >= value.length - 1 ? null : index;\n    requestAnimationFrame(() => focusChip(value.length - 1 === 0 ? null : next));\n  };\n\n  const onInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      // Only when there is something to commit: an empty Enter belongs to the form.\n      if (draft.trim()) {\n        e.preventDefault();\n        if (commit(draft)) setDraft(\"\");\n      }\n      return;\n    }\n    if (separators.includes(e.key)) {\n      e.preventDefault();\n      if (commit(draft)) setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Escape\" && draft) {\n      e.preventDefault();\n      setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Backspace\" && !draft && value.length) {\n      e.preventDefault();\n      focusChip(value.length - 1);\n    }\n  };\n\n  const onChipKeyDown = (e: KeyboardEvent<HTMLElement>, index: number) => {\n    if (e.key === \"Backspace\" || e.key === \"Delete\") {\n      e.preventDefault();\n      removeAt(index);\n      return;\n    }\n    // ←/→ follow the reading direction, not DOM order: in RTL the previous chip is to\n    // the RIGHT, and ArrowLeft moves on towards the input.\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step === -1 && index > 0) {\n      e.preventDefault();\n      focusChip(index - 1);\n      return;\n    }\n    if (step === 1) {\n      e.preventDefault();\n      focusChip(index === value.length - 1 ? null : index + 1);\n      return;\n    }\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      focusChip(null);\n    }\n  };\n\n  return (\n    // The rest lands on the OUTER box — the thing a `data-tour` step or a test id\n    // wants to point at — while the accessible name below goes on the `<input>`,\n    // because that is what a screen-reader user actually lands in. Spreading the two\n    // to the same element would have named a decorative wrapper and left the field\n    // anonymous.\n    <div {...rest} className={cn(\"space-y-1\", className)}>\n      {label && (\n        <label htmlFor={`${id}-input`} className=\"block text-sm text-[var(--text-secondary)]\">\n          {label}\n        </label>\n      )}\n      <div\n        // `relative` so the live region below can be `sr-only` without escaping to the\n        // initial containing block and inflating the document height.\n        className={cn(\n          \"relative flex flex-wrap items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 shadow-sm\",\n          \"focus-within:border-[var(--brand)] focus-within:ring-1 focus-within:ring-[var(--brand)]\",\n          disabled && \"cursor-default bg-[var(--bg-surface-2)]\",\n          isInvalid && FIELD_INVALID,\n        )}\n        onClick={() => !disabled && inputRef.current?.focus()}\n      >\n        {/* `display: contents` on the wrappers so the chips participate in the field's\n            own flex wrap rather than forming a nested row. The list semantics are\n            restored with explicit roles, because `contents` removes the ul/li boxes from\n            the accessibility tree in several engines. */}\n        {/* eslint-disable-next-line jsx-a11y/no-redundant-roles -- NOT redundant here: the\n            `contents` display below removes the ul and li boxes from the box tree, and\n            several engines drop the list semantics with them. The explicit role is what\n            puts \"list, 3 items\" back. */}\n        <ul id={listId} role=\"list\" className=\"contents\">\n          {value.map((v, i) => (\n            <li key={`${v}-${i}`} role=\"presentation\" className=\"contents\">\n              <Chip\n                ref={(el: HTMLElement | null) => {\n                  chipRefs.current[i] = el;\n                }}\n                tone={tone}\n                size={size}\n                disabled={disabled}\n                removeLabel={text.remove}\n                onRemove={disabled ? undefined : () => removeAt(i)}\n                // A ROVING tabIndex: only the focused chip is tabbable, so Tab leaves\n                // the field instead of walking through every value in it — the reason a\n                // list of twenty tags is otherwise a twenty-stop detour for a keyboard.\n                tabIndex={focusedChip === i ? 0 : -1}\n                role=\"listitem\"\n                aria-label={v}\n                onKeyDown={(e) => onChipKeyDown(e, i)}\n                onFocus={() => setFocusedChip(i)}\n                data-chip-index={i}\n              >\n                {v}\n              </Chip>\n            </li>\n          ))}\n        </ul>\n        <input\n          id={`${id}-input`}\n          ref={inputRef}\n          value={draft}\n          onChange={(e) => {\n            setDraft(e.target.value);\n            setMessage(\"\");\n            setRejected(null);\n          }}\n          onKeyDown={onInputKeyDown}\n          onBlur={() => {\n            // Commit on blur: a value typed and then clicked away from is a value the\n            // user meant to add, and losing it silently is the commonest complaint\n            // about this pattern.\n            if (draft.trim() && commit(draft)) setDraft(\"\");\n          }}\n          onPaste={(e) => {\n            const pasted = e.clipboardData.getData(\"text\");\n            const pattern = new RegExp(`[${separators.map((s) => `\\\\${s}`).join(\"\")}\\n\\r]`);\n            if (!pattern.test(pasted)) return;\n            e.preventDefault();\n            if (commitMany(pasted.split(pattern)).added.length) setDraft(\"\");\n          }}\n          placeholder={value.length ? undefined : placeholder}\n          disabled={disabled}\n          // A visible `label` is already wired through `htmlFor`, so adding a name\n          // here would give the field two. Failing that, the DOM spelling wins and\n          // the deprecated `ariaLabel` is the fallback.\n          aria-label={label ? undefined : (ariaLabelAttr ?? ariaLabel)}\n          aria-describedby={describedBy || undefined}\n          aria-invalid={isInvalid || !!rejected || undefined}\n          className=\"min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-placeholder)] disabled:cursor-default\"\n        />\n        {/* Additions, removals and rejections move no focus, so nothing would announce\n            them. `sr-only-fixed` rather than `sr-only`: this sits inside a consumer's\n            markup and must not extend the document height. */}\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {message}\n        </span>\n      </div>\n      {error && (\n        <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n      {rejected && (\n        <p id={rejectedId} className=\"text-xs text-[var(--danger)]\" data-chip-input-rejected=\"\">\n          {rejected}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Chip","inner"]}
+{"version":3,"sources":["../../src/components/chip.tsx"],"sourcesContent":["import { forwardRef, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { Check, X } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID } from \"./ui\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink, useKitLocale } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n/**\n * A chip: a compact pill carrying one value.\n *\n * Three jobs, deliberately one component. A chip can be inert (a tag on a row), a link\n * (a jump to a section), or a toggle (a filter that is on or off) — and the difference is\n * which prop you pass, not which component you pick. Keeping them together is what stops\n * an app growing three near-identical pills that drift apart; it is the shape this kit\n * already uses for `Button`, which is a link when it is given an href.\n *\n * A chip is not a `Button`. It is smaller, it is rounded to a pill, and it reads as a\n * VALUE rather than as an action — which matters because a row of eight buttons says\n * \"choose one of eight things to do\" and a row of eight chips says \"here are eight\n * things\". Using `Button` for both is the mistake this exists to prevent.\n */\n\nexport type ChipTone =\n  | \"neutral\"\n  | \"brand\"\n  | \"danger\"\n  | \"warning\"\n  | \"success\"\n  | \"info\"\n  | \"income\"\n  | \"expense\"\n  | ChipHue;\n/**\n * Categorical hues (0.10.0): colour that says \"a different value\" and nothing more —\n * kastlan's status-badge.tsx paints ~15 enums in 9 Tailwind hues by hand. Four of those\n * nine are semantic and already tones (green = `success`, yellow = `warning`, red =\n * `danger`, gray = `neutral`); these five are the rest, each a `--hue-*` token triple\n * in tokens.css with a light and a dark value. Use a semantic tone when the value HAS a\n * meaning (overdue is `danger`), a hue when it only needs telling apart (sent vs\n * accepted vs invoiced).\n */\nexport type ChipHue = \"blue\" | \"indigo\" | \"purple\" | \"teal\" | \"orange\";\n/** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px.\n *  `xs` (0.10.0) is 11px type at `px-1.5` — keksdose's goal markers and budget-cell\n *  badges, which sit inside a figure's line and must not make it taller. */\nexport type ChipSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n/**\n * How much of the tone the chip wears.\n *\n * - `soft` (default): the tinted surface every chip has had.\n * - `outline`: the tone's border and text on NO surface — keksdose's DEV badge in the\n *   account menu and kastlan's 27 shadcn `variant=\"outline\"` badges, which sit on\n *   coloured rows where a second tint would muddy the row.\n * - `solid`: the tone as a fill under contrasting text — the \"count\" pill (unread\n *   messages, open tasks). It centres its content and sets figures tabular, so a\n *   one-digit count is a round dot and \"9\" → \"10\" does not jiggle the row.\n * - `dot` (0.10.0): no pill at all — a dot in the tone's colour before plain text, for\n *   a status in a dense list or a table column where eight tinted pills in a column\n *   would outshout the figures beside them (kastlan's unit picker already draws its\n *   UnitStatus this way, from a separate `dotColor` map).\n */\nexport type ChipVariant = \"soft\" | \"outline\" | \"solid\" | \"dot\";\n/** `pill` (default) is fully rounded; `square` has the small radius of a field or a\n *  button — for a chip that sits in a table cell or beside square controls. */\nexport type ChipShape = \"pill\" | \"square\";\n\nconst TONE: Record<ChipTone, { idle: string; selected: string }> = {\n  neutral: {\n    idle: \"border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-secondary)]\",\n    selected: \"border-[var(--border-strong)] bg-[var(--bg-active)] text-[var(--text-primary)]\",\n  },\n  brand: {\n    idle: \"border-[var(--border)] bg-[var(--brand-bg)] text-[var(--brand-muted)]\",\n    selected: \"border-[var(--brand)] bg-[var(--brand)] text-[var(--brand-contrast)]\",\n  },\n  danger: {\n    idle: \"border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)]\",\n    selected: \"border-[var(--danger)] bg-[var(--danger)] text-[var(--danger-contrast)]\",\n  },\n  warning: {\n    idle: \"border-[var(--warning-border)] bg-[var(--warning-bg)] text-[var(--warning)]\",\n    selected: \"border-[var(--warning)] bg-[var(--warning-bg)] text-[var(--warning)]\",\n  },\n  success: {\n    idle: \"border-[var(--success-border)] bg-[var(--success-bg)] text-[var(--success)]\",\n    selected: \"border-[var(--success)] bg-[var(--success-bg)] text-[var(--success)]\",\n  },\n  info: {\n    idle: \"border-[var(--info-border)] bg-[var(--info-bg)] text-[var(--info)]\",\n    selected: \"border-[var(--info)] bg-[var(--info-bg)] text-[var(--info)]\",\n  },\n  // The money pair (Keksdose's direction toggle). Only the TEXT and the BORDER carry\n  // the tint, on the neutral chip's own surfaces: the money tokens are chosen for text\n  // contrast, and a filled amber pill beside an amber figure reads as one smear.\n  // `border-current` takes its hue from the text, so the two cannot drift apart.\n  income: {\n    idle: \"border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-income)]\",\n    selected: \"border-current bg-[var(--bg-active)] text-[var(--money-income)]\",\n  },\n  expense: {\n    idle: \"border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-expense)]\",\n    selected: \"border-current bg-[var(--bg-active)] text-[var(--money-expense)]\",\n  },\n  // The categorical hues: the `info` recipe with its own token triple, so a hue chip\n  // and a status chip in one row carry the same weight.\n  blue: {\n    idle: \"border-[var(--hue-blue-border)] bg-[var(--hue-blue-bg)] text-[var(--hue-blue)]\",\n    selected: \"border-[var(--hue-blue)] bg-[var(--hue-blue-bg)] text-[var(--hue-blue)]\",\n  },\n  indigo: {\n    idle: \"border-[var(--hue-indigo-border)] bg-[var(--hue-indigo-bg)] text-[var(--hue-indigo)]\",\n    selected: \"border-[var(--hue-indigo)] bg-[var(--hue-indigo-bg)] text-[var(--hue-indigo)]\",\n  },\n  purple: {\n    idle: \"border-[var(--hue-purple-border)] bg-[var(--hue-purple-bg)] text-[var(--hue-purple)]\",\n    selected: \"border-[var(--hue-purple)] bg-[var(--hue-purple-bg)] text-[var(--hue-purple)]\",\n  },\n  teal: {\n    idle: \"border-[var(--hue-teal-border)] bg-[var(--hue-teal-bg)] text-[var(--hue-teal)]\",\n    selected: \"border-[var(--hue-teal)] bg-[var(--hue-teal-bg)] text-[var(--hue-teal)]\",\n  },\n  orange: {\n    idle: \"border-[var(--hue-orange-border)] bg-[var(--hue-orange-bg)] text-[var(--hue-orange)]\",\n    selected: \"border-[var(--hue-orange)] bg-[var(--hue-orange-bg)] text-[var(--hue-orange)]\",\n  },\n};\n\n// `outline` idle looks: the tone's border and text, the surface left to whatever the\n// chip sits on. Selected still takes the tone's `selected` look (below), because an\n// outline toggle that stays an outline when on has no visible state.\nconst OUTLINE: Record<ChipTone, string> = {\n  neutral: \"border-[var(--border-strong)] bg-transparent text-[var(--text-secondary)]\",\n  brand: \"border-[var(--brand)] bg-transparent text-[var(--brand)]\",\n  danger: \"border-[var(--danger-border)] bg-transparent text-[var(--danger)]\",\n  warning: \"border-[var(--warning-border)] bg-transparent text-[var(--warning)]\",\n  success: \"border-[var(--success-border)] bg-transparent text-[var(--success)]\",\n  info: \"border-[var(--info-border)] bg-transparent text-[var(--info)]\",\n  income: \"border-current/60 bg-transparent text-[var(--money-income)]\",\n  expense: \"border-current/60 bg-transparent text-[var(--money-expense)]\",\n  blue: \"border-[var(--hue-blue-border)] bg-transparent text-[var(--hue-blue)]\",\n  indigo: \"border-[var(--hue-indigo-border)] bg-transparent text-[var(--hue-indigo)]\",\n  purple: \"border-[var(--hue-purple-border)] bg-transparent text-[var(--hue-purple)]\",\n  teal: \"border-[var(--hue-teal-border)] bg-transparent text-[var(--hue-teal)]\",\n  orange: \"border-[var(--hue-orange-border)] bg-transparent text-[var(--hue-orange)]\",\n};\n\n// `solid`: the fill under its contrast pair. Only brand and danger have a declared\n// `-contrast` token; the other hues are 700s in the light theme and 300s in the dark\n// one, so `--text-inverse` (the surface colour) is the side of the pair that contrasts\n// with them in both — which is what the inverse token is for. The border goes\n// transparent rather than away, so a solid chip is exactly as tall as a soft one.\nconst SOLID: Record<ChipTone, string> = {\n  neutral: \"border-transparent bg-[var(--bg-inverse)] text-[var(--text-inverse)]\",\n  brand: \"border-transparent bg-[var(--brand)] text-[var(--brand-contrast)]\",\n  danger: \"border-transparent bg-[var(--danger)] text-[var(--danger-contrast)]\",\n  warning: \"border-transparent bg-[var(--warning)] text-[var(--text-inverse)]\",\n  success: \"border-transparent bg-[var(--success)] text-[var(--text-inverse)]\",\n  info: \"border-transparent bg-[var(--info)] text-[var(--text-inverse)]\",\n  income: \"border-transparent bg-[var(--money-income)] text-[var(--text-inverse)]\",\n  expense: \"border-transparent bg-[var(--money-expense)] text-[var(--text-inverse)]\",\n  blue: \"border-transparent bg-[var(--hue-blue)] text-[var(--text-inverse)]\",\n  indigo: \"border-transparent bg-[var(--hue-indigo)] text-[var(--text-inverse)]\",\n  purple: \"border-transparent bg-[var(--hue-purple)] text-[var(--text-inverse)]\",\n  teal: \"border-transparent bg-[var(--hue-teal)] text-[var(--text-inverse)]\",\n  orange: \"border-transparent bg-[var(--hue-orange)] text-[var(--text-inverse)]\",\n};\n\n/** `dot`: the fill of the dot itself — the tone's strongest colour, which is the one\n *  chosen to read on the page surface in both themes. Neutral takes the muted ink: a\n *  grey dot is \"no particular state\", not a darker black. */\nconst DOT: Record<ChipTone, string> = {\n  neutral: \"bg-[var(--text-muted)]\",\n  brand: \"bg-[var(--brand)]\",\n  danger: \"bg-[var(--danger)]\",\n  warning: \"bg-[var(--warning)]\",\n  success: \"bg-[var(--success)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n  blue: \"bg-[var(--hue-blue)]\",\n  indigo: \"bg-[var(--hue-indigo)]\",\n  purple: \"bg-[var(--hue-purple)]\",\n  teal: \"bg-[var(--hue-teal)]\",\n  orange: \"bg-[var(--hue-orange)]\",\n};\n\n/** Per size: the dot's diameter. */\nconst DOT_SIZE: Record<ChipSize, string> = { xs: \"size-1.5\", sm: \"size-2\", md: \"size-2\", lg: \"size-2.5\" };\n\n/** The status-badge type (`caps`): a size step down, heavier and tracked, because\n *  capitals at body size shout and capitals untracked run together. Per size, so it\n *  replaces the size's own `text-*` through tailwind-merge. */\nconst CAPS: Record<ChipSize, string> = {\n  xs: \"text-[10px] font-semibold uppercase tracking-wider\",\n  sm: \"text-[10px] font-semibold uppercase tracking-wider\",\n  md: \"text-[11px] font-semibold uppercase tracking-wider\",\n  lg: \"text-xs font-semibold uppercase tracking-wider\",\n};\n\nfunction surfaceOf(tone: ChipTone, variant: ChipVariant, selected: boolean | undefined): string {\n  const palette = TONE[tone];\n  if (variant === \"dot\") {\n    // No surface and no border colour: the dot carries the tone, the text stays ink.\n    // The border goes transparent rather than away, so a dot chip lines up with a pill.\n    return selected\n      ? \"border-transparent bg-transparent font-medium text-[var(--text-primary)]\"\n      : \"border-transparent bg-transparent text-[var(--text-secondary)]\";\n  }\n  if (variant === \"solid\") {\n    // A solid chip is already the strongest look there is, so \"on\" is a ring round it.\n    return cn(SOLID[tone], selected && \"ring-2 ring-[var(--border-strong)] ring-offset-1 ring-offset-[var(--bg-surface)]\");\n  }\n  if (selected) return palette.selected;\n  return variant === \"outline\" ? OUTLINE[tone] : palette.idle;\n}\n\n/** What {@link ChipProps.renderLink} is handed: everything the chip would have put on\n *  its own `<a>`. Spread it onto your router's link, mapping `href` to what the link\n *  calls it — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface ChipLinkProps {\n  href: string;\n  /** The chip's whole look — keep it, or the pill is a bare link. */\n  className: string;\n  children: ReactNode;\n  /** The chip's forwarded ref. React 19 passes it to a function component as a prop. */\n  ref?: Ref<HTMLAnchorElement>;\n  \"aria-current\"?: \"true\";\n  /**\n   * The chip's `onClick`, when it was given one — spread it onto the link with the\n   * rest. Carried here so a caller need not close over it twice: keksdose's admin pill\n   * in the account menu closes the menu on the way to /admin (account-menu.tsx), and\n   * with `onClick` on the Chip its `renderLink` stays the one-liner\n   * `({ href, ...p }) => <Link to={href} {...p} />`.\n   */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  id?: string;\n  title?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\n/**\n * `body` is the whole pill when the chip is ONE element. When a link or a button also has\n * a dismiss control, the pill is a wrapper holding two siblings (see the note on\n * {@link Chip}): `split` is then the interactive part's own padding — the full start\n * inset, a short end one before the ×; `tail` is the wrapper's end inset after the ×.\n */\nconst SIZE: Record<\n  ChipSize,\n  { body: string; split: string; tail: string; icon: string; remove: string }\n> = {\n  xs: {\n    body: \"gap-1 px-1.5 py-0 text-[11px] leading-4\",\n    split: \"gap-1 ps-1.5 pe-0.5 py-0 text-[11px] leading-4\",\n    tail: \"pe-1\",\n    icon: \"size-3\",\n    remove: \"size-2.5\",\n  },\n  sm: {\n    body: \"gap-1 px-2 py-0.5 text-xs\",\n    split: \"gap-1 ps-2 pe-1 py-0.5 text-xs\",\n    tail: \"pe-1.5\",\n    icon: \"size-3\",\n    remove: \"size-3\",\n  },\n  md: {\n    body: \"gap-1.5 px-2.5 py-1 text-sm\",\n    split: \"gap-1.5 ps-2.5 pe-1.5 py-1 text-sm\",\n    tail: \"pe-2\",\n    icon: \"size-3.5\",\n    remove: \"size-3.5\",\n  },\n  lg: {\n    body: \"min-h-11 gap-2 px-4 py-2 text-sm\",\n    split: \"min-h-11 gap-2 ps-4 pe-2 py-2 text-sm\",\n    tail: \"min-h-11 pe-3.5\",\n    icon: \"size-4\",\n    remove: \"size-4\",\n  },\n};\n\nconst CHIP_PILL = \"inline-flex max-w-full items-center rounded-full border transition-colors\";\n// `focus-visible`, not `focus`: a chip commonly receives focus programmatically (the\n// ChipInput moves focus onto one after a removal) and a ring that appears on a\n// pointer click reads as a stuck selection.\nconst CHIP_RING =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]\";\nconst CHIP_BASE = `${CHIP_PILL} ${CHIP_RING}`;\n\ninterface ChipBaseProps {\n  children: ReactNode;\n  tone?: ChipTone;\n  size?: ChipSize;\n  /** See {@link ChipVariant}. Default `soft`. */\n  variant?: ChipVariant;\n  /** See {@link ChipShape}. Default `pill`. */\n  shape?: ChipShape;\n  /**\n   * The uppercase, tracked \"status badge\" type — keksdose's ~25 PAID / DRAFT /\n   * OVERDUE / ADMIN badges, each spelling `uppercase tracking-wide text-[10px]` by\n   * hand. A flag rather than a fourth `variant` because it is TYPE, not surface: a\n   * status badge is soft, outlined or solid as the row needs, and a `variant=\"tag\"`\n   * would have had to pick one. Screen readers read the text as written, not as\n   * drawn, so write it in normal case.\n   */\n  caps?: boolean;\n  icon?: LucideIcon;\n  /**\n   * Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a\n   * toggle.\n   *\n   * On an ON/OFF toggle, keep the LABEL the same in both states and let `selected`\n   * carry the state. A label that flips with it (\"Skip this month\" / \"Ask again this\n   * month\") is announced together with \"pressed\", and then says the opposite of what\n   * it does.\n   *\n   * A control that switches between two NAMED states (outflow ⇄ inflow) is not a\n   * toggle but an ACTION button: leave `selected` out, let the visible label and the\n   * tone follow the state (\"− Outflow\" / \"+ Inflow\"), and name the action in\n   * `aria-label` (\"Direction: outflow — tap for inflow\"). Without `selected` the chip\n   * reports no pressed state at all. A fixed label there contradicts the figure beside\n   * it — \"+ Outflow\" in green next to an inflow (keksdose #417).\n   */\n  selected?: boolean;\n  /**\n   * Checkbox mode (0.10.0), for a toggle chip (`onClick` + `selected`): a small box\n   * at the start that shows a tick when `selected`, and the button reports\n   * `role=\"checkbox\"` + `aria-checked` instead of `aria-pressed`. For a set of\n   * include/exclude choices where \"on\" must read as TICKED, not merely tinted —\n   * keksdose's add-group-card (the \"which categories come along\" pills), which put a\n   * real `<Checkbox>` inside a `<label>` pill by hand. The box is drawn in both\n   * states so ticking one never shifts its label.\n   */\n  checkbox?: boolean;\n  /** Renders a dismiss affordance. Works alongside `href`/`onClick` — see the note below. */\n  onRemove?: () => void;\n  /** Accessible name for the dismiss button. Default: `common.remove` from the\n   *  {@link UiKitProvider}, else \"Remove\". */\n  removeLabel?: string;\n  /** Disables the × ONLY — the chip itself stays a working link or toggle. For the\n   *  value that may not be removed right now (the last filter of a required set, a\n   *  tag the user may read but not edit) where `disabled` would also kill the chip's\n   *  own action. */\n  removeDisabled?: boolean;\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Roving focus, for a container that manages a row of chips (see {@link ChipInput}).\n   * A chip with no `href`/`onClick` is inert and unfocusable by default; give it a\n   * `tabIndex` and a `role` and it becomes the thing arrow keys move between.\n   */\n  tabIndex?: number;\n  role?: string;\n  onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;\n  onFocus?: () => void;\n  /** Accessible name, when the visible text is not the whole story. */\n  \"aria-label\"?: string;\n  /** Any other ARIA attribute — `aria-describedby`, `aria-expanded`, `aria-controls`,\n   *  `aria-haspopup` — reaches the chip's interactive element. */\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  /** A test id, a `data-tour` anchor, or any other data attribute. */\n  [key: `data-${string}`]: unknown;\n  id?: string;\n  /** A native tooltip. For anything a user must read, prefer the kit's `Tooltip`. */\n  title?: string;\n}\n\n/**\n * A chip is a link OR a button, never both — so the types say so. Before 0.7.0 both were\n * accepted and `onClick` was silently dropped whenever `href` was set. A LINK may still\n * run code on its way (close the menu it sits in): that is an `onClick` typed for the\n * anchor, on the link shape, and the pill stays a link — no `aria-pressed`, no button.\n * That shape wants a definite `href` string, so a bare `onClick` is always the\n * button's, with a button's event.\n */\nexport type ChipProps = ChipBaseProps &\n  (\n    | {\n        /** Renders the chip as a link. */\n        href?: string;\n        onClick?: never;\n        /**\n         * Renders the link for `href` — pass your router's `<Link>` here, since a\n         * plain `<a>` reloads a single-page app (keksdose's account-menu admin pill).\n         * Default: the `<UiKitProvider linkComponent>`, then `<a>`. Ignored without\n         * `href`.\n         *\n         * A render function rather than an `as={Link}`, for three reasons. It is the\n         * API `StatTile` already has (`renderLink`), so a consumer learns it once.\n         * Router links do not take `href` — react-router's takes `to` — so an `as`\n         * would either have to pass props through untyped or teach the kit about one\n         * router; here the caller maps `href` onto its own link in one line, fully\n         * typed. And it keeps `href` as THE link prop, which is what the `href` /\n         * `onClick` exclusion below is typed on: the pill is a link because it has an\n         * href, whichever element draws it.\n         */\n        renderLink?: (props: ChipLinkProps) => ReactElement;\n      }\n    | {\n        /** The link shape again, with an `onClick`. `href` is a required string here,\n         *  which is what lets TypeScript tell this shape from the button's: a bare\n         *  `onClick` can only be the button's, and keeps its button event. */\n        href: string;\n        /** Runs on the link's click, before the navigation — keksdose's admin pill\n         *  closes the account menu with it. Reaches a `renderLink` link as\n         *  {@link ChipLinkProps.onClick}. Not called on a disabled chip, which renders\n         *  no link. */\n        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        /** See the link shape above. */\n        renderLink?: (props: ChipLinkProps) => ReactElement;\n      }\n    | {\n        href?: never;\n        renderLink?: never;\n        /** Renders the chip as a toggle button. Mutually exclusive with `href`. Receives\n         *  the click, so a chip inside a clickable row can `stopPropagation()`. */\n        onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n      }\n  );\n\n/**\n * Note on `onRemove` with `href`/`onClick`: a button cannot be nested inside a button or\n * a link, so when both are present the chip renders a wrapper holding TWO siblings — the\n * interactive body and the dismiss control. The WRAPPER is the visual pill (border, tone,\n * `className`) and the two sit inside it, so the × reads as part of the chip; the body's\n * focus ring is drawn on the body alone, and `ref`, `id` and the ARIA props still reach\n * the body — the interactive element.\n */\nexport const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(\n  {\n    children,\n    tone = \"neutral\",\n    size = \"md\",\n    variant = \"soft\",\n    shape = \"pill\",\n    caps = false,\n    icon: Icon,\n    selected,\n    checkbox = false,\n    href,\n    renderLink,\n    onClick,\n    onRemove,\n    removeLabel,\n    removeDisabled = false,\n    disabled = false,\n    className,\n    tabIndex,\n    role,\n    onKeyDown,\n    onFocus,\n    ...rest\n  },\n  ref,\n) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { remove: removeLabel });\n  const kitLink = useKitLink();\n  const s = SIZE[size];\n  const interactive = !!href || !!onClick;\n  // One radius for every rounded piece — the pill, the body inside a split pill, the ×\n  // — so a square chip has no round focus ring inside it.\n  const radius =\n    shape === \"square\" ? (size === \"sm\" || size === \"xs\" ? \"rounded\" : \"rounded-md\") : \"rounded-full\";\n  const dot = variant === \"dot\";\n  const type = cn(caps && CAPS[size], variant === \"solid\" && \"justify-center tabular-nums\");\n  const surface = cn(\n    surfaceOf(tone, variant, selected),\n    disabled && \"cursor-default opacity-50\",\n  );\n  const look = cn(\n    CHIP_BASE,\n    s.body,\n    type,\n    radius,\n    surface,\n    interactive && !disabled && \"cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110\",\n    // An inert dot chip is text in a column: no inset, so it aligns with the header.\n    dot && !interactive && \"px-0\",\n    className,\n  );\n\n  // The checkbox box, only on the toggle shape it has meaning on.\n  const isCheckbox = checkbox && !!onClick && !href;\n  const body = (\n    <>\n      {isCheckbox && (\n        <span\n          aria-hidden\n          data-chip-check=\"\"\n          className={cn(\n            \"flex shrink-0 items-center justify-center rounded-sm border\",\n            s.icon,\n            selected ? \"border-current bg-current/15\" : \"border-current/50\",\n          )}\n        >\n          {selected && <Check className=\"size-full\" strokeWidth={3} />}\n        </span>\n      )}\n      {dot && <span aria-hidden data-chip-dot=\"\" className={cn(\"shrink-0 rounded-full\", DOT_SIZE[size], DOT[tone])} />}\n      {Icon && <Icon className={cn(s.icon, \"shrink-0\")} aria-hidden />}\n      <span className=\"min-w-0 truncate\">{children}</span>\n    </>\n  );\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      // The name carries WHAT is being removed, not just \"Remove\" — a screen-reader user\n      // tabbing a row of eight dismiss buttons otherwise hears the same word eight times\n      // with no way to tell which one they are on.\n      // Composed through `common.fieldValue` because the punctuation between the two\n      // halves is the language's, not ours. A chip whose content is not plain text\n      // has no value to name, and gets the bare verb rather than a dangling colon.\n      aria-label={\n        typeof children === \"string\" && children\n          ? common.fieldValue(common.remove, children)\n          : common.remove\n      }\n      onClick={(e) => {\n        // The chip may itself be a link; removing it must not also follow it.\n        e.preventDefault();\n        e.stopPropagation();\n        onRemove();\n      }}\n      disabled={disabled || removeDisabled}\n      className={cn(\n        // Logical margins: the × sits at the END of the pill, which is the left in RTL.\n        \"-me-0.5 ms-0.5 shrink-0 p-0.5 transition-colors\",\n        shape === \"square\" ? \"rounded-sm\" : \"rounded-full\",\n        \"hover:bg-[var(--bg-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        (disabled || removeDisabled) && \"pointer-events-none\",\n        // A disabled chip is already dimmed as a whole; dimming the × again on top\n        // would take it to a quarter. `removeDisabled` alone dims just the ×.\n        removeDisabled && !disabled && \"opacity-40\",\n      )}\n    >\n      <X className={s.remove} aria-hidden />\n    </button>\n  ) : null;\n\n  // ── The combined shape: one pill, two interactive siblings inside it.\n  const pill = (inner: ReactNode) => (\n    <span className={cn(CHIP_PILL, s.tail, radius, surface, className)}>\n      {inner}\n      {remove}\n    </span>\n  );\n  // The body inside a pill: no border or surface of its own (the pill has them), a\n  // hover wash in the text's own hue so it works on every tone.\n  const inner = cn(\n    \"inline-flex min-w-0 items-center self-stretch transition-colors\",\n    radius,\n    CHIP_RING,\n    s.split,\n    type,\n    !disabled && \"cursor-pointer hover:bg-current/10\",\n    disabled && \"cursor-default\",\n  );\n\n  // ── The three shapes.\n  if (href && !disabled) {\n    // On this shape `onClick` is the link shape's, typed for the anchor.\n    const onLinkClick = onClick as ChipLinkProps[\"onClick\"];\n    const linkProps: ChipLinkProps = {\n      ...rest,\n      ref: ref as Ref<HTMLAnchorElement>,\n      href,\n      onClick: onLinkClick,\n      \"aria-current\": selected ? \"true\" : undefined,\n      className: remove ? inner : look,\n      children: body,\n    };\n    const render = pickLinkRenderer(renderLink, kitLink, href);\n    const link = render ? (\n      // Through a component rather than called here, so the forwarded ref arrives as\n      // an ordinary prop of an element and is never handed to a function mid-render.\n      <RenderedLink render={render} {...linkProps} />\n    ) : (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        href={href}\n        aria-current={selected ? \"true\" : undefined}\n        onClick={onLinkClick}\n        className={remove ? inner : look}\n        {...rest}\n      >\n        {body}\n      </a>\n    );\n    return remove ? pill(link) : link;\n  }\n\n  // `!href`: a DISABLED link renders no link, and its link-shaped `onClick` must not\n  // turn it into a button instead — it falls through to the inert span, as before.\n  if (onClick && !href) {\n    const onButtonClick = onClick as (event: MouseEvent<HTMLButtonElement>) => void;\n    const button = (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        onClick={onButtonClick}\n        disabled={disabled}\n        // Only when `selected` is PASSED: a chip with `onClick` and no `selected` is an\n        // action button (it does something), not a toggle (it is on or off), and\n        // announcing it \"not pressed\" would claim a state it does not have.\n        // A checkbox chip says \"checked\", not \"pressed\" — the same state in the words\n        // of the control it looks like.\n        role={isCheckbox ? \"checkbox\" : undefined}\n        aria-pressed={isCheckbox ? undefined : selected}\n        aria-checked={isCheckbox ? !!selected : undefined}\n        className={remove ? inner : look}\n        {...rest}\n      >\n        {body}\n      </button>\n    );\n    return remove ? pill(button) : button;\n  }\n\n  return (\n    <span\n      ref={ref as React.Ref<HTMLSpanElement>}\n      className={look}\n      tabIndex={tabIndex}\n      role={role}\n      onKeyDown={onKeyDown}\n      onFocus={onFocus}\n      {...rest}\n    >\n      {body}\n      {remove}\n    </span>\n  );\n});\n\n/** Calls a chip's `renderLink` with the props it was given — see its call site. */\nfunction RenderedLink({\n  render,\n  ...props\n}: ChipLinkProps & { render: (props: ChipLinkProps) => ReactElement }) {\n  return render(props);\n}\n\n/* ── ChipInput ────────────────────────────────────────────────────────────── */\n\nexport interface ChipInputLabels {\n  /** Announced after a value is added. Receives the value. */\n  added: (value: string) => string;\n  /** Announced after a value is removed. Receives the value. */\n  removed: (value: string) => string;\n  /** Accessible name for each chip's dismiss button. */\n  remove: string;\n  /** Shown when `max` is reached. Receives the limit. */\n  atLimit: (max: number) => string;\n  /** Shown when a duplicate is rejected. Receives the value. */\n  duplicate: (value: string) => string;\n}\n\nexport const DEFAULT_CHIP_INPUT_LABELS: ChipInputLabels = {\n  added: (v) => `${v} added`,\n  removed: (v) => `${v} removed`,\n  remove: \"Remove\",\n  atLimit: (max) => `Limit of ${max} reached`,\n  duplicate: (v) => `${v} is already in the list`,\n};\n\nexport function resolveChipInputLabels(labels?: Partial<ChipInputLabels>): ChipInputLabels {\n  return labels ? { ...DEFAULT_CHIP_INPUT_LABELS, ...labels } : DEFAULT_CHIP_INPUT_LABELS;\n}\n\n/**\n * `onChange` is the field's own — the whole LIST, not a DOM event — so the wrapper\n * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this\n * component's, forwarded to the inner `<input>`; the div has none of its own.\n */\nexport interface ChipInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"placeholder\" | \"children\"> {\n  value: string[];\n  onChange: (next: string[]) => void;\n  placeholder?: string;\n  /** Visible label, rendered above the field. Without one, name the field with\n   *  `aria-label`. */\n  label?: string;\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling the rest of this kit\n   * now uses. Still honoured, and still second to `aria-label` when both are given.\n   */\n  ariaLabel?: string;\n  /** Reject or rewrite a value on commit. Return a string to reject WITH that message. */\n  validate?: (raw: string) => string | null;\n  /** Characters that commit the current text, besides Enter. Default: comma. */\n  separators?: string[];\n  allowDuplicates?: boolean;\n  max?: number;\n  tone?: ChipTone;\n  size?: ChipSize;\n  disabled?: boolean;\n  invalid?: boolean;\n  /** Error text. Wires `aria-describedby` and implies `invalid`. */\n  error?: ReactNode;\n  labels?: Partial<ChipInputLabels>;\n  className?: string;\n}\n\n/**\n * A field whose value is a LIST, entered as chips.\n *\n * The keyboard model is the whole component; the pills are the easy part. Per the WAI\n * pattern for a \"tag\" input:\n *\n *   Enter, or any separator  commit the typed text\n *   Backspace on empty text  move focus to the last chip (does NOT delete it)\n *   ← →  while on a chip     move between chips, in reading order (mirrored in RTL)\n *   Backspace / Delete       remove the focused chip, focus its neighbour\n *   Escape                   clear what is typed but keep the committed chips\n *   paste                    splits on the separators, so a pasted CSV becomes chips\n *\n * The Backspace-on-empty behaviour is the one worth arguing about. Deleting immediately\n * is more common and is a trap: it is a destructive action with no feedback on a key\n * people hit by reflex, and the value it destroys may have taken a while to type. Moving\n * focus first makes the second Backspace a deliberate one, and it is what lets a\n * keyboard user reach a chip at all.\n */\nexport function ChipInput({\n  value,\n  onChange,\n  placeholder,\n  label,\n  ariaLabel,\n  validate,\n  separators = [\",\"],\n  allowDuplicates = false,\n  max,\n  tone = \"neutral\",\n  size = \"md\",\n  disabled = false,\n  invalid = false,\n  error,\n  labels,\n  className,\n  \"aria-label\": ariaLabelAttr,\n  ...rest\n}: ChipInputProps) {\n  // `labels` over the provider's `chipInput` over English — the same order\n  // `resolveChipInputLabels` gives outside a provider.\n  const text = useKitLabels(\"chipInput\", DEFAULT_CHIP_INPUT_LABELS, labels);\n  // A batch of pasted values is announced as one list, joined the way the language\n  // joins a list in a sentence (\"a, b and c added\") — hence the long conjunction,\n  // where a trigger's summary would use the narrow one.\n  const locale = useKitLocale();\n  const [draft, setDraft] = useState(\"\");\n  const [message, setMessage] = useState(\"\");\n  // The last refusal, shown under the field until the next edit. The live region alone\n  // told only a screen-reader user why Enter did nothing; everyone else saw the text\n  // simply stay put.\n  const [rejected, setRejected] = useState<string | null>(null);\n  const [focusedChip, setFocusedChip] = useState<number | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const chipRefs = useRef<Array<HTMLElement | null>>([]);\n  const id = useId();\n  const listId = `${id}-list`;\n  const errorId = `${id}-error`;\n  const rejectedId = `${id}-rejected`;\n  const isInvalid = invalid || !!error;\n  const describedBy = [error ? errorId : null, rejected ? rejectedId : null]\n    .filter(Boolean)\n    .join(\" \");\n\n  const focusChip = (index: number | null) => {\n    setFocusedChip(index);\n    if (index === null) inputRef.current?.focus();\n    else chipRefs.current[index]?.focus();\n  };\n\n  /**\n   * Try to add every candidate, as ONE change.\n   *\n   * Batched rather than looped for a reason that bites immediately: `commit` closes over\n   * `value`, so calling it once per pasted item makes every call compute its result from\n   * the list as it was BEFORE the paste, and each `onChange` overwrites the last. A\n   * pasted \"one,two,three\" left only \"three\". Accumulating locally and emitting once is\n   * also the correct behaviour for an undo stack — a paste is one action.\n   */\n  const commitMany = (raws: string[]): { added: string[]; rejection: string | null } => {\n    const next = [...value];\n    const added: string[] = [];\n    let rejection: string | null = null;\n\n    for (const raw of raws) {\n      const candidate = raw.trim();\n      if (!candidate) continue;\n      if (max !== undefined && next.length >= max) {\n        rejection ??= text.atLimit(max);\n        break;\n      }\n      if (!allowDuplicates && next.includes(candidate)) {\n        rejection ??= text.duplicate(candidate);\n        continue;\n      }\n      const invalidReason = validate?.(candidate);\n      if (invalidReason) {\n        rejection ??= invalidReason;\n        continue;\n      }\n      next.push(candidate);\n      added.push(candidate);\n    }\n\n    if (added.length) onChange(next);\n    // A rejection is the more useful thing to say: \"three added\" is obvious from the\n    // chips appearing, whereas \"already in the list\" is the only sign of what did not.\n    const addedList = new Intl.ListFormat(locale, { type: \"conjunction\", style: \"long\" });\n    setMessage(rejection ?? (added.length ? text.added(addedList.format(added)) : \"\"));\n    setRejected(rejection);\n    return { added, rejection };\n  };\n\n  const commit = (raw: string): boolean => commitMany([raw]).added.length > 0;\n\n  const removeAt = (index: number) => {\n    const removed = value[index];\n    onChange(value.filter((_, i) => i !== index));\n    setMessage(text.removed(removed));\n    setRejected(null);\n    // Focus the neighbour that takes its place, or the input when the list empties —\n    // dropping focus to <body> here is how a keyboard user loses the field entirely.\n    const next = index >= value.length - 1 ? null : index;\n    requestAnimationFrame(() => focusChip(value.length - 1 === 0 ? null : next));\n  };\n\n  const onInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      // Only when there is something to commit: an empty Enter belongs to the form.\n      if (draft.trim()) {\n        e.preventDefault();\n        if (commit(draft)) setDraft(\"\");\n      }\n      return;\n    }\n    if (separators.includes(e.key)) {\n      e.preventDefault();\n      if (commit(draft)) setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Escape\" && draft) {\n      e.preventDefault();\n      setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Backspace\" && !draft && value.length) {\n      e.preventDefault();\n      focusChip(value.length - 1);\n    }\n  };\n\n  const onChipKeyDown = (e: KeyboardEvent<HTMLElement>, index: number) => {\n    if (e.key === \"Backspace\" || e.key === \"Delete\") {\n      e.preventDefault();\n      removeAt(index);\n      return;\n    }\n    // ←/→ follow the reading direction, not DOM order: in RTL the previous chip is to\n    // the RIGHT, and ArrowLeft moves on towards the input.\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step === -1 && index > 0) {\n      e.preventDefault();\n      focusChip(index - 1);\n      return;\n    }\n    if (step === 1) {\n      e.preventDefault();\n      focusChip(index === value.length - 1 ? null : index + 1);\n      return;\n    }\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      focusChip(null);\n    }\n  };\n\n  return (\n    // The rest lands on the OUTER box — the thing a `data-tour` step or a test id\n    // wants to point at — while the accessible name below goes on the `<input>`,\n    // because that is what a screen-reader user actually lands in. Spreading the two\n    // to the same element would have named a decorative wrapper and left the field\n    // anonymous.\n    <div {...rest} className={cn(\"space-y-1\", className)}>\n      {label && (\n        <label htmlFor={`${id}-input`} className=\"block text-sm text-[var(--text-secondary)]\">\n          {label}\n        </label>\n      )}\n      <div\n        // `relative` so the live region below can be `sr-only` without escaping to the\n        // initial containing block and inflating the document height.\n        className={cn(\n          \"relative flex flex-wrap items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 shadow-sm\",\n          \"focus-within:border-[var(--brand)] focus-within:ring-1 focus-within:ring-[var(--brand)]\",\n          disabled && \"cursor-default bg-[var(--bg-surface-2)]\",\n          isInvalid && FIELD_INVALID,\n        )}\n        onClick={() => !disabled && inputRef.current?.focus()}\n      >\n        {/* `display: contents` on the wrappers so the chips participate in the field's\n            own flex wrap rather than forming a nested row. The list semantics are\n            restored with explicit roles, because `contents` removes the ul/li boxes from\n            the accessibility tree in several engines. */}\n        {/* eslint-disable-next-line jsx-a11y/no-redundant-roles -- NOT redundant here: the\n            `contents` display below removes the ul and li boxes from the box tree, and\n            several engines drop the list semantics with them. The explicit role is what\n            puts \"list, 3 items\" back. */}\n        <ul id={listId} role=\"list\" className=\"contents\">\n          {value.map((v, i) => (\n            <li key={`${v}-${i}`} role=\"presentation\" className=\"contents\">\n              <Chip\n                ref={(el: HTMLElement | null) => {\n                  chipRefs.current[i] = el;\n                }}\n                tone={tone}\n                size={size}\n                disabled={disabled}\n                removeLabel={text.remove}\n                onRemove={disabled ? undefined : () => removeAt(i)}\n                // A ROVING tabIndex: only the focused chip is tabbable, so Tab leaves\n                // the field instead of walking through every value in it — the reason a\n                // list of twenty tags is otherwise a twenty-stop detour for a keyboard.\n                tabIndex={focusedChip === i ? 0 : -1}\n                role=\"listitem\"\n                aria-label={v}\n                onKeyDown={(e) => onChipKeyDown(e, i)}\n                onFocus={() => setFocusedChip(i)}\n                data-chip-index={i}\n              >\n                {v}\n              </Chip>\n            </li>\n          ))}\n        </ul>\n        <input\n          id={`${id}-input`}\n          ref={inputRef}\n          value={draft}\n          onChange={(e) => {\n            setDraft(e.target.value);\n            setMessage(\"\");\n            setRejected(null);\n          }}\n          onKeyDown={onInputKeyDown}\n          onBlur={() => {\n            // Commit on blur: a value typed and then clicked away from is a value the\n            // user meant to add, and losing it silently is the commonest complaint\n            // about this pattern.\n            if (draft.trim() && commit(draft)) setDraft(\"\");\n          }}\n          onPaste={(e) => {\n            const pasted = e.clipboardData.getData(\"text\");\n            const pattern = new RegExp(`[${separators.map((s) => `\\\\${s}`).join(\"\")}\\n\\r]`);\n            if (!pattern.test(pasted)) return;\n            e.preventDefault();\n            if (commitMany(pasted.split(pattern)).added.length) setDraft(\"\");\n          }}\n          placeholder={value.length ? undefined : placeholder}\n          disabled={disabled}\n          // A visible `label` is already wired through `htmlFor`, so adding a name\n          // here would give the field two. Failing that, the DOM spelling wins and\n          // the deprecated `ariaLabel` is the fallback.\n          aria-label={label ? undefined : (ariaLabelAttr ?? ariaLabel)}\n          aria-describedby={describedBy || undefined}\n          aria-invalid={isInvalid || !!rejected || undefined}\n          className=\"min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-placeholder)] disabled:cursor-default\"\n        />\n        {/* Additions, removals and rejections move no focus, so nothing would announce\n            them. `sr-only-fixed` rather than `sr-only`: this sits inside a consumer's\n            markup and must not extend the document height. */}\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {message}\n        </span>\n      </div>\n      {error && (\n        <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n      {rejected && (\n        <p id={rejectedId} className=\"text-xs text-[var(--danger)]\" data-chip-input-rejected=\"\">\n          {rejected}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Chip","inner"]}

package/dist/components/choice-card.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, ComponentType } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, ComponentType, Ref, MouseEvent, ReactElement } from 'react';
 
 /**
  * A checkbox or a radio, presented as a bordered card: a title, a line of description,
@@ -58,6 +58,22 @@ interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "t
 declare const ChoiceCard: react.ForwardRefExoticComponent<ChoiceCardProps & react.RefAttributes<HTMLInputElement>>;
 /** The colour of {@link ActionCardProps.meta}. */
 type ActionCardMetaTone = "muted" | "warning" | "danger" | "info" | "success";
+/** The colour of {@link ActionCardProps.icon}. `default` is the secondary text colour
+ *  the icon has always had; `brand` tints it (keksdose's privacy enrolment). */
+type ActionCardIconTone = "default" | "muted" | "brand" | "warning" | "danger" | "info" | "success";
+/** What {@link ActionCardProps.renderLink} (and the provider's `linkComponent`) is
+ *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */
+interface ActionCardLinkProps {
+    href: string;
+    /** The card's whole look — keep it. */
+    className: string;
+    children: ReactNode;
+    ref?: Ref<HTMLAnchorElement>;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    id?: string;
+    [key: `aria-${string}`]: string | boolean | number | undefined;
+    [key: `data-${string}`]: unknown;
+}
 interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
     /** What the card does — the button's accessible name. */
     title: ReactNode;
@@ -74,13 +90,29 @@ interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     metaTone?: ActionCardMetaTone;
     /** A Lucide icon (or any component taking a `className`), shown at the card's start. */
     icon?: ChoiceCardProps["icon"];
+    /** The icon's colour. Default `default` (the secondary text colour). */
+    iconTone?: ActionCardIconTone;
+    /** Classes on the icon, after {@link iconTone} — a size, a tinted tile behind it. */
+    iconClassName?: string;
+    /**
+     * Makes the card a LINK to another page rather than a button that acts: kastlan's
+     * section tiles on the group overview (group-overview-page), each an icon, a name and
+     * a line on what is there. A real `<a href>`, so a middle click opens it in a new
+     * tab. A `disabled` card renders the inert button instead — a link cannot be
+     * disabled. The ref then reaches the `<a>`.
+     */
+    href?: string;
+    /** Your router's link for an in-app `href`. Default: the `<UiKitProvider
+     *  linkComponent>`, then a plain `<a>`. Ignored without `href`. */
+    renderLink?: (props: ActionCardLinkProps) => ReactElement;
 }
 /**
  * A {@link ChoiceCard} that ACTS rather than holds a state: a `<button>` with the
  * card's icon, title and description, plus a `meta` line, that runs `onClick` the
  * moment it is pressed. keksdose's privacy enrolment (privacy-enroll-dialog:345,
  * `CustodyOption`) offers two custody modes this way — picking one IS the next step,
- * so there is no checked state to show and no "Continue" to press after it.
+ * so there is no checked state to show and no "Continue" to press after it. With
+ * `href` it is the same card as a link (kastlan's overview section tiles).
  *
  * A separate component rather than `ChoiceCard as="button"`: a ChoiceCard is an
  * `<input>` (its ref, its `checked`, its form value), and a button shares none of it.
@@ -146,4 +178,4 @@ type ChoiceCardGroupProps<T extends string> = ChoiceCardSingleProps<T> | ChoiceC
  */
 declare function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>): react.JSX.Element;
 
-export { ActionCard, type ActionCardMetaTone, type ActionCardProps, ChoiceCard, ChoiceCardGroup, type ChoiceCardGroupProps, type ChoiceCardMultipleProps, type ChoiceCardOption, type ChoiceCardProps, type ChoiceCardSingleProps, type ChoiceCardType };
+export { ActionCard, type ActionCardIconTone, type ActionCardLinkProps, type ActionCardMetaTone, type ActionCardProps, ChoiceCard, ChoiceCardGroup, type ChoiceCardGroupProps, type ChoiceCardMultipleProps, type ChoiceCardOption, type ChoiceCardProps, type ChoiceCardSingleProps, type ChoiceCardType };