@entifix/react-controls 0.18.2 → 0.20.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/nav-menu/nav-menu.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\n/** A bar's trigger: quiet until hovered or open. */\nconst TRIGGER =\n  'focus-ring flex h-[2rem] cursor-pointer list-none items-center gap-3xs rounded-md border border-transparent px-2xs text-step-sm font-medium text-content select-none transition-[background-color,border-color] duration-(--duration-fast,150ms) hover:border-border hover:bg-[color-mix(in_srgb,var(--color-content)_6%,transparent)] [&::-webkit-details-marker]:hidden [[open]>&]:border-border [[open]>&]:bg-[color-mix(in_srgb,var(--color-content)_6%,transparent)]';\n\n/**\n * A dropdown in a navigation bar: a native `<details>` disclosure, so it opens\n * and its links work with scripting off. What a dropdown is expected to do on\n * top — one open at a time, closed by a click elsewhere or Escape — is the\n * page's to add.\n *\n * No hooks, so a client component can render it too. Its parts carry\n * `data-slot` (`nav-menu`, `nav-menu-trigger`, `nav-menu-chevron`,\n * `nav-menu-panel`), so a page can restyle them — a panel as wide as the bar\n * on a phone, say — without knowing the classes underneath.\n */\nexport function NavMenu({\n  label,\n  icon,\n  summary,\n  chevron = true,\n  className,\n  triggerClassName = TRIGGER,\n  children,\n}: {\n  /** The accessible name of the trigger. */\n  label: string;\n  icon: ReactNode;\n  /** What the trigger shows beside the icon, if anything. */\n  summary?: ReactNode;\n  /** A chevron after the trigger's content: a menu of choices has one. */\n  chevron?: boolean;\n  className?: string;\n  /** Replaces the trigger's look: a split button draws it as its own segment. */\n  triggerClassName?: string;\n  children: ReactNode;\n}) {\n  return (\n    <details data-slot=\"nav-menu\" className={cn('relative', className)}>\n      {/* The name is the label followed by the summary, so what a sighted\n          user reads on the trigger (\"EN\") is part of what is announced and\n          what a voice user says (WCAG 2.5.3), rather than replaced by it. */}\n      <summary\n        title={label}\n        data-slot=\"nav-menu-trigger\"\n        className={triggerClassName}\n      >\n        <span className=\"sr-only\">{label}</span>\n        {icon}\n        {summary}\n        {chevron && (\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            data-slot=\"nav-menu-chevron\"\n            className=\"size-[0.875rem] flex-none fill-none stroke-current stroke-2 text-content-muted transition-[rotate] duration-(--duration-fast,150ms) [stroke-linecap:round] [stroke-linejoin:round] [[open]>summary>&]:rotate-180\"\n          >\n            <path d=\"m7 10 5 5 5-5\" />\n          </svg>\n        )}\n      </summary>\n      <div\n        data-slot=\"nav-menu-panel\"\n        className=\"right-0 ease-out starting:-translate-y-1 [&_ul]:m-0 [&_ul]:p-0 absolute top-[calc(100%+var(--spacing-3xs))] z-60 min-w-[10rem] rounded-lg border border-border bg-surface-elevated p-3xs shadow-[var(--shadow-overlay)] transition-[opacity,translate] duration-[120ms] motion-reduce:transition-none starting:opacity-0 [&_ul]:list-none\"\n      >\n        {children}\n      </div>\n    </details>\n  );\n}\n\n/** A check beside the chosen entry; an equal space beside the others. */\nexport function NavMenuCheck({ checked }: { checked: boolean }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      data-slot=\"nav-menu-check\"\n      className=\"size-[1rem] flex-none fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]\"\n    >\n      {checked && <path d=\"m5 12.5 4.5 4.5L19 7.5\" />}\n    </svg>\n  );\n}\n"],"names":["cn","TRIGGER","NavMenu","label","icon","summary","chevron","className","triggerClassName","children","details","data-slot","title","span","svg","aria-hidden","viewBox","path","d","div","NavMenuCheck","checked"],"mappings":";AAEA,SAASA,EAAE,QAAQ,oBAAoB;AAEvC,kDAAkD,GAClD,MAAMC,UACJ;AAEF;;;;;;;;;;CAUC,GACD,OAAO,SAASC,QAAQ,EACtBC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,IAAI,EACdC,SAAS,EACTC,mBAAmBP,OAAO,EAC1BQ,QAAQ,EAaT;IACC,qBACE,MAACC;QAAQC,aAAU;QAAWJ,WAAWP,GAAG,YAAYO;;0BAItD,MAACF;gBACCO,OAAOT;gBACPQ,aAAU;gBACVJ,WAAWC;;kCAEX,KAACK;wBAAKN,WAAU;kCAAWJ;;oBAC1BC;oBACAC;oBACAC,yBACC,KAACQ;wBACCC,eAAY;wBACZC,SAAQ;wBACRL,aAAU;wBACVJ,WAAU;kCAEV,cAAA,KAACU;4BAAKC,GAAE;;;;;0BAId,KAACC;gBACCR,aAAU;gBACVJ,WAAU;0BAETE;;;;AAIT;AAEA,uEAAuE,GACvE,OAAO,SAASW,aAAa,EAAEC,OAAO,EAAwB;IAC5D,qBACE,KAACP;QACCC,eAAY;QACZC,SAAQ;QACRL,aAAU;QACVJ,WAAU;kBAETc,yBAAW,KAACJ;YAAKC,GAAE;;;AAG1B"}
+{"version":3,"sources":["../../../../src/ui/molecules/nav-menu/nav-menu.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\n/** A bar's trigger: quiet until hovered or open. */\nconst TRIGGER =\n  'focus-ring flex h-8 cursor-pointer list-none items-center gap-3xs rounded-md border border-transparent px-2xs text-step-sm font-medium text-content select-none transition-[background-color,border-color] duration-(--duration-fast,150ms) hover:border-border hover:bg-[color-mix(in_srgb,var(--color-content)_6%,transparent)] [&::-webkit-details-marker]:hidden [[open]>&]:border-border [[open]>&]:bg-[color-mix(in_srgb,var(--color-content)_6%,transparent)]';\n\n/**\n * A dropdown in a navigation bar: a native `<details>` disclosure, so it opens\n * and its links work with scripting off. What a dropdown is expected to do on\n * top — one open at a time, closed by a click elsewhere or Escape — is the\n * page's to add.\n *\n * No hooks, so a client component can render it too. Its parts carry\n * `data-slot` (`nav-menu`, `nav-menu-trigger`, `nav-menu-chevron`,\n * `nav-menu-panel`), so a page can restyle them — a panel as wide as the bar\n * on a phone, say — without knowing the classes underneath.\n */\nexport function NavMenu({\n  label,\n  icon,\n  summary,\n  chevron = true,\n  className,\n  triggerClassName = TRIGGER,\n  children,\n}: {\n  /** The accessible name of the trigger. */\n  label: string;\n  icon: ReactNode;\n  /** What the trigger shows beside the icon, if anything. */\n  summary?: ReactNode;\n  /** A chevron after the trigger's content: a menu of choices has one. */\n  chevron?: boolean;\n  className?: string;\n  /** Replaces the trigger's look: a split button draws it as its own segment. */\n  triggerClassName?: string;\n  children: ReactNode;\n}) {\n  return (\n    <details data-slot=\"nav-menu\" className={cn('relative', className)}>\n      {/* The name is the label followed by the summary, so what a sighted\n          user reads on the trigger (\"EN\") is part of what is announced and\n          what a voice user says (WCAG 2.5.3), rather than replaced by it. */}\n      <summary\n        title={label}\n        data-slot=\"nav-menu-trigger\"\n        className={triggerClassName}\n      >\n        <span className=\"sr-only\">{label}</span>\n        {icon}\n        {summary}\n        {chevron && (\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            data-slot=\"nav-menu-chevron\"\n            className=\"size-3.5 flex-none fill-none stroke-current stroke-2 text-content-muted transition-[rotate] duration-(--duration-fast,150ms) [stroke-linecap:round] [stroke-linejoin:round] [[open]>summary>&]:rotate-180\"\n          >\n            <path d=\"m7 10 5 5 5-5\" />\n          </svg>\n        )}\n      </summary>\n      <div\n        data-slot=\"nav-menu-panel\"\n        className=\"right-0 ease-out starting:-translate-y-1 [&_ul]:m-0 [&_ul]:p-0 min-w-40 absolute top-[calc(100%+var(--spacing-3xs))] z-(--z-dropdown) rounded-lg border border-border bg-surface-elevated p-3xs shadow-overlay transition-[opacity,translate] duration-(--duration-fast) motion-reduce:transition-none starting:opacity-0 [&_ul]:list-none\"\n      >\n        {children}\n      </div>\n    </details>\n  );\n}\n\n/** A check beside the chosen entry; an equal space beside the others. */\nexport function NavMenuCheck({ checked }: { checked: boolean }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      data-slot=\"nav-menu-check\"\n      className=\"size-4 flex-none fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]\"\n    >\n      {checked && <path d=\"m5 12.5 4.5 4.5L19 7.5\" />}\n    </svg>\n  );\n}\n"],"names":["cn","TRIGGER","NavMenu","label","icon","summary","chevron","className","triggerClassName","children","details","data-slot","title","span","svg","aria-hidden","viewBox","path","d","div","NavMenuCheck","checked"],"mappings":";AAEA,SAASA,EAAE,QAAQ,oBAAoB;AAEvC,kDAAkD,GAClD,MAAMC,UACJ;AAEF;;;;;;;;;;CAUC,GACD,OAAO,SAASC,QAAQ,EACtBC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,IAAI,EACdC,SAAS,EACTC,mBAAmBP,OAAO,EAC1BQ,QAAQ,EAaT;IACC,qBACE,MAACC;QAAQC,aAAU;QAAWJ,WAAWP,GAAG,YAAYO;;0BAItD,MAACF;gBACCO,OAAOT;gBACPQ,aAAU;gBACVJ,WAAWC;;kCAEX,KAACK;wBAAKN,WAAU;kCAAWJ;;oBAC1BC;oBACAC;oBACAC,yBACC,KAACQ;wBACCC,eAAY;wBACZC,SAAQ;wBACRL,aAAU;wBACVJ,WAAU;kCAEV,cAAA,KAACU;4BAAKC,GAAE;;;;;0BAId,KAACC;gBACCR,aAAU;gBACVJ,WAAU;0BAETE;;;;AAIT;AAEA,uEAAuE,GACvE,OAAO,SAASW,aAAa,EAAEC,OAAO,EAAwB;IAC5D,qBACE,KAACP;QACCC,eAAY;QACZC,SAAQ;QACRL,aAAU;QACVJ,WAAU;kBAETc,yBAAW,KAACJ;YAAKC,GAAE;;;AAG1B"}

package/dist/ui/molecules/pagination/pagination.d.ts

@@ -11,6 +11,11 @@ export interface PaginationProps {
 /**
  * Page stepper plus an optional page-size selector, driven by callbacks.
  *
+ * A `nav` with First, Previous, Next and Last. An end that goes nowhere stays
+ * focusable and says so with `aria-disabled`, rather than dropping out of the
+ * tab order under the reader's hand. A page change is announced — "Page 2 of
+ * 5" — and the first render is not.
+ *
  * For a listing whose pages are addresses (server-rendered, crawlable, working
  * without JavaScript) use {@link PaginationLinks} instead.
  */

package/dist/ui/molecules/pagination/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/pagination/pagination.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,yBAAyB,4BAA6B,CAAC;AAEpE,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,eAAe,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,eAA2C,EAC3C,SAAS,GACV,EAAE,eAAe,+BAwDjB"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/pagination/pagination.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,yBAAyB,4BAA6B,CAAC;AAEpE,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,eAAe,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,eAA2C,EAC3C,SAAS,GACV,EAAE,eAAe,+BAkEjB"}

package/dist/ui/molecules/pagination/pagination.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useT } from '../../../i18n/index.js';
 import { Button } from '../../atoms/button/index.js';
 import { Select } from '../../atoms/field/index.js';
@@ -15,12 +16,32 @@ export const DEFAULT_PAGE_SIZE_OPTIONS = [
 /**
  * Page stepper plus an optional page-size selector, driven by callbacks.
  *
+ * A `nav` with First, Previous, Next and Last. An end that goes nowhere stays
+ * focusable and says so with `aria-disabled`, rather than dropping out of the
+ * tab order under the reader's hand. A page change is announced — "Page 2 of
+ * 5" — and the first render is not.
+ *
  * For a listing whose pages are addresses (server-rendered, crawlable, working
  * without JavaScript) use {@link PaginationLinks} instead.
  */ export function Pagination({ currentPage, pageSize, totalItems, onPageChange, onPageSizeChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, className }) {
     const t = useT();
     const totalPages = pageCount(totalItems, pageSize);
-    return /*#__PURE__*/ _jsxs("div", {
+    const [announced, setAnnounced] = useState(false);
+    const step = (label, page, enabled)=>/*#__PURE__*/ _jsx(Button, {
+            type: "button",
+            variant: "secondary",
+            size: "sm",
+            // Headless UI runs no handler on an `aria-disabled` button, so an end
+            // that goes nowhere is inert while it keeps its place in the tab order.
+            "aria-disabled": enabled ? undefined : true,
+            onClick: ()=>{
+                setAnnounced(true);
+                onPageChange(page);
+            },
+            children: label
+        });
+    return /*#__PURE__*/ _jsxs("nav", {
+        "aria-label": t('pagination.label'),
         className: cn('flex flex-wrap items-center justify-between gap-2xs', className),
         children: [
             /*#__PURE__*/ _jsx(Text, {
@@ -32,8 +53,16 @@ export const DEFAULT_PAGE_SIZE_OPTIONS = [
                     items: totalItems
                 })
             }),
+            /*#__PURE__*/ _jsx("span", {
+                role: "status",
+                className: "sr-only",
+                children: announced ? t('pagination.page', {
+                    current: currentPage,
+                    total: totalPages
+                }) : ''
+            }),
             /*#__PURE__*/ _jsxs("div", {
-                className: "flex items-center gap-2xs",
+                className: "flex flex-wrap items-center gap-2xs",
                 children: [
                     onPageSizeChange && /*#__PURE__*/ _jsxs("label", {
                         className: "flex items-center gap-3xs text-step-sm text-content-muted",
@@ -49,22 +78,10 @@ export const DEFAULT_PAGE_SIZE_OPTIONS = [
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        type: "button",
-                        variant: "secondary",
-                        size: "sm",
-                        disabled: currentPage <= 1,
-                        onClick: ()=>onPageChange(currentPage - 1),
-                        children: t('pagination.previous')
-                    }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        type: "button",
-                        variant: "secondary",
-                        size: "sm",
-                        disabled: currentPage >= totalPages,
-                        onClick: ()=>onPageChange(currentPage + 1),
-                        children: t('pagination.next')
-                    })
+                    step(t('pagination.first'), 1, currentPage > 1),
+                    step(t('pagination.previous'), currentPage - 1, currentPage > 1),
+                    step(t('pagination.next'), currentPage + 1, currentPage < totalPages),
+                    step(t('pagination.last'), totalPages, currentPage < totalPages)
                 ]
             })
         ]

package/dist/ui/molecules/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/pagination/pagination.tsx"],"sourcesContent":["'use client';\n\nimport { useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { Select } from '../../atoms/field/index.js';\nimport { Text } from '../../atoms/text/index.js';\nimport { cn } from '../../utils/cn.js';\nimport { pageCount } from './page-math.js';\n\nexport const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;\n\nexport interface PaginationProps {\n  currentPage: number;\n  pageSize: number;\n  totalItems: number;\n  onPageChange: (page: number) => void;\n  onPageSizeChange?: (pageSize: number) => void;\n  pageSizeOptions?: readonly number[];\n  className?: string;\n}\n\n/**\n * Page stepper plus an optional page-size selector, driven by callbacks.\n *\n * For a listing whose pages are addresses (server-rendered, crawlable, working\n * without JavaScript) use {@link PaginationLinks} instead.\n */\nexport function Pagination({\n  currentPage,\n  pageSize,\n  totalItems,\n  onPageChange,\n  onPageSizeChange,\n  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n  className,\n}: PaginationProps) {\n  const t = useT();\n  const totalPages = pageCount(totalItems, pageSize);\n\n  return (\n    <div\n      className={cn(\n        'flex flex-wrap items-center justify-between gap-2xs',\n        className,\n      )}\n    >\n      <Text step={-1} tone=\"muted\">\n        {t('pagination.summary', {\n          current: currentPage,\n          total: totalPages,\n          items: totalItems,\n        })}\n      </Text>\n\n      <div className=\"flex items-center gap-2xs\">\n        {onPageSizeChange && (\n          <label className=\"flex items-center gap-3xs text-step-sm text-content-muted\">\n            {t('pagination.rows')}\n            <Select\n              value={pageSize}\n              onChange={event => onPageSizeChange(Number(event.target.value))}\n            >\n              {pageSizeOptions.map(option => (\n                <option key={option} value={option}>\n                  {option}\n                </option>\n              ))}\n            </Select>\n          </label>\n        )}\n        <Button\n          type=\"button\"\n          variant=\"secondary\"\n          size=\"sm\"\n          disabled={currentPage <= 1}\n          onClick={() => onPageChange(currentPage - 1)}\n        >\n          {t('pagination.previous')}\n        </Button>\n        <Button\n          type=\"button\"\n          variant=\"secondary\"\n          size=\"sm\"\n          disabled={currentPage >= totalPages}\n          onClick={() => onPageChange(currentPage + 1)}\n        >\n          {t('pagination.next')}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"names":["useT","Button","Select","Text","cn","pageCount","DEFAULT_PAGE_SIZE_OPTIONS","Pagination","currentPage","pageSize","totalItems","onPageChange","onPageSizeChange","pageSizeOptions","className","t","totalPages","div","step","tone","current","total","items","label","value","onChange","event","Number","target","map","option","type","variant","size","disabled","onClick"],"mappings":"AAAA;;AAEA,SAASA,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,MAAM,QAAQ,6BAA6B;AACpD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,EAAE,QAAQ,oBAAoB;AACvC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,OAAO,MAAMC,4BAA4B;IAAC;IAAI;IAAI;IAAI;CAAI,CAAU;AAYpE;;;;;CAKC,GACD,OAAO,SAASC,WAAW,EACzBC,WAAW,EACXC,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,gBAAgB,EAChBC,kBAAkBP,yBAAyB,EAC3CQ,SAAS,EACO;IAChB,MAAMC,IAAIf;IACV,MAAMgB,aAAaX,UAAUK,YAAYD;IAEzC,qBACE,MAACQ;QACCH,WAAWV,GACT,uDACAU;;0BAGF,KAACX;gBAAKe,MAAM,CAAC;gBAAGC,MAAK;0BAClBJ,EAAE,sBAAsB;oBACvBK,SAASZ;oBACTa,OAAOL;oBACPM,OAAOZ;gBACT;;0BAGF,MAACO;gBAAIH,WAAU;;oBACZF,kCACC,MAACW;wBAAMT,WAAU;;4BACdC,EAAE;0CACH,KAACb;gCACCsB,OAAOf;gCACPgB,UAAUC,CAAAA,QAASd,iBAAiBe,OAAOD,MAAME,MAAM,CAACJ,KAAK;0CAE5DX,gBAAgBgB,GAAG,CAACC,CAAAA,uBACnB,KAACA;wCAAoBN,OAAOM;kDACzBA;uCADUA;;;;kCAOrB,KAAC7B;wBACC8B,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLC,UAAU1B,eAAe;wBACzB2B,SAAS,IAAMxB,aAAaH,cAAc;kCAEzCO,EAAE;;kCAEL,KAACd;wBACC8B,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLC,UAAU1B,eAAeQ;wBACzBmB,SAAS,IAAMxB,aAAaH,cAAc;kCAEzCO,EAAE;;;;;;AAKb"}
+{"version":3,"sources":["../../../../src/ui/molecules/pagination/pagination.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { Select } from '../../atoms/field/index.js';\nimport { Text } from '../../atoms/text/index.js';\nimport { cn } from '../../utils/cn.js';\nimport { pageCount } from './page-math.js';\n\nexport const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;\n\nexport interface PaginationProps {\n  currentPage: number;\n  pageSize: number;\n  totalItems: number;\n  onPageChange: (page: number) => void;\n  onPageSizeChange?: (pageSize: number) => void;\n  pageSizeOptions?: readonly number[];\n  className?: string;\n}\n\n/**\n * Page stepper plus an optional page-size selector, driven by callbacks.\n *\n * A `nav` with First, Previous, Next and Last. An end that goes nowhere stays\n * focusable and says so with `aria-disabled`, rather than dropping out of the\n * tab order under the reader's hand. A page change is announced — \"Page 2 of\n * 5\" — and the first render is not.\n *\n * For a listing whose pages are addresses (server-rendered, crawlable, working\n * without JavaScript) use {@link PaginationLinks} instead.\n */\nexport function Pagination({\n  currentPage,\n  pageSize,\n  totalItems,\n  onPageChange,\n  onPageSizeChange,\n  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n  className,\n}: PaginationProps) {\n  const t = useT();\n  const totalPages = pageCount(totalItems, pageSize);\n  const [announced, setAnnounced] = useState(false);\n\n  const step = (label: string, page: number, enabled: boolean) => (\n    <Button\n      type=\"button\"\n      variant=\"secondary\"\n      size=\"sm\"\n      // Headless UI runs no handler on an `aria-disabled` button, so an end\n      // that goes nowhere is inert while it keeps its place in the tab order.\n      aria-disabled={enabled ? undefined : true}\n      onClick={() => {\n        setAnnounced(true);\n        onPageChange(page);\n      }}\n    >\n      {label}\n    </Button>\n  );\n\n  return (\n    <nav\n      aria-label={t('pagination.label')}\n      className={cn(\n        'flex flex-wrap items-center justify-between gap-2xs',\n        className,\n      )}\n    >\n      <Text step={-1} tone=\"muted\">\n        {t('pagination.summary', {\n          current: currentPage,\n          total: totalPages,\n          items: totalItems,\n        })}\n      </Text>\n      <span role=\"status\" className=\"sr-only\">\n        {announced\n          ? t('pagination.page', { current: currentPage, total: totalPages })\n          : ''}\n      </span>\n\n      <div className=\"flex flex-wrap items-center gap-2xs\">\n        {onPageSizeChange && (\n          <label className=\"flex items-center gap-3xs text-step-sm text-content-muted\">\n            {t('pagination.rows')}\n            <Select\n              value={pageSize}\n              onChange={event => onPageSizeChange(Number(event.target.value))}\n            >\n              {pageSizeOptions.map(option => (\n                <option key={option} value={option}>\n                  {option}\n                </option>\n              ))}\n            </Select>\n          </label>\n        )}\n        {step(t('pagination.first'), 1, currentPage > 1)}\n        {step(t('pagination.previous'), currentPage - 1, currentPage > 1)}\n        {step(t('pagination.next'), currentPage + 1, currentPage < totalPages)}\n        {step(t('pagination.last'), totalPages, currentPage < totalPages)}\n      </div>\n    </nav>\n  );\n}\n"],"names":["useState","useT","Button","Select","Text","cn","pageCount","DEFAULT_PAGE_SIZE_OPTIONS","Pagination","currentPage","pageSize","totalItems","onPageChange","onPageSizeChange","pageSizeOptions","className","t","totalPages","announced","setAnnounced","step","label","page","enabled","type","variant","size","aria-disabled","undefined","onClick","nav","aria-label","tone","current","total","items","span","role","div","value","onChange","event","Number","target","map","option"],"mappings":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,MAAM,QAAQ,6BAA6B;AACpD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,EAAE,QAAQ,oBAAoB;AACvC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,OAAO,MAAMC,4BAA4B;IAAC;IAAI;IAAI;IAAI;CAAI,CAAU;AAYpE;;;;;;;;;;CAUC,GACD,OAAO,SAASC,WAAW,EACzBC,WAAW,EACXC,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,gBAAgB,EAChBC,kBAAkBP,yBAAyB,EAC3CQ,SAAS,EACO;IAChB,MAAMC,IAAIf;IACV,MAAMgB,aAAaX,UAAUK,YAAYD;IACzC,MAAM,CAACQ,WAAWC,aAAa,GAAGnB,SAAS;IAE3C,MAAMoB,OAAO,CAACC,OAAeC,MAAcC,wBACzC,KAACrB;YACCsB,MAAK;YACLC,SAAQ;YACRC,MAAK;YACL,sEAAsE;YACtE,wEAAwE;YACxEC,iBAAeJ,UAAUK,YAAY;YACrCC,SAAS;gBACPV,aAAa;gBACbP,aAAaU;YACf;sBAECD;;IAIL,qBACE,MAACS;QACCC,cAAYf,EAAE;QACdD,WAAWV,GACT,uDACAU;;0BAGF,KAACX;gBAAKgB,MAAM,CAAC;gBAAGY,MAAK;0BAClBhB,EAAE,sBAAsB;oBACvBiB,SAASxB;oBACTyB,OAAOjB;oBACPkB,OAAOxB;gBACT;;0BAEF,KAACyB;gBAAKC,MAAK;gBAAStB,WAAU;0BAC3BG,YACGF,EAAE,mBAAmB;oBAAEiB,SAASxB;oBAAayB,OAAOjB;gBAAW,KAC/D;;0BAGN,MAACqB;gBAAIvB,WAAU;;oBACZF,kCACC,MAACQ;wBAAMN,WAAU;;4BACdC,EAAE;0CACH,KAACb;gCACCoC,OAAO7B;gCACP8B,UAAUC,CAAAA,QAAS5B,iBAAiB6B,OAAOD,MAAME,MAAM,CAACJ,KAAK;0CAE5DzB,gBAAgB8B,GAAG,CAACC,CAAAA,uBACnB,KAACA;wCAAoBN,OAAOM;kDACzBA;uCADUA;;;;oBAOpBzB,KAAKJ,EAAE,qBAAqB,GAAGP,cAAc;oBAC7CW,KAAKJ,EAAE,wBAAwBP,cAAc,GAAGA,cAAc;oBAC9DW,KAAKJ,EAAE,oBAAoBP,cAAc,GAAGA,cAAcQ;oBAC1DG,KAAKJ,EAAE,oBAAoBC,YAAYR,cAAcQ;;;;;AAI9D"}

package/dist/ui/molecules/region-state/index.d.ts

@@ -0,0 +1,2 @@
+export * from './region-state.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/molecules/region-state/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/region-state/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/ui/molecules/region-state/index.js

@@ -0,0 +1,3 @@
+export * from './region-state.js';
+
+//# sourceMappingURL=index.js.map

package/dist/ui/molecules/region-state/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/region-state/index.ts"],"sourcesContent":["export * from './region-state.js';\n"],"names":[],"mappings":"AAAA,cAAc,oBAAoB"}

package/dist/ui/molecules/region-state/region-state.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+/** A failure as the organisms hold it: a typed failure, or anything thrown. */
+export interface RegionStateError {
+    message: string;
+    code?: unknown;
+    details?: Record<string, unknown>;
+}
+export interface RegionStateProps {
+    /** What the region holds, plural — "invoices" — for the state's sentence. */
+    plural: string;
+    /** The first load: the organism's skeleton speaks for it, so nothing here. */
+    isLoading?: boolean;
+    /** A load that failed. */
+    error?: RegionStateError;
+    /** Loads the region again. Without it, an error offers no Retry. */
+    onRetry?: () => void;
+    /** The load answered, with nothing in it. */
+    isEmpty?: boolean;
+    /** A filter is in effect, so an empty answer is the filter's, not the data's. */
+    isFiltered?: boolean;
+    /** Clears every filter — what an empty filtered region offers. */
+    onClearFilters?: () => void;
+    /** What an empty, unfiltered region offers: creating the first record. */
+    emptyAction?: ReactNode;
+    /** Data from before the failure is still on screen. */
+    hasStaleData?: boolean;
+}
+/**
+ * What a region says when it is not simply showing its content
+ * ([ADR 0028](../../../../../../../docs/adr/0028-states-an-organism-must-render.md)):
+ *
+ * - a **load error** is an `Alert` with Retry — `forbidden` says so in its own
+ *   words — and data kept from before it is marked possibly out of date;
+ * - an **empty result under a filter** says so and offers Clear filters;
+ * - an **empty region** says what appears here, and offers its first record.
+ *
+ * It renders nothing while loading, and nothing when there is content: the
+ * organism's own skeleton and rows speak then. An empty result and a dead
+ * backend never look alike.
+ */
+export declare function RegionState({ plural, isLoading, error, onRetry, isEmpty, isFiltered, onClearFilters, emptyAction, hasStaleData, }: RegionStateProps): import("react").JSX.Element | null;
+//# sourceMappingURL=region-state.d.ts.map

package/dist/ui/molecules/region-state/region-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"region-state.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/region-state/region-state.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,+EAA+E;AAC/E,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,gBAAgB;IAC/B,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,0EAA0E;IAC1E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,SAAiB,EACjB,KAAK,EACL,OAAO,EACP,OAAe,EACf,UAAkB,EAClB,cAAc,EACd,WAAW,EACX,YAAoB,GACrB,EAAE,gBAAgB,sCA8ElB"}

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

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useErrorMessage, useT } from '../../../i18n/index.js';
+import { useErrorAction } from '../../actions/error-actions.js';
+import { Alert } from '../../atoms/alert/index.js';
+import { Button } from '../../atoms/button/index.js';
+import { EmptyState } from '../empty-state/index.js';
+/**
+ * What a region says when it is not simply showing its content
+ * ([ADR 0028](../../../../../../../docs/adr/0028-states-an-organism-must-render.md)):
+ *
+ * - a **load error** is an `Alert` with Retry — `forbidden` says so in its own
+ *   words — and data kept from before it is marked possibly out of date;
+ * - an **empty result under a filter** says so and offers Clear filters;
+ * - an **empty region** says what appears here, and offers its first record.
+ *
+ * It renders nothing while loading, and nothing when there is content: the
+ * organism's own skeleton and rows speak then. An empty result and a dead
+ * backend never look alike.
+ */ export function RegionState({ plural, isLoading = false, error, onRetry, isEmpty = false, isFiltered = false, onClearFilters, emptyAction, hasStaleData = false }) {
+    const t = useT();
+    const errorMessage = useErrorMessage();
+    const errorAction = useErrorAction();
+    // Read inside a sentence, so as a common noun: "sus facturas".
+    const noun = plural.toLocaleLowerCase();
+    if (error !== undefined) {
+        // The host's next step for this code — "Choose organization" — when it
+        // registered one and its catalog names it.
+        const next = errorAction(error);
+        return /*#__PURE__*/ _jsxs(Alert, {
+            tone: "danger",
+            "data-testid": "region-state-error",
+            action: next === undefined && onRetry === undefined ? undefined : /*#__PURE__*/ _jsxs("span", {
+                className: "flex flex-wrap gap-3xs",
+                children: [
+                    next !== undefined && /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        variant: "primary",
+                        size: "sm",
+                        onClick: next.onAction,
+                        children: next.label
+                    }),
+                    onRetry !== undefined && /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        variant: "secondary",
+                        size: "sm",
+                        onClick: onRetry,
+                        children: t('state.retry')
+                    })
+                ]
+            }),
+            children: [
+                error.code === 'forbidden' ? t('state.forbidden', {
+                    plural: noun
+                }) : errorMessage(error),
+                hasStaleData && ` ${t('state.stale')}`
+            ]
+        });
+    }
+    if (isLoading || !isEmpty) return null;
+    if (isFiltered) {
+        return /*#__PURE__*/ _jsx(EmptyState, {
+            action: onClearFilters === undefined ? undefined : /*#__PURE__*/ _jsx(Button, {
+                type: "button",
+                variant: "secondary",
+                size: "sm",
+                onClick: onClearFilters,
+                children: t('state.clearFilters')
+            }),
+            children: t('state.noResults', {
+                plural: noun
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(EmptyState, {
+        action: emptyAction,
+        children: t('state.empty', {
+            plural: noun
+        })
+    });
+}
+
+//# sourceMappingURL=region-state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/region-state/region-state.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\n\nimport { useErrorMessage, useT } from '../../../i18n/index.js';\nimport { useErrorAction } from '../../actions/error-actions.js';\nimport { Alert } from '../../atoms/alert/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { EmptyState } from '../empty-state/index.js';\n\n/** A failure as the organisms hold it: a typed failure, or anything thrown. */\nexport interface RegionStateError {\n  message: string;\n  code?: unknown;\n  details?: Record<string, unknown>;\n}\n\nexport interface RegionStateProps {\n  /** What the region holds, plural — \"invoices\" — for the state's sentence. */\n  plural: string;\n  /** The first load: the organism's skeleton speaks for it, so nothing here. */\n  isLoading?: boolean;\n  /** A load that failed. */\n  error?: RegionStateError;\n  /** Loads the region again. Without it, an error offers no Retry. */\n  onRetry?: () => void;\n  /** The load answered, with nothing in it. */\n  isEmpty?: boolean;\n  /** A filter is in effect, so an empty answer is the filter's, not the data's. */\n  isFiltered?: boolean;\n  /** Clears every filter — what an empty filtered region offers. */\n  onClearFilters?: () => void;\n  /** What an empty, unfiltered region offers: creating the first record. */\n  emptyAction?: ReactNode;\n  /** Data from before the failure is still on screen. */\n  hasStaleData?: boolean;\n}\n\n/**\n * What a region says when it is not simply showing its content\n * ([ADR 0028](../../../../../../../docs/adr/0028-states-an-organism-must-render.md)):\n *\n * - a **load error** is an `Alert` with Retry — `forbidden` says so in its own\n *   words — and data kept from before it is marked possibly out of date;\n * - an **empty result under a filter** says so and offers Clear filters;\n * - an **empty region** says what appears here, and offers its first record.\n *\n * It renders nothing while loading, and nothing when there is content: the\n * organism's own skeleton and rows speak then. An empty result and a dead\n * backend never look alike.\n */\nexport function RegionState({\n  plural,\n  isLoading = false,\n  error,\n  onRetry,\n  isEmpty = false,\n  isFiltered = false,\n  onClearFilters,\n  emptyAction,\n  hasStaleData = false,\n}: RegionStateProps) {\n  const t = useT();\n  const errorMessage = useErrorMessage();\n  const errorAction = useErrorAction();\n  // Read inside a sentence, so as a common noun: \"sus facturas\".\n  const noun = plural.toLocaleLowerCase();\n\n  if (error !== undefined) {\n    // The host's next step for this code — \"Choose organization\" — when it\n    // registered one and its catalog names it.\n    const next = errorAction(error);\n    return (\n      <Alert\n        tone=\"danger\"\n        data-testid=\"region-state-error\"\n        action={\n          next === undefined && onRetry === undefined ? undefined : (\n            <span className=\"flex flex-wrap gap-3xs\">\n              {next !== undefined && (\n                <Button\n                  type=\"button\"\n                  variant=\"primary\"\n                  size=\"sm\"\n                  onClick={next.onAction}\n                >\n                  {next.label}\n                </Button>\n              )}\n              {onRetry !== undefined && (\n                <Button\n                  type=\"button\"\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  onClick={onRetry}\n                >\n                  {t('state.retry')}\n                </Button>\n              )}\n            </span>\n          )\n        }\n      >\n        {error.code === 'forbidden'\n          ? t('state.forbidden', { plural: noun })\n          : errorMessage(error)}\n        {hasStaleData && ` ${t('state.stale')}`}\n      </Alert>\n    );\n  }\n\n  if (isLoading || !isEmpty) return null;\n\n  if (isFiltered) {\n    return (\n      <EmptyState\n        action={\n          onClearFilters === undefined ? undefined : (\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={onClearFilters}\n            >\n              {t('state.clearFilters')}\n            </Button>\n          )\n        }\n      >\n        {t('state.noResults', { plural: noun })}\n      </EmptyState>\n    );\n  }\n\n  return (\n    <EmptyState action={emptyAction}>\n      {t('state.empty', { plural: noun })}\n    </EmptyState>\n  );\n}\n"],"names":["useErrorMessage","useT","useErrorAction","Alert","Button","EmptyState","RegionState","plural","isLoading","error","onRetry","isEmpty","isFiltered","onClearFilters","emptyAction","hasStaleData","t","errorMessage","errorAction","noun","toLocaleLowerCase","undefined","next","tone","data-testid","action","span","className","type","variant","size","onClick","onAction","label","code"],"mappings":"AAAA;;AAIA,SAASA,eAAe,EAAEC,IAAI,QAAQ,yBAAyB;AAC/D,SAASC,cAAc,QAAQ,iCAAiC;AAChE,SAASC,KAAK,QAAQ,6BAA6B;AACnD,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,UAAU,QAAQ,0BAA0B;AA8BrD;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,YAAY,EAC1BC,MAAM,EACNC,YAAY,KAAK,EACjBC,KAAK,EACLC,OAAO,EACPC,UAAU,KAAK,EACfC,aAAa,KAAK,EAClBC,cAAc,EACdC,WAAW,EACXC,eAAe,KAAK,EACH;IACjB,MAAMC,IAAIf;IACV,MAAMgB,eAAejB;IACrB,MAAMkB,cAAchB;IACpB,+DAA+D;IAC/D,MAAMiB,OAAOZ,OAAOa,iBAAiB;IAErC,IAAIX,UAAUY,WAAW;QACvB,uEAAuE;QACvE,2CAA2C;QAC3C,MAAMC,OAAOJ,YAAYT;QACzB,qBACE,MAACN;YACCoB,MAAK;YACLC,eAAY;YACZC,QACEH,SAASD,aAAaX,YAAYW,YAAYA,0BAC5C,MAACK;gBAAKC,WAAU;;oBACbL,SAASD,2BACR,KAACjB;wBACCwB,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLC,SAAST,KAAKU,QAAQ;kCAErBV,KAAKW,KAAK;;oBAGdvB,YAAYW,2BACX,KAACjB;wBACCwB,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLC,SAASrB;kCAERM,EAAE;;;;;gBAOZP,MAAMyB,IAAI,KAAK,cACZlB,EAAE,mBAAmB;oBAAET,QAAQY;gBAAK,KACpCF,aAAaR;gBAChBM,gBAAgB,CAAC,CAAC,EAAEC,EAAE,gBAAgB;;;IAG7C;IAEA,IAAIR,aAAa,CAACG,SAAS,OAAO;IAElC,IAAIC,YAAY;QACd,qBACE,KAACP;YACCoB,QACEZ,mBAAmBQ,YAAYA,0BAC7B,KAACjB;gBACCwB,MAAK;gBACLC,SAAQ;gBACRC,MAAK;gBACLC,SAASlB;0BAERG,EAAE;;sBAKRA,EAAE,mBAAmB;gBAAET,QAAQY;YAAK;;IAG3C;IAEA,qBACE,KAACd;QAAWoB,QAAQX;kBACjBE,EAAE,eAAe;YAAET,QAAQY;QAAK;;AAGvC"}

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

@@ -3,7 +3,7 @@
  * (a choice in the page): one bordered track, the chosen segment filled.
  */
 /** The joined segments; scrolls sideways rather than wrapping. */
-export declare 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]";
-export declare const OTHER = "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 focus-ring text-content hover:bg-[color-mix(in_srgb,var(--color-content)_6%,transparent)] hover:text-primary";
-export declare const CURRENT = "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 bg-primary font-medium text-primary-content";
+export declare 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]";
+export declare const OTHER = "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 focus-ring text-content hover:bg-[color-mix(in_srgb,var(--color-content)_6%,transparent)] hover:text-primary";
+export declare const CURRENT = "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 bg-primary font-medium text-primary-content";
 //# sourceMappingURL=segment-classes.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"segment-classes.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/segmented-nav/segment-classes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,kEAAkE;AAClE,eAAO,MAAM,IAAI,6HAC2G,CAAC;AAK7H,eAAO,MAAM,KAAK,4TAA4H,CAAC;AAE/I,eAAO,MAAM,OAAO,2PAA2D,CAAC"}
+{"version":3,"file":"segment-classes.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/segmented-nav/segment-classes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,kEAAkE;AAClE,eAAO,MAAM,IAAI,sHACoG,CAAC;AAKtH,eAAO,MAAM,KAAK,qTAA4H,CAAC;AAE/I,eAAO,MAAM,OAAO,oPAA2D,CAAC"}

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"}