@blakesteve/roster 5.12.0 → 5.13.0

package/README.md

@@ -561,7 +561,7 @@ element marked `data-key-focus`. WebKit doesn't match `:focus-visible` on an
 element a script focuses in answer to a key once the page has been clicked.
 Escape handing focus back to a menu's or a select's trigger, or to a dialog's
 opener, and a radio group's or tabs' arrows all drew no ring in Safari after
-a click. A small internal tracker marks those elements: keyboard mode starts on a navigation key (Tab, Option+Tab, the
+a click. A small tracker marks those elements: keyboard mode starts on a navigation key (Tab, Option+Tab, the
 arrows, Escape, Enter, Space, Home, End, PageUp, PageDown) and ends on pointer
 input, and it marks only what Chromium's own `:focus-visible` already matches,
 so Chromium's rings are unchanged. It runs while a component that moves focus
@@ -576,6 +576,23 @@ variant in your stylesheet as Roster does:
 @custom-variant focus-visible (&:is(:focus-visible, [data-key-focus]));
 ```
 
+The variant is enough for your rings on a page where one of Roster's
+components has the tracker running. A control of your own that moves focus by
+script in answer to a key, arrows around a hand-drawn wheel or a grid that
+roves its own focus, shouldn't count on one: call `useKeyFocus()` in it, and
+the tracker runs while it's mounted. The listeners are shared, so it costs
+nothing beside Roster's own components. `KEY_FOCUS` is the attribute's name,
+for a selector or a test.
+
+```tsx
+import { useKeyFocus } from "@blakesteve/roster";
+
+function Wheel() {
+  useKeyFocus();
+  // arrows move focus between the stops with stop.focus(); rings on focus-visible:
+}
+```
+
 ### Motion
 
 Two hand-rolled utilities, both of which stop for `prefers-reduced-motion`.
@@ -1352,6 +1369,10 @@ What it promises:
   item's decision.
 - **Steps take focus and give it back.** Escape or Cancel returns focus to the
   button that opened the step.
+- **A blocked step says why, plainly.** A step that can't be submitted yet (a
+  reason not picked, an edit with nothing changed) says why in plain text,
+  and its submit is described by it. A submit tried anyway decides nothing
+  and turns the reason into an error.
 - **An item that disappears** (another reviewer, a reload) with its step open
   closes the step without deciding, and is announced once as decided
   elsewhere. Without a step, it moves focus only if focus was inside it.
@@ -1360,10 +1381,11 @@ What it promises:
 - **Phones.** Every button is 44px tall at every width, and nothing scrolls
   sideways at 320px. Nothing animates as an item leaves.
 
-Counts for a tab badge need no API: the app holds the items, so it's
-`items.length`. `MediaPreview` is the thumbnail to use in an item: when the
-image can't render (an expired link, a format the browser can't draw), it
-falls back to a link to the original in the same footprint.
+Counts for a tab need no API: the app holds the items, so it's
+`items.length`, passed as a `LiquidTabs` tab's `count`. `MediaPreview` is the
+thumbnail to use in an item: when the image can't render (an expired link, a
+format the browser can't draw), it falls back to a link to the original in the
+same footprint.
 
 ### FileUpload
 
@@ -1878,6 +1900,71 @@ contained. Under reduced motion every scroll the component makes is instant.
 `showPosition` shows "2 of 5", which is also each item's name and is announced
 politely when it changes.
 
+### LiquidTabs
+
+A tab strip with a sliding pill, on the WAI tabs pattern: one tab stop, arrows
+that wrap, Home and End, and `activation="manual"` for tabs that are costly to
+switch. `LiquidNav` is the same strip as a `nav` of links.
+
+**Counts.** A tab or a nav link takes `count`, shown in a small mark after its
+label:
+
+```tsx
+<LiquidTabs tabs={[{ id: "queue", label: "Queue", count: queue.length }, …]} … />
+```
+
+The count is part of the name, "Queue, 12 items" rather than "Queue12" or
+"Queue (12)", and its words come from `labels`, English by default with a
+plural. Name your own noun, and use `Intl.PluralRules` for a language with
+more than two forms:
+
+```tsx
+labels={{ count: (n) => (n === 1 ? "1 game" : `${n.toLocaleString()} games`) }}
+```
+
+- **Zero shows,** as "0" and "Queue, 0 items": an empty queue is worth
+  saying. To show no count, pass `undefined`.
+- **A count that isn't a whole number from zero** (negative, a fraction,
+  `NaN`) shows nothing, as if there were none, rather than being rounded or
+  clamped into a number nobody passed.
+- **Large counts are written whole,** "12,345", in the mark and the name. To
+  shorten the mark, pass `labels.countMark` (`(n) => "12K"`); the name stays
+  whole, since a screen reader has no width to save.
+- **The mark is drawn from the tab's own text color:** its number in that
+  color on a 12% tint of it. So it follows the tab through every state, both
+  variants and both themes, and through any palette set on the
+  `--roster-lt-*` tokens, and its number clears 4.5:1 in every state on
+  Roster's own (4.88:1 at the least). `Badge` and `Pill` each draw from a fixed
+  palette, which on the selected tab would be a second chip sitting on the
+  pill.
+- **The pill follows,** re-measuring when a count widens its tab or one
+  before it.
+
+**The panel.** `LiquidTabPanel` is the `role="tabpanel"` a tab controls, paired
+with it by construction: its `id` is the tab's `panelId`, and its
+`aria-labelledby` points at the tab through `liquidTabId`, so the panel takes
+the tab's name, count included. Give the `LiquidTabs` an `id` to pair it with.
+One panel that swaps its content, or a panel per tab:
+
+```tsx
+// One panel: every tab carries the same panelId, and `tab` is the selected one.
+<LiquidTabs id="lists" tabs={tabs.map((t) => ({ ...t, panelId: "lists-panel" }))} activeTab={list} onChange={setList} />
+<LiquidTabPanel tabsId="lists" id="lists-panel" tab={list}>…</LiquidTabPanel>
+
+// A panel per tab: each its own panelId, and every panel gets activeTab.
+<LiquidTabPanel tabsId="views" id="views-board" tab="board" activeTab={view}>…</LiquidTabPanel>
+<LiquidTabPanel tabsId="views" id="views-list" tab="list" activeTab={view} keepMounted>…</LiquidTabPanel>
+```
+
+Per tab, a panel that isn't selected stays in the page, hidden, so every tab's
+`aria-controls` points at something, and renders no content. `keepMounted`
+keeps its content mounted, so a half-filled form or a scroll position survives
+a switch away and back. A panel with nothing inside it to Tab to is itself in
+the tab order (`tabIndex={0}`), as the WAI pattern asks, so a keyboard user
+can reach what they just selected; it leaves the tab order once its content
+holds a link, a button or a field, rechecked as the content changes. Pass
+`tabIndex` to decide it yourself.
+
 ### Components that render links
 
 `Breadcrumbs` renders a plain `<a>` by default, which is right for a static
@@ -1899,8 +1986,10 @@ once, and the pages that use the wrapper stay server-rendered.
 `LiquidNav` takes a `linkComponent` too, with a wider contract: each link
 receives `href` and `to` with the same value, so React Router's `Link` works as
 well as `next/link`, plus `className`, `children`, `aria-current`, `onClick` and
-`data-tab-id`, which it must forward to the DOM. The props type is exported as
-`LiquidNavLinkProps`. The same client-component rule applies.
+`data-tab-id`, which it must forward to the DOM, and `aria-label` when the
+link has a count (forward it too; a component that doesn't still gets a name
+with the count in it). The props type is exported as `LiquidNavLinkProps`. The
+same client-component rule applies.
 
 `Eyebrow` takes the other approach: `as` accepts any element and the props
 follow it, so `<Eyebrow as="a" href="/work">` works, as does `as={NextLink}`.
@@ -1926,7 +2015,8 @@ Dialog or Sheet), alongside `Pagination`, the loading system and DataTable's
 instead, and 5.8.0 adds the ones that were missing: MultiSelect's
 `countLabel`, DataTable's `emptyMessage` and MediaPreview's `newTabLabel`, next
 to the existing `dismissLabel`, `placeholder`, `removeLabel`, `prevLabel` and
-the like. Words that take a number or a name are functions, so a language
+the like. `LiquidTabs` and `LiquidNav` take `labels` for the words a count
+says. Words that take a number or a name are functions, so a language
 whose word changes with the count can say so. An entry passed as `undefined`
 (a catalog missing a key) keeps its English rather than leaving a control
 unnamed.
@@ -2038,7 +2128,8 @@ function App() {
 | `EmptyState`      | Zero-data placeholder with icon and action slot; `headingLevel` sets its title's `h1` to `h6` |
 | `ErrorState`      | Error display with retry action                                             |
 | `LiquidNav`       | `LiquidTabs`' strip as a `nav` of links; takes a router's link component    |
-| `LiquidTabs`      | Tab strip with a sliding pill; arrow keys, roving focus, 44px `lg` size     |
+| `LiquidTabs`      | Tab strip with a sliding pill; arrow keys, roving focus, counts, 44px `lg` size (see [LiquidTabs](#liquidtabs)) |
+| `LiquidTabPanel`  | The panel a `LiquidTabs` tab controls, named for its tab by construction; one swapping panel or one per tab |
 | `MatchupCard`     | Head-to-head comparison card                                                |
 | `MediaPreview`    | Thumbnail that falls back to "Preview unavailable, open original" when it can't render |
 | `Menu`            | A button's menu of actions: icons, shortcuts, checkbox and radio items, links, groups, submenus; the full keyboard pattern, 44px targets (see [Menu](#menu)) |
@@ -2125,6 +2216,7 @@ the one that can not be affected by a future change to the barrel.
 | Hook             | Description                                                                     |
 | ---------------- | ------------------------------------------------------------------------------- |
 | `useCountdown`   | Countdown timer logic without the UI; `days` counts the whole remaining total   |
+| `useKeyFocus`    | Keeps keyboard focus ringed in Safari for your own control that moves focus by script (see [Focus](#focus)). Ships `KEY_FOCUS` |
 | `useKeySequence` | Fires a callback when a sequence of keys is typed in order. Ships `KONAMI_CODE` |
 
 ## Authoring components: the `rst:` prefix

package/dist/components/molecules/LiquidTabs/LiquidCount.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("./liquid-count.cjs");function i({label:s,count:r,labels:e}){return n.shownCount(r)?t.jsxs("span",{className:"rst:inline-flex rst:items-center rst:justify-center rst:gap-1.5",children:[s,t.jsx("span",{"aria-hidden":"true","data-tab-count":"",className:"rst:inline-flex rst:h-5 rst:min-w-5 rst:items-center rst:justify-center rst:rounded-full rst:bg-current/12 rst:px-1.5 rst:text-xs rst:font-semibold rst:leading-none rst:tabular-nums",children:e.countMark(r)}),t.jsx("span",{className:"rst:sr-only",children:`, ${e.count(r)}`})]}):t.jsx(t.Fragment,{children:s})}exports.LiquidCount=i;

package/dist/components/molecules/LiquidTabs/LiquidCount.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { LiquidTabsLabels } from './liquid-count';
+/**
+ * A tab's or a link's label, with its count beside it when it has one.
+ *
+ * The mark is drawn from the item's own text color: its number in that color,
+ * its fill a light tint of it. So it follows the item through every state it
+ * already styles (at rest, selected on the pill, hovered, focused), in both
+ * themes and both variants, and through any palette a consumer sets on the
+ * `--roster-lt-*` tokens. Badge and Pill each draw from a fixed palette, which
+ * on the selected tab would be a gray or brand chip sitting on the pill.
+ *
+ * The tint is 12% of the ink: enough to read as a mark, and light enough
+ * that the number still clears 4.5:1 against it in every state on Roster's
+ * own tokens (4.88:1 at the least, the selected tab and the dark strip at
+ * rest), where 15% left one state at 4.61.
+ *
+ * The mark is hidden from assistive technology. The count is said by the
+ * item's `aria-label` when its label is a string (`countName`), and by text
+ * hidden beside the label otherwise, so the name is "Open, 12 items" rather
+ * than "Open12" either way. The hidden text stays under an `aria-label` too,
+ * for a link component that doesn't forward one. Render it only for a count that shows (`shownCount`): with
+ * none, the item takes its label as it always has, wrapper and all.
+ */
+export declare function LiquidCount({ label, count, labels }: {
+    label: ReactNode;
+    count: number | undefined;
+    labels: LiquidTabsLabels;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/LiquidTabs/LiquidCount.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as r, Fragment as e, jsxs as i } from "react/jsx-runtime";
+import { shownCount as a } from "./liquid-count.js";
+function o({ label: s, count: t, labels: n }) {
+  return a(t) ? /* @__PURE__ */ i("span", { className: "rst:inline-flex rst:items-center rst:justify-center rst:gap-1.5", children: [
+    s,
+    /* @__PURE__ */ r(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-tab-count": "",
+        className: "rst:inline-flex rst:h-5 rst:min-w-5 rst:items-center rst:justify-center rst:rounded-full rst:bg-current/12 rst:px-1.5 rst:text-xs rst:font-semibold rst:leading-none rst:tabular-nums",
+        children: n.countMark(t)
+      }
+    ),
+    /* @__PURE__ */ r("span", { className: "rst:sr-only", children: `, ${n.count(t)}` })
+  ] }) : /* @__PURE__ */ r(e, { children: s });
+}
+export {
+  o as LiquidCount
+};

package/dist/components/molecules/LiquidTabs/LiquidNav.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),b=require("react"),a=require("./liquid-pill.cjs"),N=require("../../../lib/utils.cjs");function I({href:r,className:t,children:d,onClick:c,"aria-current":l,"data-tab-id":s}){return u.jsx("a",{href:r,className:t,onClick:c,"aria-current":l,"data-tab-id":s,children:d})}function P({items:r,activeTab:t,onChange:d,linkComponent:c,variant:l="pill",fullWidth:s=!1,size:q="md","aria-label":y,"aria-labelledby":L,className:p}){const o=b.useRef(null),f=b.useRef(null),j=c??I;return a.useLiquidPill(o,f,t,r.map(e=>e.id).join("\0")),u.jsxs("nav",{ref:o,"aria-label":y,"aria-labelledby":L,"data-testid":"liquid-nav",style:a.LIQUID_STRIP_STYLE,className:a.liquidStripClassName(l,s,p),children:[u.jsx("div",{ref:f,"aria-hidden":!0,"data-testid":"liquid-tabs-pill",className:a.liquidPillClassName(l),style:a.LIQUID_PILL_STYLE}),r.map(e=>{const n=e.id===t;return u.jsx(j,{href:e.href,to:e.href,"aria-current":n?"page":void 0,"data-tab-id":e.id,onClick:i=>{i.defaultPrevented||i.button!==0||i.metaKey||i.ctrlKey||i.shiftKey||i.altKey||n||d?.(e.id)},className:N.cn(a.liquidItemClassName({variant:l,fullWidth:s,size:q,isActive:n}),"rst:inline-flex rst:items-center rst:justify-center rst:no-underline"),children:typeof e.label=="function"?e.label(n):e.label},e.id)})]})}exports.LiquidNav=P;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("react"),a=require("./liquid-pill.cjs"),x=require("./LiquidCount.cjs"),f=require("./liquid-count.cjs"),P=require("../../../lib/labels.cjs"),R=require("../../../lib/utils.cjs");function S({href:r,className:s,children:d,onClick:c,"aria-current":i,"aria-label":n,"data-tab-id":o}){return t.jsx("a",{href:r,className:s,onClick:c,"aria-current":i,"aria-label":n,"data-tab-id":o,children:d})}function _({items:r,activeTab:s,onChange:d,linkComponent:c,variant:i="pill",fullWidth:n=!1,size:o="md","aria-label":j,"aria-labelledby":p,className:C,labels:I}){const q=P.withLabels(f.LIQUID_COUNT_LABELS,I),L=N.useRef(null),y=N.useRef(null),h=c??S;return a.useLiquidPill(L,y,s,r.map(e=>e.id).join("\0")),t.jsxs("nav",{ref:L,"aria-label":j,"aria-labelledby":p,"data-testid":"liquid-nav",style:a.LIQUID_STRIP_STYLE,className:a.liquidStripClassName(i,n,C),children:[t.jsx("div",{ref:y,"aria-hidden":!0,"data-testid":"liquid-tabs-pill",className:a.liquidPillClassName(i),style:a.LIQUID_PILL_STYLE}),r.map(e=>{const u=e.id===s,b=typeof e.label=="function"?e.label(u):e.label;return t.jsx(h,{href:e.href,to:e.href,"aria-current":u?"page":void 0,"aria-label":f.countName(b,e.count,q),"data-tab-id":e.id,onClick:l=>{l.defaultPrevented||l.button!==0||l.metaKey||l.ctrlKey||l.shiftKey||l.altKey||u||d?.(e.id)},className:R.cn(a.liquidItemClassName({variant:i,fullWidth:n,size:o,isActive:u}),"rst:inline-flex rst:items-center rst:justify-center rst:no-underline"),children:f.shownCount(e.count)?t.jsx(x.LiquidCount,{label:b,count:e.count,labels:q}):b},e.id)})]})}exports.LiquidNav=_;

package/dist/components/molecules/LiquidTabs/LiquidNav.d.ts

@@ -1,6 +1,7 @@
 import { ComponentType, MouseEvent, ReactNode } from 'react';
 import { LiquidSize, LiquidVariant } from './liquid-pill';
 import { TabItem } from './LiquidTabs';
+import { LiquidTabsLabels } from './liquid-count';
 export interface LiquidNavItem extends Omit<TabItem, "panelId"> {
     href: string;
 }
@@ -19,6 +20,12 @@ export interface LiquidNavLinkProps {
     className: string;
     children: ReactNode;
     "aria-current"?: "page";
+    /**
+     * The link's whole name when it has a count and a string label: "Inbox, 3
+     * items". Forward it to the `<a>`; a component that doesn't still gets a
+     * name with the count in it, from text hidden beside the label.
+     */
+    "aria-label"?: string;
     onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
     "data-tab-id": string;
 }
@@ -49,6 +56,8 @@ export interface LiquidNavProps {
     "aria-label"?: string;
     "aria-labelledby"?: string;
     className?: string;
+    /** Every word a count says, with English defaults: see `TabItem.count`. */
+    labels?: Partial<LiquidTabsLabels>;
 }
 /**
  * `LiquidTabs`' look, for navigation between routes: a `nav` of links rather
@@ -58,5 +67,7 @@ export interface LiquidNavProps {
  * things to assistive technology. Tabs switch panels on the same page and take
  * one tab stop with arrow keys between them; links go somewhere, and each is
  * its own tab stop, as in any nav.
+ *
+ * An item can carry a `count`, as a tab does: see `TabItem.count`.
  */
-export declare function LiquidNav({ items, activeTab, onChange, linkComponent, variant, fullWidth, size, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, }: LiquidNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function LiquidNav({ items, activeTab, onChange, linkComponent, variant, fullWidth, size, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, labels, }: LiquidNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/LiquidTabs/LiquidNav.js

@@ -1,70 +1,76 @@
 "use client";
-import { jsxs as q, jsx as u } from "react/jsx-runtime";
-import { useRef as c } from "react";
-import { useLiquidPill as I, LIQUID_STRIP_STYLE as N, LIQUID_PILL_STYLE as h, liquidPillClassName as P, liquidItemClassName as j, liquidStripClassName as x } from "./liquid-pill.js";
-import { cn as C } from "../../../lib/utils.js";
-function K({
-  href: e,
-  className: r,
-  children: n,
-  onClick: d,
-  "aria-current": l,
-  "data-tab-id": t
+import { jsxs as q, jsx as o } from "react/jsx-runtime";
+import { useRef as m } from "react";
+import { useLiquidPill as C, LIQUID_STRIP_STYLE as _, LIQUID_PILL_STYLE as P, liquidPillClassName as S, liquidItemClassName as j, liquidStripClassName as x } from "./liquid-pill.js";
+import { LiquidCount as D } from "./LiquidCount.js";
+import { shownCount as K, countName as R, LIQUID_COUNT_LABELS as U } from "./liquid-count.js";
+import { withLabels as k } from "../../../lib/labels.js";
+import { cn as E } from "../../../lib/utils.js";
+function Q({
+  href: r,
+  className: e,
+  children: s,
+  onClick: u,
+  "aria-current": i,
+  "aria-label": t,
+  "data-tab-id": d
 }) {
-  return /* @__PURE__ */ u("a", { href: e, className: r, onClick: d, "aria-current": l, "data-tab-id": t, children: n });
+  return /* @__PURE__ */ o("a", { href: r, className: e, onClick: u, "aria-current": i, "aria-label": t, "data-tab-id": d, children: s });
 }
-function D({
-  items: e,
-  activeTab: r,
-  onChange: n,
-  linkComponent: d,
-  variant: l = "pill",
+function z({
+  items: r,
+  activeTab: e,
+  onChange: s,
+  linkComponent: u,
+  variant: i = "pill",
   fullWidth: t = !1,
-  size: b = "md",
-  "aria-label": p,
-  "aria-labelledby": m,
-  className: y
+  size: d = "md",
+  "aria-label": L,
+  "aria-labelledby": y,
+  className: I,
+  labels: N
 }) {
-  const o = c(null), f = c(null), L = d ?? K;
-  return I(o, f, r, e.map((a) => a.id).join("\0")), /* @__PURE__ */ q(
+  const f = k(U, N), b = m(null), p = m(null), h = u ?? Q;
+  return C(b, p, e, r.map((a) => a.id).join("\0")), /* @__PURE__ */ q(
     "nav",
     {
-      ref: o,
-      "aria-label": p,
-      "aria-labelledby": m,
+      ref: b,
+      "aria-label": L,
+      "aria-labelledby": y,
       "data-testid": "liquid-nav",
-      style: N,
-      className: x(l, t, y),
+      style: _,
+      className: x(i, t, I),
       children: [
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ o(
           "div",
           {
-            ref: f,
+            ref: p,
             "aria-hidden": !0,
             "data-testid": "liquid-tabs-pill",
-            className: P(l),
-            style: h
+            className: S(i),
+            style: P
           }
         ),
-        e.map((a) => {
-          const s = a.id === r;
-          return /* @__PURE__ */ u(
-            L,
+        r.map((a) => {
+          const n = a.id === e, c = typeof a.label == "function" ? a.label(n) : a.label;
+          return /* @__PURE__ */ o(
+            h,
             {
               href: a.href,
               to: a.href,
-              "aria-current": s ? "page" : void 0,
+              "aria-current": n ? "page" : void 0,
+              "aria-label": R(c, a.count, f),
               "data-tab-id": a.id,
-              onClick: (i) => {
-                i.defaultPrevented || i.button !== 0 || i.metaKey || i.ctrlKey || i.shiftKey || i.altKey || s || n?.(a.id);
+              onClick: (l) => {
+                l.defaultPrevented || l.button !== 0 || l.metaKey || l.ctrlKey || l.shiftKey || l.altKey || n || s?.(a.id);
               },
-              className: C(
-                j({ variant: l, fullWidth: t, size: b, isActive: s }),
+              className: E(
+                j({ variant: i, fullWidth: t, size: d, isActive: n }),
                 /* A button centers its label and draws no underline on its own;
                    a link does neither, and a host stylesheet may underline it. */
                 "rst:inline-flex rst:items-center rst:justify-center rst:no-underline"
               ),
-              children: typeof a.label == "function" ? a.label(s) : a.label
+              children: K(a.count) ? /* @__PURE__ */ o(D, { label: c, count: a.count, labels: f }) : c
             },
             a.id
           );
@@ -74,5 +80,5 @@ function D({
   );
 }
 export {
-  D as LiquidNav
+  z as LiquidNav
 };

package/dist/components/molecules/LiquidTabs/LiquidTabPanel.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),t=require("react"),y=require("./liquid-tab-id.cjs"),p='a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), iframe, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';function x({tabsId:d,id:l,tab:n,activeTab:a,keepMounted:u=!1,tabIndex:b,children:c,...f}){const i=t.useRef(null),r=a===void 0||a===n,[h,q]=t.useState(!1);return t.useLayoutEffect(()=>{const e=i.current;if(!e)return;const o=()=>q(!!e.querySelector(p));if(o(),typeof MutationObserver>"u")return;const s=new MutationObserver(o);return s.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["disabled","tabindex","href","contenteditable"]}),()=>s.disconnect()},[]),v.jsx("div",{...f,ref:i,role:"tabpanel",id:l,"aria-labelledby":y.liquidTabId(d,n),hidden:!r,tabIndex:b??(h?void 0:0),"data-tab-panel":"",children:r||u?c:null})}exports.LiquidTabPanel=x;

package/dist/components/molecules/LiquidTabs/LiquidTabPanel.d.ts

@@ -0,0 +1,52 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface LiquidTabPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "id" | "role" | "hidden" | "children"> {
+    /** The `id` of the `LiquidTabs` this panel belongs to (its `id` prop). */
+    tabsId: string;
+    /** This panel's `id`: the `panelId` its tab carries, or every tab, for one panel that swaps its content. */
+    id: string;
+    /**
+     * The tab that names this panel. For one panel that swaps its content, the
+     * selected tab: the panel's name follows the selection. For a panel per tab,
+     * its own tab.
+     */
+    tab: string;
+    /**
+     * For a panel per tab: the selected tab. The panel shows when it is `tab`,
+     * and is hidden otherwise. Leave it out for one panel that swaps its
+     * content, which always shows.
+     */
+    activeTab?: string;
+    /**
+     * For a panel per tab: keep the content mounted while the panel is hidden,
+     * so what's in it (a half-filled form, a scroll position) survives a switch
+     * away and back. By default a hidden panel renders no content. The panel
+     * element itself always stays, hidden, so its tab's `aria-controls` points
+     * at something.
+     */
+    keepMounted?: boolean;
+    children?: ReactNode;
+}
+/**
+ * The panel a `LiquidTabs` tab controls, paired with it by construction:
+ * `role="tabpanel"`, its `id` the tab's `panelId`, and `aria-labelledby`
+ * pointing at the tab through `liquidTabId`, so it's named for its tab.
+ *
+ * ```tsx
+ * <LiquidTabs id="views" tabs={[{ id: "open", label: "Open", panelId: "views-panel" }, …]} … />
+ * <LiquidTabPanel tabsId="views" id="views-panel" tab={view}>…</LiquidTabPanel>
+ * ```
+ *
+ * Two ways to lay it out. **One panel that swaps its content:** every tab
+ * carries the same `panelId`, and `tab` is the selected tab. **A panel per
+ * tab:** each tab has its own `panelId`, each panel its own `tab`, and every
+ * panel gets `activeTab`, so only the selected one shows.
+ *
+ * The WAI tabs pattern puts the panel in the tab order when nothing inside it
+ * can take focus, so a keyboard user can reach and scroll what was just
+ * selected. Whether the content holds anything focusable isn't known until it
+ * renders, and it can change as content loads, so the panel starts reachable
+ * (`tabIndex={0}`) and leaves the tab order once its content holds something
+ * that can be Tabbed to, rechecking as the content changes. Pass `tabIndex`
+ * to decide it yourself.
+ */
+export declare function LiquidTabPanel({ tabsId, id, tab, activeTab, keepMounted, tabIndex, children, ...rest }: LiquidTabPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/LiquidTabs/LiquidTabPanel.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { useRef as m, useState as v, useLayoutEffect as x } from "react";
+import { liquidTabId as y } from "./liquid-tab-id.js";
+const L = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), iframe, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+function w({ tabsId: d, id: s, tab: t, activeTab: n, keepMounted: l = !1, tabIndex: b, children: u, ...c }) {
+  const r = m(null), a = n === void 0 || n === t, [f, h] = v(!1);
+  return x(() => {
+    const e = r.current;
+    if (!e) return;
+    const o = () => h(!!e.querySelector(L));
+    if (o(), typeof MutationObserver > "u") return;
+    const i = new MutationObserver(o);
+    return i.observe(e, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["disabled", "tabindex", "href", "contenteditable"] }), () => i.disconnect();
+  }, []), /* @__PURE__ */ p(
+    "div",
+    {
+      ...c,
+      ref: r,
+      role: "tabpanel",
+      id: s,
+      "aria-labelledby": y(d, t),
+      hidden: !a,
+      tabIndex: b ?? (f ? void 0 : 0),
+      "data-tab-panel": "",
+      children: a || l ? u : null
+    }
+  );
+}
+export {
+  w as LiquidTabPanel
+};

package/dist/components/molecules/LiquidTabs/LiquidTabs.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),n=require("react"),s=require("./liquid-pill.cjs"),F=require("./liquid-tab-id.cjs"),_=require("../../../internal/key-focus.cjs");function E({tabs:l,activeTab:r,onChange:S,variant:d="pill",fullWidth:q=!1,size:R="md",activation:b="automatic",id:A,"aria-label":k,"aria-labelledby":h,className:j}){_.useKeyFocus();const u=n.useRef(null),y=n.useRef(null),w=n.useId(),I=A??w;s.useLiquidPill(u,y,r,l.map(e=>e.id).join("\0"));const p=e=>{e!==r&&S(e)},[c,L]=n.useState(null),x=l.some(e=>e.id===r),N=c!==null&&l.some(e=>e.id===c)?c:x?r:l[0]?.id,P=e=>{e.currentTarget.contains(e.relatedTarget)||L(null)},T=e=>{const i=u.current;if(!i)return;const a=Array.from(i.querySelectorAll('[role="tab"]')),o=a.indexOf(e.target);if(o===-1)return;const f=a.length-1,g=getComputedStyle(i).direction==="rtl",C=g?"ArrowLeft":"ArrowRight",D=g?"ArrowRight":"ArrowLeft";let t;if(e.key===C)t=o===f?0:o+1;else if(e.key===D)t=o===0?f:o-1;else if(e.key==="Home")t=0;else if(e.key==="End")t=f;else return;e.preventDefault(),a[t].focus(),b==="automatic"&&p(l[t].id)};return m.jsxs("div",{ref:u,id:I,role:"tablist","aria-label":k,"aria-labelledby":h,"data-testid":"liquid-tabs",style:s.LIQUID_STRIP_STYLE,className:s.liquidStripClassName(d,q,j),onKeyDown:T,onBlur:P,children:[m.jsx("div",{ref:y,"aria-hidden":!0,"data-testid":"liquid-tabs-pill",className:s.liquidPillClassName(d),style:s.LIQUID_PILL_STYLE}),l.map(e=>{const i=e.id===r;return m.jsx("button",{type:"button",role:"tab",id:F.liquidTabId(I,e.id),"aria-selected":i,"aria-controls":e.panelId,tabIndex:e.id===N?0:-1,"data-tab-id":e.id,"data-testid":`liquid-tab-${e.id}`,onClick:()=>p(e.id),onFocus:()=>L(e.id),className:s.liquidItemClassName({variant:d,fullWidth:q,size:R,isActive:i}),children:typeof e.label=="function"?e.label(i):e.label},e.id)})]})}exports.LiquidTabs=E;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),d=require("react"),o=require("./liquid-pill.cjs"),U=require("./liquid-tab-id.cjs"),O=require("./LiquidCount.cjs"),m=require("./liquid-count.cjs"),Q=require("../../../lib/labels.cjs"),B=require("../../../internal/key-focus.cjs");function K({tabs:t,activeTab:r,onChange:C,variant:c="pill",fullWidth:y=!1,size:A="md",activation:R="automatic",id:h,"aria-label":w,"aria-labelledby":N,className:j,labels:k}){B.useKeyFocus();const L=Q.withLabels(m.LIQUID_COUNT_LABELS,k),a=d.useRef(null),I=d.useRef(null),x=d.useId(),p=h??x;o.useLiquidPill(a,I,r,t.map(e=>e.id).join("\0"));const b=e=>{e!==r&&C(e)},[f,S]=d.useState(null),T=t.some(e=>e.id===r),P=f!==null&&t.some(e=>e.id===f)?f:T?r:t[0]?.id,_=e=>{e.currentTarget.contains(e.relatedTarget)||S(null)},D=e=>{const i=a.current;if(!i)return;const l=Array.from(i.querySelectorAll('[role="tab"]')),n=l.indexOf(e.target);if(n===-1)return;const q=l.length-1,g=getComputedStyle(i).direction==="rtl",E=g?"ArrowLeft":"ArrowRight",F=g?"ArrowRight":"ArrowLeft";let s;if(e.key===E)s=n===q?0:n+1;else if(e.key===F)s=n===0?q:n-1;else if(e.key==="Home")s=0;else if(e.key==="End")s=q;else return;e.preventDefault(),l[s].focus(),R==="automatic"&&b(t[s].id)};return u.jsxs("div",{ref:a,id:p,role:"tablist","aria-label":w,"aria-labelledby":N,"data-testid":"liquid-tabs",style:o.LIQUID_STRIP_STYLE,className:o.liquidStripClassName(c,y,j),onKeyDown:D,onBlur:_,children:[u.jsx("div",{ref:I,"aria-hidden":!0,"data-testid":"liquid-tabs-pill",className:o.liquidPillClassName(c),style:o.LIQUID_PILL_STYLE}),t.map(e=>{const i=e.id===r,l=typeof e.label=="function"?e.label(i):e.label;return u.jsx("button",{type:"button",role:"tab",id:U.liquidTabId(p,e.id),"aria-selected":i,"aria-controls":e.panelId,"aria-label":m.countName(l,e.count,L),tabIndex:e.id===P?0:-1,"data-tab-id":e.id,"data-testid":`liquid-tab-${e.id}`,onClick:()=>b(e.id),onFocus:()=>S(e.id),className:o.liquidItemClassName({variant:c,fullWidth:y,size:A,isActive:i}),children:m.shownCount(e.count)?u.jsx(O.LiquidCount,{label:l,count:e.count,labels:L}):l},e.id)})]})}exports.LiquidTabs=K;

package/dist/components/molecules/LiquidTabs/LiquidTabs.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 import { LiquidSize, LiquidVariant } from './liquid-pill';
+import { LiquidTabsLabels } from './liquid-count';
+export type { LiquidTabsLabels };
 export interface TabItem {
     id: string;
     /** Static label, or a render function that receives whether this tab is active. */
@@ -9,6 +11,18 @@ export interface TabItem {
      * every tab the same id when one panel swaps its content.
      */
     panelId?: string;
+    /**
+     * A number in a small mark beside the label, read as part of the tab's
+     * name: "Open, 12 items" (`labels.count` says it).
+     *
+     * **Zero shows**, as "0" and "0 items": a count that vanished at zero would
+     * change the tab's width and move every tab after it, and an empty list is
+     * worth saying. To hide it, pass `undefined` for zero. `undefined` means no
+     * count and no mark. A negative or fractional count isn't shown at all,
+     * never rounded or clamped. Large counts aren't abbreviated: 12,345 shows
+     * as "12,345" unless `labels.countMark` writes it shorter.
+     */
+    count?: number;
 }
 export interface LiquidTabsProps {
     tabs: TabItem[];
@@ -49,6 +63,8 @@ export interface LiquidTabsProps {
     "aria-labelledby"?: string;
     /** Extra classes applied to the outer container. */
     className?: string;
+    /** Every word a count says, with English defaults: see `TabItem.count`. */
+    labels?: Partial<LiquidTabsLabels>;
 }
 /**
  * A controlled tab strip with a liquid sliding indicator.
@@ -64,6 +80,9 @@ export interface LiquidTabsProps {
  * The pill follows `activeTab`, never the click, so a change the consumer
  * vetoes, or one that waits on navigation, never leaves it on the wrong tab.
  *
+ * A tab can carry a `count`, and a panel pairs with its tab by construction
+ * through `LiquidTabPanel`.
+ *
  * For navigation between routes, use `LiquidNav`, which renders links.
  */
-export declare function LiquidTabs({ tabs, activeTab, onChange, variant, fullWidth, size, activation, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, }: LiquidTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function LiquidTabs({ tabs, activeTab, onChange, variant, fullWidth, size, activation, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, labels, }: LiquidTabsProps): import("react/jsx-runtime").JSX.Element;