@entifix/react-controls 0.18.2 → 0.19.0

package/dist/ui/molecules/segmented-nav/segment-classes.js

@@ -1,8 +1,8 @@
 /**
  * The segmented look, shared by `SegmentedNav` (links) and `SegmentedControl`
  * (a choice in the page): one bordered track, the chosen segment filled.
- */ /** The joined segments; scrolls sideways rather than wrapping. */ export const LIST = 'm-0 flex w-max max-w-full list-none overflow-x-auto rounded-md border border-border p-[0.1875rem] [scrollbar-width:none]';
-const SEGMENT = 'block rounded-[calc(var(--radius-md,0.375rem)-0.125rem)] px-xs py-[0.3125rem] text-step-sm whitespace-nowrap no-underline transition-colors duration-(--duration-fast,150ms) motion-reduce:transition-none';
+ */ /** The joined segments; scrolls sideways rather than wrapping. */ export const LIST = 'm-0 flex w-max max-w-full list-none overflow-x-auto rounded-md border border-border p-0.75 [scrollbar-width:none]';
+const SEGMENT = 'block rounded-[calc(var(--radius-md,0.375rem)-0.125rem)] px-xs py-1.25 text-step-sm whitespace-nowrap no-underline transition-colors duration-(--duration-fast,150ms) motion-reduce:transition-none';
 export const OTHER = `${SEGMENT} focus-ring text-content hover:bg-[color-mix(in_srgb,var(--color-content)_6%,transparent)] hover:text-primary`;
 export const CURRENT = `${SEGMENT} bg-primary font-medium text-primary-content`;
 

package/dist/ui/molecules/segmented-nav/segment-classes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/segmented-nav/segment-classes.ts"],"sourcesContent":["/**\n * The segmented look, shared by `SegmentedNav` (links) and `SegmentedControl`\n * (a choice in the page): one bordered track, the chosen segment filled.\n */\n/** The joined segments; scrolls sideways rather than wrapping. */\nexport const LIST =\n  'm-0 flex w-max max-w-full list-none overflow-x-auto rounded-md border border-border p-[0.1875rem] [scrollbar-width:none]';\n\nconst SEGMENT =\n  'block rounded-[calc(var(--radius-md,0.375rem)-0.125rem)] px-xs py-[0.3125rem] text-step-sm whitespace-nowrap no-underline transition-colors duration-(--duration-fast,150ms) motion-reduce:transition-none';\n\nexport const OTHER = `${SEGMENT} focus-ring text-content hover:bg-[color-mix(in_srgb,var(--color-content)_6%,transparent)] hover:text-primary`;\n\nexport const CURRENT = `${SEGMENT} bg-primary font-medium text-primary-content`;\n"],"names":["LIST","SEGMENT","OTHER","CURRENT"],"mappings":"AAAA;;;CAGC,GACD,gEAAgE,GAChE,OAAO,MAAMA,OACX,2HAA2H;AAE7H,MAAMC,UACJ;AAEF,OAAO,MAAMC,QAAQ,GAAGD,QAAQ,6GAA6G,CAAC,CAAC;AAE/I,OAAO,MAAME,UAAU,GAAGF,QAAQ,4CAA4C,CAAC,CAAC"}
+{"version":3,"sources":["../../../../src/ui/molecules/segmented-nav/segment-classes.ts"],"sourcesContent":["/**\n * The segmented look, shared by `SegmentedNav` (links) and `SegmentedControl`\n * (a choice in the page): one bordered track, the chosen segment filled.\n */\n/** The joined segments; scrolls sideways rather than wrapping. */\nexport const LIST =\n  'm-0 flex w-max max-w-full list-none overflow-x-auto rounded-md border border-border p-0.75 [scrollbar-width:none]';\n\nconst SEGMENT =\n  'block rounded-[calc(var(--radius-md,0.375rem)-0.125rem)] px-xs py-1.25 text-step-sm whitespace-nowrap no-underline transition-colors duration-(--duration-fast,150ms) motion-reduce:transition-none';\n\nexport const OTHER = `${SEGMENT} focus-ring text-content hover:bg-[color-mix(in_srgb,var(--color-content)_6%,transparent)] hover:text-primary`;\n\nexport const CURRENT = `${SEGMENT} bg-primary font-medium text-primary-content`;\n"],"names":["LIST","SEGMENT","OTHER","CURRENT"],"mappings":"AAAA;;;CAGC,GACD,gEAAgE,GAChE,OAAO,MAAMA,OACX,oHAAoH;AAEtH,MAAMC,UACJ;AAEF,OAAO,MAAMC,QAAQ,GAAGD,QAAQ,6GAA6G,CAAC,CAAC;AAE/I,OAAO,MAAME,UAAU,GAAGF,QAAQ,4CAA4C,CAAC,CAAC"}

package/dist/ui/molecules/segmented-nav/segmented-nav.d.ts

@@ -13,18 +13,28 @@ export type SegmentedNavLink = ComponentType<{
     children: ReactNode;
 }>;
 /**
- * A choice between pages, drawn as one segmented control: each segment is a
- * link, the current page's is a marked span. A visible label names the
- * choice; the `<nav>` carries it for assistive technology.
+ * What the segments choose between. `pages` are separate pages, and the
+ * current one is `aria-current="page"`; `sort` orders one page's results, so
+ * every segment is the same page and the current one is only the current
+ * choice (`aria-current="true"`) — calling it the page would tell a screen
+ * reader the visitor is somewhere they are not.
+ */
+export type SegmentedNavKind = 'pages' | 'sort';
+/**
+ * A choice between pages, or between orderings of one page, drawn as one
+ * segmented control: each segment is a link, the current one a marked span.
+ * A visible label names the choice; the `<nav>` carries it for assistive
+ * technology.
  *
  * No hooks, so a server component renders it, and every segment works with
  * scripting off. Its parts carry `data-slot` (`segmented-nav`,
  * `segmented-nav-label`, `segmented-nav-list`, `segmented-nav-item`).
  */
-export declare function SegmentedNav({ label, items, link: Link, className, }: {
+export declare function SegmentedNav({ label, items, link: Link, kind, className, }: {
     label: string;
     items: readonly SegmentedNavItem[];
     link?: SegmentedNavLink;
+    kind?: SegmentedNavKind;
     className?: string;
 }): import("react").JSX.Element;
 //# sourceMappingURL=segmented-nav.d.ts.map

package/dist/ui/molecules/segmented-nav/segmented-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-nav.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/segmented-nav/segmented-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,8DAA8D;AAC9D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B;AAED,iFAAiF;AACjF,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC,CAAC;AAMH;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,IAAI,EAAE,IAAa,EACnB,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA+BA"}
+{"version":3,"file":"segmented-nav.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/segmented-nav/segmented-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,8DAA8D;AAC9D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B;AAED,iFAAiF;AACjF,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC,CAAC;AAMH;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,IAAI,EAAE,IAAa,EACnB,IAAc,EACd,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAkCA"}

package/dist/ui/molecules/segmented-nav/segmented-nav.js

@@ -11,14 +11,15 @@ const ANCHOR = (_0)=>{
     }));
 };
 /**
- * A choice between pages, drawn as one segmented control: each segment is a
- * link, the current page's is a marked span. A visible label names the
- * choice; the `<nav>` carries it for assistive technology.
+ * A choice between pages, or between orderings of one page, drawn as one
+ * segmented control: each segment is a link, the current one a marked span.
+ * A visible label names the choice; the `<nav>` carries it for assistive
+ * technology.
  *
  * No hooks, so a server component renders it, and every segment works with
  * scripting off. Its parts carry `data-slot` (`segmented-nav`,
  * `segmented-nav-label`, `segmented-nav-list`, `segmented-nav-item`).
- */ export function SegmentedNav({ label, items, link: Link = ANCHOR, className }) {
+ */ export function SegmentedNav({ label, items, link: Link = ANCHOR, kind = 'pages', className }) {
     return /*#__PURE__*/ _jsxs("nav", {
         "data-slot": "segmented-nav",
         "aria-label": label,
@@ -37,7 +38,7 @@ const ANCHOR = (_0)=>{
                         "data-slot": "segmented-nav-item",
                         className: "flex-none",
                         children: item.current ? /*#__PURE__*/ _jsx("span", {
-                            "aria-current": "page",
+                            "aria-current": kind === 'sort' ? 'true' : 'page',
                             className: CURRENT,
                             children: item.label
                         }) : /*#__PURE__*/ _jsx(Link, {

package/dist/ui/molecules/segmented-nav/segmented-nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/segmented-nav/segmented-nav.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from 'react';\n\nimport { CURRENT, LIST, OTHER } from './segment-classes.js';\n\n/** One segment: a page of its own, the current one marked. */\nexport interface SegmentedNavItem {\n  readonly key: string;\n  readonly label: ReactNode;\n  readonly href: string;\n  readonly current: boolean;\n}\n\n/** What renders a segment that leads elsewhere: an `<a>`, or a router's link. */\nexport type SegmentedNavLink = ComponentType<{\n  href: string;\n  className?: string;\n  children: ReactNode;\n}>;\n\nconst ANCHOR: SegmentedNavLink = ({ children, ...props }) => (\n  <a {...props}>{children}</a>\n);\n\n/**\n * A choice between pages, drawn as one segmented control: each segment is a\n * link, the current page's is a marked span. A visible label names the\n * choice; the `<nav>` carries it for assistive technology.\n *\n * No hooks, so a server component renders it, and every segment works with\n * scripting off. Its parts carry `data-slot` (`segmented-nav`,\n * `segmented-nav-label`, `segmented-nav-list`, `segmented-nav-item`).\n */\nexport function SegmentedNav({\n  label,\n  items,\n  link: Link = ANCHOR,\n  className,\n}: {\n  label: string;\n  items: readonly SegmentedNavItem[];\n  link?: SegmentedNavLink;\n  className?: string;\n}) {\n  return (\n    <nav data-slot=\"segmented-nav\" aria-label={label} className={className}>\n      <span\n        data-slot=\"segmented-nav-label\"\n        aria-hidden=\"true\"\n        className=\"text-step-sm text-content-muted\"\n      >\n        {label}\n      </span>\n      <ul data-slot=\"segmented-nav-list\" className={LIST}>\n        {items.map(item => (\n          <li\n            key={item.key}\n            data-slot=\"segmented-nav-item\"\n            className=\"flex-none\"\n          >\n            {item.current ? (\n              <span aria-current=\"page\" className={CURRENT}>\n                {item.label}\n              </span>\n            ) : (\n              <Link href={item.href} className={OTHER}>\n                {item.label}\n              </Link>\n            )}\n          </li>\n        ))}\n      </ul>\n    </nav>\n  );\n}\n"],"names":["CURRENT","LIST","OTHER","ANCHOR","children","props","a","SegmentedNav","label","items","link","Link","className","nav","data-slot","aria-label","span","aria-hidden","ul","map","item","li","current","aria-current","href","key"],"mappings":";;;AAEA,SAASA,OAAO,EAAEC,IAAI,EAAEC,KAAK,QAAQ,uBAAuB;AAiB5D,MAAMC,SAA2B;QAAC,EAAEC,QAAQ,EAAY,OAAPC;;;yBAC/C,KAACC,kBAAMD;kBAAQD;;;AAGjB;;;;;;;;CAQC,GACD,OAAO,SAASG,aAAa,EAC3BC,KAAK,EACLC,KAAK,EACLC,MAAMC,OAAOR,MAAM,EACnBS,SAAS,EAMV;IACC,qBACE,MAACC;QAAIC,aAAU;QAAgBC,cAAYP;QAAOI,WAAWA;;0BAC3D,KAACI;gBACCF,aAAU;gBACVG,eAAY;gBACZL,WAAU;0BAETJ;;0BAEH,KAACU;gBAAGJ,aAAU;gBAAqBF,WAAWX;0BAC3CQ,MAAMU,GAAG,CAACC,CAAAA,qBACT,KAACC;wBAECP,aAAU;wBACVF,WAAU;kCAETQ,KAAKE,OAAO,iBACX,KAACN;4BAAKO,gBAAa;4BAAOX,WAAWZ;sCAClCoB,KAAKZ,KAAK;2CAGb,KAACG;4BAAKa,MAAMJ,KAAKI,IAAI;4BAAEZ,WAAWV;sCAC/BkB,KAAKZ,KAAK;;uBAVVY,KAAKK,GAAG;;;;AAkBzB"}
+{"version":3,"sources":["../../../../src/ui/molecules/segmented-nav/segmented-nav.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from 'react';\n\nimport { CURRENT, LIST, OTHER } from './segment-classes.js';\n\n/** One segment: a page of its own, the current one marked. */\nexport interface SegmentedNavItem {\n  readonly key: string;\n  readonly label: ReactNode;\n  readonly href: string;\n  readonly current: boolean;\n}\n\n/** What renders a segment that leads elsewhere: an `<a>`, or a router's link. */\nexport type SegmentedNavLink = ComponentType<{\n  href: string;\n  className?: string;\n  children: ReactNode;\n}>;\n\nconst ANCHOR: SegmentedNavLink = ({ children, ...props }) => (\n  <a {...props}>{children}</a>\n);\n\n/**\n * What the segments choose between. `pages` are separate pages, and the\n * current one is `aria-current=\"page\"`; `sort` orders one page's results, so\n * every segment is the same page and the current one is only the current\n * choice (`aria-current=\"true\"`) — calling it the page would tell a screen\n * reader the visitor is somewhere they are not.\n */\nexport type SegmentedNavKind = 'pages' | 'sort';\n\n/**\n * A choice between pages, or between orderings of one page, drawn as one\n * segmented control: each segment is a link, the current one a marked span.\n * A visible label names the choice; the `<nav>` carries it for assistive\n * technology.\n *\n * No hooks, so a server component renders it, and every segment works with\n * scripting off. Its parts carry `data-slot` (`segmented-nav`,\n * `segmented-nav-label`, `segmented-nav-list`, `segmented-nav-item`).\n */\nexport function SegmentedNav({\n  label,\n  items,\n  link: Link = ANCHOR,\n  kind = 'pages',\n  className,\n}: {\n  label: string;\n  items: readonly SegmentedNavItem[];\n  link?: SegmentedNavLink;\n  kind?: SegmentedNavKind;\n  className?: string;\n}) {\n  return (\n    <nav data-slot=\"segmented-nav\" aria-label={label} className={className}>\n      <span\n        data-slot=\"segmented-nav-label\"\n        aria-hidden=\"true\"\n        className=\"text-step-sm text-content-muted\"\n      >\n        {label}\n      </span>\n      <ul data-slot=\"segmented-nav-list\" className={LIST}>\n        {items.map(item => (\n          <li\n            key={item.key}\n            data-slot=\"segmented-nav-item\"\n            className=\"flex-none\"\n          >\n            {item.current ? (\n              <span\n                aria-current={kind === 'sort' ? 'true' : 'page'}\n                className={CURRENT}\n              >\n                {item.label}\n              </span>\n            ) : (\n              <Link href={item.href} className={OTHER}>\n                {item.label}\n              </Link>\n            )}\n          </li>\n        ))}\n      </ul>\n    </nav>\n  );\n}\n"],"names":["CURRENT","LIST","OTHER","ANCHOR","children","props","a","SegmentedNav","label","items","link","Link","kind","className","nav","data-slot","aria-label","span","aria-hidden","ul","map","item","li","current","aria-current","href","key"],"mappings":";;;AAEA,SAASA,OAAO,EAAEC,IAAI,EAAEC,KAAK,QAAQ,uBAAuB;AAiB5D,MAAMC,SAA2B;QAAC,EAAEC,QAAQ,EAAY,OAAPC;;;yBAC/C,KAACC,kBAAMD;kBAAQD;;;AAYjB;;;;;;;;;CASC,GACD,OAAO,SAASG,aAAa,EAC3BC,KAAK,EACLC,KAAK,EACLC,MAAMC,OAAOR,MAAM,EACnBS,OAAO,OAAO,EACdC,SAAS,EAOV;IACC,qBACE,MAACC;QAAIC,aAAU;QAAgBC,cAAYR;QAAOK,WAAWA;;0BAC3D,KAACI;gBACCF,aAAU;gBACVG,eAAY;gBACZL,WAAU;0BAETL;;0BAEH,KAACW;gBAAGJ,aAAU;gBAAqBF,WAAWZ;0BAC3CQ,MAAMW,GAAG,CAACC,CAAAA,qBACT,KAACC;wBAECP,aAAU;wBACVF,WAAU;kCAETQ,KAAKE,OAAO,iBACX,KAACN;4BACCO,gBAAcZ,SAAS,SAAS,SAAS;4BACzCC,WAAWb;sCAEVqB,KAAKb,KAAK;2CAGb,KAACG;4BAAKc,MAAMJ,KAAKI,IAAI;4BAAEZ,WAAWX;sCAC/BmB,KAAKb,KAAK;;uBAbVa,KAAKK,GAAG;;;;AAqBzB"}

package/dist/ui/molecules/split-view/split-view.js

@@ -44,11 +44,11 @@ import { cn } from '../../utils/cn.js';
     };
     return /*#__PURE__*/ _jsx("div", {
         "data-slot": "split-view",
-        className: cn('lg:min-h-[28rem] relative', className),
+        className: cn('lg:min-h-112 relative', className),
         children: /*#__PURE__*/ _jsx("ol", {
             "data-slot": "split-list",
             "aria-label": label,
-            className: "m-0 p-0 lg:max-h-[28rem] lg:w-[40%] lg:overflow-y-auto list-none",
+            className: "m-0 p-0 lg:max-h-112 lg:w-2/5 lg:overflow-y-auto list-none",
             children: items.map((item, at)=>{
                 const chosen = at === index;
                 return /*#__PURE__*/ _jsxs("li", {
@@ -66,7 +66,7 @@ import { cn } from '../../utils/cn.js';
                         }),
                         chosen && /*#__PURE__*/ _jsx("div", {
                             "data-slot": "split-detail",
-                            className: "lg:absolute lg:top-0 lg:right-0 lg:max-h-[28rem] lg:w-[58%] lg:overflow-y-auto lg:p-0 px-xs py-s",
+                            className: "lg:absolute lg:top-0 lg:right-0 lg:max-h-112 lg:w-7/12 lg:overflow-y-auto lg:p-0 px-xs py-s",
                             children: item.detail
                         })
                     ]

package/dist/ui/molecules/split-view/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/split-view/split-view.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\nexport interface SplitViewItem {\n  readonly id: string;\n  /** What the list shows of the item: its number and title, say. */\n  readonly head: ReactNode;\n  /** What the pane shows once the item is chosen. */\n  readonly detail: ReactNode;\n  /** Where the item lives on its own: followed without scripting. */\n  readonly href: string;\n}\n\n/** The keys that move the choice, and where each moves it. */\nconst MOVES: Readonly<\n  Record<string, (index: number, count: number) => number>\n> = {\n  ArrowDown: (index, count) => Math.min(index + 1, count - 1),\n  ArrowUp: index => Math.max(index - 1, 0),\n  Home: () => 0,\n  End: (_, count) => count - 1,\n};\n\n/**\n * A list beside a reading pane: the chosen item's detail shows next to the\n * list on a wide screen, and under its own row on a narrow one, where the\n * list reads as an accordion.\n *\n * One markup for both: the chosen row carries its detail. On a wide screen\n * the list is a column of fixed height that scrolls, and the detail is placed\n * against the whole view, so the list's overflow neither clips nor scrolls it.\n *\n * Each row is a link to the item's own page, which is what a visitor without\n * scripting follows. With it, a plain click chooses instead, and ↑, ↓, Home\n * and End move the choice, focus following it (one row in the tab order).\n * Parts carry `data-slot` (`split-view`, `split-list`, `split-row`,\n * `split-trigger`, `split-detail`) for a page to restyle.\n */\nexport function SplitView({\n  label,\n  items,\n  selected,\n  onSelect,\n  className,\n}: {\n  /** The list's accessible name. */\n  label: string;\n  items: readonly SplitViewItem[];\n  /** The chosen item's id; an unknown one chooses nothing. */\n  selected: string | undefined;\n  onSelect: (id: string) => void;\n  className?: string;\n}) {\n  const index = items.findIndex(item => item.id === selected);\n  const focusable = index === -1 ? 0 : index;\n\n  const choose = (event: MouseEvent, id: string) => {\n    // A new tab or window is the link's own business.\n    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey)\n      return;\n    event.preventDefault();\n    onSelect(id);\n  };\n\n  // On each trigger rather than the list: a list is not interactive, so the\n  // keys belong to the row that has focus.\n  const move = (event: KeyboardEvent<HTMLAnchorElement>) => {\n    const to = MOVES[event.key];\n    if (to === undefined) return;\n    event.preventDefault();\n    const next = to(focusable, items.length);\n    const triggers = event.currentTarget\n      .closest('[data-slot=\"split-list\"]')\n      ?.querySelectorAll<HTMLElement>('[data-slot=\"split-trigger\"]');\n    triggers?.[next]?.focus();\n    onSelect((items[next] as SplitViewItem).id);\n  };\n\n  return (\n    <div\n      data-slot=\"split-view\"\n      className={cn('lg:min-h-[28rem] relative', className)}\n    >\n      <ol\n        data-slot=\"split-list\"\n        aria-label={label}\n        className=\"m-0 p-0 lg:max-h-[28rem] lg:w-[40%] lg:overflow-y-auto list-none\"\n      >\n        {items.map((item, at) => {\n          const chosen = at === index;\n          return (\n            <li key={item.id} data-slot=\"split-row\">\n              <a\n                href={item.href}\n                data-slot=\"split-trigger\"\n                aria-current={chosen ? 'true' : undefined}\n                tabIndex={at === focusable ? 0 : -1}\n                onClick={event => choose(event, item.id)}\n                onKeyDown={move}\n                className=\"block rounded-md px-xs py-2xs text-inherit no-underline focus-ring hover:bg-[color-mix(in_srgb,var(--color-content)_6%,transparent)] aria-[current]:bg-[color-mix(in_srgb,var(--color-primary)_14%,transparent)]\"\n              >\n                {item.head}\n              </a>\n              {chosen && (\n                <div\n                  data-slot=\"split-detail\"\n                  className=\"lg:absolute lg:top-0 lg:right-0 lg:max-h-[28rem] lg:w-[58%] lg:overflow-y-auto lg:p-0 px-xs py-s\"\n                >\n                  {item.detail}\n                </div>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </div>\n  );\n}\n"],"names":["cn","MOVES","ArrowDown","index","count","Math","min","ArrowUp","max","Home","End","_","SplitView","label","items","selected","onSelect","className","findIndex","item","id","focusable","choose","event","button","metaKey","ctrlKey","shiftKey","preventDefault","move","triggers","to","key","undefined","next","length","currentTarget","closest","querySelectorAll","focus","div","data-slot","ol","aria-label","map","at","chosen","li","a","href","aria-current","tabIndex","onClick","onKeyDown","head","detail"],"mappings":"AAAA;;AAIA,SAASA,EAAE,QAAQ,oBAAoB;AAYvC,4DAA4D,GAC5D,MAAMC,QAEF;IACFC,WAAW,CAACC,OAAOC,QAAUC,KAAKC,GAAG,CAACH,QAAQ,GAAGC,QAAQ;IACzDG,SAASJ,CAAAA,QAASE,KAAKG,GAAG,CAACL,QAAQ,GAAG;IACtCM,MAAM,IAAM;IACZC,KAAK,CAACC,GAAGP,QAAUA,QAAQ;AAC7B;AAEA;;;;;;;;;;;;;;CAcC,GACD,OAAO,SAASQ,UAAU,EACxBC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EASV;IACC,MAAMd,QAAQW,MAAMI,SAAS,CAACC,CAAAA,OAAQA,KAAKC,EAAE,KAAKL;IAClD,MAAMM,YAAYlB,UAAU,CAAC,IAAI,IAAIA;IAErC,MAAMmB,SAAS,CAACC,OAAmBH;QACjC,kDAAkD;QAClD,IAAIG,MAAMC,MAAM,KAAK,KAAKD,MAAME,OAAO,IAAIF,MAAMG,OAAO,IAAIH,MAAMI,QAAQ,EACxE;QACFJ,MAAMK,cAAc;QACpBZ,SAASI;IACX;IAEA,0EAA0E;IAC1E,yCAAyC;IACzC,MAAMS,OAAO,CAACN;YAKKA,8BAGjBO;QAPA,MAAMC,KAAK9B,KAAK,CAACsB,MAAMS,GAAG,CAAC;QAC3B,IAAID,OAAOE,WAAW;QACtBV,MAAMK,cAAc;QACpB,MAAMM,OAAOH,GAAGV,WAAWP,MAAMqB,MAAM;QACvC,MAAML,YAAWP,+BAAAA,MAAMa,aAAa,CACjCC,OAAO,CAAC,gDADMd,6BAEbe,gBAAgB,CAAc;QAClCR,6BAAAA,iBAAAA,QAAU,CAACI,KAAK,qBAAhBJ,eAAkBS,KAAK;QACvBvB,SAAS,AAACF,KAAK,CAACoB,KAAK,CAAmBd,EAAE;IAC5C;IAEA,qBACE,KAACoB;QACCC,aAAU;QACVxB,WAAWjB,GAAG,6BAA6BiB;kBAE3C,cAAA,KAACyB;YACCD,aAAU;YACVE,cAAY9B;YACZI,WAAU;sBAETH,MAAM8B,GAAG,CAAC,CAACzB,MAAM0B;gBAChB,MAAMC,SAASD,OAAO1C;gBACtB,qBACE,MAAC4C;oBAAiBN,aAAU;;sCAC1B,KAACO;4BACCC,MAAM9B,KAAK8B,IAAI;4BACfR,aAAU;4BACVS,gBAAcJ,SAAS,SAASb;4BAChCkB,UAAUN,OAAOxB,YAAY,IAAI,CAAC;4BAClC+B,SAAS7B,CAAAA,QAASD,OAAOC,OAAOJ,KAAKC,EAAE;4BACvCiC,WAAWxB;4BACXZ,WAAU;sCAETE,KAAKmC,IAAI;;wBAEXR,wBACC,KAACN;4BACCC,aAAU;4BACVxB,WAAU;sCAETE,KAAKoC,MAAM;;;mBAjBTpC,KAAKC,EAAE;YAsBpB;;;AAIR"}
+{"version":3,"sources":["../../../../src/ui/molecules/split-view/split-view.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\nexport interface SplitViewItem {\n  readonly id: string;\n  /** What the list shows of the item: its number and title, say. */\n  readonly head: ReactNode;\n  /** What the pane shows once the item is chosen. */\n  readonly detail: ReactNode;\n  /** Where the item lives on its own: followed without scripting. */\n  readonly href: string;\n}\n\n/** The keys that move the choice, and where each moves it. */\nconst MOVES: Readonly<\n  Record<string, (index: number, count: number) => number>\n> = {\n  ArrowDown: (index, count) => Math.min(index + 1, count - 1),\n  ArrowUp: index => Math.max(index - 1, 0),\n  Home: () => 0,\n  End: (_, count) => count - 1,\n};\n\n/**\n * A list beside a reading pane: the chosen item's detail shows next to the\n * list on a wide screen, and under its own row on a narrow one, where the\n * list reads as an accordion.\n *\n * One markup for both: the chosen row carries its detail. On a wide screen\n * the list is a column of fixed height that scrolls, and the detail is placed\n * against the whole view, so the list's overflow neither clips nor scrolls it.\n *\n * Each row is a link to the item's own page, which is what a visitor without\n * scripting follows. With it, a plain click chooses instead, and ↑, ↓, Home\n * and End move the choice, focus following it (one row in the tab order).\n * Parts carry `data-slot` (`split-view`, `split-list`, `split-row`,\n * `split-trigger`, `split-detail`) for a page to restyle.\n */\nexport function SplitView({\n  label,\n  items,\n  selected,\n  onSelect,\n  className,\n}: {\n  /** The list's accessible name. */\n  label: string;\n  items: readonly SplitViewItem[];\n  /** The chosen item's id; an unknown one chooses nothing. */\n  selected: string | undefined;\n  onSelect: (id: string) => void;\n  className?: string;\n}) {\n  const index = items.findIndex(item => item.id === selected);\n  const focusable = index === -1 ? 0 : index;\n\n  const choose = (event: MouseEvent, id: string) => {\n    // A new tab or window is the link's own business.\n    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey)\n      return;\n    event.preventDefault();\n    onSelect(id);\n  };\n\n  // On each trigger rather than the list: a list is not interactive, so the\n  // keys belong to the row that has focus.\n  const move = (event: KeyboardEvent<HTMLAnchorElement>) => {\n    const to = MOVES[event.key];\n    if (to === undefined) return;\n    event.preventDefault();\n    const next = to(focusable, items.length);\n    const triggers = event.currentTarget\n      .closest('[data-slot=\"split-list\"]')\n      ?.querySelectorAll<HTMLElement>('[data-slot=\"split-trigger\"]');\n    triggers?.[next]?.focus();\n    onSelect((items[next] as SplitViewItem).id);\n  };\n\n  return (\n    <div\n      data-slot=\"split-view\"\n      className={cn('lg:min-h-112 relative', className)}\n    >\n      <ol\n        data-slot=\"split-list\"\n        aria-label={label}\n        className=\"m-0 p-0 lg:max-h-112 lg:w-2/5 lg:overflow-y-auto list-none\"\n      >\n        {items.map((item, at) => {\n          const chosen = at === index;\n          return (\n            <li key={item.id} data-slot=\"split-row\">\n              <a\n                href={item.href}\n                data-slot=\"split-trigger\"\n                aria-current={chosen ? 'true' : undefined}\n                tabIndex={at === focusable ? 0 : -1}\n                onClick={event => choose(event, item.id)}\n                onKeyDown={move}\n                className=\"block rounded-md px-xs py-2xs text-inherit no-underline focus-ring hover:bg-[color-mix(in_srgb,var(--color-content)_6%,transparent)] aria-[current]:bg-[color-mix(in_srgb,var(--color-primary)_14%,transparent)]\"\n              >\n                {item.head}\n              </a>\n              {chosen && (\n                <div\n                  data-slot=\"split-detail\"\n                  className=\"lg:absolute lg:top-0 lg:right-0 lg:max-h-112 lg:w-7/12 lg:overflow-y-auto lg:p-0 px-xs py-s\"\n                >\n                  {item.detail}\n                </div>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </div>\n  );\n}\n"],"names":["cn","MOVES","ArrowDown","index","count","Math","min","ArrowUp","max","Home","End","_","SplitView","label","items","selected","onSelect","className","findIndex","item","id","focusable","choose","event","button","metaKey","ctrlKey","shiftKey","preventDefault","move","triggers","to","key","undefined","next","length","currentTarget","closest","querySelectorAll","focus","div","data-slot","ol","aria-label","map","at","chosen","li","a","href","aria-current","tabIndex","onClick","onKeyDown","head","detail"],"mappings":"AAAA;;AAIA,SAASA,EAAE,QAAQ,oBAAoB;AAYvC,4DAA4D,GAC5D,MAAMC,QAEF;IACFC,WAAW,CAACC,OAAOC,QAAUC,KAAKC,GAAG,CAACH,QAAQ,GAAGC,QAAQ;IACzDG,SAASJ,CAAAA,QAASE,KAAKG,GAAG,CAACL,QAAQ,GAAG;IACtCM,MAAM,IAAM;IACZC,KAAK,CAACC,GAAGP,QAAUA,QAAQ;AAC7B;AAEA;;;;;;;;;;;;;;CAcC,GACD,OAAO,SAASQ,UAAU,EACxBC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EASV;IACC,MAAMd,QAAQW,MAAMI,SAAS,CAACC,CAAAA,OAAQA,KAAKC,EAAE,KAAKL;IAClD,MAAMM,YAAYlB,UAAU,CAAC,IAAI,IAAIA;IAErC,MAAMmB,SAAS,CAACC,OAAmBH;QACjC,kDAAkD;QAClD,IAAIG,MAAMC,MAAM,KAAK,KAAKD,MAAME,OAAO,IAAIF,MAAMG,OAAO,IAAIH,MAAMI,QAAQ,EACxE;QACFJ,MAAMK,cAAc;QACpBZ,SAASI;IACX;IAEA,0EAA0E;IAC1E,yCAAyC;IACzC,MAAMS,OAAO,CAACN;YAKKA,8BAGjBO;QAPA,MAAMC,KAAK9B,KAAK,CAACsB,MAAMS,GAAG,CAAC;QAC3B,IAAID,OAAOE,WAAW;QACtBV,MAAMK,cAAc;QACpB,MAAMM,OAAOH,GAAGV,WAAWP,MAAMqB,MAAM;QACvC,MAAML,YAAWP,+BAAAA,MAAMa,aAAa,CACjCC,OAAO,CAAC,gDADMd,6BAEbe,gBAAgB,CAAc;QAClCR,6BAAAA,iBAAAA,QAAU,CAACI,KAAK,qBAAhBJ,eAAkBS,KAAK;QACvBvB,SAAS,AAACF,KAAK,CAACoB,KAAK,CAAmBd,EAAE;IAC5C;IAEA,qBACE,KAACoB;QACCC,aAAU;QACVxB,WAAWjB,GAAG,yBAAyBiB;kBAEvC,cAAA,KAACyB;YACCD,aAAU;YACVE,cAAY9B;YACZI,WAAU;sBAETH,MAAM8B,GAAG,CAAC,CAACzB,MAAM0B;gBAChB,MAAMC,SAASD,OAAO1C;gBACtB,qBACE,MAAC4C;oBAAiBN,aAAU;;sCAC1B,KAACO;4BACCC,MAAM9B,KAAK8B,IAAI;4BACfR,aAAU;4BACVS,gBAAcJ,SAAS,SAASb;4BAChCkB,UAAUN,OAAOxB,YAAY,IAAI,CAAC;4BAClC+B,SAAS7B,CAAAA,QAASD,OAAOC,OAAOJ,KAAKC,EAAE;4BACvCiC,WAAWxB;4BACXZ,WAAU;sCAETE,KAAKmC,IAAI;;wBAEXR,wBACC,KAACN;4BACCC,aAAU;4BACVxB,WAAU;sCAETE,KAAKoC,MAAM;;;mBAjBTpC,KAAKC,EAAE;YAsBpB;;;AAIR"}

package/dist/ui/molecules/tab-strip/tab-strip.d.ts

@@ -1,29 +1,68 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export type TabStripProps = ComponentPropsWithoutRef<'div'>;
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface TabStripProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** The {@link Tab}s, in order. */
+    children?: ReactNode;
+    /** The tablist's accessible name; the controls catalog's `tabs.list` when omitted. */
+    label?: string;
+    /**
+     * What sits after the tabs — a {@link TabAddButton}. It is outside the
+     * tablist, because a tablist may own nothing but tabs.
+     */
+    actions?: ReactNode;
+}
 /**
- * The workspace tab strip: a horizontally scrolling row of {@link Tab}s sitting
- * on the workspace surface. Presentational only — the open set, order, and
- * active tab come from the caller (the tabs store lives in the shell).
+ * The workspace tab strip, on the WAI-ARIA tabs pattern: one Tab stop for the
+ * whole list, Arrow Left/Right (wrapping), Home and End move between tabs, and
+ * Enter or Space activates the focused one — activation is manual, because a
+ * tab's body is a whole screen and rendering every one an arrow passes over is
+ * work nobody asked for. Delete closes a closable tab (see {@link Tab}).
+ *
+ * Presentational: the open set, the order and the active tab come from the
+ * caller. Each tab controls one {@link TabPanel}, which the caller renders.
+ * Below the width of its tabs the list scrolls on its own, so the strip
+ * reflows at 320px rather than widening the page.
  */
-export declare function TabStrip({ className, children, ...props }: TabStripProps): import("react").JSX.Element;
+export declare function TabStrip({ className, children, label, actions, ...props }: TabStripProps): import("react").JSX.Element;
 /** `dirty` = unsaved draft; `saving` = autosave in flight; `error` = save failed. */
 export type TabState = 'idle' | 'dirty' | 'saving' | 'error';
 export interface TabProps {
+    /** The tab's element id, which its {@link TabPanel} is labelled by. */
+    id: string;
     label: string;
+    /** The id of the {@link TabPanel} this tab shows, when it is the active one. */
+    controls?: string;
     active?: boolean;
     state?: TabState;
     onSelect?: () => void;
+    /** Makes the tab closable: by the × beside it, or Delete while it has focus. */
     onClose?: () => void;
     className?: string;
+    /** Set by {@link TabStrip} on the first tab when none is active. */
+    tabStop?: boolean;
+}
+/**
+ * One tab. `role="tab"` sits on the button itself, so the tab is a single
+ * interactive element; the close × beside it is a pointer convenience only —
+ * hidden from assistive technology and out of the Tab order — and Delete on the
+ * focused tab is its keyboard equivalent, announced through `aria-keyshortcuts`.
+ *
+ * The active tab lifts onto the surface (`bg-surface-elevated` + `-mb-px`, so
+ * its base dissolves into the content plane below), and a non-idle tab shows
+ * the autosave dot and its name says the same thing in words, since a dot alone is
+ * colour carrying meaning (WCAG 1.4.1).
+ */
+export declare function Tab({ id, label, controls, active, state, onSelect, onClose, className, tabStop, }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps extends ComponentPropsWithoutRef<'div'> {
+    id: string;
+    /** The id of the {@link Tab} that shows this panel. */
+    labelledBy?: string;
 }
 /**
- * One tab. The active tab lifts onto the surface (`bg-surface-elevated` +
- * `-mb-px` so its base dissolves into the content plane below — the seam), and
- * a non-idle tab shows the autosave dot: it breathes while `saving`, turns
- * `danger` on `error`. The one place the chrome gets loud, on purpose.
+ * The region a tab shows. Focusable, as the pattern asks, so a keyboard user
+ * can reach a panel whose content has nothing focusable of its own.
  */
-export declare function Tab({ label, active, state, onSelect, onClose, className, }: TabProps): import("react").JSX.Element;
+export declare function TabPanel({ labelledBy, className, ...props }: TabPanelProps): import("react").JSX.Element;
 export type TabAddButtonProps = ComponentPropsWithoutRef<'button'>;
-/** The "+" that opens a new tab. */
+/** The "+" that opens a new tab. Pass it as {@link TabStrip}'s `actions`. */
 export declare function TabAddButton({ className, ...props }: TabAddButtonProps): import("react").JSX.Element;
 //# sourceMappingURL=tab-strip.d.ts.map

package/dist/ui/molecules/tab-strip/tab-strip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-strip.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/tab-strip/tab-strip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAKtD,MAAM,MAAM,aAAa,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE5D;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAaxE;AAED,qFAAqF;AACrF,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,MAAc,EACd,KAAc,EACd,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,QAAQ,+BAyDV;AAED,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;AAEnE,oCAAoC;AACpC,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAkBtE"}
+{"version":3,"file":"tab-strip.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/tab-strip/tab-strip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,wBAAwB,EAI7B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,CACX;IACC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAuBD;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACT,EAAE,aAAa,+BAmCf;AAED,qFAAqF;AACrF,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,QAAQ;IACvB,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,MAAc,EACd,KAAc,EACd,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAgB,GACjB,EAAE,QAAQ,+BAgFV;AAED,MAAM,WAAW,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACpE,EAAE,EAAE,MAAM,CAAC;IACX,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAY1E;AAED,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;AAEnE,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAkBtE"}

package/dist/ui/molecules/tab-strip/tab-strip.js

@@ -2,67 +2,158 @@
 import { _ as _extends } from "@swc/helpers/_/_extends";
 import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from 'react';
 import { useT } from '../../../i18n/index.js';
 import { cn } from '../../utils/cn.js';
 /**
- * The workspace tab strip: a horizontally scrolling row of {@link Tab}s sitting
- * on the workspace surface. Presentational only — the open set, order, and
- * active tab come from the caller (the tabs store lives in the shell).
+ * Arrow Left/Right (wrapping), Home and End move focus to a sibling tab in the
+ * same tablist. Each tab handles its own keys, so the tablist stays a plain
+ * container and the keyboard model holds for a Tab rendered anywhere.
+ */ function moveFocus(event) {
+    var _all_to;
+    const list = event.currentTarget.closest('[role="tablist"]');
+    if (!list) return false;
+    const all = [
+        ...list.querySelectorAll('[role="tab"]')
+    ];
+    const from = all.indexOf(event.currentTarget);
+    const to = {
+        ArrowRight: (from + 1) % all.length,
+        ArrowLeft: (from - 1 + all.length) % all.length,
+        Home: 0,
+        End: all.length - 1
+    }[event.key];
+    if (to === undefined) return false;
+    (_all_to = all[to]) == null ? void 0 : _all_to.focus();
+    return true;
+}
+/**
+ * The workspace tab strip, on the WAI-ARIA tabs pattern: one Tab stop for the
+ * whole list, Arrow Left/Right (wrapping), Home and End move between tabs, and
+ * Enter or Space activates the focused one — activation is manual, because a
+ * tab's body is a whole screen and rendering every one an arrow passes over is
+ * work nobody asked for. Delete closes a closable tab (see {@link Tab}).
+ *
+ * Presentational: the open set, the order and the active tab come from the
+ * caller. Each tab controls one {@link TabPanel}, which the caller renders.
+ * Below the width of its tabs the list scrolls on its own, so the strip
+ * reflows at 320px rather than widening the page.
  */ export function TabStrip(_0) {
-    let { className, children } = _0, props = _object_without_properties_loose(_0, [
+    let { className, children, label, actions } = _0, props = _object_without_properties_loose(_0, [
         "className",
-        "children"
+        "children",
+        "label",
+        "actions"
     ]);
-    return /*#__PURE__*/ _jsx("div", _extends({
-        role: "tablist",
-        className: cn('flex items-end gap-3xs overflow-x-auto border-b border-border bg-surface px-2xs', className)
+    const t = useT();
+    const tabs = Children.toArray(children);
+    // Roving tabindex: the active tab is the list's Tab stop, or the first tab
+    // when none is active (a dead link shows no tab as its own).
+    const anyActive = tabs.some((tab)=>/*#__PURE__*/ isValidElement(tab) && tab.props.active === true);
+    const items = anyActive ? tabs : tabs.map((tab, index)=>index === 0 && /*#__PURE__*/ isValidElement(tab) ? /*#__PURE__*/ cloneElement(tab, {
+            tabStop: true
+        }) : tab);
+    return /*#__PURE__*/ _jsxs("div", _extends({
+        className: cn('min-w-0 flex w-full items-end gap-3xs border-b border-border bg-surface px-2xs', className)
     }, props, {
-        children: children
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                role: "tablist",
+                "aria-label": label != null ? label : t('tabs.list'),
+                "aria-orientation": "horizontal",
+                className: "min-w-0 flex flex-1 items-end gap-3xs overflow-x-auto",
+                children: items
+            }),
+            actions
+        ]
     }));
 }
 /**
- * One tab. The active tab lifts onto the surface (`bg-surface-elevated` +
- * `-mb-px` so its base dissolves into the content plane below — the seam), and
- * a non-idle tab shows the autosave dot: it breathes while `saving`, turns
- * `danger` on `error`. The one place the chrome gets loud, on purpose.
- */ export function Tab({ label, active = false, state = 'idle', onSelect, onClose, className }) {
+ * One tab. `role="tab"` sits on the button itself, so the tab is a single
+ * interactive element; the close × beside it is a pointer convenience only —
+ * hidden from assistive technology and out of the Tab order — and Delete on the
+ * focused tab is its keyboard equivalent, announced through `aria-keyshortcuts`.
+ *
+ * The active tab lifts onto the surface (`bg-surface-elevated` + `-mb-px`, so
+ * its base dissolves into the content plane below), and a non-idle tab shows
+ * the autosave dot and its name says the same thing in words, since a dot alone is
+ * colour carrying meaning (WCAG 1.4.1).
+ */ export function Tab({ id, label, controls, active = false, state = 'idle', onSelect, onClose, className, tabStop = active }) {
     const t = useT();
     return /*#__PURE__*/ _jsxs("div", {
-        role: "tab",
-        "aria-selected": active,
-        className: cn('group relative flex items-center gap-2xs rounded-t-md px-s py-2xs text-step-sm', 'transition duration-200 ease-smooth', active ? '-mb-px bg-surface-elevated font-medium text-content shadow-edge' : 'text-content-muted hover:bg-surface-elevated/60', state === 'error' && 'bg-danger-subtle text-danger', className),
+        role: "none",
+        className: cn('group relative flex shrink-0 items-center rounded-t-md text-step-sm', 'transition duration-200 ease-smooth', active ? '-mb-px bg-surface-elevated font-medium text-content shadow-edge' : 'text-content-muted hover:bg-surface-elevated/60', state === 'error' && 'bg-danger-subtle text-danger', className),
         children: [
             active && /*#__PURE__*/ _jsx("span", {
                 "aria-hidden": "true",
-                className: "inset-x-0 top-0 absolute h-[2px] rounded-full bg-accent"
+                className: "inset-x-0 top-0 h-0.5 pointer-events-none absolute rounded-full bg-accent"
             }),
-            /*#__PURE__*/ _jsx("button", {
+            /*#__PURE__*/ _jsxs("button", {
                 type: "button",
+                role: "tab",
+                id: id,
+                "aria-selected": active,
+                "aria-controls": active ? controls : undefined,
+                "aria-keyshortcuts": onClose ? 'Delete' : undefined,
+                tabIndex: tabStop ? 0 : -1,
                 onClick: onSelect,
-                className: "max-w-[12rem] truncate focus-ring",
-                children: label
-            }),
-            state !== 'idle' && /*#__PURE__*/ _jsx("span", {
-                "data-testid": "tab-indicator",
-                "aria-hidden": "true",
-                className: cn('size-[6px] shrink-0 rounded-full', state === 'error' ? 'bg-danger' : 'bg-accent', state === 'saving' && 'animate-pulse motion-reduce:animate-none')
+                "aria-label": state === 'idle' ? undefined : t('tabs.withState', {
+                    label,
+                    state: t(`tabs.${state}`)
+                }),
+                onKeyDown: (event)=>{
+                    if (event.key === 'Delete' && onClose) {
+                        event.preventDefault();
+                        onClose();
+                    } else if (moveFocus(event)) {
+                        event.preventDefault();
+                    }
+                },
+                className: cn('max-w-48 flex min-h-(--target-min) items-center gap-2xs rounded-t-md py-2xs pl-s focus-ring', onClose ? 'pr-3xs' : 'pr-s'),
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "truncate",
+                        children: label
+                    }),
+                    state !== 'idle' && /*#__PURE__*/ _jsx("span", {
+                        "data-testid": "tab-indicator",
+                        "aria-hidden": "true",
+                        className: cn('size-1.5 shrink-0 rounded-full', state === 'error' ? 'bg-danger' : 'bg-accent', state === 'saving' && 'animate-pulse motion-reduce:animate-none')
+                    })
+                ]
             }),
             onClose && /*#__PURE__*/ _jsx("button", {
                 type: "button",
-                "aria-label": t('tabs.close', {
+                "aria-hidden": "true",
+                tabIndex: -1,
+                title: t('tabs.close', {
                     label
                 }),
                 onClick: onClose,
-                className: cn('rounded ml-2xs p-3xs text-content-muted opacity-0 focus-ring transition', 'group-hover:opacity-100 hover:bg-surface hover:text-content focus:opacity-100', active && 'opacity-100'),
-                children: /*#__PURE__*/ _jsx("span", {
-                    "aria-hidden": "true",
-                    children: "×"
-                })
+                className: cn('rounded mr-3xs flex min-h-(--target-min) min-w-(--target-min) items-center justify-center text-content-muted opacity-0 transition', 'group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-surface hover:text-content', active && 'opacity-100'),
+                children: "×"
             })
         ]
     });
 }
-/** The "+" that opens a new tab. */ export function TabAddButton(_0) {
+/**
+ * The region a tab shows. Focusable, as the pattern asks, so a keyboard user
+ * can reach a panel whose content has nothing focusable of its own.
+ */ export function TabPanel(_0) {
+    let { labelledBy, className } = _0, props = _object_without_properties_loose(_0, [
+        "labelledBy",
+        "className"
+    ]);
+    return /*#__PURE__*/ _jsx("div", _extends({
+        role: "tabpanel",
+        // The tabs pattern makes the panel itself a Tab stop.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0,
+        "aria-labelledby": labelledBy,
+        className: cn('focus-ring', className)
+    }, props));
+}
+/** The "+" that opens a new tab. Pass it as {@link TabStrip}'s `actions`. */ export function TabAddButton(_0) {
     let { className } = _0, props = _object_without_properties_loose(_0, [
         "className"
     ]);
@@ -70,7 +161,7 @@ import { cn } from '../../utils/cn.js';
     return /*#__PURE__*/ _jsx("button", _extends({
         type: "button",
         "aria-label": t('tabs.new'),
-        className: cn('mb-3xs shrink-0 rounded-md px-2xs py-3xs text-step-sm text-content-muted', 'transition hover:bg-surface-elevated hover:text-content', 'focus-ring', className)
+        className: cn('mb-3xs flex min-h-(--target-min) min-w-(--target-min) shrink-0 items-center justify-center rounded-md px-2xs text-step-sm text-content-muted', 'transition hover:bg-surface-elevated hover:text-content', 'focus-ring', className)
     }, props, {
         children: /*#__PURE__*/ _jsx("span", {
             "aria-hidden": "true",

package/dist/ui/molecules/tab-strip/tab-strip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/tab-strip/tab-strip.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { cn } from '../../utils/cn.js';\n\nexport type TabStripProps = ComponentPropsWithoutRef<'div'>;\n\n/**\n * The workspace tab strip: a horizontally scrolling row of {@link Tab}s sitting\n * on the workspace surface. Presentational only — the open set, order, and\n * active tab come from the caller (the tabs store lives in the shell).\n */\nexport function TabStrip({ className, children, ...props }: TabStripProps) {\n  return (\n    <div\n      role=\"tablist\"\n      className={cn(\n        'flex items-end gap-3xs overflow-x-auto border-b border-border bg-surface px-2xs',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n/** `dirty` = unsaved draft; `saving` = autosave in flight; `error` = save failed. */\nexport type TabState = 'idle' | 'dirty' | 'saving' | 'error';\n\nexport interface TabProps {\n  label: string;\n  active?: boolean;\n  state?: TabState;\n  onSelect?: () => void;\n  onClose?: () => void;\n  className?: string;\n}\n\n/**\n * One tab. The active tab lifts onto the surface (`bg-surface-elevated` +\n * `-mb-px` so its base dissolves into the content plane below — the seam), and\n * a non-idle tab shows the autosave dot: it breathes while `saving`, turns\n * `danger` on `error`. The one place the chrome gets loud, on purpose.\n */\nexport function Tab({\n  label,\n  active = false,\n  state = 'idle',\n  onSelect,\n  onClose,\n  className,\n}: TabProps) {\n  const t = useT();\n\n  return (\n    <div\n      role=\"tab\"\n      aria-selected={active}\n      className={cn(\n        'group relative flex items-center gap-2xs rounded-t-md px-s py-2xs text-step-sm',\n        'transition duration-200 ease-smooth',\n        active\n          ? '-mb-px bg-surface-elevated font-medium text-content shadow-edge'\n          : 'text-content-muted hover:bg-surface-elevated/60',\n        state === 'error' && 'bg-danger-subtle text-danger',\n        className,\n      )}\n    >\n      {active && (\n        <span\n          aria-hidden=\"true\"\n          className=\"inset-x-0 top-0 absolute h-[2px] rounded-full bg-accent\"\n        />\n      )}\n      <button\n        type=\"button\"\n        onClick={onSelect}\n        className=\"max-w-[12rem] truncate focus-ring\"\n      >\n        {label}\n      </button>\n      {state !== 'idle' && (\n        <span\n          data-testid=\"tab-indicator\"\n          aria-hidden=\"true\"\n          className={cn(\n            'size-[6px] shrink-0 rounded-full',\n            state === 'error' ? 'bg-danger' : 'bg-accent',\n            state === 'saving' && 'animate-pulse motion-reduce:animate-none',\n          )}\n        />\n      )}\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label={t('tabs.close', { label })}\n          onClick={onClose}\n          className={cn(\n            'rounded ml-2xs p-3xs text-content-muted opacity-0 focus-ring transition',\n            'group-hover:opacity-100 hover:bg-surface hover:text-content focus:opacity-100',\n            active && 'opacity-100',\n          )}\n        >\n          <span aria-hidden=\"true\">×</span>\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport type TabAddButtonProps = ComponentPropsWithoutRef<'button'>;\n\n/** The \"+\" that opens a new tab. */\nexport function TabAddButton({ className, ...props }: TabAddButtonProps) {\n  const t = useT();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={t('tabs.new')}\n      className={cn(\n        'mb-3xs shrink-0 rounded-md px-2xs py-3xs text-step-sm text-content-muted',\n        'transition hover:bg-surface-elevated hover:text-content',\n        'focus-ring',\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\">+</span>\n    </button>\n  );\n}\n"],"names":["useT","cn","TabStrip","className","children","props","div","role","Tab","label","active","state","onSelect","onClose","t","aria-selected","span","aria-hidden","button","type","onClick","data-testid","aria-label","TabAddButton"],"mappings":"AAAA;;;;AAIA,SAASA,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,EAAE,QAAQ,oBAAoB;AAIvC;;;;CAIC,GACD,OAAO,SAASC,SAAS,EAAgD;QAAhD,EAAEC,SAAS,EAAEC,QAAQ,EAA2B,OAAtBC;;;;IACjD,qBACE,KAACC;QACCC,MAAK;QACLJ,WAAWF,GACT,mFACAE;OAEEE;kBAEHD;;AAGP;AAcA;;;;;CAKC,GACD,OAAO,SAASI,IAAI,EAClBC,KAAK,EACLC,SAAS,KAAK,EACdC,QAAQ,MAAM,EACdC,QAAQ,EACRC,OAAO,EACPV,SAAS,EACA;IACT,MAAMW,IAAId;IAEV,qBACE,MAACM;QACCC,MAAK;QACLQ,iBAAeL;QACfP,WAAWF,GACT,kFACA,uCACAS,SACI,oEACA,mDACJC,UAAU,WAAW,gCACrBR;;YAGDO,wBACC,KAACM;gBACCC,eAAY;gBACZd,WAAU;;0BAGd,KAACe;gBACCC,MAAK;gBACLC,SAASR;gBACTT,WAAU;0BAETM;;YAEFE,UAAU,wBACT,KAACK;gBACCK,eAAY;gBACZJ,eAAY;gBACZd,WAAWF,GACT,oCACAU,UAAU,UAAU,cAAc,aAClCA,UAAU,YAAY;;YAI3BE,yBACC,KAACK;gBACCC,MAAK;gBACLG,cAAYR,EAAE,cAAc;oBAAEL;gBAAM;gBACpCW,SAASP;gBACTV,WAAWF,GACT,2EACA,iFACAS,UAAU;0BAGZ,cAAA,KAACM;oBAAKC,eAAY;8BAAO;;;;;AAKnC;AAIA,kCAAkC,GAClC,OAAO,SAASM,aAAa,EAA0C;QAA1C,EAAEpB,SAAS,EAA+B,OAA1BE;;;IAC3C,MAAMS,IAAId;IAEV,qBACE,KAACkB;QACCC,MAAK;QACLG,cAAYR,EAAE;QACdX,WAAWF,GACT,4EACA,2DACA,cACAE;OAEEE;kBAEJ,cAAA,KAACW;YAAKC,eAAY;sBAAO;;;AAG/B"}
+{"version":3,"sources":["../../../../src/ui/molecules/tab-strip/tab-strip.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  isValidElement,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { cn } from '../../utils/cn.js';\n\nexport interface TabStripProps extends Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'children'\n> {\n  /** The {@link Tab}s, in order. */\n  children?: ReactNode;\n  /** The tablist's accessible name; the controls catalog's `tabs.list` when omitted. */\n  label?: string;\n  /**\n   * What sits after the tabs — a {@link TabAddButton}. It is outside the\n   * tablist, because a tablist may own nothing but tabs.\n   */\n  actions?: ReactNode;\n}\n\n/**\n * Arrow Left/Right (wrapping), Home and End move focus to a sibling tab in the\n * same tablist. Each tab handles its own keys, so the tablist stays a plain\n * container and the keyboard model holds for a Tab rendered anywhere.\n */\nfunction moveFocus(event: KeyboardEvent<HTMLButtonElement>): boolean {\n  const list = event.currentTarget.closest('[role=\"tablist\"]');\n  if (!list) return false;\n  const all = [...list.querySelectorAll<HTMLElement>('[role=\"tab\"]')];\n  const from = all.indexOf(event.currentTarget);\n  const to = {\n    ArrowRight: (from + 1) % all.length,\n    ArrowLeft: (from - 1 + all.length) % all.length,\n    Home: 0,\n    End: all.length - 1,\n  }[event.key];\n  if (to === undefined) return false;\n  all[to]?.focus();\n  return true;\n}\n\n/**\n * The workspace tab strip, on the WAI-ARIA tabs pattern: one Tab stop for the\n * whole list, Arrow Left/Right (wrapping), Home and End move between tabs, and\n * Enter or Space activates the focused one — activation is manual, because a\n * tab's body is a whole screen and rendering every one an arrow passes over is\n * work nobody asked for. Delete closes a closable tab (see {@link Tab}).\n *\n * Presentational: the open set, the order and the active tab come from the\n * caller. Each tab controls one {@link TabPanel}, which the caller renders.\n * Below the width of its tabs the list scrolls on its own, so the strip\n * reflows at 320px rather than widening the page.\n */\nexport function TabStrip({\n  className,\n  children,\n  label,\n  actions,\n  ...props\n}: TabStripProps) {\n  const t = useT();\n  const tabs = Children.toArray(children);\n  // Roving tabindex: the active tab is the list's Tab stop, or the first tab\n  // when none is active (a dead link shows no tab as its own).\n  const anyActive = tabs.some(\n    tab => isValidElement<TabProps>(tab) && tab.props.active === true,\n  );\n  const items = anyActive\n    ? tabs\n    : tabs.map((tab, index) =>\n        index === 0 && isValidElement<TabProps>(tab)\n          ? cloneElement(tab as ReactElement<TabProps>, { tabStop: true })\n          : tab,\n      );\n\n  return (\n    <div\n      className={cn(\n        'min-w-0 flex w-full items-end gap-3xs border-b border-border bg-surface px-2xs',\n        className,\n      )}\n      {...props}\n    >\n      <div\n        role=\"tablist\"\n        aria-label={label ?? t('tabs.list')}\n        aria-orientation=\"horizontal\"\n        className=\"min-w-0 flex flex-1 items-end gap-3xs overflow-x-auto\"\n      >\n        {items}\n      </div>\n      {actions}\n    </div>\n  );\n}\n\n/** `dirty` = unsaved draft; `saving` = autosave in flight; `error` = save failed. */\nexport type TabState = 'idle' | 'dirty' | 'saving' | 'error';\n\nexport interface TabProps {\n  /** The tab's element id, which its {@link TabPanel} is labelled by. */\n  id: string;\n  label: string;\n  /** The id of the {@link TabPanel} this tab shows, when it is the active one. */\n  controls?: string;\n  active?: boolean;\n  state?: TabState;\n  onSelect?: () => void;\n  /** Makes the tab closable: by the × beside it, or Delete while it has focus. */\n  onClose?: () => void;\n  className?: string;\n  /** Set by {@link TabStrip} on the first tab when none is active. */\n  tabStop?: boolean;\n}\n\n/**\n * One tab. `role=\"tab\"` sits on the button itself, so the tab is a single\n * interactive element; the close × beside it is a pointer convenience only —\n * hidden from assistive technology and out of the Tab order — and Delete on the\n * focused tab is its keyboard equivalent, announced through `aria-keyshortcuts`.\n *\n * The active tab lifts onto the surface (`bg-surface-elevated` + `-mb-px`, so\n * its base dissolves into the content plane below), and a non-idle tab shows\n * the autosave dot and its name says the same thing in words, since a dot alone is\n * colour carrying meaning (WCAG 1.4.1).\n */\nexport function Tab({\n  id,\n  label,\n  controls,\n  active = false,\n  state = 'idle',\n  onSelect,\n  onClose,\n  className,\n  tabStop = active,\n}: TabProps) {\n  const t = useT();\n\n  return (\n    <div\n      role=\"none\"\n      className={cn(\n        'group relative flex shrink-0 items-center rounded-t-md text-step-sm',\n        'transition duration-200 ease-smooth',\n        active\n          ? '-mb-px bg-surface-elevated font-medium text-content shadow-edge'\n          : 'text-content-muted hover:bg-surface-elevated/60',\n        state === 'error' && 'bg-danger-subtle text-danger',\n        className,\n      )}\n    >\n      {active && (\n        <span\n          aria-hidden=\"true\"\n          className=\"inset-x-0 top-0 h-0.5 pointer-events-none absolute rounded-full bg-accent\"\n        />\n      )}\n      <button\n        type=\"button\"\n        role=\"tab\"\n        id={id}\n        aria-selected={active}\n        aria-controls={active ? controls : undefined}\n        aria-keyshortcuts={onClose ? 'Delete' : undefined}\n        tabIndex={tabStop ? 0 : -1}\n        onClick={onSelect}\n        aria-label={\n          state === 'idle'\n            ? undefined\n            : t('tabs.withState', { label, state: t(`tabs.${state}`) })\n        }\n        onKeyDown={event => {\n          if (event.key === 'Delete' && onClose) {\n            event.preventDefault();\n            onClose();\n          } else if (moveFocus(event)) {\n            event.preventDefault();\n          }\n        }}\n        className={cn(\n          'max-w-48 flex min-h-(--target-min) items-center gap-2xs rounded-t-md py-2xs pl-s focus-ring',\n          onClose ? 'pr-3xs' : 'pr-s',\n        )}\n      >\n        <span className=\"truncate\">{label}</span>\n        {state !== 'idle' && (\n          <span\n            data-testid=\"tab-indicator\"\n            aria-hidden=\"true\"\n            className={cn(\n              'size-1.5 shrink-0 rounded-full',\n              state === 'error' ? 'bg-danger' : 'bg-accent',\n              state === 'saving' && 'animate-pulse motion-reduce:animate-none',\n            )}\n          />\n        )}\n      </button>\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-hidden=\"true\"\n          tabIndex={-1}\n          title={t('tabs.close', { label })}\n          onClick={onClose}\n          className={cn(\n            'rounded mr-3xs flex min-h-(--target-min) min-w-(--target-min) items-center justify-center text-content-muted opacity-0 transition',\n            'group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-surface hover:text-content',\n            active && 'opacity-100',\n          )}\n        >\n          ×\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport interface TabPanelProps extends ComponentPropsWithoutRef<'div'> {\n  id: string;\n  /** The id of the {@link Tab} that shows this panel. */\n  labelledBy?: string;\n}\n\n/**\n * The region a tab shows. Focusable, as the pattern asks, so a keyboard user\n * can reach a panel whose content has nothing focusable of its own.\n */\nexport function TabPanel({ labelledBy, className, ...props }: TabPanelProps) {\n  return (\n    <div\n      role=\"tabpanel\"\n      // The tabs pattern makes the panel itself a Tab stop.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n      aria-labelledby={labelledBy}\n      className={cn('focus-ring', className)}\n      {...props}\n    />\n  );\n}\n\nexport type TabAddButtonProps = ComponentPropsWithoutRef<'button'>;\n\n/** The \"+\" that opens a new tab. Pass it as {@link TabStrip}'s `actions`. */\nexport function TabAddButton({ className, ...props }: TabAddButtonProps) {\n  const t = useT();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={t('tabs.new')}\n      className={cn(\n        'mb-3xs flex min-h-(--target-min) min-w-(--target-min) shrink-0 items-center justify-center rounded-md px-2xs text-step-sm text-content-muted',\n        'transition hover:bg-surface-elevated hover:text-content',\n        'focus-ring',\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\">+</span>\n    </button>\n  );\n}\n"],"names":["Children","cloneElement","isValidElement","useT","cn","moveFocus","event","all","list","currentTarget","closest","querySelectorAll","from","indexOf","to","ArrowRight","length","ArrowLeft","Home","End","key","undefined","focus","TabStrip","className","children","label","actions","props","t","tabs","toArray","anyActive","some","tab","active","items","map","index","tabStop","div","role","aria-label","aria-orientation","Tab","id","controls","state","onSelect","onClose","span","aria-hidden","button","type","aria-selected","aria-controls","aria-keyshortcuts","tabIndex","onClick","onKeyDown","preventDefault","data-testid","title","TabPanel","labelledBy","aria-labelledby","TabAddButton"],"mappings":"AAAA;;;;AAEA,SACEA,QAAQ,EACRC,YAAY,EAEZC,cAAc,QAIT,QAAQ;AAEf,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,EAAE,QAAQ,oBAAoB;AAiBvC;;;;CAIC,GACD,SAASC,UAAUC,KAAuC;QAYxDC;IAXA,MAAMC,OAAOF,MAAMG,aAAa,CAACC,OAAO,CAAC;IACzC,IAAI,CAACF,MAAM,OAAO;IAClB,MAAMD,MAAM;WAAIC,KAAKG,gBAAgB,CAAc;KAAgB;IACnE,MAAMC,OAAOL,IAAIM,OAAO,CAACP,MAAMG,aAAa;IAC5C,MAAMK,KAAK;QACTC,YAAY,AAACH,CAAAA,OAAO,CAAA,IAAKL,IAAIS,MAAM;QACnCC,WAAW,AAACL,CAAAA,OAAO,IAAIL,IAAIS,MAAM,AAAD,IAAKT,IAAIS,MAAM;QAC/CE,MAAM;QACNC,KAAKZ,IAAIS,MAAM,GAAG;IACpB,CAAC,CAACV,MAAMc,GAAG,CAAC;IACZ,IAAIN,OAAOO,WAAW,OAAO;KAC7Bd,UAAAA,GAAG,CAACO,GAAG,qBAAPP,QAASe,KAAK;IACd,OAAO;AACT;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,SAAS,EAMT;QANS,EACvBC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,EAEO,OADXC;;;;;;IAEH,MAAMC,IAAI1B;IACV,MAAM2B,OAAO9B,SAAS+B,OAAO,CAACN;IAC9B,2EAA2E;IAC3E,6DAA6D;IAC7D,MAAMO,YAAYF,KAAKG,IAAI,CACzBC,CAAAA,oBAAOhC,eAAyBgC,QAAQA,IAAIN,KAAK,CAACO,MAAM,KAAK;IAE/D,MAAMC,QAAQJ,YACVF,OACAA,KAAKO,GAAG,CAAC,CAACH,KAAKI,QACbA,UAAU,mBAAKpC,eAAyBgC,qBACpCjC,aAAaiC,KAA+B;YAAEK,SAAS;QAAK,KAC5DL;IAGV,qBACE,MAACM;QACChB,WAAWpB,GACT,kFACAoB;OAEEI;;0BAEJ,KAACY;gBACCC,MAAK;gBACLC,YAAU,EAAEhB,gBAAAA,QAASG,EAAE;gBACvBc,oBAAiB;gBACjBnB,WAAU;0BAETY;;YAEFT;;;AAGP;AAqBA;;;;;;;;;;CAUC,GACD,OAAO,SAASiB,IAAI,EAClBC,EAAE,EACFnB,KAAK,EACLoB,QAAQ,EACRX,SAAS,KAAK,EACdY,QAAQ,MAAM,EACdC,QAAQ,EACRC,OAAO,EACPzB,SAAS,EACTe,UAAUJ,MAAM,EACP;IACT,MAAMN,IAAI1B;IAEV,qBACE,MAACqC;QACCC,MAAK;QACLjB,WAAWpB,GACT,uEACA,uCACA+B,SACI,oEACA,mDACJY,UAAU,WAAW,gCACrBvB;;YAGDW,wBACC,KAACe;gBACCC,eAAY;gBACZ3B,WAAU;;0BAGd,MAAC4B;gBACCC,MAAK;gBACLZ,MAAK;gBACLI,IAAIA;gBACJS,iBAAenB;gBACfoB,iBAAepB,SAASW,WAAWzB;gBACnCmC,qBAAmBP,UAAU,WAAW5B;gBACxCoC,UAAUlB,UAAU,IAAI,CAAC;gBACzBmB,SAASV;gBACTN,cACEK,UAAU,SACN1B,YACAQ,EAAE,kBAAkB;oBAAEH;oBAAOqB,OAAOlB,EAAE,CAAC,KAAK,EAAEkB,OAAO;gBAAE;gBAE7DY,WAAWrD,CAAAA;oBACT,IAAIA,MAAMc,GAAG,KAAK,YAAY6B,SAAS;wBACrC3C,MAAMsD,cAAc;wBACpBX;oBACF,OAAO,IAAI5C,UAAUC,QAAQ;wBAC3BA,MAAMsD,cAAc;oBACtB;gBACF;gBACApC,WAAWpB,GACT,+FACA6C,UAAU,WAAW;;kCAGvB,KAACC;wBAAK1B,WAAU;kCAAYE;;oBAC3BqB,UAAU,wBACT,KAACG;wBACCW,eAAY;wBACZV,eAAY;wBACZ3B,WAAWpB,GACT,kCACA2C,UAAU,UAAU,cAAc,aAClCA,UAAU,YAAY;;;;YAK7BE,yBACC,KAACG;gBACCC,MAAK;gBACLF,eAAY;gBACZM,UAAU,CAAC;gBACXK,OAAOjC,EAAE,cAAc;oBAAEH;gBAAM;gBAC/BgC,SAAST;gBACTzB,WAAWpB,GACT,qIACA,8FACA+B,UAAU;0BAEb;;;;AAMT;AAQA;;;CAGC,GACD,OAAO,SAAS4B,SAAS,EAAkD;QAAlD,EAAEC,UAAU,EAAExC,SAAS,EAA2B,OAAtBI;;;;IACnD,qBACE,KAACY;QACCC,MAAK;QACL,sDAAsD;QACtD,+DAA+D;QAC/DgB,UAAU;QACVQ,mBAAiBD;QACjBxC,WAAWpB,GAAG,cAAcoB;OACxBI;AAGV;AAIA,2EAA2E,GAC3E,OAAO,SAASsC,aAAa,EAA0C;QAA1C,EAAE1C,SAAS,EAA+B,OAA1BI;;;IAC3C,MAAMC,IAAI1B;IAEV,qBACE,KAACiD;QACCC,MAAK;QACLX,cAAYb,EAAE;QACdL,WAAWpB,GACT,gJACA,2DACA,cACAoB;OAEEI;kBAEJ,cAAA,KAACsB;YAAKC,eAAY;sBAAO;;;AAG/B"}

package/dist/ui/molecules/toast-region/toast-region.js

@@ -59,7 +59,7 @@ const ToastContext = /*#__PURE__*/ createContext(undefined);
     if (toasts === undefined) return null;
     return /*#__PURE__*/ _jsx("section", {
         "aria-label": t('toast.region'),
-        className: "bottom-0 right-0 max-w-md fixed z-50 flex w-full flex-col gap-xs p-s",
+        className: "bottom-0 right-0 max-w-md fixed z-(--z-toast) flex w-full flex-col gap-xs p-s",
         children: toasts.failures.map(({ id, failure })=>/*#__PURE__*/ _jsxs("div", {
                 role: "alert",
                 className: "flex items-start gap-xs rounded-lg border border-danger bg-surface p-xs shadow-overlay",

package/dist/ui/molecules/toast-region/toast-region.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/toast-region/toast-region.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useErrorMessage, useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\n\n/**\n * A failure as {@link useErrorMessage} renders it: a typed failure carries its\n * `code`, and anything else that reached the user keeps its `message`.\n */\nexport type ToastFailure = Parameters<ReturnType<typeof useErrorMessage>>[0];\n\n/** One failure waiting in the region, under the id it was shown with. */\nexport interface FailureToast {\n  readonly id: number;\n  readonly failure: ToastFailure;\n}\n\nexport interface Toasts {\n  /** The failures shown, oldest first. */\n  readonly failures: readonly FailureToast[];\n  /** Shows a failure until it is dismissed, and answers its id. */\n  readonly showFailure: (failure: ToastFailure) => number;\n  readonly dismiss: (id: number) => void;\n}\n\nconst ToastContext = createContext<Toasts | undefined>(undefined);\n\n/**\n * Holds the toasts one host shows. Mounted once, above everything that can\n * fail asynchronously, with a {@link ToastRegion} somewhere inside it.\n */\nexport function ToastProvider({ children }: { readonly children: ReactNode }) {\n  const [failures, setFailures] = useState<readonly FailureToast[]>([]);\n  const next = useRef(0);\n\n  const showFailure = useCallback((failure: ToastFailure) => {\n    next.current += 1;\n    const id = next.current;\n    setFailures(shown => [...shown, { id, failure }]);\n    return id;\n  }, []);\n  const dismiss = useCallback((id: number) => {\n    setFailures(shown => shown.filter(toast => toast.id !== id));\n  }, []);\n\n  const value = useMemo(\n    () => ({ failures, showFailure, dismiss }),\n    [failures, showFailure, dismiss],\n  );\n  return (\n    <ToastContext.Provider value={value}>{children}</ToastContext.Provider>\n  );\n}\n\n/**\n * The {@link ToastProvider} above, or `undefined` outside one: a caller with\n * no region to show a failure in keeps it where it can, rather than having it\n * vanish.\n */\nexport const useToasts = (): Toasts | undefined => useContext(ToastContext);\n\n/**\n * Where a host's toasts render: each failure in the reader's language,\n * through the same {@link useErrorMessage} a form's error slot uses, so an\n * asynchronous failure reads exactly as a synchronous one would.\n *\n * A failure stays until it is dismissed. It reports something that already\n * happened, often after the screen that started it was left, and a message\n * that times out is one a slow reader never gets.\n */\nexport function ToastRegion() {\n  const toasts = useToasts();\n  const t = useT();\n  const message = useErrorMessage();\n\n  if (toasts === undefined) return null;\n  return (\n    <section\n      aria-label={t('toast.region')}\n      className=\"bottom-0 right-0 max-w-md fixed z-50 flex w-full flex-col gap-xs p-s\"\n    >\n      {toasts.failures.map(({ id, failure }) => (\n        <div\n          key={id}\n          role=\"alert\"\n          className=\"flex items-start gap-xs rounded-lg border border-danger bg-surface p-xs shadow-overlay\"\n        >\n          <p className=\"flex-1 text-step-sm text-danger\">{message(failure)}</p>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            onClick={() => toasts.dismiss(id)}\n          >\n            {t('toast.dismiss')}\n          </Button>\n        </div>\n      ))}\n    </section>\n  );\n}\n"],"names":["createContext","useCallback","useContext","useMemo","useRef","useState","useErrorMessage","useT","Button","ToastContext","undefined","ToastProvider","children","failures","setFailures","next","showFailure","failure","current","id","shown","dismiss","filter","toast","value","Provider","useToasts","ToastRegion","toasts","t","message","section","aria-label","className","map","div","role","p","type","variant","onClick"],"mappings":"AAAA;;AAEA,SACEA,aAAa,EAEbC,WAAW,EACXC,UAAU,EACVC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,eAAe,EAAEC,IAAI,QAAQ,yBAAyB;AAC/D,SAASC,MAAM,QAAQ,8BAA8B;AAsBrD,MAAMC,6BAAeT,cAAkCU;AAEvD;;;CAGC,GACD,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAAoC;IAC1E,MAAM,CAACC,UAAUC,YAAY,GAAGT,SAAkC,EAAE;IACpE,MAAMU,OAAOX,OAAO;IAEpB,MAAMY,cAAcf,YAAY,CAACgB;QAC/BF,KAAKG,OAAO,IAAI;QAChB,MAAMC,KAAKJ,KAAKG,OAAO;QACvBJ,YAAYM,CAAAA,QAAS;mBAAIA;gBAAO;oBAAED;oBAAIF;gBAAQ;aAAE;QAChD,OAAOE;IACT,GAAG,EAAE;IACL,MAAME,UAAUpB,YAAY,CAACkB;QAC3BL,YAAYM,CAAAA,QAASA,MAAME,MAAM,CAACC,CAAAA,QAASA,MAAMJ,EAAE,KAAKA;IAC1D,GAAG,EAAE;IAEL,MAAMK,QAAQrB,QACZ,IAAO,CAAA;YAAEU;YAAUG;YAAaK;QAAQ,CAAA,GACxC;QAACR;QAAUG;QAAaK;KAAQ;IAElC,qBACE,KAACZ,aAAagB,QAAQ;QAACD,OAAOA;kBAAQZ;;AAE1C;AAEA;;;;CAIC,GACD,OAAO,MAAMc,YAAY,IAA0BxB,WAAWO,cAAc;AAE5E;;;;;;;;CAQC,GACD,OAAO,SAASkB;IACd,MAAMC,SAASF;IACf,MAAMG,IAAItB;IACV,MAAMuB,UAAUxB;IAEhB,IAAIsB,WAAWlB,WAAW,OAAO;IACjC,qBACE,KAACqB;QACCC,cAAYH,EAAE;QACdI,WAAU;kBAETL,OAAOf,QAAQ,CAACqB,GAAG,CAAC,CAAC,EAAEf,EAAE,EAAEF,OAAO,EAAE,iBACnC,MAACkB;gBAECC,MAAK;gBACLH,WAAU;;kCAEV,KAACI;wBAAEJ,WAAU;kCAAmCH,QAAQb;;kCACxD,KAACT;wBACC8B,MAAK;wBACLC,SAAQ;wBACRC,SAAS,IAAMZ,OAAOP,OAAO,CAACF;kCAE7BU,EAAE;;;eAVAV;;AAgBf"}
+{"version":3,"sources":["../../../../src/ui/molecules/toast-region/toast-region.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useErrorMessage, useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\n\n/**\n * A failure as {@link useErrorMessage} renders it: a typed failure carries its\n * `code`, and anything else that reached the user keeps its `message`.\n */\nexport type ToastFailure = Parameters<ReturnType<typeof useErrorMessage>>[0];\n\n/** One failure waiting in the region, under the id it was shown with. */\nexport interface FailureToast {\n  readonly id: number;\n  readonly failure: ToastFailure;\n}\n\nexport interface Toasts {\n  /** The failures shown, oldest first. */\n  readonly failures: readonly FailureToast[];\n  /** Shows a failure until it is dismissed, and answers its id. */\n  readonly showFailure: (failure: ToastFailure) => number;\n  readonly dismiss: (id: number) => void;\n}\n\nconst ToastContext = createContext<Toasts | undefined>(undefined);\n\n/**\n * Holds the toasts one host shows. Mounted once, above everything that can\n * fail asynchronously, with a {@link ToastRegion} somewhere inside it.\n */\nexport function ToastProvider({ children }: { readonly children: ReactNode }) {\n  const [failures, setFailures] = useState<readonly FailureToast[]>([]);\n  const next = useRef(0);\n\n  const showFailure = useCallback((failure: ToastFailure) => {\n    next.current += 1;\n    const id = next.current;\n    setFailures(shown => [...shown, { id, failure }]);\n    return id;\n  }, []);\n  const dismiss = useCallback((id: number) => {\n    setFailures(shown => shown.filter(toast => toast.id !== id));\n  }, []);\n\n  const value = useMemo(\n    () => ({ failures, showFailure, dismiss }),\n    [failures, showFailure, dismiss],\n  );\n  return (\n    <ToastContext.Provider value={value}>{children}</ToastContext.Provider>\n  );\n}\n\n/**\n * The {@link ToastProvider} above, or `undefined` outside one: a caller with\n * no region to show a failure in keeps it where it can, rather than having it\n * vanish.\n */\nexport const useToasts = (): Toasts | undefined => useContext(ToastContext);\n\n/**\n * Where a host's toasts render: each failure in the reader's language,\n * through the same {@link useErrorMessage} a form's error slot uses, so an\n * asynchronous failure reads exactly as a synchronous one would.\n *\n * A failure stays until it is dismissed. It reports something that already\n * happened, often after the screen that started it was left, and a message\n * that times out is one a slow reader never gets.\n */\nexport function ToastRegion() {\n  const toasts = useToasts();\n  const t = useT();\n  const message = useErrorMessage();\n\n  if (toasts === undefined) return null;\n  return (\n    <section\n      aria-label={t('toast.region')}\n      className=\"bottom-0 right-0 max-w-md fixed z-(--z-toast) flex w-full flex-col gap-xs p-s\"\n    >\n      {toasts.failures.map(({ id, failure }) => (\n        <div\n          key={id}\n          role=\"alert\"\n          className=\"flex items-start gap-xs rounded-lg border border-danger bg-surface p-xs shadow-overlay\"\n        >\n          <p className=\"flex-1 text-step-sm text-danger\">{message(failure)}</p>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            onClick={() => toasts.dismiss(id)}\n          >\n            {t('toast.dismiss')}\n          </Button>\n        </div>\n      ))}\n    </section>\n  );\n}\n"],"names":["createContext","useCallback","useContext","useMemo","useRef","useState","useErrorMessage","useT","Button","ToastContext","undefined","ToastProvider","children","failures","setFailures","next","showFailure","failure","current","id","shown","dismiss","filter","toast","value","Provider","useToasts","ToastRegion","toasts","t","message","section","aria-label","className","map","div","role","p","type","variant","onClick"],"mappings":"AAAA;;AAEA,SACEA,aAAa,EAEbC,WAAW,EACXC,UAAU,EACVC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,eAAe,EAAEC,IAAI,QAAQ,yBAAyB;AAC/D,SAASC,MAAM,QAAQ,8BAA8B;AAsBrD,MAAMC,6BAAeT,cAAkCU;AAEvD;;;CAGC,GACD,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAAoC;IAC1E,MAAM,CAACC,UAAUC,YAAY,GAAGT,SAAkC,EAAE;IACpE,MAAMU,OAAOX,OAAO;IAEpB,MAAMY,cAAcf,YAAY,CAACgB;QAC/BF,KAAKG,OAAO,IAAI;QAChB,MAAMC,KAAKJ,KAAKG,OAAO;QACvBJ,YAAYM,CAAAA,QAAS;mBAAIA;gBAAO;oBAAED;oBAAIF;gBAAQ;aAAE;QAChD,OAAOE;IACT,GAAG,EAAE;IACL,MAAME,UAAUpB,YAAY,CAACkB;QAC3BL,YAAYM,CAAAA,QAASA,MAAME,MAAM,CAACC,CAAAA,QAASA,MAAMJ,EAAE,KAAKA;IAC1D,GAAG,EAAE;IAEL,MAAMK,QAAQrB,QACZ,IAAO,CAAA;YAAEU;YAAUG;YAAaK;QAAQ,CAAA,GACxC;QAACR;QAAUG;QAAaK;KAAQ;IAElC,qBACE,KAACZ,aAAagB,QAAQ;QAACD,OAAOA;kBAAQZ;;AAE1C;AAEA;;;;CAIC,GACD,OAAO,MAAMc,YAAY,IAA0BxB,WAAWO,cAAc;AAE5E;;;;;;;;CAQC,GACD,OAAO,SAASkB;IACd,MAAMC,SAASF;IACf,MAAMG,IAAItB;IACV,MAAMuB,UAAUxB;IAEhB,IAAIsB,WAAWlB,WAAW,OAAO;IACjC,qBACE,KAACqB;QACCC,cAAYH,EAAE;QACdI,WAAU;kBAETL,OAAOf,QAAQ,CAACqB,GAAG,CAAC,CAAC,EAAEf,EAAE,EAAEF,OAAO,EAAE,iBACnC,MAACkB;gBAECC,MAAK;gBACLH,WAAU;;kCAEV,KAACI;wBAAEJ,WAAU;kCAAmCH,QAAQb;;kCACxD,KAACT;wBACC8B,MAAK;wBACLC,SAAQ;wBACRC,SAAS,IAAMZ,OAAOP,OAAO,CAACF;kCAE7BU,EAAE;;;eAVAV;;AAgBf"}