@blakesteve/roster 5.12.0 → 5.14.0

package/dist/components/molecules/Carousel/carousel-math.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=6,i=1;function a(t){return Math.max(0,t.scrollWidth-t.clientWidth)}function h(t){return a(t)>i}function S(t){return t.scrollLeft>i}function L(t){return t.scrollLeft<a(t)-i}function s(t,e){const n=t.items[e];if(!n)return 0;const r=t.align==="start"?n.start-t.paddingStart:(n.start+n.end)/2-(t.paddingStart+(t.clientWidth-t.paddingStart-t.paddingEnd)/2);return Math.min(Math.max(0,r),a(t))}function u(t){const e=t.scrollLeft-i,n=t.scrollLeft+t.clientWidth+i,r=[];return t.items.forEach((l,c)=>{l.start>=e&&l.end<=n&&r.push(c)}),r}function f(t){let e=0,n=1/0;return t.items.forEach((r,l)=>{const c=Math.abs(s(t,l)-t.scrollLeft);c<n&&(e=l,n=c)}),e}function m(t){const e=u(t);return e.length?e[0]:f(t)}function x(t,e){const n=t.items.length;if(!n)return 0;const r=u(t),l=r.length?r[0]:f(t),c=Math.max(1,r.length);let o=Math.min(n-1,Math.max(0,l+e*c));for(;o>0&&o<n-1&&Math.abs(s(t,o)-t.scrollLeft)<=i;)o+=e;return s(t,o)}exports.CAROUSEL_DRAG_THRESHOLD=d;exports.CAROUSEL_TOLERANCE=i;exports.canScrollNext=L;exports.canScrollPrev=S;exports.currentIndex=m;exports.fullyVisible=u;exports.maxScroll=a;exports.nearestIndex=f;exports.overflows=h;exports.pageTarget=x;exports.snapPosition=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=6,a=1;function u(t){return Math.max(0,t.scrollWidth-t.clientWidth)}function m(t){return u(t)>a}function L(t){return t.scrollLeft>a}function x(t){return t.scrollLeft<u(t)-a}function o(t,n){const e=t.items[n];if(!e)return 0;const r=t.align==="start"?e.start-t.paddingStart:(e.start+e.end)/2-(t.paddingStart+(t.clientWidth-t.paddingStart-t.paddingEnd)/2);return Math.min(Math.max(0,r),u(t))}function f(t){const n=t.scrollLeft-a,e=t.scrollLeft+t.clientWidth+a,r=[];return t.items.forEach((i,l)=>{i.start>=n&&i.end<=e&&r.push(l)}),r}function h(t){let n=0,e=1/0;return t.items.forEach((r,i)=>{const l=Math.abs(o(t,i)-t.scrollLeft);l<e&&(n=i,e=l)}),n}function E(t){const n=f(t);return n.length?n[0]:h(t)}function b(t,n){const e=t.items.length;if(!e)return 0;const r=f(t),i=r.length?r[0]:h(t),l=Math.max(1,r.length);let c=Math.min(e-1,Math.max(0,i+n*l));for(;c>0&&c<e-1&&Math.abs(o(t,c)-t.scrollLeft)<=a;)c+=n;return o(t,c)}function v(t){return Math.max(1,f(t).length)}function M(t,n,e=t.scrollLeft){const r=t.items[n];if(!r)return null;const i=s=>[s+t.paddingStart-a,s+t.clientWidth-t.paddingEnd+a],[l,c]=i(e);if(r.start>=l&&r.end<=c)return null;if(t.align==="center"||r.start<l)return o(t,n);for(let s=0;s<=n;s++){const d=o(t,s);if(d<e)continue;const[,S]=i(d);if(r.end<=S)return d}return o(t,n)}exports.CAROUSEL_DRAG_THRESHOLD=p;exports.CAROUSEL_TOLERANCE=a;exports.canScrollNext=x;exports.canScrollPrev=L;exports.currentIndex=E;exports.fullyVisible=f;exports.maxScroll=u;exports.nearestIndex=h;exports.overflows=m;exports.pageStep=v;exports.pageTarget=b;exports.revealTarget=M;exports.snapPosition=o;

package/dist/components/molecules/Carousel/carousel-math.d.ts

@@ -58,3 +58,19 @@ export declare function currentIndex(g: CarouselGeometry): number;
  * Returns the target `scrollLeft`.
  */
 export declare function pageTarget(g: CarouselGeometry, direction: 1 | -1): number;
+/**
+ * How far Page Up and Page Down move in selection mode: as many options as
+ * are wholly in view, at least one.
+ */
+export declare function pageStep(g: CarouselGeometry): number;
+/**
+ * The `scrollLeft` that brings item `i` wholly into view, measured from
+ * `from` (where the row is, or where a glide is taking it), or `null` when it
+ * already is. Inside the scroll padding, so a revealed item clears the gutter.
+ *
+ * The row moves as little as it can and always lands on a snap point, which
+ * the browser would snap it to anyway: an item off the leading side snaps to
+ * its own place; one off the trailing side lands on the first snap point that
+ * shows it whole. With `center`, an item out of view is centered.
+ */
+export declare function revealTarget(g: CarouselGeometry, i: number, from?: number): number | null;

package/dist/components/molecules/Carousel/carousel-math.js

@@ -1,58 +1,77 @@
-const E = 6, u = 1;
-function a(t) {
+const L = 6, h = 1;
+function u(t) {
   return Math.max(0, t.scrollWidth - t.clientWidth);
 }
-function L(t) {
-  return a(t) > 1;
+function R(t) {
+  return u(t) > 1;
 }
-function h(t) {
+function A(t) {
   return t.scrollLeft > 1;
 }
-function d(t) {
-  return t.scrollLeft < a(t) - 1;
+function O(t) {
+  return t.scrollLeft < u(t) - 1;
 }
-function o(t, e) {
-  const n = t.items[e];
-  if (!n) return 0;
-  const r = t.align === "start" ? n.start - t.paddingStart : (n.start + n.end) / 2 - (t.paddingStart + (t.clientWidth - t.paddingStart - t.paddingEnd) / 2);
-  return Math.min(Math.max(0, r), a(t));
+function l(t, n) {
+  const e = t.items[n];
+  if (!e) return 0;
+  const r = t.align === "start" ? e.start - t.paddingStart : (e.start + e.end) / 2 - (t.paddingStart + (t.clientWidth - t.paddingStart - t.paddingEnd) / 2);
+  return Math.min(Math.max(0, r), u(t));
 }
-function l(t) {
-  const e = t.scrollLeft - 1, n = t.scrollLeft + t.clientWidth + 1, r = [];
-  return t.items.forEach((i, s) => {
-    i.start >= e && i.end <= n && r.push(s);
+function f(t) {
+  const n = t.scrollLeft - 1, e = t.scrollLeft + t.clientWidth + 1, r = [];
+  return t.items.forEach((i, c) => {
+    i.start >= n && i.end <= e && r.push(c);
   }), r;
 }
-function f(t) {
-  let e = 0, n = 1 / 0;
+function E(t) {
+  let n = 0, e = 1 / 0;
   return t.items.forEach((r, i) => {
-    const s = Math.abs(o(t, i) - t.scrollLeft);
-    s < n && (e = i, n = s);
-  }), e;
+    const c = Math.abs(l(t, i) - t.scrollLeft);
+    c < e && (n = i, e = c);
+  }), n;
 }
-function R(t) {
-  const e = l(t);
-  return e.length ? e[0] : f(t);
-}
-function A(t, e) {
-  const n = t.items.length;
-  if (!n) return 0;
-  const r = l(t), i = r.length ? r[0] : f(t), s = Math.max(1, r.length);
-  let c = Math.min(n - 1, Math.max(0, i + e * s));
-  for (; c > 0 && c < n - 1 && Math.abs(o(t, c) - t.scrollLeft) <= 1; )
-    c += e;
-  return o(t, c);
+function C(t) {
+  const n = f(t);
+  return n.length ? n[0] : E(t);
+}
+function S(t, n) {
+  const e = t.items.length;
+  if (!e) return 0;
+  const r = f(t), i = r.length ? r[0] : E(t), c = Math.max(1, r.length);
+  let s = Math.min(e - 1, Math.max(0, i + n * c));
+  for (; s > 0 && s < e - 1 && Math.abs(l(t, s) - t.scrollLeft) <= 1; )
+    s += n;
+  return l(t, s);
+}
+function m(t) {
+  return Math.max(1, f(t).length);
+}
+function p(t, n, e = t.scrollLeft) {
+  const r = t.items[n];
+  if (!r) return null;
+  const i = (a) => [a + t.paddingStart - 1, a + t.clientWidth - t.paddingEnd + 1], [c, s] = i(e);
+  if (r.start >= c && r.end <= s) return null;
+  if (t.align === "center" || r.start < c) return l(t, n);
+  for (let a = 0; a <= n; a++) {
+    const o = l(t, a);
+    if (o < e) continue;
+    const [, d] = i(o);
+    if (r.end <= d) return o;
+  }
+  return l(t, n);
 }
 export {
-  E as CAROUSEL_DRAG_THRESHOLD,
-  u as CAROUSEL_TOLERANCE,
-  d as canScrollNext,
-  h as canScrollPrev,
-  R as currentIndex,
-  l as fullyVisible,
-  a as maxScroll,
-  f as nearestIndex,
-  L as overflows,
-  A as pageTarget,
-  o as snapPosition
+  L as CAROUSEL_DRAG_THRESHOLD,
+  h as CAROUSEL_TOLERANCE,
+  O as canScrollNext,
+  A as canScrollPrev,
+  C as currentIndex,
+  f as fullyVisible,
+  u as maxScroll,
+  E as nearestIndex,
+  R as overflows,
+  m as pageStep,
+  S as pageTarget,
+  p as revealTarget,
+  l as snapPosition
 };

package/dist/components/molecules/Carousel/carousel-selection.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=700;function d(r,t,n,i){if(!r||!n)return-1;const e=[...n].every(l=>l===n[0]),f=e?n[0]:n,u=e?t+1:t;for(let l=0;l<r;l++){const a=((u+l)%r+r)%r;if(i(a).trim().toLowerCase().startsWith(f))return a}return-1}function h(r,t,n){if(n===null)return null;const i=r.indexOf(n);if(i===-1)return null;for(let e=i+1;e<r.length;e++)if(t.has(r[e]))return r[e];for(let e=i-1;e>=0;e--)if(t.has(r[e]))return r[e];return null}exports.TYPEAHEAD_RESET_MS=s;exports.survivingNeighbor=h;exports.typeaheadIndex=d;

package/dist/components/molecules/Carousel/carousel-selection.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Selection mode's decisions that need no DOM: which option type-ahead lands
+ * on, and where the active option goes when the one it was on leaves.
+ *
+ * Pure, so they're tested with literals; the stories drive the real keys.
+ */
+/** How long a pause starts type-ahead over, in ms. */
+export declare const TYPEAHEAD_RESET_MS = 700;
+/**
+ * The option type-ahead lands on, or -1 for none.
+ *
+ * `text` is everything typed since the last pause, lowercased. One letter, or
+ * the same letter again and again, steps through the options starting with
+ * it, beginning after `from` and wrapping, so pressing "g" three times visits
+ * the third option starting with "g". Anything longer matches from `from`
+ * itself, so "gl" typed after "g" stays put when the active option already
+ * starts with "gl".
+ *
+ * `labelAt(i)` is option `i`'s text, read only as far as the search goes.
+ */
+export declare function typeaheadIndex(count: number, from: number, text: string, labelAt: (index: number) => string): number;
+/**
+ * Where the active option goes when its own has left the row: the nearest
+ * option after it that's still there, in the order before the change, else
+ * the nearest before it. `null` when none of its old neighbors is left, or
+ * when it wasn't in the old order at all.
+ */
+export declare function survivingNeighbor(previous: readonly string[], present: ReadonlySet<string>, lost: string | null): string | null;

package/dist/components/molecules/Carousel/carousel-selection.js

@@ -0,0 +1,23 @@
+const u = 700;
+function h(r, e, t, i) {
+  if (!r || !t) return -1;
+  const n = [...t].every((f) => f === t[0]), a = n ? t[0] : t, s = n ? e + 1 : e;
+  for (let f = 0; f < r; f++) {
+    const l = ((s + f) % r + r) % r;
+    if (i(l).trim().toLowerCase().startsWith(a)) return l;
+  }
+  return -1;
+}
+function c(r, e, t) {
+  if (t === null) return null;
+  const i = r.indexOf(t);
+  if (i === -1) return null;
+  for (let n = i + 1; n < r.length; n++) if (e.has(r[n])) return r[n];
+  for (let n = i - 1; n >= 0; n--) if (e.has(r[n])) return r[n];
+  return null;
+}
+export {
+  u as TYPEAHEAD_RESET_MS,
+  c as survivingNeighbor,
+  h as typeaheadIndex
+};

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;