@eifi1/ui-kit 0.40.1 → 0.41.0

package/dist/components/nav-pills.d.ts

@@ -56,8 +56,8 @@ export interface NavPillsProps<T extends string> extends Omit<ComponentPropsWith
  * keksdose's swipe-settings card (swipe-settings-card:152) hand-rolled this: four
  * surface names that do not fit a 406px phone, and a sideways scroll would hide the
  * ones that do not fit behind a gesture nothing announces (live #332: *"Have the tabs
- * in more rows, rather than scrolling sideways"*). It is not {@link Tabs} with `wrap`
- * because its items are not tabs: a `role="tab"` promises a tabpanel, a roving tab
+ * in more rows, rather than scrolling sideways"*). It is not {@link Tabs} (which
+ * scrolls; its multirow `wrap` went in 0.41) because its items are not tabs: a `role="tab"` promises a tabpanel, a roving tab
  * stop and arrow keys, and a set of links to pages (or of buttons that switch the rest
  * of a card) promises none of that. So every pill is its own tab stop, the set is a
  * list (a screen reader hears "list, 4 items"), and "current" is `aria-current` — the

package/dist/components/nav-pills.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/nav-pills.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ComponentType, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface NavPillItem<T extends string> {\n  value: T;\n  label: ReactNode;\n  /** Where the pill leads. With one it is a link (see `renderLink`); without, a button\n   *  that calls `onSelect`. */\n  href?: string;\n  /** A Lucide icon (or any component taking a `className`), before the label. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Buttons only — a link cannot be disabled. */\n  disabled?: boolean;\n}\n\n/** What {@link NavPillsProps.renderLink} is handed. Spread it onto your router's link\n *  — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface NavPillLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n  \"aria-current\": NavPillsCurrent | undefined;\n  onClick: (e: MouseEvent<HTMLAnchorElement>) => void;\n}\n\n/** The `aria-current` token the current pill carries. */\nexport type NavPillsCurrent = \"page\" | \"step\" | \"location\" | \"true\";\n\nexport interface NavPillsProps<T extends string> extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\" | \"onSelect\"> {\n  items: NavPillItem<T>[];\n  /** The pill that is current. `null` or a value not in `items`: none is. */\n  current: T | null;\n  /** Called with the pill's value on a click — of a button, and of a link too (before\n   *  the router follows it), for a caller that keeps the choice in state as well. */\n  onSelect?: (value: T) => void;\n  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n   *  `href`), then `<a>`. The API `Breadcrumbs`, `Chip` and `ListItem` share. */\n  renderLink?: (props: NavPillLinkProps) => ReactElement;\n  /** What `aria-current` says on the current pill. Default `page` where the items\n   *  are links and `true` where they are buttons (keksdose's swipe-surface picker\n   *  switches a panel on the same page, which is not a page). */\n  currentType?: NavPillsCurrent;\n  /** `sm`: 12px pills — the compact size of a {@link ToggleGroup}. Default `md`. */\n  size?: \"sm\" | \"md\";\n  /** Render a `<nav>` landmark (default) or a plain `<div role=\"group\">` for a picker\n   *  that is not the page's navigation. Name either with `aria-label`. */\n  landmark?: boolean;\n  /** Classes for every pill. */\n  itemClassName?: string;\n  /** The `<nav>` (or the `<div role=\"group\">`) — hence `HTMLElement` (0.34, API-2,\n   *  refactor audit 2026-10). */\n  ref?: Ref<HTMLElement>;\n}\n\n// The pill is a ToggleGroup segment's (`rounded`, `px-3 py-1.5`, the inverse fill for\n// the current one), so a strip of these beside a segmented control reads as the same\n// family. Unlike the segments, a pill never truncates: the strip WRAPS instead. Its focus\n// ring is the kit's one focus frame (text-size §5), in brand; until 0.34 it copied the\n// segment's `ring-strong` too (refactor audit 2026-10, DOC-7).\nconst PILL = `inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none ${FOCUS_RING} [&_svg]:size-4 [&_svg]:shrink-0`;\nconst PILL_SM = \"gap-1 px-2 py-1 text-xs [&_svg]:size-3.5\";\nconst PILL_CURRENT = \"bg-inverse text-inverse\";\nconst PILL_IDLE = \"text-secondary hover:bg-hover hover:text-primary\";\nconst PILL_DISABLED = \"cursor-not-allowed opacity-50 hover:bg-transparent hover:text-secondary\";\n\n/**\n * A set of links or buttons that WRAPS onto as many rows as it needs, the current one\n * filled and marked `aria-current`.\n *\n * keksdose's swipe-settings card (swipe-settings-card:152) hand-rolled this: four\n * surface names that do not fit a 406px phone, and a sideways scroll would hide the\n * ones that do not fit behind a gesture nothing announces (live #332: *\"Have the tabs\n * in more rows, rather than scrolling sideways\"*). It is not {@link Tabs} with `wrap`\n * because its items are not tabs: a `role=\"tab\"` promises a tabpanel, a roving tab\n * stop and arrow keys, and a set of links to pages (or of buttons that switch the rest\n * of a card) promises none of that. So every pill is its own tab stop, the set is a\n * list (a screen reader hears \"list, 4 items\"), and \"current\" is `aria-current` — the\n * attribute a link to where you already are carries.\n */\nexport function NavPills<T extends string>({\n  items,\n  current,\n  onSelect,\n  renderLink,\n  currentType,\n  size = \"md\",\n  landmark = true,\n  itemClassName,\n  className,\n  ref,\n  ...rest\n}: NavPillsProps<T>) {\n  const kitLink = useKitLink();\n  const Root = landmark ? \"nav\" : \"div\";\n  return (\n    <Root\n      {...rest}\n      ref={ref as Ref<HTMLDivElement> | undefined}\n      role={landmark ? undefined : \"group\"}\n      className={cn(\"min-w-0\", className)}\n    >\n      <ul className=\"m-0 flex list-none flex-wrap gap-1 p-0\">\n        {items.map((item) => {\n          const isCurrent = item.value === current;\n          const Icon = item.icon;\n          const pillClass = cn(\n            PILL,\n            size === \"sm\" && PILL_SM,\n            isCurrent ? PILL_CURRENT : PILL_IDLE,\n            item.disabled && item.href === undefined && PILL_DISABLED,\n            itemClassName,\n          );\n          const children = (\n            <>\n              {Icon && <Icon aria-hidden />}\n              {item.label}\n            </>\n          );\n          let pill: ReactNode;\n          if (item.href !== undefined) {\n            const props: NavPillLinkProps = {\n              href: item.href,\n              className: pillClass,\n              children,\n              \"aria-current\": isCurrent ? (currentType ?? \"page\") : undefined,\n              onClick: () => onSelect?.(item.value),\n            };\n            const kit = pickLinkRenderer<NavPillLinkProps>(undefined, kitLink, item.href);\n            pill = renderLink ? (\n              renderLink(props)\n            ) : kit ? (\n              <RenderedKitLink render={kit} props={props} />\n            ) : (\n              <a href={props.href} className={props.className} aria-current={props[\"aria-current\"]} onClick={props.onClick}>\n                {props.children}\n              </a>\n            );\n          } else {\n            pill = (\n              <button\n                type=\"button\"\n                disabled={item.disabled}\n                aria-current={isCurrent ? (currentType ?? \"true\") : undefined}\n                onClick={() => onSelect?.(item.value)}\n                className={pillClass}\n              >\n                {children}\n              </button>\n            );\n          }\n          return (\n            <li key={item.value} className=\"flex\">\n              {pill}\n            </li>\n          );\n        })}\n      </ul>\n    </Root>\n  );\n}\n"],"mappings":";AAoHY,mBACW,KADX;AAnHZ,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB,uBAAuB;AA0DlD,MAAM,OAAO,sIAAsI,UAAU;AAC7J,MAAM,UAAU;AAChB,MAAM,eAAe;AACrB,MAAM,YAAY;AAClB,MAAM,gBAAgB;AAgBf,SAAS,SAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,UAAU,WAAW;AAC3B,QAAM,OAAO,WAAW,QAAQ;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,MAAM,WAAW,SAAY;AAAA,MAC7B,WAAW,GAAG,WAAW,SAAS;AAAA,MAElC,8BAAC,QAAG,WAAU,0CACX,gBAAM,IAAI,CAAC,SAAS;AACnB,cAAM,YAAY,KAAK,UAAU;AACjC,cAAM,OAAO,KAAK;AAClB,cAAM,YAAY;AAAA,UAChB;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,YAAY,eAAe;AAAA,UAC3B,KAAK,YAAY,KAAK,SAAS,UAAa;AAAA,UAC5C;AAAA,QACF;AACA,cAAM,WACJ,iCACG;AAAA,kBAAQ,oBAAC,QAAK,eAAW,MAAC;AAAA,UAC1B,KAAK;AAAA,WACR;AAEF,YAAI;AACJ,YAAI,KAAK,SAAS,QAAW;AAC3B,gBAAM,QAA0B;AAAA,YAC9B,MAAM,KAAK;AAAA,YACX,WAAW;AAAA,YACX;AAAA,YACA,gBAAgB,YAAa,eAAe,SAAU;AAAA,YACtD,SAAS,MAAM,WAAW,KAAK,KAAK;AAAA,UACtC;AACA,gBAAM,MAAM,iBAAmC,QAAW,SAAS,KAAK,IAAI;AAC5E,iBAAO,aACL,WAAW,KAAK,IACd,MACF,oBAAC,mBAAgB,QAAQ,KAAK,OAAc,IAE5C,oBAAC,OAAE,MAAM,MAAM,MAAM,WAAW,MAAM,WAAW,gBAAc,MAAM,cAAc,GAAG,SAAS,MAAM,SAClG,gBAAM,UACT;AAAA,QAEJ,OAAO;AACL,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU,KAAK;AAAA,cACf,gBAAc,YAAa,eAAe,SAAU;AAAA,cACpD,SAAS,MAAM,WAAW,KAAK,KAAK;AAAA,cACpC,WAAW;AAAA,cAEV;AAAA;AAAA,UACH;AAAA,QAEJ;AACA,eACE,oBAAC,QAAoB,WAAU,QAC5B,kBADM,KAAK,KAEd;AAAA,MAEJ,CAAC,GACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/nav-pills.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ComponentType, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface NavPillItem<T extends string> {\n  value: T;\n  label: ReactNode;\n  /** Where the pill leads. With one it is a link (see `renderLink`); without, a button\n   *  that calls `onSelect`. */\n  href?: string;\n  /** A Lucide icon (or any component taking a `className`), before the label. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Buttons only — a link cannot be disabled. */\n  disabled?: boolean;\n}\n\n/** What {@link NavPillsProps.renderLink} is handed. Spread it onto your router's link\n *  — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface NavPillLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n  \"aria-current\": NavPillsCurrent | undefined;\n  onClick: (e: MouseEvent<HTMLAnchorElement>) => void;\n}\n\n/** The `aria-current` token the current pill carries. */\nexport type NavPillsCurrent = \"page\" | \"step\" | \"location\" | \"true\";\n\nexport interface NavPillsProps<T extends string> extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\" | \"onSelect\"> {\n  items: NavPillItem<T>[];\n  /** The pill that is current. `null` or a value not in `items`: none is. */\n  current: T | null;\n  /** Called with the pill's value on a click — of a button, and of a link too (before\n   *  the router follows it), for a caller that keeps the choice in state as well. */\n  onSelect?: (value: T) => void;\n  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n   *  `href`), then `<a>`. The API `Breadcrumbs`, `Chip` and `ListItem` share. */\n  renderLink?: (props: NavPillLinkProps) => ReactElement;\n  /** What `aria-current` says on the current pill. Default `page` where the items\n   *  are links and `true` where they are buttons (keksdose's swipe-surface picker\n   *  switches a panel on the same page, which is not a page). */\n  currentType?: NavPillsCurrent;\n  /** `sm`: 12px pills — the compact size of a {@link ToggleGroup}. Default `md`. */\n  size?: \"sm\" | \"md\";\n  /** Render a `<nav>` landmark (default) or a plain `<div role=\"group\">` for a picker\n   *  that is not the page's navigation. Name either with `aria-label`. */\n  landmark?: boolean;\n  /** Classes for every pill. */\n  itemClassName?: string;\n  /** The `<nav>` (or the `<div role=\"group\">`) — hence `HTMLElement` (0.34, API-2,\n   *  refactor audit 2026-10). */\n  ref?: Ref<HTMLElement>;\n}\n\n// The pill is a ToggleGroup segment's (`rounded`, `px-3 py-1.5`, the inverse fill for\n// the current one), so a strip of these beside a segmented control reads as the same\n// family. Unlike the segments, a pill never truncates: the strip WRAPS instead. Its focus\n// ring is the kit's one focus frame (text-size §5), in brand; until 0.34 it copied the\n// segment's `ring-strong` too (refactor audit 2026-10, DOC-7).\nconst PILL = `inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none ${FOCUS_RING} [&_svg]:size-4 [&_svg]:shrink-0`;\nconst PILL_SM = \"gap-1 px-2 py-1 text-xs [&_svg]:size-3.5\";\nconst PILL_CURRENT = \"bg-inverse text-inverse\";\nconst PILL_IDLE = \"text-secondary hover:bg-hover hover:text-primary\";\nconst PILL_DISABLED = \"cursor-not-allowed opacity-50 hover:bg-transparent hover:text-secondary\";\n\n/**\n * A set of links or buttons that WRAPS onto as many rows as it needs, the current one\n * filled and marked `aria-current`.\n *\n * keksdose's swipe-settings card (swipe-settings-card:152) hand-rolled this: four\n * surface names that do not fit a 406px phone, and a sideways scroll would hide the\n * ones that do not fit behind a gesture nothing announces (live #332: *\"Have the tabs\n * in more rows, rather than scrolling sideways\"*). It is not {@link Tabs} (which\n * scrolls; its multirow `wrap` went in 0.41) because its items are not tabs: a `role=\"tab\"` promises a tabpanel, a roving tab\n * stop and arrow keys, and a set of links to pages (or of buttons that switch the rest\n * of a card) promises none of that. So every pill is its own tab stop, the set is a\n * list (a screen reader hears \"list, 4 items\"), and \"current\" is `aria-current` — the\n * attribute a link to where you already are carries.\n */\nexport function NavPills<T extends string>({\n  items,\n  current,\n  onSelect,\n  renderLink,\n  currentType,\n  size = \"md\",\n  landmark = true,\n  itemClassName,\n  className,\n  ref,\n  ...rest\n}: NavPillsProps<T>) {\n  const kitLink = useKitLink();\n  const Root = landmark ? \"nav\" : \"div\";\n  return (\n    <Root\n      {...rest}\n      ref={ref as Ref<HTMLDivElement> | undefined}\n      role={landmark ? undefined : \"group\"}\n      className={cn(\"min-w-0\", className)}\n    >\n      <ul className=\"m-0 flex list-none flex-wrap gap-1 p-0\">\n        {items.map((item) => {\n          const isCurrent = item.value === current;\n          const Icon = item.icon;\n          const pillClass = cn(\n            PILL,\n            size === \"sm\" && PILL_SM,\n            isCurrent ? PILL_CURRENT : PILL_IDLE,\n            item.disabled && item.href === undefined && PILL_DISABLED,\n            itemClassName,\n          );\n          const children = (\n            <>\n              {Icon && <Icon aria-hidden />}\n              {item.label}\n            </>\n          );\n          let pill: ReactNode;\n          if (item.href !== undefined) {\n            const props: NavPillLinkProps = {\n              href: item.href,\n              className: pillClass,\n              children,\n              \"aria-current\": isCurrent ? (currentType ?? \"page\") : undefined,\n              onClick: () => onSelect?.(item.value),\n            };\n            const kit = pickLinkRenderer<NavPillLinkProps>(undefined, kitLink, item.href);\n            pill = renderLink ? (\n              renderLink(props)\n            ) : kit ? (\n              <RenderedKitLink render={kit} props={props} />\n            ) : (\n              <a href={props.href} className={props.className} aria-current={props[\"aria-current\"]} onClick={props.onClick}>\n                {props.children}\n              </a>\n            );\n          } else {\n            pill = (\n              <button\n                type=\"button\"\n                disabled={item.disabled}\n                aria-current={isCurrent ? (currentType ?? \"true\") : undefined}\n                onClick={() => onSelect?.(item.value)}\n                className={pillClass}\n              >\n                {children}\n              </button>\n            );\n          }\n          return (\n            <li key={item.value} className=\"flex\">\n              {pill}\n            </li>\n          );\n        })}\n      </ul>\n    </Root>\n  );\n}\n"],"mappings":";AAoHY,mBACW,KADX;AAnHZ,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB,uBAAuB;AA0DlD,MAAM,OAAO,sIAAsI,UAAU;AAC7J,MAAM,UAAU;AAChB,MAAM,eAAe;AACrB,MAAM,YAAY;AAClB,MAAM,gBAAgB;AAgBf,SAAS,SAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,UAAU,WAAW;AAC3B,QAAM,OAAO,WAAW,QAAQ;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,MAAM,WAAW,SAAY;AAAA,MAC7B,WAAW,GAAG,WAAW,SAAS;AAAA,MAElC,8BAAC,QAAG,WAAU,0CACX,gBAAM,IAAI,CAAC,SAAS;AACnB,cAAM,YAAY,KAAK,UAAU;AACjC,cAAM,OAAO,KAAK;AAClB,cAAM,YAAY;AAAA,UAChB;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,YAAY,eAAe;AAAA,UAC3B,KAAK,YAAY,KAAK,SAAS,UAAa;AAAA,UAC5C;AAAA,QACF;AACA,cAAM,WACJ,iCACG;AAAA,kBAAQ,oBAAC,QAAK,eAAW,MAAC;AAAA,UAC1B,KAAK;AAAA,WACR;AAEF,YAAI;AACJ,YAAI,KAAK,SAAS,QAAW;AAC3B,gBAAM,QAA0B;AAAA,YAC9B,MAAM,KAAK;AAAA,YACX,WAAW;AAAA,YACX;AAAA,YACA,gBAAgB,YAAa,eAAe,SAAU;AAAA,YACtD,SAAS,MAAM,WAAW,KAAK,KAAK;AAAA,UACtC;AACA,gBAAM,MAAM,iBAAmC,QAAW,SAAS,KAAK,IAAI;AAC5E,iBAAO,aACL,WAAW,KAAK,IACd,MACF,oBAAC,mBAAgB,QAAQ,KAAK,OAAc,IAE5C,oBAAC,OAAE,MAAM,MAAM,MAAM,WAAW,MAAM,WAAW,gBAAc,MAAM,cAAc,GAAG,SAAS,MAAM,SAClG,gBAAM,UACT;AAAA,QAEJ,OAAO;AACL,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU,KAAK;AAAA,cACf,gBAAc,YAAa,eAAe,SAAU;AAAA,cACpD,SAAS,MAAM,WAAW,KAAK,KAAK;AAAA,cACpC,WAAW;AAAA,cAEV;AAAA;AAAA,UACH;AAAA,QAEJ;AACA,eACE,oBAAC,QAAoB,WAAU,QAC5B,kBADM,KAAK,KAEd;AAAA,MAEJ,CAAC,GACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/tabs.d.ts

@@ -61,34 +61,6 @@ export interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutR
     active: T;
     onChange: (id: T) => void;
     className?: string;
-    /** Let the strip WRAP onto as many rows as it needs below `md`, instead of
-     *  scrolling sideways — for a strip carrying more tabs than fit on a phone row.
-     *  Keksdose live #262: ten reports on a 406px screen showed about three, and the
-     *  round-2 answer (a <select> below `md`) cost a tap to open and a tap to choose.
-     *  *"I would rather keep the tabs but have multirow tabs depending on the screen
-     *  size, I will not loose the function to see all reports at once and navigate by
-     *  single click rather by double click."*
-     *
-     *  The active MARKER has to change with the layout, which is why this cannot be
-     *  done from a call site with a `className`: the default marker is a `border-b-2`
-     *  underline riding the container's own bottom rule, and a tab sitting in a row
-     *  that does not touch that rule cannot wear it — every row but the last would
-     *  show a stray line floating mid-strip, and `-mb-px` would pull each chip a
-     *  pixel into the row beneath it. A wrapped strip marks the active tab with a
-     *  filled brand chip instead, which is also the only thing findable at a glance
-     *  among ten same-weight labels on three rows.
-     *
-     *  From `md` up NOTHING changes: same single-line underline strip, same paddings,
-     *  same colours as every other strip in the app.
-     *
-     *  Opt-in on purpose. The three-tab strips (invoices, statements, bank imports)
-     *  already fit a phone row, and turning those into chips would be an unrequested
-     *  redesign of three other pages.
-     *
-     *  @deprecated 0.40 — use the scrolling strip with `overflowCue`; removed in 0.41. No
-     *  consumer is left (keksdose went back to one scrolling row, live #410); the caret
-     *  says a phone's row goes on. */
-    wrap?: boolean;
     /**
      * The caret beside a SCROLLING strip below `md` (0.40, kk run 79 gap 1): a › while
      * tabs lie past the strip's end — a tap scrolls it on by three quarters of its width —
@@ -101,7 +73,7 @@ export interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutR
      * turns round rather than two that come and go, so the strip's width never changes
      * under the thumb. Out of the tab order — the keyboard walks the strip with the arrow
      * keys, which bring the focused tab into view. From `md` up nothing changes. Ignored on
-     * a `wrap` strip and a vertical one (a side nav is a column, not a row). Names:
+     * a vertical strip (a side nav is a column, not a row). Names:
      * `tabs.more` / `tabs.backToFirst`.
      */
     overflowCue?: boolean;
@@ -187,8 +159,8 @@ export interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutR
      * `onRemove`, `onAdd` — means exactly what it means on the horizontal strip; the
      * badge moves to the row's end.
      *
-     * **On a phone (`usePhoneLayout()`) it becomes the horizontal strip**, `wrap` and
-     * all, rather than staying a column. A side nav only works beside its content; on
+     * **On a phone (`usePhoneLayout()`) it becomes the horizontal strip**, rather than
+     * staying a column. A side nav only works beside its content; on
      * a phone it has to go ABOVE it, and eight full-width rows there push the panel
      * the user picked below the fold on every visit — the two keksdose pages both
      * collapsed theirs into a scrolling row by hand for exactly that reason. The
@@ -203,4 +175,4 @@ export interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutR
      *  view and measures the fade, so neither loses the element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, overflowCue, panelId, onRemove, removeOn, onAdd, addLabel, labels, busy, orientation, "aria-label": ariaLabel, ref, ...rest }: TabsProps<T>): import("react").JSX.Element;
+export declare function Tabs<T extends string>({ tabs, active, onChange, className, overflowCue, panelId, onRemove, removeOn, onAdd, addLabel, labels, busy, orientation, "aria-label": ariaLabel, ref, ...rest }: TabsProps<T>): import("react").JSX.Element;

package/dist/components/tabs.js

@@ -17,24 +17,18 @@ const TABLIST_VERTICAL_CLASSES = "flex flex-col gap-0.5";
 const TAB_VERTICAL_CLASSES = FOCUS_RING_WIDTH + " flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus-visible:ring-strong";
 const TAB_VERTICAL_ACTIVE_CLASSES = "bg-active text-primary";
 const TAB_VERTICAL_INACTIVE_CLASSES = "text-muted hover:bg-hover hover:text-primary";
-const TABLIST_WRAP_CLASSES = "flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-subtle";
 const TAB_CLASSES = FOCUS_RING_WIDTH + " max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus-visible:ring-strong";
 const TAB_ACTIVE_CLASSES = "border-[var(--text-primary)] text-primary";
 const TAB_INACTIVE_CLASSES = "border-transparent text-muted hover:text-secondary hover:border-strong";
-const TAB_WRAP_CLASSES = FOCUS_RING_WIDTH + " max-w-full whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-strong md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm";
-const TAB_WRAP_ACTIVE_CLASSES = "bg-brand text-brand-contrast md:border-[var(--text-primary)] md:text-primary";
-const TAB_WRAP_INACTIVE_CLASSES = "bg-surface text-primary md:border-transparent md:text-muted md:hover:border-strong md:hover:text-secondary";
-const TAB_REMOVABLE_CLASSES = "pe-8 md:pe-8";
+const TAB_REMOVABLE_CLASSES = "pe-8";
 const TAB_EMPTY_CLASSES = "-mx-1.5 rounded border border-dashed border-strong px-1.5";
 const TAB_ADD_CLASSES = FOCUS_RING_WIDTH + " inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-muted transition-colors hover:text-primary focus:outline-none focus-visible:ring-strong disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4";
-const TAB_ADD_WRAP_CLASSES = "px-2.5 text-xs md:px-3 md:text-sm";
 const TAB_ADD_PHONE_CLASSES = "relative max-md:px-2";
 function Tabs({
   tabs,
   active,
   onChange,
   className,
-  wrap = false,
   overflowCue = false,
   panelId,
   onRemove,
@@ -54,7 +48,7 @@ function Tabs({
   const stripRef = useRef(null);
   const setStrip = useMemo(() => mergeRefs(stripRef, ref), [ref]);
   const fade = useStripFade(stripRef);
-  const cue = overflowCue && !wrap && !vertical && fade.overflow !== void 0;
+  const cue = overflowCue && !vertical && fade.overflow !== void 0;
   const cueAtEnd = fade.overflow === "start";
   const onCue = () => {
     const strip = stripRef.current;
@@ -142,8 +136,8 @@ function Tabs({
       style: fade.mask ? { ...rest.style, maskImage: fade.mask, WebkitMaskImage: fade.mask } : rest.style,
       "data-overflow": fade.overflow,
       className: cn(
-        vertical ? TABLIST_VERTICAL_CLASSES : wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,
-        onAdd ? "min-w-0" : overflowCue && !wrap && !vertical ? "min-w-0 flex-1" : className
+        vertical ? TABLIST_VERTICAL_CLASSES : TABLIST_CLASSES,
+        onAdd ? "min-w-0" : overflowCue && !vertical ? "min-w-0 flex-1" : className
       ),
       children: tabs.map((tab) => {
         const isActive = tab.id === active;
@@ -174,8 +168,8 @@ function Tabs({
             isActive ? TAB_VERTICAL_ACTIVE_CLASSES : TAB_VERTICAL_INACTIVE_CLASSES,
             removable && "pe-8"
           ) : cn(
-            wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,
-            wrap ? isActive ? TAB_WRAP_ACTIVE_CLASSES : TAB_WRAP_INACTIVE_CLASSES : isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_CLASSES,
+            TAB_CLASSES,
+            isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_CLASSES,
             removable && TAB_REMOVABLE_CLASSES
           )
         };
@@ -198,20 +192,7 @@ function Tabs({
                 /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start text-start", children: [
                   /* @__PURE__ */ jsx("span", { className: "max-w-full truncate-until-large", children: tab.label }),
                   " ",
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "max-w-full truncate-until-large text-caption font-normal leading-tight text-muted",
-                        // On a wrapped strip's filled chip (below `md`) the muted grey
-                        // was dark text on the brand fill — "loop 2" all but vanished
-                        // under the one label that most needed reading. It takes the
-                        // chip's own ink instead, as the label and the × already do.
-                        wrap && isActive && !vertical && "text-brand-contrast md:text-muted"
-                      ),
-                      children: tab.detail
-                    }
-                  )
+                  /* @__PURE__ */ jsx("span", { className: "max-w-full truncate-until-large text-caption font-normal leading-tight text-muted", children: tab.detail })
                 ] })
               ) : tab.label,
               tab.badge != null ? vertical ? /* @__PURE__ */ jsx("span", { className: "ms-auto flex shrink-0 items-center", children: tab.badge }) : tab.badge : null
@@ -257,12 +238,7 @@ function Tabs({
                 type: "button",
                 disabled: busy,
                 onClick: () => requestRemove(tab.id),
-                className: cn(
-                  "absolute inset-y-0 end-1 my-auto",
-                  // On a wrapped strip's filled chip the quiet grey would vanish into
-                  // the brand fill below `md`.
-                  wrap && "text-brand-contrast md:text-placeholder"
-                ),
+                className: "absolute inset-y-0 end-1 my-auto",
                 children: /* @__PURE__ */ jsx(X, {})
               }
             )
@@ -284,7 +260,7 @@ function Tabs({
       children: text.remove(nameOf(activeTab))
     }
   ) : null;
-  if (!onAdd && overflowCue && !wrap && !vertical) {
+  if (!onAdd && overflowCue && !vertical) {
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-end", className), children: [
       tablist,
       removeButton,
@@ -307,42 +283,30 @@ function Tabs({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        wrap ? "flex flex-wrap items-end gap-1.5 md:flex-nowrap md:gap-0" : "flex items-end",
-        className
-      ),
-      children: [
-        tablist,
-        removeButton,
-        cueButton,
-        /* @__PURE__ */ jsx(
-          "div",
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-end", className), children: [
+    tablist,
+    removeButton,
+    cueButton,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex flex-1 items-center self-stretch border-b border-subtle",
+        children: /* @__PURE__ */ jsxs(
+          "button",
           {
-            className: cn(
-              "flex flex-1 items-center",
-              wrap ? "md:self-stretch md:border-b md:border-subtle" : "self-stretch border-b border-subtle"
-            ),
-            children: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: onAdd,
-                disabled: busy,
-                className: cn(TAB_ADD_CLASSES, wrap ? TAB_ADD_WRAP_CLASSES : TAB_ADD_PHONE_CLASSES),
-                children: [
-                  /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
-                  /* @__PURE__ */ jsx("span", { className: wrap ? void 0 : "max-md:sr-only", children: addLabel ?? text.add })
-                ]
-              }
-            )
+            type: "button",
+            onClick: onAdd,
+            disabled: busy,
+            className: cn(TAB_ADD_CLASSES, TAB_ADD_PHONE_CLASSES),
+            children: [
+              /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "max-md:sr-only", children: addLabel ?? text.add })
+            ]
           }
         )
-      ]
-    }
-  );
+      }
+    )
+  ] });
 }
 export {
   DEFAULT_TABS_LABELS,

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef } from \"react\";\nimport { ChevronLeft, ChevronRight, Plus, X } from \"lucide-react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport { scrollIntoStrip, useStripFade } from \"../lib/strip-fade\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { prefersReducedMotion } from \"../lib/reduced-motion\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { mergeRefs } from \"./field-parts\";\nimport { DEFAULT_TABS_LABELS } from \"./ui-labels\";\nimport { IconButton } from \"./icon-button\";\n\n/** One tab of a {@link Tabs} strip. */\nexport interface TabItem<T extends string> {\n  id: T;\n  /** A ReactNode so a tab can pair an icon with text. */\n  label: ReactNode;\n  /** Optional trailing node (e.g. a count pill). */\n  badge?: ReactNode;\n  /** Marks a tab that IS a route — see {@link TabsProps}. */\n  href?: string;\n  /** Leading decoration: an icon, or the colour swatches of the lines this tab\n   *  draws in a chart above the strip. Hidden from assistive tech — it repeats\n   *  what the label says, or it says something the label must say instead. */\n  icon?: ReactNode;\n  /** A second, smaller line under the label — the one fact that tells two tabs\n   *  with similar labels apart (\"80 km/h\", \"Level 3\"). Part of the tab's name. */\n  detail?: ReactNode;\n  /** A tab that exists as a slot with nothing in it yet, drawn with a dashed\n   *  outline so a gap in a sequence looks like a gap. Visual only: say \"empty\" in\n   *  the label or `detail` if a screen reader needs to know. */\n  empty?: boolean;\n  /** `false` keeps this one tab when the strip has `onRemove` — the one sheet a\n   *  workbook cannot be without. Default: removable. */\n  removable?: boolean;\n  /** Plain-text name for the labels the strip composes about this tab (\"Remove\n   *  …\"), for when `label` is not a string. Default: `label` if it is a string,\n   *  else the id. */\n  name?: string;\n}\n\n/** The strings the strip renders on its own behalf — only when it can add or\n *  remove tabs. */\nexport interface TabsLabels {\n  /** The \"add\" button's visible text when the caller gives no `addLabel`. */\n  add: string;\n  /** Accessible name of a tab's × — \"Remove <tab>\". */\n  remove: (tab: string) => string;\n  /** The `overflowCue` caret while tabs lie past the strip's end: \"More tabs\". */\n  more: string;\n  /** The `overflowCue` caret at the strip's end, which goes back to the first tab. */\n  backToFirst: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_TABS_LABELS };\n\n/**\n * The strip's own props sit on a `<div>`: the tablist IS the root element, so anything\n * a caller hangs on it — a `data-tour` anchor for the kit's guided tour, a test id, an\n * `aria-describedby` — lands there. `onChange` is omitted from the div's props because\n * this component's `onChange` hands over the chosen TAB ID, not a DOM event, and\n * `children` because the strip renders `tabs` — a caller who wants a PANEL wires it up\n * through `panelId`, which is the whole point of that prop.\n */\nexport interface TabsProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  /** `label` is a ReactNode so tabs can pair an icon with text; `badge` is an\n   *  optional trailing node (e.g. a count pill). `href` marks a tab that IS a route:\n   *  it renders as an anchor so it can be middle-/⌘-clicked into a new tab (Keksdose\n   *  feedback #451), while a plain click still goes through `onChange` and stays\n   *  client-side. Tabs that only flip local state leave it unset — a link to a URL\n   *  that does not select the tab would be worse than no link. */\n  tabs: TabItem<T>[];\n  active: T;\n  onChange: (id: T) => void;\n  className?: string;\n  /** Let the strip WRAP onto as many rows as it needs below `md`, instead of\n   *  scrolling sideways — for a strip carrying more tabs than fit on a phone row.\n   *  Keksdose live #262: ten reports on a 406px screen showed about three, and the\n   *  round-2 answer (a <select> below `md`) cost a tap to open and a tap to choose.\n   *  *\"I would rather keep the tabs but have multirow tabs depending on the screen\n   *  size, I will not loose the function to see all reports at once and navigate by\n   *  single click rather by double click.\"*\n   *\n   *  The active MARKER has to change with the layout, which is why this cannot be\n   *  done from a call site with a `className`: the default marker is a `border-b-2`\n   *  underline riding the container's own bottom rule, and a tab sitting in a row\n   *  that does not touch that rule cannot wear it — every row but the last would\n   *  show a stray line floating mid-strip, and `-mb-px` would pull each chip a\n   *  pixel into the row beneath it. A wrapped strip marks the active tab with a\n   *  filled brand chip instead, which is also the only thing findable at a glance\n   *  among ten same-weight labels on three rows.\n   *\n   *  From `md` up NOTHING changes: same single-line underline strip, same paddings,\n   *  same colours as every other strip in the app.\n   *\n   *  Opt-in on purpose. The three-tab strips (invoices, statements, bank imports)\n   *  already fit a phone row, and turning those into chips would be an unrequested\n   *  redesign of three other pages.\n   *\n   *  @deprecated 0.40 — use the scrolling strip with `overflowCue`; removed in 0.41. No\n   *  consumer is left (keksdose went back to one scrolling row, live #410); the caret\n   *  says a phone's row goes on. */\n  wrap?: boolean;\n  /**\n   * The caret beside a SCROLLING strip below `md` (0.40, kk run 79 gap 1): a › while\n   * tabs lie past the strip's end — a tap scrolls it on by three quarters of its width —\n   * turning into a ‹ at the end, which goes back to the first. Shown only while the strip\n   * actually overflows.\n   *\n   * The edge fade alone could read as the end of the row: at the default scroll position\n   * the last visible tab can finish exactly where the fade begins, so nothing looks cut\n   * off (keksdose live #410, whose `tab-strip-more.tsx` this replaces). One button that\n   * turns round rather than two that come and go, so the strip's width never changes\n   * under the thumb. Out of the tab order — the keyboard walks the strip with the arrow\n   * keys, which bring the focused tab into view. From `md` up nothing changes. Ignored on\n   * a `wrap` strip and a vertical one (a side nav is a column, not a row). Names:\n   * `tabs.more` / `tabs.backToFirst`.\n   */\n  overflowCue?: boolean;\n  /**\n   * `id` of the element the caller renders the open tab's content into — the missing\n   * half of `role=\"tab\"`. A tab that controls nothing is a tab in name only: a screen\n   * reader announces \"tab, 2 of 5\" and then has no way to take the user to what it\n   * opened, and no way back.\n   *\n   * **This component does not render the panel, on purpose.** `Tabs` is the STRIP; the\n   * content lives wherever the caller put it — three Keksdose pages render it in a\n   * sibling `<Card>`, one renders it through a router outlet, and a tab can BE a route\n   * (`href`), in which case the panel is a whole page this component never sees.\n   * Wrapping `children` here would mean either moving that content into the strip's\n   * subtree — a layout change on every page that uses tabs — or shipping a wrapper\n   * that only some callers could use. So the two halves are joined by an id instead.\n   *\n   * Wire the other end yourself:\n   *\n   * ```tsx\n   * <Tabs tabs={tabs} active={active} onChange={setActive} panelId=\"report-panel\" />\n   * <div id=\"report-panel\" role=\"tabpanel\" aria-labelledby=\"report-panel-tab\" tabIndex={-1}>\n   * ```\n   *\n   * `aria-controls` goes on the OPEN tab only, and `${panelId}-tab` is its id — the\n   * closed tabs' panels are not in the document, and a dangling `aria-controls`\n   * describes a tab as opening something that is not there.\n   */\n  panelId?: string;\n  /**\n   * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab\n   * (only on the open one with `removeOn=\"active\"`).\n   *\n   * The × is on the open tab only — a row of tabs each carrying one is a row of\n   * things to hit by accident, and the tab you can remove should be the one you\n   * are looking at — but its room is reserved on every removable tab, so opening a\n   * tab never widens it and never pushes the rest of the strip along (lenkbank\n   * feedback #72). It is not a tab stop of its own: the strip stays one stop, and the\n   * keyboard path is Delete (announced through `aria-keyshortcuts`), which removes\n   * whichever tab has focus (see `removeOn`).\n   *\n   * Assistive tech meets the remove as a \"Remove <tab>\" button right AFTER the strip,\n   * not as the × (0.34): a tablist may own tabs only, so the drawn × is the pointer's\n   * and `aria-hidden`, and the named button beside the tablist is visually hidden.\n   *\n   * The strip only ASKS: it calls this, and the tab goes when the caller drops it\n   * from `tabs` — after a confirmation, a request, whatever it needs. When it does,\n   * focus that was on the removed tab (or its ×) moves to the open tab if the\n   * removed one was open, else to its neighbour, instead of falling to the page.\n   */\n  onRemove?: (id: T) => void;\n  /**\n   * Which tabs the Delete key removes.\n   *\n   * - `\"every\"` (default): any focused removable tab — the ARIA pattern's reading.\n   * - `\"active\"`: only the OPEN tab, the same one that wears the ×. For a strip whose\n   *   remove is immediate and unconfirmed (lenkbank's sheet tabs delete a measurement\n   *   sheet at once), so arrowing across the strip and pressing Delete cannot take\n   *   out a sheet the user is not looking at. Delete on a closed tab does nothing,\n   *   and only the open tab announces the shortcut (`aria-keyshortcuts`).\n   *\n   * Either way the × is drawn on the open tab only and its room stays reserved on\n   * every removable tab, so the strip never relayouts when the selection moves.\n   */\n  removeOn?: \"every\" | \"active\";\n  /** Renders an \"add\" button after the last tab, outside the tablist — it is an\n   *  action, not a tab, and a tablist may own only tabs. */\n  onAdd?: () => void;\n  /** The add button's text. Say what is added — \"Add loop\", \"Add report\" says\n   *  more than \"Add\". Default: `tabs.add` from the {@link UiKitProvider}. */\n  addLabel?: string;\n  /** Overrides for this strip's strings. See {@link TabsLabels}. */\n  labels?: LabelOverride<TabsLabels>;\n  /** An add or a remove is in flight: the × and the add button are disabled and\n   *  Delete is ignored, so a double click cannot remove two tabs. Nothing moves. */\n  busy?: boolean;\n  /**\n   * `\"vertical\"`: the same strip as a SIDE NAV — one item per row, the open one\n   * filled, ↑/↓ walking it (Home/End as before) and `aria-orientation=\"vertical\"` on\n   * the tablist. For keksdose's admin page and settings page, which each hand-built\n   * the identical sidebar with none of this strip's keyboard, roving tab stop or\n   * routed-`href` handling. Everything else — `href` tabs, `badge`, `panelId`,\n   * `onRemove`, `onAdd` — means exactly what it means on the horizontal strip; the\n   * badge moves to the row's end.\n   *\n   * **On a phone (`usePhoneLayout()`) it becomes the horizontal strip**, `wrap` and\n   * all, rather than staying a column. A side nav only works beside its content; on\n   * a phone it has to go ABOVE it, and eight full-width rows there push the panel\n   * the user picked below the fold on every visit — the two keksdose pages both\n   * collapsed theirs into a scrolling row by hand for exactly that reason. The\n   * orientation is switched in JavaScript, not with `md:` classes, so the\n   * `aria-orientation` a screen reader hears and the arrow keys that work always\n   * match the layout on screen. The caller's own two-column layout has to stack at\n   * the same breakpoint (`md:grid-cols-[14rem_1fr]`).\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** The `role=\"tablist\"` strip, where the rest of the props go (0.34, API-2, refactor\n   *  audit 2026-10). Merged with the strip's own ref, which scrolls the open tab into\n   *  view and measures the fade, so neither loses the element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n// The two shapes are written out as whole strings rather than as one base plus a\n// pile of `md:` overrides. The unwrapped pair is character-for-character what the\n// three strips that do not opt in get, so those cannot drift; the wrapped pair is\n// authored from scratch, so no unprefixed utility has to be beaten by its own `md:`\n// twin through tailwind-merge. The only ordering this relies on is Tailwind's own:\n// unprefixed utilities are emitted first, then `md:` — so from 768px up the wrapped\n// strip resolves to exactly the paint of the default one. Both themes come free now\n// that the colours are tokens: there is no `md:dark:` tier left to keep in step.\nconst TABLIST_CLASSES =\n  \"flex gap-1 overflow-x-auto overflow-y-hidden border-b border-subtle\";\n// The side nav. A column of full-width rows with the open one FILLED rather than\n// underlined: an underline under one row of a list reads as a separator, not as a\n// selection. `--bg-active` is the kit's own selected-row fill (the sidebar's), so the\n// admin page's nav and the app's own sidebar mark \"you are here\" the same way.\nconst TABLIST_VERTICAL_CLASSES = \"flex flex-col gap-0.5\";\nconst TAB_VERTICAL_CLASSES =\n  FOCUS_RING_WIDTH +\n  \" flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus-visible:ring-strong\";\nconst TAB_VERTICAL_ACTIVE_CLASSES = \"bg-active text-primary\";\nconst TAB_VERTICAL_INACTIVE_CLASSES =\n  \"text-muted hover:bg-hover hover:text-primary\";\n\nconst TABLIST_WRAP_CLASSES =\n  \"flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-subtle\";\n\n// `max-w-full`: no tab outgrows its strip. A sheet's `detail` line (\"Spurstangenkraft\n// links · … · 31 Punkte\") made one tab 448px wide in a 390px strip, and a tab wider\n// than the strip cannot be scrolled into view — its end was simply off screen\n// (lenkbank L3). The label and detail truncate inside it instead; see `inner`.\nconst TAB_CLASSES =\n  FOCUS_RING_WIDTH +\n  \" max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus-visible:ring-strong\";\nconst TAB_ACTIVE_CLASSES = \"border-[var(--text-primary)] text-primary\";\nconst TAB_INACTIVE_CLASSES =\n  \"border-transparent text-muted hover:text-secondary hover:border-strong\";\n\n// Below `md`, a chip: `py-2` on `text-xs` is exactly 32px tall, and ten German\n// report labels then land in three rows on a 406px screen (four at `text-sm`). The\n// active fill is the app's own selected pair, `--brand` / `--brand-contrast`: the\n// palette store writes both halves of it together for every preset and both themes,\n// so the contrast holds everywhere (5.1:1 at its worst preset) without a hard-coded\n// colour. Inactive chips take the raised card surface with full-strength body text —\n// all ten have to stay readable; it is the FILL, not the text weight, that says\n// which one is open.\nconst TAB_WRAP_CLASSES =\n  FOCUS_RING_WIDTH +\n  \" max-w-full whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-strong md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm\";\nconst TAB_WRAP_ACTIVE_CLASSES =\n  \"bg-brand text-brand-contrast md:border-[var(--text-primary)] md:text-primary\";\nconst TAB_WRAP_INACTIVE_CLASSES =\n  \"bg-surface text-primary md:border-transparent md:text-muted md:hover:border-strong md:hover:text-secondary\";\n\n// The add/remove chrome. The × reserves its gutter on every removable tab (see\n// `onRemove`); `md:pe-8` is spelled out because the wrapped chip's `md:px-3` would\n// otherwise hand the gutter back from 768px up.\nconst TAB_REMOVABLE_CLASSES = \"pe-8 md:pe-8\";\nconst TAB_EMPTY_CLASSES = \"-mx-1.5 rounded border border-dashed border-strong px-1.5\";\nconst TAB_ADD_CLASSES =\n  FOCUS_RING_WIDTH +\n  \" inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-muted transition-colors hover:text-primary focus:outline-none focus-visible:ring-strong disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4\";\nconst TAB_ADD_WRAP_CLASSES = \"px-2.5 text-xs md:px-3 md:text-sm\";\n// `relative`: the phone's visually hidden label needs a positioned ancestor (see the\n// sr-only rule in CONTRIBUTING); `max-md:px-2` squares the lone \"+\".\nconst TAB_ADD_PHONE_CLASSES = \"relative max-md:px-2\";\n\nexport function Tabs<T extends string>({\n  tabs,\n  active,\n  onChange,\n  className,\n  wrap = false,\n  overflowCue = false,\n  panelId,\n  onRemove,\n  removeOn = \"every\",\n  onAdd,\n  addLabel,\n  labels,\n  busy = false,\n  orientation = \"horizontal\",\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: TabsProps<T>) {\n  const text = useKitLabels(\"tabs\", DEFAULT_TABS_LABELS, labels);\n  // See `orientation`: a vertical strip is the horizontal one on a phone.\n  const phone = usePhoneLayout();\n  const vertical = orientation === \"vertical\" && !phone;\n  const stripRef = useRef<HTMLDivElement>(null);\n  const setStrip = useMemo(() => mergeRefs(stripRef, ref), [ref]);\n  const fade = useStripFade(stripRef);\n  // See `overflowCue`. `start` alone means the strip is scrolled to its end.\n  const cue = overflowCue && !wrap && !vertical && fade.overflow !== undefined;\n  const cueAtEnd = fade.overflow === \"start\";\n  const onCue = () => {\n    const strip = stripRef.current;\n    if (!strip) return;\n    const behavior: ScrollBehavior = prefersReducedMotion() ? \"auto\" : \"smooth\";\n    if (cueAtEnd) {\n      strip.scrollTo({ left: 0, behavior });\n      return;\n    }\n    const rtl = getComputedStyle(strip).direction === \"rtl\";\n    strip.scrollBy({ left: (rtl ? -1 : 1) * Math.round(strip.clientWidth * 0.75), behavior });\n  };\n  const cueButton = cue ? (\n    // The strip's bottom rule continues under the caret, so the row reads as one.\n    <div data-tabs-overflow-cue=\"\" className=\"flex shrink-0 items-center self-stretch border-b border-subtle md:hidden\">\n      <IconButton\n        size=\"sm\"\n        variant=\"ghost\"\n        tone=\"muted\"\n        tabIndex={-1}\n        type=\"button\"\n        aria-label={cueAtEnd ? text.backToFirst : text.more}\n        onClick={onCue}\n      >\n        {cueAtEnd ? <ChevronLeft className=\"rtl:-scale-x-100\" /> : <ChevronRight className=\"rtl:-scale-x-100\" />}\n      </IconButton>\n    </div>\n  ) : null;\n  // The OPEN tab is scrolled into the strip whenever it changes — on mount too, for a\n  // deep link to the seventh report. A selection behind the cut edge was the worst\n  // case of the overflow above: the one tab the panel below belongs to, sliced to\n  // \"80 km,\" under the add button. Only the strip scrolls (`scrollBy` on it, not\n  // `scrollIntoView`, which would scroll the page as well), and only as far as needed\n  // to clear the fade.\n  useLayoutEffect(() => {\n    const strip = stripRef.current;\n    const tab = strip?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]');\n    if (strip && tab) scrollIntoStrip(strip, tab);\n  }, [active]);\n  const isRemovable = (tab: TabItem<T>) => onRemove !== undefined && tab.removable !== false;\n  // Whether Delete reaches this tab: every removable tab, or only the open one.\n  const deletesOnKey = (tab: TabItem<T>) =>\n    isRemovable(tab) && (removeOn === \"every\" || tab.id === active);\n  const nameOf = (tab: TabItem<T>) =>\n    tab.name ?? (typeof tab.label === \"string\" ? tab.label : tab.id);\n\n  // Where focus goes once a removal the strip asked for has happened. The caller\n  // owns `tabs` and may take its time (a confirmation, a request), so this waits\n  // for the id to actually leave the list rather than guessing at the moment.\n  const pendingFocus = useRef<{ removed: T; wasActive: boolean; neighbour?: T } | null>(null);\n  const removeRef = useRef<HTMLButtonElement>(null);\n  const requestRemove = (id: T) => {\n    const index = tabs.findIndex((t) => t.id === id);\n    pendingFocus.current = {\n      removed: id,\n      wasActive: id === active,\n      neighbour: (tabs[index + 1] ?? tabs[index - 1])?.id,\n    };\n    onRemove?.(id);\n  };\n  useLayoutEffect(() => {\n    const pending = pendingFocus.current;\n    if (!pending || tabs.some((t) => t.id === pending.removed)) return;\n    pendingFocus.current = null;\n    const strip = stripRef.current;\n    if (!strip) return;\n    // Only focus that fell out of the strip with the removed tab is ours to place —\n    // or that sits on the remove button after it, which a pick removed through.\n    // If the user has moved on — into the panel, into a dialog — leave it there.\n    const focused = document.activeElement;\n    if (focused && focused !== document.body && !strip.contains(focused) && focused !== removeRef.current) return;\n    // The removed tab was open: focus follows the caller's new selection, which is\n    // also the strip's tab stop. It was not: its neighbour, as the ARIA pattern has it.\n    const target =\n      !pending.wasActive && tabs.some((t) => t.id === pending.neighbour)\n        ? pending.neighbour\n        : active;\n    const index = tabs.findIndex((t) => t.id === target);\n    strip.querySelectorAll<HTMLElement>('[role=\"tab\"]')[index]?.focus();\n  }, [tabs, active]);\n\n  // Arrow keys walk the strip in DOM order (ARIA tabs pattern), which is what keeps\n  // a WRAPPED strip navigable: the rows flow in DOM order too, so Right off the end\n  // of row one lands on the first chip of row two rather than nowhere. Home/End jump\n  // to the ends. Focus only — activation stays on click/Enter/Space, because a tab\n  // here can be a real route and moving focus must not navigate.\n  //\n  // On the TABS, not on the tablist. The container carried it, which left a `<div>`\n  // wearing an interactive role and a key handler while being unfocusable —\n  // `jsx-a11y/interactive-supports-focus`, and the only instance of it left in `src/`.\n  // The fix that rule wants is `tabIndex` on the div; the fix the pattern wants is\n  // the handler on the elements that are natively focusable and actually receive the\n  // keystroke. Those are the tabs, so the warning goes away by being right rather\n  // than by being satisfied.\n  const onTabKeyDown = (e: KeyboardEvent<HTMLElement>, tab: TabItem<T>) => {\n    // Delete removes the FOCUSED tab (the ARIA pattern's optional key for deletable\n    // tabs) — the keyboard's way to the × that is not a tab stop. `busy` swallows it\n    // rather than letting it fall through to the page. With `removeOn=\"active\"` only\n    // the open tab answers; a closed one lets the key pass untouched.\n    if (e.key === \"Delete\" && deletesOnKey(tab)) {\n      e.preventDefault();\n      if (!busy) requestRemove(tab.id);\n      return;\n    }\n    // Along the reading direction: the strip is a flex row, so in RTL the NEXT tab sits\n    // to the left, and ArrowLeft has to reach it. A vertical strip answers ↑/↓ instead\n    // — and ONLY those, as the pattern has it: ←/→ are left to the page, where a side\n    // nav's neighbour (the panel) may well want them.\n    const step: 1 | -1 | 0 = vertical\n      ? e.key === \"ArrowDown\"\n        ? 1\n        : e.key === \"ArrowUp\"\n          ? -1\n          : 0\n      : horizontalStep(e.key, e.currentTarget);\n    if (step === 0 && e.key !== \"Home\" && e.key !== \"End\") return;\n    const strip = e.currentTarget.closest('[role=\"tablist\"]');\n    if (!strip) return;\n    const items = Array.from(strip.querySelectorAll<HTMLElement>('[role=\"tab\"]'));\n    const from = items.indexOf(e.currentTarget);\n    if (from === -1) return;\n    e.preventDefault();\n    const to =\n      e.key === \"Home\"\n        ? 0\n        : e.key === \"End\"\n          ? items.length - 1\n          : (from + step + items.length) % items.length;\n    items[to]?.focus();\n  };\n  const tablist = (\n    <div\n      // Before the role and the name: a caller's arbitrary attribute is welcome on the\n      // strip, but a `role` or an `aria-label` arriving through a spread props object\n      // must not be able to unmake the tablist the tabs below are registered against.\n      {...rest}\n      ref={setStrip}\n      role=\"tablist\"\n      // Names the GROUP — every tab carries its own text — so a strip under a visible\n      // heading that already says it can leave it unset.\n      aria-label={ariaLabel}\n      // Only when vertical: `horizontal` is the tablist's implicit value, and the\n      // attribute on every existing strip would be noise in every snapshot of them.\n      aria-orientation={vertical ? \"vertical\" : undefined}\n      // Merged over a caller's own style rather than replacing it; see useStripFade.\n      // `data-overflow` names the cut ends in reading-direction terms, for a caller's\n      // own affordance (a scroll button) and for tests, which cannot read the mask.\n      style={fade.mask ? { ...rest.style, maskImage: fade.mask, WebkitMaskImage: fade.mask } : rest.style}\n      data-overflow={fade.overflow}\n      // With an add button the strip gains an outer box, and `className` goes there\n      // — it is the box a caller's margin or width is meant for.\n      className={cn(\n        vertical ? TABLIST_VERTICAL_CLASSES : wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,\n        onAdd ? \"min-w-0\" : overflowCue && !wrap && !vertical ? \"min-w-0 flex-1\" : className,\n      )}\n    >\n      {tabs.map((tab) => {\n        const isActive = tab.id === active;\n        const removable = isRemovable(tab);\n        // Written once and worn by either tag below, so a routed tab and a\n        // state-only tab stay indistinguishable to the eye and to a screen reader.\n        const shared = {\n          role: \"tab\" as const,\n          \"aria-selected\": isActive,\n          // Roving tabindex: the whole strip is ONE stop in the page's tab order, and\n          // it is the open tab. Ten report tabs otherwise cost ten Tab presses to step\n          // over on the way to the table below them (live #262's strip is the extreme\n          // case, but every strip in the app paid it).\n          //\n          // The stop follows the SELECTION, not the focus. Arrowing is a look around —\n          // activation here is manual, because a tab can be a real route — so re-\n          // pointing the stop at a report the user only arrowed past would hand the\n          // strip back on the next visit in a state they never chose. The cost is that\n          // Tab out and back returns to the open tab rather than to the last one\n          // looked at; the ARIA pattern allows either, and this one needs no second\n          // piece of state shadowing `active`.\n          tabIndex: isActive ? 0 : -1,\n          // Only the open tab: see `panelId`.\n          \"aria-controls\": isActive ? panelId : undefined,\n          id: isActive && panelId ? `${panelId}-tab` : undefined,\n          \"aria-keyshortcuts\": deletesOnKey(tab) ? \"Delete\" : undefined,\n          onKeyDown: (e: KeyboardEvent<HTMLElement>) => onTabKeyDown(e, tab),\n          className: vertical\n            ? cn(\n                TAB_VERTICAL_CLASSES,\n                isActive ? TAB_VERTICAL_ACTIVE_CLASSES : TAB_VERTICAL_INACTIVE_CLASSES,\n                removable && \"pe-8\",\n              )\n            : cn(\n                wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,\n                wrap\n                  ? isActive\n                    ? TAB_WRAP_ACTIVE_CLASSES\n                    : TAB_WRAP_INACTIVE_CLASSES\n                  : isActive\n                    ? TAB_ACTIVE_CLASSES\n                    : TAB_INACTIVE_CLASSES,\n                removable && TAB_REMOVABLE_CLASSES,\n              ),\n        };\n        const inner = (\n          <span\n            className={cn(\n              // In a side nav the row is the full width, so the label takes it and a\n              // badge lands at the row's end, where a column of counts lines up.\n              vertical ? \"flex min-w-0 flex-1 items-center gap-1.5\" : \"inline-flex max-w-full min-w-0 items-center gap-1.5\",\n              tab.empty && TAB_EMPTY_CLASSES,\n            )}\n          >\n            {tab.icon != null && (\n              <span aria-hidden className=\"inline-flex shrink-0 items-center gap-0.5\">\n                {tab.icon}\n              </span>\n            )}\n            {tab.detail != null ? (\n              // `min-w-0` + `truncate-until-large` on each line: capped by the tab's\n              // `max-w-full`, a long detail ends in an ellipsis at Normal and wraps from\n              // Large up (text size §10.17; round 0.34 T1), where the tab grows a line\n              // rather than cut the words. The whole text stays the tab's name.\n              <span className=\"flex min-w-0 flex-col items-start text-start\">\n                <span className=\"max-w-full truncate-until-large\">{tab.label}</span>\n                {/* A separator for the NAME only — whitespace between flex items is\n                    not drawn, and without it the two lines ran together into one\n                    word for a screen reader (\"80 km/hloop 2\"). */}{\" \"}\n                <span\n                  className={cn(\n                    \"max-w-full truncate-until-large text-caption font-normal leading-tight text-muted\",\n                    // On a wrapped strip's filled chip (below `md`) the muted grey\n                    // was dark text on the brand fill — \"loop 2\" all but vanished\n                    // under the one label that most needed reading. It takes the\n                    // chip's own ink instead, as the label and the × already do.\n                    wrap && isActive && !vertical && \"text-brand-contrast md:text-muted\",\n                  )}\n                >\n                  {tab.detail}\n                </span>\n              </span>\n            ) : (\n              tab.label\n            )}\n            {tab.badge != null ? (\n              vertical ? <span className=\"ms-auto flex shrink-0 items-center\">{tab.badge}</span> : tab.badge\n            ) : null}\n          </span>\n        );\n        const element = tab.href ? (\n          <a\n            key={tab.id}\n            {...shared}\n            href={tab.href}\n            draggable={false}\n            onClick={(e) => {\n              // Middle-, ⌘/Ctrl-, Shift- and Alt-click belong to the browser\n              // (feedback #451); only the plain left click is ours to cancel and\n              // route through `onChange`, which keeps the switch client-side.\n              if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n              e.preventDefault();\n              onChange(tab.id);\n            }}\n            // A <button> tab activated on Space; an anchor does not, so becoming a\n            // link (feedback #451) would have quietly cost keyboard users the tab\n            // strip. Enter is deliberately untouched — it is the anchor's own\n            // default and already arrives at `onChange` through the click handler\n            // above, so handling it here too would switch tabs twice. Same three\n            // lines the mobile row card carries, for the same reason; the rejected\n            // alternative — keeping a button and faking the middle click with\n            // window.open — is what the whole item is moving away from.\n            //\n            // Composed with the strip's arrow-key walk rather than replacing it: this\n            // prop overrides the one in `shared`, and an anchor tab that lost the\n            // arrows would be a strip that is navigable only where it is not a link.\n            onKeyDown={(e) => {\n              onTabKeyDown(e, tab);\n              if (e.defaultPrevented || e.key !== \" \") return;\n              e.preventDefault();\n              onChange(tab.id);\n            }}\n          >\n            {inner}\n          </a>\n        ) : (\n          <button key={tab.id} {...shared} onClick={() => onChange(tab.id)}>\n            {inner}\n          </button>\n        );\n        if (!removable) return element;\n        return (\n          // The × cannot go INSIDE the tab: a button in a button is invalid HTML, and\n          // a tab's children are presentational, so a reader would flatten it into the\n          // tab's name. It sits beside the tab, over the gutter the tab reserves.\n          <div key={tab.id} className={cn(\"relative flex max-w-full\", !vertical && \"shrink-0\")}>\n            {element}\n            {isActive && (\n              <IconButton\n                size=\"2xs\"\n                tone=\"danger\"\n                // The POINTER's ×, hidden from assistive tech (round 0.34, the showcase's\n                // axe check): a tablist may own tabs only, and this button sat in it. The\n                // named \"Remove <tab>\" a screen reader's cursor and a touch reader's swipe\n                // reach is `removeButton`, after the strip. Not a tab stop either way:\n                // the strip is one, and Delete is the keyboard's path.\n                aria-hidden\n                data-tab-remove=\"\"\n                tabIndex={-1}\n                type=\"button\"\n                disabled={busy}\n                onClick={() => requestRemove(tab.id)}\n                className={cn(\n                  \"absolute inset-y-0 end-1 my-auto\",\n                  // On a wrapped strip's filled chip the quiet grey would vanish into\n                  // the brand fill below `md`.\n                  wrap && \"text-brand-contrast md:text-placeholder\",\n                )}\n              >\n                <X />\n              </IconButton>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n  // The open tab's remove action as assistive tech meets it: right after the strip,\n  // OUTSIDE the tablist, which may own tabs only (round 0.34, the showcase's axe check).\n  // Visually hidden, since the × drawn on the tab is the pointer's, and not a tab stop,\n  // since Delete is the keyboard's. `sr-only-fixed`: it sits wherever the caller put the\n  // strip, with no positioned box of the kit's around it.\n  const activeTab = tabs.find((tab) => tab.id === active);\n  const removeButton =\n    activeTab && isRemovable(activeTab) ? (\n      <button\n        ref={removeRef}\n        type=\"button\"\n        tabIndex={-1}\n        disabled={busy}\n        onClick={() => requestRemove(activeTab.id)}\n        className=\"sr-only-fixed\"\n      >\n        {text.remove(nameOf(activeTab))}\n      </button>\n    ) : null;\n  if (!onAdd && overflowCue && !wrap && !vertical) {\n    // The caret needs a row to sit in beside the strip, and `className` goes there — it\n    // is the box a caller's margin or width is meant for, as with an add button. The box\n    // is there whether or not the strip overflows right now, so a resize never moves\n    // the caller's class from one element to another.\n    return (\n      <div className={cn(\"flex items-end\", className)}>\n        {tablist}\n        {removeButton}\n        {cueButton}\n      </div>\n    );\n  }\n  if (!onAdd) {\n    // No outer box: the strip stays the root, as callers' `className` and tests expect.\n    return removeButton ? (\n      <>\n        {tablist}\n        {removeButton}\n      </>\n    ) : (\n      tablist\n    );\n  }\n  if (vertical) {\n    // Under the column, not beside it, and with no rule to carry on: a side nav has none.\n    return (\n      <div className={cn(\"flex flex-col gap-0.5\", className)}>\n        {tablist}\n        {removeButton}\n        <button type=\"button\" onClick={onAdd} disabled={busy} className={TAB_ADD_CLASSES}>\n          <Plus aria-hidden />\n          {addLabel ?? text.add}\n        </button>\n      </div>\n    );\n  }\n  return (\n    <div\n      className={cn(\n        wrap ? \"flex flex-wrap items-end gap-1.5 md:flex-nowrap md:gap-0\" : \"flex items-end\",\n        className,\n      )}\n    >\n      {tablist}\n      {removeButton}\n      {cueButton}\n      {/* Outside the tablist: an action, not a tab — and a tablist may own only\n          tabs. The rule under the strip carries on beneath it. */}\n      <div\n        className={cn(\n          \"flex flex-1 items-center\",\n          wrap\n            ? \"md:self-stretch md:border-b md:border-subtle\"\n            : \"self-stretch border-b border-subtle\",\n        )}\n      >\n        <button\n          type=\"button\"\n          onClick={onAdd}\n          disabled={busy}\n          className={cn(TAB_ADD_CLASSES, wrap ? TAB_ADD_WRAP_CLASSES : TAB_ADD_PHONE_CLASSES)}\n        >\n          <Plus aria-hidden />\n          {/* Below md a scrolling strip keeps the room for tabs: the label is visually\n              hidden and the \"+\" carries it as its name. Beside \"+ Add loop\" a 390px strip\n              showed the open tab and a sliver of the next (showcase audit). A wrapping\n              strip has its own row there, so it keeps the label. */}\n          <span className={wrap ? undefined : \"max-md:sr-only\"}>{addLabel ?? text.add}</span>\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef } from \"react\";\nimport { ChevronLeft, ChevronRight, Plus, X } from \"lucide-react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport { scrollIntoStrip, useStripFade } from \"../lib/strip-fade\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { prefersReducedMotion } from \"../lib/reduced-motion\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { mergeRefs } from \"./field-parts\";\nimport { DEFAULT_TABS_LABELS } from \"./ui-labels\";\nimport { IconButton } from \"./icon-button\";\n\n/** One tab of a {@link Tabs} strip. */\nexport interface TabItem<T extends string> {\n  id: T;\n  /** A ReactNode so a tab can pair an icon with text. */\n  label: ReactNode;\n  /** Optional trailing node (e.g. a count pill). */\n  badge?: ReactNode;\n  /** Marks a tab that IS a route — see {@link TabsProps}. */\n  href?: string;\n  /** Leading decoration: an icon, or the colour swatches of the lines this tab\n   *  draws in a chart above the strip. Hidden from assistive tech — it repeats\n   *  what the label says, or it says something the label must say instead. */\n  icon?: ReactNode;\n  /** A second, smaller line under the label — the one fact that tells two tabs\n   *  with similar labels apart (\"80 km/h\", \"Level 3\"). Part of the tab's name. */\n  detail?: ReactNode;\n  /** A tab that exists as a slot with nothing in it yet, drawn with a dashed\n   *  outline so a gap in a sequence looks like a gap. Visual only: say \"empty\" in\n   *  the label or `detail` if a screen reader needs to know. */\n  empty?: boolean;\n  /** `false` keeps this one tab when the strip has `onRemove` — the one sheet a\n   *  workbook cannot be without. Default: removable. */\n  removable?: boolean;\n  /** Plain-text name for the labels the strip composes about this tab (\"Remove\n   *  …\"), for when `label` is not a string. Default: `label` if it is a string,\n   *  else the id. */\n  name?: string;\n}\n\n/** The strings the strip renders on its own behalf — only when it can add or\n *  remove tabs. */\nexport interface TabsLabels {\n  /** The \"add\" button's visible text when the caller gives no `addLabel`. */\n  add: string;\n  /** Accessible name of a tab's × — \"Remove <tab>\". */\n  remove: (tab: string) => string;\n  /** The `overflowCue` caret while tabs lie past the strip's end: \"More tabs\". */\n  more: string;\n  /** The `overflowCue` caret at the strip's end, which goes back to the first tab. */\n  backToFirst: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_TABS_LABELS };\n\n/**\n * The strip's own props sit on a `<div>`: the tablist IS the root element, so anything\n * a caller hangs on it — a `data-tour` anchor for the kit's guided tour, a test id, an\n * `aria-describedby` — lands there. `onChange` is omitted from the div's props because\n * this component's `onChange` hands over the chosen TAB ID, not a DOM event, and\n * `children` because the strip renders `tabs` — a caller who wants a PANEL wires it up\n * through `panelId`, which is the whole point of that prop.\n */\nexport interface TabsProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  /** `label` is a ReactNode so tabs can pair an icon with text; `badge` is an\n   *  optional trailing node (e.g. a count pill). `href` marks a tab that IS a route:\n   *  it renders as an anchor so it can be middle-/⌘-clicked into a new tab (Keksdose\n   *  feedback #451), while a plain click still goes through `onChange` and stays\n   *  client-side. Tabs that only flip local state leave it unset — a link to a URL\n   *  that does not select the tab would be worse than no link. */\n  tabs: TabItem<T>[];\n  active: T;\n  onChange: (id: T) => void;\n  className?: string;\n  /**\n   * The caret beside a SCROLLING strip below `md` (0.40, kk run 79 gap 1): a › while\n   * tabs lie past the strip's end — a tap scrolls it on by three quarters of its width —\n   * turning into a ‹ at the end, which goes back to the first. Shown only while the strip\n   * actually overflows.\n   *\n   * The edge fade alone could read as the end of the row: at the default scroll position\n   * the last visible tab can finish exactly where the fade begins, so nothing looks cut\n   * off (keksdose live #410, whose `tab-strip-more.tsx` this replaces). One button that\n   * turns round rather than two that come and go, so the strip's width never changes\n   * under the thumb. Out of the tab order — the keyboard walks the strip with the arrow\n   * keys, which bring the focused tab into view. From `md` up nothing changes. Ignored on\n   * a vertical strip (a side nav is a column, not a row). Names:\n   * `tabs.more` / `tabs.backToFirst`.\n   */\n  overflowCue?: boolean;\n  /**\n   * `id` of the element the caller renders the open tab's content into — the missing\n   * half of `role=\"tab\"`. A tab that controls nothing is a tab in name only: a screen\n   * reader announces \"tab, 2 of 5\" and then has no way to take the user to what it\n   * opened, and no way back.\n   *\n   * **This component does not render the panel, on purpose.** `Tabs` is the STRIP; the\n   * content lives wherever the caller put it — three Keksdose pages render it in a\n   * sibling `<Card>`, one renders it through a router outlet, and a tab can BE a route\n   * (`href`), in which case the panel is a whole page this component never sees.\n   * Wrapping `children` here would mean either moving that content into the strip's\n   * subtree — a layout change on every page that uses tabs — or shipping a wrapper\n   * that only some callers could use. So the two halves are joined by an id instead.\n   *\n   * Wire the other end yourself:\n   *\n   * ```tsx\n   * <Tabs tabs={tabs} active={active} onChange={setActive} panelId=\"report-panel\" />\n   * <div id=\"report-panel\" role=\"tabpanel\" aria-labelledby=\"report-panel-tab\" tabIndex={-1}>\n   * ```\n   *\n   * `aria-controls` goes on the OPEN tab only, and `${panelId}-tab` is its id — the\n   * closed tabs' panels are not in the document, and a dangling `aria-controls`\n   * describes a tab as opening something that is not there.\n   */\n  panelId?: string;\n  /**\n   * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab\n   * (only on the open one with `removeOn=\"active\"`).\n   *\n   * The × is on the open tab only — a row of tabs each carrying one is a row of\n   * things to hit by accident, and the tab you can remove should be the one you\n   * are looking at — but its room is reserved on every removable tab, so opening a\n   * tab never widens it and never pushes the rest of the strip along (lenkbank\n   * feedback #72). It is not a tab stop of its own: the strip stays one stop, and the\n   * keyboard path is Delete (announced through `aria-keyshortcuts`), which removes\n   * whichever tab has focus (see `removeOn`).\n   *\n   * Assistive tech meets the remove as a \"Remove <tab>\" button right AFTER the strip,\n   * not as the × (0.34): a tablist may own tabs only, so the drawn × is the pointer's\n   * and `aria-hidden`, and the named button beside the tablist is visually hidden.\n   *\n   * The strip only ASKS: it calls this, and the tab goes when the caller drops it\n   * from `tabs` — after a confirmation, a request, whatever it needs. When it does,\n   * focus that was on the removed tab (or its ×) moves to the open tab if the\n   * removed one was open, else to its neighbour, instead of falling to the page.\n   */\n  onRemove?: (id: T) => void;\n  /**\n   * Which tabs the Delete key removes.\n   *\n   * - `\"every\"` (default): any focused removable tab — the ARIA pattern's reading.\n   * - `\"active\"`: only the OPEN tab, the same one that wears the ×. For a strip whose\n   *   remove is immediate and unconfirmed (lenkbank's sheet tabs delete a measurement\n   *   sheet at once), so arrowing across the strip and pressing Delete cannot take\n   *   out a sheet the user is not looking at. Delete on a closed tab does nothing,\n   *   and only the open tab announces the shortcut (`aria-keyshortcuts`).\n   *\n   * Either way the × is drawn on the open tab only and its room stays reserved on\n   * every removable tab, so the strip never relayouts when the selection moves.\n   */\n  removeOn?: \"every\" | \"active\";\n  /** Renders an \"add\" button after the last tab, outside the tablist — it is an\n   *  action, not a tab, and a tablist may own only tabs. */\n  onAdd?: () => void;\n  /** The add button's text. Say what is added — \"Add loop\", \"Add report\" says\n   *  more than \"Add\". Default: `tabs.add` from the {@link UiKitProvider}. */\n  addLabel?: string;\n  /** Overrides for this strip's strings. See {@link TabsLabels}. */\n  labels?: LabelOverride<TabsLabels>;\n  /** An add or a remove is in flight: the × and the add button are disabled and\n   *  Delete is ignored, so a double click cannot remove two tabs. Nothing moves. */\n  busy?: boolean;\n  /**\n   * `\"vertical\"`: the same strip as a SIDE NAV — one item per row, the open one\n   * filled, ↑/↓ walking it (Home/End as before) and `aria-orientation=\"vertical\"` on\n   * the tablist. For keksdose's admin page and settings page, which each hand-built\n   * the identical sidebar with none of this strip's keyboard, roving tab stop or\n   * routed-`href` handling. Everything else — `href` tabs, `badge`, `panelId`,\n   * `onRemove`, `onAdd` — means exactly what it means on the horizontal strip; the\n   * badge moves to the row's end.\n   *\n   * **On a phone (`usePhoneLayout()`) it becomes the horizontal strip**, rather than\n   * staying a column. A side nav only works beside its content; on\n   * a phone it has to go ABOVE it, and eight full-width rows there push the panel\n   * the user picked below the fold on every visit — the two keksdose pages both\n   * collapsed theirs into a scrolling row by hand for exactly that reason. The\n   * orientation is switched in JavaScript, not with `md:` classes, so the\n   * `aria-orientation` a screen reader hears and the arrow keys that work always\n   * match the layout on screen. The caller's own two-column layout has to stack at\n   * the same breakpoint (`md:grid-cols-[14rem_1fr]`).\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** The `role=\"tablist\"` strip, where the rest of the props go (0.34, API-2, refactor\n   *  audit 2026-10). Merged with the strip's own ref, which scrolls the open tab into\n   *  view and measures the fade, so neither loses the element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst TABLIST_CLASSES =\n  \"flex gap-1 overflow-x-auto overflow-y-hidden border-b border-subtle\";\n// The side nav. A column of full-width rows with the open one FILLED rather than\n// underlined: an underline under one row of a list reads as a separator, not as a\n// selection. `--bg-active` is the kit's own selected-row fill (the sidebar's), so the\n// admin page's nav and the app's own sidebar mark \"you are here\" the same way.\nconst TABLIST_VERTICAL_CLASSES = \"flex flex-col gap-0.5\";\nconst TAB_VERTICAL_CLASSES =\n  FOCUS_RING_WIDTH +\n  \" flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus-visible:ring-strong\";\nconst TAB_VERTICAL_ACTIVE_CLASSES = \"bg-active text-primary\";\nconst TAB_VERTICAL_INACTIVE_CLASSES =\n  \"text-muted hover:bg-hover hover:text-primary\";\n\n// `max-w-full`: no tab outgrows its strip. A sheet's `detail` line (\"Spurstangenkraft\n// links · … · 31 Punkte\") made one tab 448px wide in a 390px strip, and a tab wider\n// than the strip cannot be scrolled into view — its end was simply off screen\n// (lenkbank L3). The label and detail truncate inside it instead; see `inner`.\nconst TAB_CLASSES =\n  FOCUS_RING_WIDTH +\n  \" max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus-visible:ring-strong\";\nconst TAB_ACTIVE_CLASSES = \"border-[var(--text-primary)] text-primary\";\nconst TAB_INACTIVE_CLASSES =\n  \"border-transparent text-muted hover:text-secondary hover:border-strong\";\n\n// The add/remove chrome. The × reserves its gutter on every removable tab (see\n// `onRemove`).\nconst TAB_REMOVABLE_CLASSES = \"pe-8\";\nconst TAB_EMPTY_CLASSES = \"-mx-1.5 rounded border border-dashed border-strong px-1.5\";\nconst TAB_ADD_CLASSES =\n  FOCUS_RING_WIDTH +\n  \" inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-muted transition-colors hover:text-primary focus:outline-none focus-visible:ring-strong disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4\";\n// `relative`: the phone's visually hidden label needs a positioned ancestor (see the\n// sr-only rule in CONTRIBUTING); `max-md:px-2` squares the lone \"+\".\nconst TAB_ADD_PHONE_CLASSES = \"relative max-md:px-2\";\n\nexport function Tabs<T extends string>({\n  tabs,\n  active,\n  onChange,\n  className,\n  overflowCue = false,\n  panelId,\n  onRemove,\n  removeOn = \"every\",\n  onAdd,\n  addLabel,\n  labels,\n  busy = false,\n  orientation = \"horizontal\",\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: TabsProps<T>) {\n  const text = useKitLabels(\"tabs\", DEFAULT_TABS_LABELS, labels);\n  // See `orientation`: a vertical strip is the horizontal one on a phone.\n  const phone = usePhoneLayout();\n  const vertical = orientation === \"vertical\" && !phone;\n  const stripRef = useRef<HTMLDivElement>(null);\n  const setStrip = useMemo(() => mergeRefs(stripRef, ref), [ref]);\n  const fade = useStripFade(stripRef);\n  // See `overflowCue`. `start` alone means the strip is scrolled to its end.\n  const cue = overflowCue && !vertical && fade.overflow !== undefined;\n  const cueAtEnd = fade.overflow === \"start\";\n  const onCue = () => {\n    const strip = stripRef.current;\n    if (!strip) return;\n    const behavior: ScrollBehavior = prefersReducedMotion() ? \"auto\" : \"smooth\";\n    if (cueAtEnd) {\n      strip.scrollTo({ left: 0, behavior });\n      return;\n    }\n    const rtl = getComputedStyle(strip).direction === \"rtl\";\n    strip.scrollBy({ left: (rtl ? -1 : 1) * Math.round(strip.clientWidth * 0.75), behavior });\n  };\n  const cueButton = cue ? (\n    // The strip's bottom rule continues under the caret, so the row reads as one.\n    <div data-tabs-overflow-cue=\"\" className=\"flex shrink-0 items-center self-stretch border-b border-subtle md:hidden\">\n      <IconButton\n        size=\"sm\"\n        variant=\"ghost\"\n        tone=\"muted\"\n        tabIndex={-1}\n        type=\"button\"\n        aria-label={cueAtEnd ? text.backToFirst : text.more}\n        onClick={onCue}\n      >\n        {cueAtEnd ? <ChevronLeft className=\"rtl:-scale-x-100\" /> : <ChevronRight className=\"rtl:-scale-x-100\" />}\n      </IconButton>\n    </div>\n  ) : null;\n  // The OPEN tab is scrolled into the strip whenever it changes — on mount too, for a\n  // deep link to the seventh report. A selection behind the cut edge was the worst\n  // case of the overflow above: the one tab the panel below belongs to, sliced to\n  // \"80 km,\" under the add button. Only the strip scrolls (`scrollBy` on it, not\n  // `scrollIntoView`, which would scroll the page as well), and only as far as needed\n  // to clear the fade.\n  useLayoutEffect(() => {\n    const strip = stripRef.current;\n    const tab = strip?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]');\n    if (strip && tab) scrollIntoStrip(strip, tab);\n  }, [active]);\n  const isRemovable = (tab: TabItem<T>) => onRemove !== undefined && tab.removable !== false;\n  // Whether Delete reaches this tab: every removable tab, or only the open one.\n  const deletesOnKey = (tab: TabItem<T>) =>\n    isRemovable(tab) && (removeOn === \"every\" || tab.id === active);\n  const nameOf = (tab: TabItem<T>) =>\n    tab.name ?? (typeof tab.label === \"string\" ? tab.label : tab.id);\n\n  // Where focus goes once a removal the strip asked for has happened. The caller\n  // owns `tabs` and may take its time (a confirmation, a request), so this waits\n  // for the id to actually leave the list rather than guessing at the moment.\n  const pendingFocus = useRef<{ removed: T; wasActive: boolean; neighbour?: T } | null>(null);\n  const removeRef = useRef<HTMLButtonElement>(null);\n  const requestRemove = (id: T) => {\n    const index = tabs.findIndex((t) => t.id === id);\n    pendingFocus.current = {\n      removed: id,\n      wasActive: id === active,\n      neighbour: (tabs[index + 1] ?? tabs[index - 1])?.id,\n    };\n    onRemove?.(id);\n  };\n  useLayoutEffect(() => {\n    const pending = pendingFocus.current;\n    if (!pending || tabs.some((t) => t.id === pending.removed)) return;\n    pendingFocus.current = null;\n    const strip = stripRef.current;\n    if (!strip) return;\n    // Only focus that fell out of the strip with the removed tab is ours to place —\n    // or that sits on the remove button after it, which a pick removed through.\n    // If the user has moved on — into the panel, into a dialog — leave it there.\n    const focused = document.activeElement;\n    if (focused && focused !== document.body && !strip.contains(focused) && focused !== removeRef.current) return;\n    // The removed tab was open: focus follows the caller's new selection, which is\n    // also the strip's tab stop. It was not: its neighbour, as the ARIA pattern has it.\n    const target =\n      !pending.wasActive && tabs.some((t) => t.id === pending.neighbour)\n        ? pending.neighbour\n        : active;\n    const index = tabs.findIndex((t) => t.id === target);\n    strip.querySelectorAll<HTMLElement>('[role=\"tab\"]')[index]?.focus();\n  }, [tabs, active]);\n\n  // Arrow keys walk the strip in DOM order (ARIA tabs pattern). Home/End jump\n  // to the ends. Focus only — activation stays on click/Enter/Space, because a tab\n  // here can be a real route and moving focus must not navigate.\n  //\n  // On the TABS, not on the tablist. The container carried it, which left a `<div>`\n  // wearing an interactive role and a key handler while being unfocusable —\n  // `jsx-a11y/interactive-supports-focus`, and the only instance of it left in `src/`.\n  // The fix that rule wants is `tabIndex` on the div; the fix the pattern wants is\n  // the handler on the elements that are natively focusable and actually receive the\n  // keystroke. Those are the tabs, so the warning goes away by being right rather\n  // than by being satisfied.\n  const onTabKeyDown = (e: KeyboardEvent<HTMLElement>, tab: TabItem<T>) => {\n    // Delete removes the FOCUSED tab (the ARIA pattern's optional key for deletable\n    // tabs) — the keyboard's way to the × that is not a tab stop. `busy` swallows it\n    // rather than letting it fall through to the page. With `removeOn=\"active\"` only\n    // the open tab answers; a closed one lets the key pass untouched.\n    if (e.key === \"Delete\" && deletesOnKey(tab)) {\n      e.preventDefault();\n      if (!busy) requestRemove(tab.id);\n      return;\n    }\n    // Along the reading direction: the strip is a flex row, so in RTL the NEXT tab sits\n    // to the left, and ArrowLeft has to reach it. A vertical strip answers ↑/↓ instead\n    // — and ONLY those, as the pattern has it: ←/→ are left to the page, where a side\n    // nav's neighbour (the panel) may well want them.\n    const step: 1 | -1 | 0 = vertical\n      ? e.key === \"ArrowDown\"\n        ? 1\n        : e.key === \"ArrowUp\"\n          ? -1\n          : 0\n      : horizontalStep(e.key, e.currentTarget);\n    if (step === 0 && e.key !== \"Home\" && e.key !== \"End\") return;\n    const strip = e.currentTarget.closest('[role=\"tablist\"]');\n    if (!strip) return;\n    const items = Array.from(strip.querySelectorAll<HTMLElement>('[role=\"tab\"]'));\n    const from = items.indexOf(e.currentTarget);\n    if (from === -1) return;\n    e.preventDefault();\n    const to =\n      e.key === \"Home\"\n        ? 0\n        : e.key === \"End\"\n          ? items.length - 1\n          : (from + step + items.length) % items.length;\n    items[to]?.focus();\n  };\n  const tablist = (\n    <div\n      // Before the role and the name: a caller's arbitrary attribute is welcome on the\n      // strip, but a `role` or an `aria-label` arriving through a spread props object\n      // must not be able to unmake the tablist the tabs below are registered against.\n      {...rest}\n      ref={setStrip}\n      role=\"tablist\"\n      // Names the GROUP — every tab carries its own text — so a strip under a visible\n      // heading that already says it can leave it unset.\n      aria-label={ariaLabel}\n      // Only when vertical: `horizontal` is the tablist's implicit value, and the\n      // attribute on every existing strip would be noise in every snapshot of them.\n      aria-orientation={vertical ? \"vertical\" : undefined}\n      // Merged over a caller's own style rather than replacing it; see useStripFade.\n      // `data-overflow` names the cut ends in reading-direction terms, for a caller's\n      // own affordance (a scroll button) and for tests, which cannot read the mask.\n      style={fade.mask ? { ...rest.style, maskImage: fade.mask, WebkitMaskImage: fade.mask } : rest.style}\n      data-overflow={fade.overflow}\n      // With an add button the strip gains an outer box, and `className` goes there\n      // — it is the box a caller's margin or width is meant for.\n      className={cn(\n        vertical ? TABLIST_VERTICAL_CLASSES : TABLIST_CLASSES,\n        onAdd ? \"min-w-0\" : overflowCue && !vertical ? \"min-w-0 flex-1\" : className,\n      )}\n    >\n      {tabs.map((tab) => {\n        const isActive = tab.id === active;\n        const removable = isRemovable(tab);\n        // Written once and worn by either tag below, so a routed tab and a\n        // state-only tab stay indistinguishable to the eye and to a screen reader.\n        const shared = {\n          role: \"tab\" as const,\n          \"aria-selected\": isActive,\n          // Roving tabindex: the whole strip is ONE stop in the page's tab order, and\n          // it is the open tab. Ten report tabs otherwise cost ten Tab presses to step\n          // over on the way to the table below them (live #262's strip is the extreme\n          // case, but every strip in the app paid it).\n          //\n          // The stop follows the SELECTION, not the focus. Arrowing is a look around —\n          // activation here is manual, because a tab can be a real route — so re-\n          // pointing the stop at a report the user only arrowed past would hand the\n          // strip back on the next visit in a state they never chose. The cost is that\n          // Tab out and back returns to the open tab rather than to the last one\n          // looked at; the ARIA pattern allows either, and this one needs no second\n          // piece of state shadowing `active`.\n          tabIndex: isActive ? 0 : -1,\n          // Only the open tab: see `panelId`.\n          \"aria-controls\": isActive ? panelId : undefined,\n          id: isActive && panelId ? `${panelId}-tab` : undefined,\n          \"aria-keyshortcuts\": deletesOnKey(tab) ? \"Delete\" : undefined,\n          onKeyDown: (e: KeyboardEvent<HTMLElement>) => onTabKeyDown(e, tab),\n          className: vertical\n            ? cn(\n                TAB_VERTICAL_CLASSES,\n                isActive ? TAB_VERTICAL_ACTIVE_CLASSES : TAB_VERTICAL_INACTIVE_CLASSES,\n                removable && \"pe-8\",\n              )\n            : cn(\n                TAB_CLASSES,\n                isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_CLASSES,\n                removable && TAB_REMOVABLE_CLASSES,\n              ),\n        };\n        const inner = (\n          <span\n            className={cn(\n              // In a side nav the row is the full width, so the label takes it and a\n              // badge lands at the row's end, where a column of counts lines up.\n              vertical ? \"flex min-w-0 flex-1 items-center gap-1.5\" : \"inline-flex max-w-full min-w-0 items-center gap-1.5\",\n              tab.empty && TAB_EMPTY_CLASSES,\n            )}\n          >\n            {tab.icon != null && (\n              <span aria-hidden className=\"inline-flex shrink-0 items-center gap-0.5\">\n                {tab.icon}\n              </span>\n            )}\n            {tab.detail != null ? (\n              // `min-w-0` + `truncate-until-large` on each line: capped by the tab's\n              // `max-w-full`, a long detail ends in an ellipsis at Normal and wraps from\n              // Large up (text size §10.17; round 0.34 T1), where the tab grows a line\n              // rather than cut the words. The whole text stays the tab's name.\n              <span className=\"flex min-w-0 flex-col items-start text-start\">\n                <span className=\"max-w-full truncate-until-large\">{tab.label}</span>\n                {/* A separator for the NAME only — whitespace between flex items is\n                    not drawn, and without it the two lines ran together into one\n                    word for a screen reader (\"80 km/hloop 2\"). */}{\" \"}\n                <span className=\"max-w-full truncate-until-large text-caption font-normal leading-tight text-muted\">\n                  {tab.detail}\n                </span>\n              </span>\n            ) : (\n              tab.label\n            )}\n            {tab.badge != null ? (\n              vertical ? <span className=\"ms-auto flex shrink-0 items-center\">{tab.badge}</span> : tab.badge\n            ) : null}\n          </span>\n        );\n        const element = tab.href ? (\n          <a\n            key={tab.id}\n            {...shared}\n            href={tab.href}\n            draggable={false}\n            onClick={(e) => {\n              // Middle-, ⌘/Ctrl-, Shift- and Alt-click belong to the browser\n              // (feedback #451); only the plain left click is ours to cancel and\n              // route through `onChange`, which keeps the switch client-side.\n              if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n              e.preventDefault();\n              onChange(tab.id);\n            }}\n            // A <button> tab activated on Space; an anchor does not, so becoming a\n            // link (feedback #451) would have quietly cost keyboard users the tab\n            // strip. Enter is deliberately untouched — it is the anchor's own\n            // default and already arrives at `onChange` through the click handler\n            // above, so handling it here too would switch tabs twice. Same three\n            // lines the mobile row card carries, for the same reason; the rejected\n            // alternative — keeping a button and faking the middle click with\n            // window.open — is what the whole item is moving away from.\n            //\n            // Composed with the strip's arrow-key walk rather than replacing it: this\n            // prop overrides the one in `shared`, and an anchor tab that lost the\n            // arrows would be a strip that is navigable only where it is not a link.\n            onKeyDown={(e) => {\n              onTabKeyDown(e, tab);\n              if (e.defaultPrevented || e.key !== \" \") return;\n              e.preventDefault();\n              onChange(tab.id);\n            }}\n          >\n            {inner}\n          </a>\n        ) : (\n          <button key={tab.id} {...shared} onClick={() => onChange(tab.id)}>\n            {inner}\n          </button>\n        );\n        if (!removable) return element;\n        return (\n          // The × cannot go INSIDE the tab: a button in a button is invalid HTML, and\n          // a tab's children are presentational, so a reader would flatten it into the\n          // tab's name. It sits beside the tab, over the gutter the tab reserves.\n          <div key={tab.id} className={cn(\"relative flex max-w-full\", !vertical && \"shrink-0\")}>\n            {element}\n            {isActive && (\n              <IconButton\n                size=\"2xs\"\n                tone=\"danger\"\n                // The POINTER's ×, hidden from assistive tech (round 0.34, the showcase's\n                // axe check): a tablist may own tabs only, and this button sat in it. The\n                // named \"Remove <tab>\" a screen reader's cursor and a touch reader's swipe\n                // reach is `removeButton`, after the strip. Not a tab stop either way:\n                // the strip is one, and Delete is the keyboard's path.\n                aria-hidden\n                data-tab-remove=\"\"\n                tabIndex={-1}\n                type=\"button\"\n                disabled={busy}\n                onClick={() => requestRemove(tab.id)}\n                className=\"absolute inset-y-0 end-1 my-auto\"\n              >\n                <X />\n              </IconButton>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n  // The open tab's remove action as assistive tech meets it: right after the strip,\n  // OUTSIDE the tablist, which may own tabs only (round 0.34, the showcase's axe check).\n  // Visually hidden, since the × drawn on the tab is the pointer's, and not a tab stop,\n  // since Delete is the keyboard's. `sr-only-fixed`: it sits wherever the caller put the\n  // strip, with no positioned box of the kit's around it.\n  const activeTab = tabs.find((tab) => tab.id === active);\n  const removeButton =\n    activeTab && isRemovable(activeTab) ? (\n      <button\n        ref={removeRef}\n        type=\"button\"\n        tabIndex={-1}\n        disabled={busy}\n        onClick={() => requestRemove(activeTab.id)}\n        className=\"sr-only-fixed\"\n      >\n        {text.remove(nameOf(activeTab))}\n      </button>\n    ) : null;\n  if (!onAdd && overflowCue && !vertical) {\n    // The caret needs a row to sit in beside the strip, and `className` goes there — it\n    // is the box a caller's margin or width is meant for, as with an add button. The box\n    // is there whether or not the strip overflows right now, so a resize never moves\n    // the caller's class from one element to another.\n    return (\n      <div className={cn(\"flex items-end\", className)}>\n        {tablist}\n        {removeButton}\n        {cueButton}\n      </div>\n    );\n  }\n  if (!onAdd) {\n    // No outer box: the strip stays the root, as callers' `className` and tests expect.\n    return removeButton ? (\n      <>\n        {tablist}\n        {removeButton}\n      </>\n    ) : (\n      tablist\n    );\n  }\n  if (vertical) {\n    // Under the column, not beside it, and with no rule to carry on: a side nav has none.\n    return (\n      <div className={cn(\"flex flex-col gap-0.5\", className)}>\n        {tablist}\n        {removeButton}\n        <button type=\"button\" onClick={onAdd} disabled={busy} className={TAB_ADD_CLASSES}>\n          <Plus aria-hidden />\n          {addLabel ?? text.add}\n        </button>\n      </div>\n    );\n  }\n  return (\n    <div className={cn(\"flex items-end\", className)}>\n      {tablist}\n      {removeButton}\n      {cueButton}\n      {/* Outside the tablist: an action, not a tab — and a tablist may own only\n          tabs. The rule under the strip carries on beneath it. */}\n      <div\n        className=\"flex flex-1 items-center self-stretch border-b border-subtle\"\n      >\n        <button\n          type=\"button\"\n          onClick={onAdd}\n          disabled={busy}\n          className={cn(TAB_ADD_CLASSES, TAB_ADD_PHONE_CLASSES)}\n        >\n          <Plus aria-hidden />\n          {/* Below md a scrolling strip keeps the room for tabs: the label is visually\n              hidden and the \"+\" carries it as its name. Beside \"+ Add loop\" a 390px strip\n              showed the open tab and a sliver of the next (showcase audit). */}\n          <span className=\"max-md:sr-only\">{addLabel ?? text.add}</span>\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/translation-review-parts.d.ts

@@ -67,8 +67,8 @@ export interface TranslationLocaleTabsProps {
 }
 /**
  * One tab per locale with its approved/total, one scrolling row on a phone with the
- * strip's caret saying it goes on (`overflowCue`; `wrap` is deprecated in 0.40). Nothing for a single
- * locale: a strip with one tab is a heading that looks clickable.
+ * strip's caret saying it goes on (`overflowCue`). Nothing for a single locale:
+ * a strip with one tab is a heading that looks clickable.
  */
 export declare function TranslationLocaleTabs({ locales, active, onChange, className, labels: labelsProp }: TranslationLocaleTabsProps): import("react").JSX.Element | null;
 export interface TranslationExportButtonProps {

package/dist/components/translation-review-parts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/translation-review-parts.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Download } from \"lucide-react\";\n\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { saveBlob } from \"../lib/download\";\nimport { useKitFormat } from \"../lib/format\";\nimport { summariseRows, translationCorrections } from \"../lib/translation-review\";\nimport type {\n  ReviewStatus,\n  TranslationCorrection,\n  TranslationRow,\n  TranslationSummary,\n} from \"../lib/translation-review\";\nimport { Chip } from \"./chip\";\nimport type { ChipShape, ChipSize, ChipTone, ChipVariant } from \"./chip\";\nimport { ProgressBar } from \"./progress-bar\";\nimport type { ProgressBarSegment } from \"./progress-bar\";\nimport { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from \"./translation-review-labels\";\nimport type { TranslationReviewLabels } from \"./translation-review-labels\";\nimport { Button } from \"./button\";\nimport { Tabs } from \"./tabs\";\n\n/**\n * The small parts of the translation review, each usable on its own: the status\n * vocabulary as a chip, one locale's progress, the locale tabs and the export. The page\n * body that puts them together is `TranslationReviewPanel` (translation-review.tsx).\n */\n\n// ── ReviewStatusChip ──────────────────────────────────────────────────────────\n\n/**\n * The tone of each status: nothing yet is neutral, a gap is orange (kastlan's choice — a\n * hue, not a verdict), a change since review is amber, sent back is red, done is green.\n */\nexport const REVIEW_STATUS_TONES: Readonly<Record<ReviewStatus, ChipTone>> = {\n  missing: \"orange\",\n  unreviewed: \"neutral\",\n  changed: \"warning\",\n  needs_change: \"danger\",\n  approved: \"success\",\n};\n\nexport interface ReviewStatusChipProps {\n  status: ReviewStatus;\n  /** Over {@link REVIEW_STATUS_TONES}. */\n  tone?: ChipTone;\n  /** Over the label. */\n  children?: ReactNode;\n  /** Default `sm` — a chip in a table cell. */\n  size?: ChipSize;\n  variant?: ChipVariant;\n  shape?: ChipShape;\n  caps?: boolean;\n  className?: string;\n  /** Prop > `<UiKitProvider labels={{ translationReview }}>` > English. */\n  labels?: LabelOverride<TranslationReviewLabels>;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/** One row's status as a chip, in the kit's words and tones. Carries `data-status`. */\nexport function ReviewStatusChip({\n  status,\n  tone,\n  children,\n  size = \"sm\",\n  variant,\n  shape,\n  caps,\n  className,\n  labels: labelsProp,\n  ...rest\n}: ReviewStatusChipProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  return (\n    <Chip\n      {...rest}\n      data-status={status}\n      tone={tone ?? REVIEW_STATUS_TONES[status]}\n      size={size}\n      variant={variant}\n      shape={shape}\n      caps={caps}\n      className={className}\n    >\n      {children ?? reviewStatusLabel(labels, status)}\n    </Chip>\n  );\n}\n\n// ── TranslationProgress ───────────────────────────────────────────────────────\n\nexport interface TranslationProgressProps {\n  /** One locale's rows — or their {@link summariseRows} when the app has only counts. */\n  rows?: readonly TranslationRow[];\n  summary?: TranslationSummary;\n  /** The list under the bar naming each part with its count. Default true. */\n  legend?: boolean;\n  className?: string;\n  labels?: LabelOverride<TranslationReviewLabels>;\n}\n\n/**\n * \"120 of 3859 approved\", and the bar split by status: approved, sent back, changed since\n * review, missing — in the chips' colours. What is left of the track is unreviewed. The\n * legend counts rows rather than percentages: \"12 need a change\" is the next hour's work,\n * \"0.3 %\" is not.\n */\nexport function TranslationProgress({\n  rows,\n  summary: summaryProp,\n  legend = true,\n  className,\n  labels: labelsProp,\n}: TranslationProgressProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  const { formatNumber } = useKitFormat();\n  const summary = useMemo(() => summaryProp ?? summariseRows(rows ?? []), [summaryProp, rows]);\n  const part = (status: ReviewStatus, tone: ProgressBarSegment[\"tone\"], color?: string): ProgressBarSegment => ({\n    key: status,\n    value: summary[status],\n    tone,\n    color,\n    label: reviewStatusLabel(labels, status),\n    // A status with no rows stays in the legend (\"Needs a change 0\" is news too) but out\n    // of the bar, where it would only be a gap.\n    legendOnly: summary[status] === 0 ? true : undefined,\n  });\n  const segments = [\n    part(\"approved\", \"success\"),\n    part(\"needs_change\", \"danger\"),\n    part(\"changed\", \"warning\"),\n    // The chip's orange, which is a hue and not a ProgressBar tone. Only where there is\n    // a gap: an app whose locales are complete never hears of \"missing\".\n    ...(summary.missing > 0 ? [part(\"missing\", undefined, \"var(--hue-orange)\")] : []),\n  ];\n  return (\n    <ProgressBar\n      className={className}\n      label={labels.progress(summary.approved, summary.total)}\n      max={Math.max(summary.total, 1)}\n      segments={segments}\n      legend={legend}\n      formatValue={(value) => formatNumber(value)}\n    />\n  );\n}\n\n// ── TranslationLocaleTabs ─────────────────────────────────────────────────────\n\nexport interface TranslationLocaleTab {\n  /** The locale code. */\n  value: string;\n  /** Its name, in its own language (\"Français\"). */\n  label: ReactNode;\n  /** The locale's rows, for the badge — built with the same `areas` as the panel's, so\n   *  a scoped reviewer's tab counts what they can see. */\n  rows: readonly TranslationRow[];\n}\n\nexport interface TranslationLocaleTabsProps {\n  /** The locales the viewer may see, in the app's order — the server's answer, never a\n   *  guess from a role name. */\n  locales: readonly TranslationLocaleTab[];\n  active: string;\n  onChange: (locale: string) => void;\n  className?: string;\n  labels?: LabelOverride<TranslationReviewLabels>;\n}\n\n/**\n * One tab per locale with its approved/total, one scrolling row on a phone with the\n * strip's caret saying it goes on (`overflowCue`; `wrap` is deprecated in 0.40). Nothing for a single\n * locale: a strip with one tab is a heading that looks clickable.\n */\nexport function TranslationLocaleTabs({ locales, active, onChange, className, labels: labelsProp }: TranslationLocaleTabsProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  if (locales.length < 2) return null;\n  return (\n    <Tabs\n      aria-label={labels.locales}\n      overflowCue\n      className={className}\n      tabs={locales.map((locale) => {\n        const summary = summariseRows(locale.rows);\n        return {\n          id: locale.value,\n          label: locale.label,\n          name: typeof locale.label === \"string\" ? locale.label : locale.value,\n          badge: (\n            // The tab's own colour, dimmed — a fixed muted grey vanished on the selected\n            // tab's brand fill (390px browser check).\n            <span className=\"text-xs tabular-nums opacity-75\">\n              {labels.localeProgress(summary.approved, summary.total)}\n            </span>\n          ),\n        };\n      })}\n      active={active}\n      onChange={onChange}\n    />\n  );\n}\n\n// ── TranslationExportButton ───────────────────────────────────────────────────\n\nexport interface TranslationExportButtonProps {\n  /** Every row the export covers — usually every locale's, not only the open one. */\n  rows: readonly TranslationRow[];\n  /** Listed in the file. Default: the locales the rows come from. */\n  locales?: readonly string[];\n  /** Default `translation-corrections-<date>.json`. */\n  fileName?: string;\n  /**\n   * Take the export instead of downloading it — the entries, and the file as a ready\n   * JSON Blob. Left out, the kit downloads the Blob as `fileName`.\n   */\n  onExport?: (corrections: TranslationCorrection[], file: Blob) => void;\n  className?: string;\n  labels?: LabelOverride<TranslationReviewLabels>;\n}\n\n/**\n * \"Export corrections (n)\": every string sent back, as the JSON file keksdose and kastlan\n * hand a developer — `{ exported_at, locales, corrections }`. Corrections are not applied\n * on the page: the strings are source code. Disabled while there is nothing to export.\n */\nexport function TranslationExportButton({\n  rows,\n  locales,\n  fileName,\n  onExport,\n  className,\n  labels: labelsProp,\n}: TranslationExportButtonProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  const corrections = useMemo(() => translationCorrections(rows), [rows]);\n  const run = () => {\n    const now = new Date();\n    const file = new Blob(\n      [\n        JSON.stringify(\n          {\n            exported_at: now.toISOString(),\n            locales: locales ?? [...new Set(rows.map((r) => r.locale))],\n            corrections,\n          },\n          null,\n          2,\n        ),\n      ],\n      { type: \"application/json\" },\n    );\n    if (onExport) {\n      onExport(corrections, file);\n      return;\n    }\n    saveBlob(file, fileName ?? `translation-corrections-${now.toISOString().slice(0, 10)}.json`);\n  };\n  return (\n    <Button variant=\"secondary\" disabled={corrections.length === 0} onClick={run} className={className}>\n      <Download className=\"size-4\" aria-hidden />\n      {labels.exportCorrections(corrections.length)}\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/translation-review-parts.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Download } from \"lucide-react\";\n\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { saveBlob } from \"../lib/download\";\nimport { useKitFormat } from \"../lib/format\";\nimport { summariseRows, translationCorrections } from \"../lib/translation-review\";\nimport type {\n  ReviewStatus,\n  TranslationCorrection,\n  TranslationRow,\n  TranslationSummary,\n} from \"../lib/translation-review\";\nimport { Chip } from \"./chip\";\nimport type { ChipShape, ChipSize, ChipTone, ChipVariant } from \"./chip\";\nimport { ProgressBar } from \"./progress-bar\";\nimport type { ProgressBarSegment } from \"./progress-bar\";\nimport { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from \"./translation-review-labels\";\nimport type { TranslationReviewLabels } from \"./translation-review-labels\";\nimport { Button } from \"./button\";\nimport { Tabs } from \"./tabs\";\n\n/**\n * The small parts of the translation review, each usable on its own: the status\n * vocabulary as a chip, one locale's progress, the locale tabs and the export. The page\n * body that puts them together is `TranslationReviewPanel` (translation-review.tsx).\n */\n\n// ── ReviewStatusChip ──────────────────────────────────────────────────────────\n\n/**\n * The tone of each status: nothing yet is neutral, a gap is orange (kastlan's choice — a\n * hue, not a verdict), a change since review is amber, sent back is red, done is green.\n */\nexport const REVIEW_STATUS_TONES: Readonly<Record<ReviewStatus, ChipTone>> = {\n  missing: \"orange\",\n  unreviewed: \"neutral\",\n  changed: \"warning\",\n  needs_change: \"danger\",\n  approved: \"success\",\n};\n\nexport interface ReviewStatusChipProps {\n  status: ReviewStatus;\n  /** Over {@link REVIEW_STATUS_TONES}. */\n  tone?: ChipTone;\n  /** Over the label. */\n  children?: ReactNode;\n  /** Default `sm` — a chip in a table cell. */\n  size?: ChipSize;\n  variant?: ChipVariant;\n  shape?: ChipShape;\n  caps?: boolean;\n  className?: string;\n  /** Prop > `<UiKitProvider labels={{ translationReview }}>` > English. */\n  labels?: LabelOverride<TranslationReviewLabels>;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/** One row's status as a chip, in the kit's words and tones. Carries `data-status`. */\nexport function ReviewStatusChip({\n  status,\n  tone,\n  children,\n  size = \"sm\",\n  variant,\n  shape,\n  caps,\n  className,\n  labels: labelsProp,\n  ...rest\n}: ReviewStatusChipProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  return (\n    <Chip\n      {...rest}\n      data-status={status}\n      tone={tone ?? REVIEW_STATUS_TONES[status]}\n      size={size}\n      variant={variant}\n      shape={shape}\n      caps={caps}\n      className={className}\n    >\n      {children ?? reviewStatusLabel(labels, status)}\n    </Chip>\n  );\n}\n\n// ── TranslationProgress ───────────────────────────────────────────────────────\n\nexport interface TranslationProgressProps {\n  /** One locale's rows — or their {@link summariseRows} when the app has only counts. */\n  rows?: readonly TranslationRow[];\n  summary?: TranslationSummary;\n  /** The list under the bar naming each part with its count. Default true. */\n  legend?: boolean;\n  className?: string;\n  labels?: LabelOverride<TranslationReviewLabels>;\n}\n\n/**\n * \"120 of 3859 approved\", and the bar split by status: approved, sent back, changed since\n * review, missing — in the chips' colours. What is left of the track is unreviewed. The\n * legend counts rows rather than percentages: \"12 need a change\" is the next hour's work,\n * \"0.3 %\" is not.\n */\nexport function TranslationProgress({\n  rows,\n  summary: summaryProp,\n  legend = true,\n  className,\n  labels: labelsProp,\n}: TranslationProgressProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  const { formatNumber } = useKitFormat();\n  const summary = useMemo(() => summaryProp ?? summariseRows(rows ?? []), [summaryProp, rows]);\n  const part = (status: ReviewStatus, tone: ProgressBarSegment[\"tone\"], color?: string): ProgressBarSegment => ({\n    key: status,\n    value: summary[status],\n    tone,\n    color,\n    label: reviewStatusLabel(labels, status),\n    // A status with no rows stays in the legend (\"Needs a change 0\" is news too) but out\n    // of the bar, where it would only be a gap.\n    legendOnly: summary[status] === 0 ? true : undefined,\n  });\n  const segments = [\n    part(\"approved\", \"success\"),\n    part(\"needs_change\", \"danger\"),\n    part(\"changed\", \"warning\"),\n    // The chip's orange, which is a hue and not a ProgressBar tone. Only where there is\n    // a gap: an app whose locales are complete never hears of \"missing\".\n    ...(summary.missing > 0 ? [part(\"missing\", undefined, \"var(--hue-orange)\")] : []),\n  ];\n  return (\n    <ProgressBar\n      className={className}\n      label={labels.progress(summary.approved, summary.total)}\n      max={Math.max(summary.total, 1)}\n      segments={segments}\n      legend={legend}\n      formatValue={(value) => formatNumber(value)}\n    />\n  );\n}\n\n// ── TranslationLocaleTabs ─────────────────────────────────────────────────────\n\nexport interface TranslationLocaleTab {\n  /** The locale code. */\n  value: string;\n  /** Its name, in its own language (\"Français\"). */\n  label: ReactNode;\n  /** The locale's rows, for the badge — built with the same `areas` as the panel's, so\n   *  a scoped reviewer's tab counts what they can see. */\n  rows: readonly TranslationRow[];\n}\n\nexport interface TranslationLocaleTabsProps {\n  /** The locales the viewer may see, in the app's order — the server's answer, never a\n   *  guess from a role name. */\n  locales: readonly TranslationLocaleTab[];\n  active: string;\n  onChange: (locale: string) => void;\n  className?: string;\n  labels?: LabelOverride<TranslationReviewLabels>;\n}\n\n/**\n * One tab per locale with its approved/total, one scrolling row on a phone with the\n * strip's caret saying it goes on (`overflowCue`). Nothing for a single locale:\n * a strip with one tab is a heading that looks clickable.\n */\nexport function TranslationLocaleTabs({ locales, active, onChange, className, labels: labelsProp }: TranslationLocaleTabsProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  if (locales.length < 2) return null;\n  return (\n    <Tabs\n      aria-label={labels.locales}\n      overflowCue\n      className={className}\n      tabs={locales.map((locale) => {\n        const summary = summariseRows(locale.rows);\n        return {\n          id: locale.value,\n          label: locale.label,\n          name: typeof locale.label === \"string\" ? locale.label : locale.value,\n          badge: (\n            // The tab's own colour, dimmed — a fixed muted grey vanished on the selected\n            // tab's brand fill (390px browser check).\n            <span className=\"text-xs tabular-nums opacity-75\">\n              {labels.localeProgress(summary.approved, summary.total)}\n            </span>\n          ),\n        };\n      })}\n      active={active}\n      onChange={onChange}\n    />\n  );\n}\n\n// ── TranslationExportButton ───────────────────────────────────────────────────\n\nexport interface TranslationExportButtonProps {\n  /** Every row the export covers — usually every locale's, not only the open one. */\n  rows: readonly TranslationRow[];\n  /** Listed in the file. Default: the locales the rows come from. */\n  locales?: readonly string[];\n  /** Default `translation-corrections-<date>.json`. */\n  fileName?: string;\n  /**\n   * Take the export instead of downloading it — the entries, and the file as a ready\n   * JSON Blob. Left out, the kit downloads the Blob as `fileName`.\n   */\n  onExport?: (corrections: TranslationCorrection[], file: Blob) => void;\n  className?: string;\n  labels?: LabelOverride<TranslationReviewLabels>;\n}\n\n/**\n * \"Export corrections (n)\": every string sent back, as the JSON file keksdose and kastlan\n * hand a developer — `{ exported_at, locales, corrections }`. Corrections are not applied\n * on the page: the strings are source code. Disabled while there is nothing to export.\n */\nexport function TranslationExportButton({\n  rows,\n  locales,\n  fileName,\n  onExport,\n  className,\n  labels: labelsProp,\n}: TranslationExportButtonProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  const corrections = useMemo(() => translationCorrections(rows), [rows]);\n  const run = () => {\n    const now = new Date();\n    const file = new Blob(\n      [\n        JSON.stringify(\n          {\n            exported_at: now.toISOString(),\n            locales: locales ?? [...new Set(rows.map((r) => r.locale))],\n            corrections,\n          },\n          null,\n          2,\n        ),\n      ],\n      { type: \"application/json\" },\n    );\n    if (onExport) {\n      onExport(corrections, file);\n      return;\n    }\n    saveBlob(file, fileName ?? `translation-corrections-${now.toISOString().slice(0, 10)}.json`);\n  };\n  return (\n    <Button variant=\"secondary\" disabled={corrections.length === 0} onClick={run} className={className}>\n      <Download className=\"size-4\" aria-hidden />\n      {labels.exportCorrections(corrections.length)}\n    </Button>\n  );\n}\n"],"mappings":";AA2EI,cAyLA,YAzLA;AA3EJ,SAAS,eAAe;AAExB,SAAS,gBAAgB;AAEzB,SAAS,oBAAwC;AACjD,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,eAAe,8BAA8B;AAOtD,SAAS,YAAY;AAErB,SAAS,mBAAmB;AAE5B,SAAS,mCAAmC,yBAAyB;AAErE,SAAS,cAAc;AACvB,SAAS,YAAY;AAcd,MAAM,sBAAgE;AAAA,EAC3E,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AACZ;AAoBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAA0B;AACxB,QAAM,SAAS,aAAa,qBAAqB,mCAAmC,UAAU;AAC9F,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAa;AAAA,MACb,MAAM,QAAQ,oBAAoB,MAAM;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,sBAAY,kBAAkB,QAAQ,MAAM;AAAA;AAAA,EAC/C;AAEJ;AAoBO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA,QAAQ;AACV,GAA6B;AAC3B,QAAM,SAAS,aAAa,qBAAqB,mCAAmC,UAAU;AAC9F,QAAM,EAAE,aAAa,IAAI,aAAa;AACtC,QAAM,UAAU,QAAQ,MAAM,eAAe,cAAc,QAAQ,CAAC,CAAC,GAAG,CAAC,aAAa,IAAI,CAAC;AAC3F,QAAM,OAAO,CAAC,QAAsB,MAAkC,WAAwC;AAAA,IAC5G,KAAK;AAAA,IACL,OAAO,QAAQ,MAAM;AAAA,IACrB;AAAA,IACA;AAAA,IACA,OAAO,kBAAkB,QAAQ,MAAM;AAAA;AAAA;AAAA,IAGvC,YAAY,QAAQ,MAAM,MAAM,IAAI,OAAO;AAAA,EAC7C;AACA,QAAM,WAAW;AAAA,IACf,KAAK,YAAY,SAAS;AAAA,IAC1B,KAAK,gBAAgB,QAAQ;AAAA,IAC7B,KAAK,WAAW,SAAS;AAAA;AAAA;AAAA,IAGzB,GAAI,QAAQ,UAAU,IAAI,CAAC,KAAK,WAAW,QAAW,mBAAmB,CAAC,IAAI,CAAC;AAAA,EACjF;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,OAAO,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAAA,MACtD,KAAK,KAAK,IAAI,QAAQ,OAAO,CAAC;AAAA,MAC9B;AAAA,MACA;AAAA,MACA,aAAa,CAAC,UAAU,aAAa,KAAK;AAAA;AAAA,EAC5C;AAEJ;AA6BO,SAAS,sBAAsB,EAAE,SAAS,QAAQ,UAAU,WAAW,QAAQ,WAAW,GAA+B;AAC9H,QAAM,SAAS,aAAa,qBAAqB,mCAAmC,UAAU;AAC9F,MAAI,QAAQ,SAAS,EAAG,QAAO;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,OAAO;AAAA,MACnB,aAAW;AAAA,MACX;AAAA,MACA,MAAM,QAAQ,IAAI,CAAC,WAAW;AAC5B,cAAM,UAAU,cAAc,OAAO,IAAI;AACzC,eAAO;AAAA,UACL,IAAI,OAAO;AAAA,UACX,OAAO,OAAO;AAAA,UACd,MAAM,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ,OAAO;AAAA,UAC/D;AAAA;AAAA;AAAA,YAGE,oBAAC,UAAK,WAAU,mCACb,iBAAO,eAAe,QAAQ,UAAU,QAAQ,KAAK,GACxD;AAAA;AAAA,QAEJ;AAAA,MACF,CAAC;AAAA,MACD;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAyBO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAAiC;AAC/B,QAAM,SAAS,aAAa,qBAAqB,mCAAmC,UAAU;AAC9F,QAAM,cAAc,QAAQ,MAAM,uBAAuB,IAAI,GAAG,CAAC,IAAI,CAAC;AACtE,QAAM,MAAM,MAAM;AAChB,UAAM,MAAM,oBAAI,KAAK;AACrB,UAAM,OAAO,IAAI;AAAA,MACf;AAAA,QACE,KAAK;AAAA,UACH;AAAA,YACE,aAAa,IAAI,YAAY;AAAA,YAC7B,SAAS,WAAW,CAAC,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAAA,YAC1D;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,EAAE,MAAM,mBAAmB;AAAA,IAC7B;AACA,QAAI,UAAU;AACZ,eAAS,aAAa,IAAI;AAC1B;AAAA,IACF;AACA,aAAS,MAAM,YAAY,2BAA2B,IAAI,YAAY,EAAE,MAAM,GAAG,EAAE,CAAC,OAAO;AAAA,EAC7F;AACA,SACE,qBAAC,UAAO,SAAQ,aAAY,UAAU,YAAY,WAAW,GAAG,SAAS,KAAK,WAC5E;AAAA,wBAAC,YAAS,WAAU,UAAS,eAAW,MAAC;AAAA,IACxC,OAAO,kBAAkB,YAAY,MAAM;AAAA,KAC9C;AAEJ;","names":[]}

package/dist/eslint/index.js

@@ -47,7 +47,7 @@ const roleUtilities = {
     };
   }
 };
-const VERSION = true ? "0.40.1" : "0.0.0-source";
+const VERSION = true ? "0.41.0" : "0.0.0-source";
 const recommended = {
   name: "@eifi1/ui-kit/recommended",
   // Not the tests, as check:tokens skips the kit's: a test names the old class to assert it

package/dist/feedback/feedback-menu-labels.js

@@ -2,8 +2,6 @@
 const DEFAULT_FEEDBACK_MENU_LABELS = {
   trigger: "Send feedback",
   myFeedback: "My feedback",
-  viewFeedback: "View feedback",
-  allFeedback: "All feedback",
   discussion: "Feedback discussion",
   inbox: "Feedback inbox"
 };

package/dist/feedback/feedback-menu-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/feedback/feedback-menu-labels.ts"],"sourcesContent":["// The English words of ./feedback-menu, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./feedback-menu re-exports them.\n\nimport type { FeedbackMenuLabels } from \"./feedback-menu\";\n\nexport const DEFAULT_FEEDBACK_MENU_LABELS: FeedbackMenuLabels = {\n  trigger: \"Send feedback\",\n  myFeedback: \"My feedback\",\n  viewFeedback: \"View feedback\",\n  allFeedback: \"All feedback\",\n  discussion: \"Feedback discussion\",\n  inbox: \"Feedback inbox\",\n};\n"],"mappings":";AAMO,MAAM,+BAAmD;AAAA,EAC9D,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,OAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/feedback/feedback-menu-labels.ts"],"sourcesContent":["// The English words of ./feedback-menu, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./feedback-menu re-exports them.\n\nimport type { FeedbackMenuLabels } from \"./feedback-menu\";\n\nexport const DEFAULT_FEEDBACK_MENU_LABELS: FeedbackMenuLabels = {\n  trigger: \"Send feedback\",\n  myFeedback: \"My feedback\",\n  discussion: \"Feedback discussion\",\n  inbox: \"Feedback inbox\",\n};\n"],"mappings":";AAMO,MAAM,+BAAmD;AAAA,EAC9D,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AACT;","names":[]}