@blakesteve/roster 5.13.0 → 5.15.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.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { LiquidTabsLabels } from './liquid-count';
+import { TabsLabels } from './liquid-count';
 /**
  * A tab's or a link's label, with its count beside it when it has one.
  *
@@ -25,5 +25,5 @@ import { LiquidTabsLabels } from './liquid-count';
 export declare function LiquidCount({ label, count, labels }: {
     label: ReactNode;
     count: number | undefined;
-    labels: LiquidTabsLabels;
+    labels: TabsLabels;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +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;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("../Tabs/TabPanel.cjs");function t(e){return n.jsx(i.TabPanel,{...e})}exports.LiquidTabPanel=t;

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

@@ -1,52 +1,13 @@
-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;
-}
+import { TabPanelProps } from '../Tabs/TabPanel';
 /**
- * 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.
+ * @deprecated Renamed `TabPanelProps`; the props are the same.
+ */
+export type LiquidTabPanelProps = TabPanelProps;
+/**
+ * The panel a tab controls, named for its tab by construction.
  *
- * 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.
+ * @deprecated Renamed `TabPanel`, which this renders, for `Tabs` of every
+ * variant and for `LiquidTabs`. Replace the name; nothing else changes. This
+ * name keeps working.
  */
-export declare function LiquidTabPanel({ tabsId, id, tab, activeTab, keepMounted, tabIndex, children, ...rest }: LiquidTabPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function LiquidTabPanel(props: LiquidTabPanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,32 +1,9 @@
 "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
-    }
-  );
+import { jsx as e } from "react/jsx-runtime";
+import { TabPanel as i } from "../Tabs/TabPanel.js";
+function t(r) {
+  return /* @__PURE__ */ e(i, { ...r });
 }
 export {
-  w as LiquidTabPanel
+  t as LiquidTabPanel
 };

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

@@ -1 +1 @@
-"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;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../Tabs/Tabs.cjs");function r({variant:i="pill",...e}){return t.jsx(u.Tabs,{...e,variant:"liquid",liquidStyle:i})}exports.LiquidTabs=r;

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

@@ -1,29 +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. */
-    label: ReactNode | ((isActive: boolean) => ReactNode);
-    /**
-     * The `id` of the panel this tab controls, which sets `aria-controls`. Give
-     * 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;
-}
+import { TabItem, TabsLabels } from '../Tabs/Tabs';
+export type { TabItem };
+export type { LiquidTabsLabels } from './liquid-count';
 export interface LiquidTabsProps {
     tabs: TabItem[];
     /** The `id` of the currently active tab. */
@@ -64,25 +42,20 @@ export interface LiquidTabsProps {
     /** Extra classes applied to the outer container. */
     className?: string;
     /** Every word a count says, with English defaults: see `TabItem.count`. */
-    labels?: Partial<LiquidTabsLabels>;
+    labels?: Partial<TabsLabels>;
 }
 /**
  * A controlled tab strip with a liquid sliding indicator.
  *
- * Follows the WAI tabs pattern: only the selected tab is in the tab order,
- * Left and Right move between tabs and wrap, Home and End go to the ends. If
- * `activeTab` matches no tab, the first tab takes the tab stop and no pill
- * shows.
- *
- * Until script has measured the pill, the active tab paints the pill's color
- * itself, so server-rendered HTML shows the selection too.
- *
- * 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.
+ * @deprecated Use `Tabs` with `variant="liquid"`, which renders exactly this:
+ * the same markup, styles, keys and pill. `variant` becomes `liquidStyle`, and
+ * every other prop is the same:
  *
- * A tab can carry a `count`, and a panel pairs with its tab by construction
- * through `LiquidTabPanel`.
+ * ```tsx
+ * <LiquidTabs variant="filled" … />  // before
+ * <Tabs variant="liquid" liquidStyle="filled" … />  // after
+ * ```
  *
- * For navigation between routes, use `LiquidNav`, which renders links.
+ * `LiquidTabs` keeps working, unchanged.
  */
-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;
+export declare function LiquidTabs({ variant, ...rest }: LiquidTabsProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/molecules/LiquidTabs/liquid-count.d.ts

@@ -1,9 +1,9 @@
 /**
- * Counts on a tab or a nav link: what `LiquidTabs` and `LiquidNav` share
- * about them. Internal; the type is exported from `LiquidTabs`.
+ * Counts on a tab or a nav link: what `Tabs`, `LiquidTabs` and `LiquidNav`
+ * share about them. Internal; the type is exported from `Tabs`.
  */
 /** Every word a count says. Pass any of them in `labels` to replace it. */
-export interface LiquidTabsLabels {
+export interface TabsLabels {
     /**
      * What a count says after the label, as part of the tab's accessible name:
      * "12 items", so the tab reads "Open, 12 items". Name your own noun, with
@@ -19,7 +19,9 @@ export interface LiquidTabsLabels {
      */
     countMark: (count: number) => string;
 }
-export declare const LIQUID_COUNT_LABELS: LiquidTabsLabels;
+/** @deprecated Renamed `TabsLabels`; the words are the same. */
+export type LiquidTabsLabels = TabsLabels;
+export declare const LIQUID_COUNT_LABELS: TabsLabels;
 /**
  * Whether a count gets a mark: a whole number, zero or more. `undefined`
  * means no count. A negative or fractional count, or `NaN`, isn't shown at
@@ -34,4 +36,4 @@ export declare const shownCount: (count: number | undefined) => count is number;
  * visually hidden part, so the hidden ", 12 items" reads "Open , 12 items".
  * A label that's a node keeps that content name, which is spoken the same.
  */
-export declare const countName: (label: unknown, count: number | undefined, labels: LiquidTabsLabels) => string | undefined;
+export declare const countName: (label: unknown, count: number | undefined, labels: TabsLabels) => string | undefined;

package/dist/components/molecules/LiquidTabs/liquid-tab-id.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function i(t,e){return`${t}-tab-${e}`}exports.liquidTabId=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../Tabs/tab-id.cjs"),e=t.tabId;exports.liquidTabId=e;

package/dist/components/molecules/LiquidTabs/liquid-tab-id.d.ts

@@ -1,12 +1,7 @@
 /**
- * The `id` a `LiquidTabs` tab renders with, for a panel's `aria-labelledby`.
+ * The `id` a tab renders with, for a panel's `aria-labelledby`.
  *
- * ```tsx
- * <LiquidTabs id="views" tabs={tabs} activeTab={view} onChange={setView} />
- * <div role="tabpanel" id="views-panel" aria-labelledby={liquidTabId("views", view)}>
- * ```
- *
- * The tab's own `id` is used verbatim, so keep it free of whitespace. A module
- * of its own, with no React in it, so a server component can call it too.
+ * @deprecated Renamed `tabId`, which is the same function: `Tabs` and
+ * `LiquidTabs` give their tabs the same ids. This name keeps working.
  */
-export declare function liquidTabId(listId: string, tabId: string): string;
+export declare const liquidTabId: (listId: string, tab: string) => string;

package/dist/components/molecules/LiquidTabs/liquid-tab-id.js

@@ -1,6 +1,5 @@
-function n(t, i) {
-  return `${t}-tab-${i}`;
-}
+import { tabId as o } from "../Tabs/tab-id.js";
+const d = o;
 export {
-  n as liquidTabId
+  d as liquidTabId
 };

package/dist/components/molecules/Tabs/TabPanel.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),t=require("react"),p=require("./tab-id.cjs"),x='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 m({tabsId:d,id:l,tab:n,activeTab:a,keepMounted:b=!1,tabIndex:u,children:c,...f}){const r=t.useRef(null),o=a===void 0||a===n,[h,v]=t.useState(!1);return t.useLayoutEffect(()=>{const e=r.current;if(!e)return;const s=()=>v(!!e.querySelector(x));if(s(),typeof MutationObserver>"u")return;const i=new MutationObserver(s);return i.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["disabled","tabindex","href","contenteditable"]}),()=>i.disconnect()},[]),y.jsx("div",{...f,ref:r,role:"tabpanel",id:l,"aria-labelledby":p.tabId(d,n),hidden:!o,tabIndex:u??(h?void 0:0),"data-tab-panel":"",children:o||b?c:null})}exports.TabPanel=m;