@blakesteve/roster 5.14.0 → 5.15.0

package/README.md

@@ -268,9 +268,9 @@ changes nothing.
 | token | default | reshapes |
 | ----- | ------- | -------- |
 | `--roster-radius-sm` | `0.25rem` | `Button` `xs`, `Checkbox` `sm` and `md`, `InlineCode`, `Link`, `MultiSelect`'s chip dismiss, the dismiss and reveal buttons in `Alert`, `Toast` and `PasswordInput` |
-| `--roster-radius-md` | `0.375rem` | `Button`, `Input`, `Textarea`, `Select`, `MultiSelect`, `Badge`, `Avatar` and its popover, `Checkbox` `lg`, `CheckboxGroup`'s panel, `Disclosure`, `Dialog`'s and `Sheet`'s close buttons, `Navbar`'s links and menu, popup panels, `Table` |
-| `--roster-radius-lg` | `0.5rem` | `Alert`, `Toast`, `Tooltip`, `CallToAction`, `EmptyState`, `ErrorState`, `LiquidTabs`, `MatchupCard`, `Navbar`'s mobile panel, `Skeleton` blocks (unless `--roster-skeleton-radius` is set) |
-| `--roster-radius-xl` | `0.75rem` | `Card`, `LiquidTabs`' `pill` strip |
+| `--roster-radius-md` | `0.375rem` | `Button`, `Input`, `Textarea`, `Select`, `MultiSelect`, `Badge`, `Avatar` and its popover, `Checkbox` `lg`, `CheckboxGroup`'s panel, `Disclosure`, `Dialog`'s and `Sheet`'s close buttons, `Navbar`'s links and menu, popup panels, `Table`, a plain `Tabs`' focus ring |
+| `--roster-radius-lg` | `0.5rem` | `Alert`, `Toast`, `Tooltip`, `CallToAction`, `EmptyState`, `ErrorState`, `Tabs`' liquid variant, `MatchupCard`, `Navbar`'s mobile panel, `Skeleton` blocks (unless `--roster-skeleton-radius` is set) |
+| `--roster-radius-xl` | `0.75rem` | `Card`, the liquid `Tabs`' `pill` strip |
 | `--roster-radius-2xl` | `1rem` | `Dialog`, the top of `Sheet` |
 | `--roster-radius-3xl` | `1.5rem` | nothing yet; wired for the first component that uses it |
 | `--roster-border-width` | `1px` | every 1px edge: borders, `divide-y`, the ring `Select`'s trigger and the anchored panels draw their edge with, and the rules in `Accordion` and `LabeledDivider` |
@@ -477,11 +477,12 @@ Replace the rule with the token:
 :root { --roster-primary-600-ink: #10142e; }
 ```
 
-`LiquidTabs` followed later: its active label reads `--roster-lt-text-active`,
-which defaults to `--roster-primary-500-ink`, the ink of the pill's default
-fill. A rule naming `rst:text-white` on a tab stops matching; a rule on
-`[role="tab"][aria-selected="true"]` still does. If you repaint the pill with
-`--roster-lt-pill`, set `--roster-lt-text-active` to match it.
+`LiquidTabs` followed later (now `Tabs`' liquid variant): its active label
+reads `--roster-lt-text-active`, which defaults to `--roster-primary-500-ink`,
+the ink of the pill's default fill. A rule naming `rst:text-white` on a tab
+stops matching; a rule on `[role="tab"][aria-selected="true"]` still does. If
+you repaint the pill with `--roster-lt-pill`, set `--roster-lt-text-active` to
+match it.
 
 **If you pass a foreground through `className`, add the hover modifier.** Solid
 variants now carry `hover:text-*`, and `tailwind-merge` resolves conflicts per
@@ -565,7 +566,7 @@ a click. A small tracker marks those elements: keyboard mode starts on a navigat
 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
-is mounted (Menu, the select family, Dialog, Sheet, RadioGroup, LiquidTabs,
+is mounted (Menu, the select family, Dialog, Sheet, RadioGroup, Tabs,
 Slider and the rest), on one set of document listeners.
 
 Your own components' rings come from your Tailwind, not Roster's, so they
@@ -1382,7 +1383,7 @@ What it promises:
   sideways at 320px. Nothing animates as an item leaves.
 
 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
+`items.length`, passed as a `Tabs` 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.
@@ -1983,17 +1984,54 @@ clicks and focus are one listener each on the row. Measured at 1,000 options
 in Chromium: mounting takes about 30ms longer than the default mode, a key
 moves focus within a millisecond, and the frame after it lands in about 7ms.
 
-### LiquidTabs
+### Tabs
 
-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.
+A controlled tab strip, on the WAI tabs pattern in every variant: one tab
+stop, arrows that wrap, Home and End, and `activation="manual"` for tabs that
+are costly to switch. Every tab is `type="button"`, so a strip inside a form
+never submits it.
 
-**Counts.** A tab or a nav link takes `count`, shown in a small mark after its
-label:
+```tsx
+import { Tabs } from "@blakesteve/roster";
+
+<Tabs aria-label="Project" tabs={[{ id: "overview", label: "Overview" }, …]} activeTab={tab} onChange={setTab} />
+```
+
+**Plain, by default.** The selected tab is underlined, 2px, on a 1px rule
+that runs the strip's width. The other tabs are muted and darken under the
+pointer, with a lighter underline as a hint. The weight never changes, so
+selecting a tab never moves the row. Keyboard focus is Roster's ring. The
+underline is a border, so it stays in forced colors, and only the selected
+tab draws one there. Its colors are tokens, each set in light and dark:
+
+| token | light | dark | paints |
+| ----- | ----- | ---- | ------ |
+| `--roster-tabs-indicator` | `primary-500` | `primary-400` | the selected tab's underline |
+| `--roster-tabs-indicator-hover` | `gray-300` | `gray-600` | the underline under the pointer |
+| `--roster-tabs-border` | `gray-200` | `gray-800` | the rule along the strip |
+| `--roster-tabs-text` | `gray-500` | `gray-400` | a tab at rest |
+| `--roster-tabs-text-hover` | `gray-900` | `gray-100` | a tab under the pointer |
+| `--roster-tabs-text-active` | `gray-900` | `gray-100` | the selected tab |
+
+On Roster's own surfaces the underline clears 3:1 against the page (6.37:1 in
+light, 7.31:1 in dark), a label at rest 4.5:1 (5.99:1 and 7.83:1), and a
+count's number 4.5:1 against its mark (5.07:1 at the least). `fullWidth` gives
+every tab an equal share of the row, and `size="lg"` makes each at least 44px
+tall.
+
+**Liquid.** `variant="liquid"` draws the sliding pill instead:
+`liquidStyle="pill"` (the default), a floating pill in a padded strip, or
+`"filled"`, where the selected tab fills its cell. The pill follows
+`activeTab`, never the click, and moves in two phases, a stretch and a
+settle, or not at all under reduced motion. Its colors are the
+`--roster-lt-*` tokens. `liquidStyle` is a type error without
+`variant="liquid"`.
+
+**Counts.** A tab takes `count`, in every variant, and so does a `LiquidNav` link, shown
+in a small mark after its label:
 
 ```tsx
-<LiquidTabs tabs={[{ id: "queue", label: "Queue", count: queue.length }, …]} … />
+<Tabs tabs={[{ id: "queue", label: "Queue", count: queue.length }, …]} … />
 ```
 
 The count is part of the name, "Queue, 12 items" rather than "Queue12" or
@@ -2014,29 +2052,29 @@ labels={{ count: (n) => (n === 1 ? "1 game" : `${n.toLocaleString()} games`) }}
   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
+  color on a 12% tint of it. So it follows the tab through every state, every
+  variant and both themes, and through any palette set on the tabs' tokens,
+  and its number clears 4.5:1 in every state on Roster's own (4.88:1 at the
+  least, on the liquid pill). `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 liquid 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:
+**The panel.** `TabPanel` is the `role="tabpanel"` a tab controls, in every
+variant, paired with it by construction: its `id` is the tab's `panelId`, and
+its `aria-labelledby` points at the tab through `tabId`, so the panel takes the
+tab's name, count included. Give the `Tabs` 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>
+<Tabs id="lists" tabs={tabs.map((t) => ({ ...t, panelId: "lists-panel" }))} activeTab={list} onChange={setList} />
+<TabPanel tabsId="lists" id="lists-panel" tab={list}>…</TabPanel>
 
 // 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>
+<TabPanel tabsId="views" id="views-board" tab="board" activeTab={view}>…</TabPanel>
+<TabPanel tabsId="views" id="views-list" tab="list" activeTab={view} keepMounted>…</TabPanel>
 ```
 
 Per tab, a panel that isn't selected stays in the page, hidden, so every tab's
@@ -2048,6 +2086,22 @@ 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.
 
+**From `LiquidTabs`.** `LiquidTabs` is deprecated, and keeps working,
+unchanged: it renders `Tabs` with the liquid variant, the same markup, styles
+and test ids it always has. To move, rename it and add the variant; a
+`variant="filled"` moves to `liquidStyle`:
+
+```tsx
+<LiquidTabs … />                    →  <Tabs variant="liquid" … />
+<LiquidTabs variant="filled" … />   →  <Tabs variant="liquid" liquidStyle="filled" … />
+<LiquidTabPanel … />                →  <TabPanel … />
+liquidTabId(id, tab)                →  tabId(id, tab)
+```
+
+Nothing else changes: the props, ids, keys, pill and `data-testid` hooks are
+the same. `LiquidTabsLabels` is now `TabsLabels`, and the old name still works.
+`LiquidNav`, the liquid strip as a `nav` of links, is unchanged.
+
 ### Components that render links
 
 `Breadcrumbs` renders a plain `<a>` by default, which is right for a static
@@ -2098,8 +2152,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. `LiquidTabs` and `LiquidNav` take `labels` for the words a count
-says. Words that take a number or a name are functions, so a language
+the like. `Tabs`, `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.
@@ -2210,9 +2264,9 @@ function App() {
 | `DescriptionList` | Label and value pairs as a real `<dl>`: inline, stacked, or split           |
 | `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, 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 |
+| `LiquidNav`       | The liquid tab strip as a `nav` of links; takes a router's link component   |
+| `LiquidTabs`      | Deprecated: `Tabs` with `variant="liquid"`, which it renders (see [Tabs](#tabs)) |
+| `LiquidTabPanel`  | Deprecated: the old name of `TabPanel`                                      |
 | `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)) |
@@ -2225,6 +2279,8 @@ function App() {
 | `RadioGroup`      | Radio set reporting one `string`; descriptions, error, 44px targets         |
 | `Slider`          | A value along a track, starting in the middle or not set on request; named snap-point chips, a visible number, the full keyboard, 44px targets (see [Slider](#slider)) |
 | `RangeSlider`     | A low and a high on one track: two thumbs that meet and never cross, each its own slider to the keyboard (see [RangeSlider](#rangeslider)) |
+| `Tabs`            | Tab strip, plain (an underline) or liquid (a sliding pill); arrow keys, one tab stop, counts, 44px `lg` size (see [Tabs](#tabs)) |
+| `TabPanel`        | The panel a `Tabs` tab controls, named for its tab by construction; one swapping panel or one per tab |
 | `Toast`           | Transient floating notice; `Toaster` + the imperative `toast` handle        |
 
 ### Organisms
@@ -2390,6 +2446,13 @@ npm run check:prefix
 npm run check:classes-emit
 ```
 
+In CI the Storybook projects run inside Playwright's own image for the locked
+version (`mcr.microsoft.com/playwright:v<version>-noble` in `ci.yml`), so no
+browser or system library is installed from Ubuntu's mirrors. Bumping
+`playwright` means bumping that tag too: `src/ci-workflow.test.ts` fails until
+they match. Every job and test step has a time limit, so a stall fails with
+GitHub's "has timed out" message instead of running for hours.
+
 Three guards are worth knowing about, because the bugs they catch cannot be
 reproduced from inside this repo.
 

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;