@charcuterie/ui 3.30.0 → 3.31.0

package/dist/Tabs/PanelTabs.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import type { TabsPanelProps } from "./Tabs.tsx";
+/**
+ * The panel bar — every tab a `<button>`, every section a
+ * `role="tabpanel"` this component renders and hides. See `Tabs`
+ * for which of the two bars a screen wants.
+ *
+ * The composition is two hooks and one decision:
+ *
+ * ```ts
+ * const selection = useSinglePicker({ selectedValue: initialKey })
+ * const focus = useRovingFocus({ activeValue: initialKey })
+ *
+ * // `automatic` is this line, and `manual` is its absence.
+ * if (activation === "automatic") selection.select(focus.activeValue)
+ * ```
+ *
+ * ### Selection, not visibility — and the difference is not cosmetic
+ *
+ * M4 built this on `VisibilityGroup`, and the panels do end up
+ * one-at-a-time either way, because the two cores are the same
+ * shape. But the thing that **registers** here is the tab, not the
+ * panel, and what a tab bar is asking is *which one did you pick*.
+ * `SinglePicker` is the kind that answers that; the panel's
+ * `hidden` is derived from the answer.
+ *
+ * Reading it the other way round cost something concrete: it made
+ * `aria-selected` a report about a *panel's* visibility, so a
+ * consumer wanting a tab bar with no panels at all — a segmented
+ * filter, a view switcher that swaps a route — had to model its
+ * choice as a group of visibilities it did not have. `Alert`'s
+ * sibling `SegmentedControl` is exactly that consumer, and it now
+ * shares this component's core rather than hand-rolling a fourth
+ * one.
+ * [Decision](../../../../docs/decisions/2026-07-30-tab-selection-is-a-single-picker.md).
+ *
+ * ### What it does not use, and why that is the right answer
+ *
+ * The plan expected `createLinkedIds` here as well. It does not
+ * fit, and forcing it would have been the wrong call: that kind
+ * exists for a **dynamic** trigger↔target pair — a `Popover` whose
+ * panel mounts and unmounts, where the multiset is what stops
+ * `aria-controls` pointing at a node React has already removed. A
+ * tab bar's pairing is static and known at render, so the ids come
+ * from one `useUniqueId` and cannot get out of step at all.
+ *
+ * ### Focus is moved deliberately, and only then
+ *
+ * `RovingFocus` is state; something still has to call `.focus()`.
+ * That happens only while the tablist already contains the focused
+ * element — otherwise mounting a tab bar, or any parent re-render
+ * that moved `activeValue`, yanks the caret out of whatever the
+ * user was actually doing.
+ */
+export declare const PanelTabs: ({ activation, activeKey, className, label, onChange, orientation, tabs, }: TabsPanelProps) => ReactNode;
+//# sourceMappingURL=PanelTabs.d.ts.map

package/dist/Tabs/PanelTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTabs.d.ts","sourceRoot":"","sources":["../../src/Tabs/PanelTabs.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAgBhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,SAAS,GAAI,2EAQvB,cAAc,KAAG,SA6KnB,CAAA"}

package/dist/Tabs/PanelTabs.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { selectTabIndex, useRovingFocus, useSinglePicker, useUniqueId, } from "@charcuterie/logic";
+import { useCallback, useEffect, useRef } from "react";
+import { toClassName } from "../toClassName.js";
+import { TabTrigger } from "./TabTrigger.js";
+import { toTabListClass } from "./tabStyles.js";
+const ORIENTATION_KEYS = {
+    horizontal: {
+        next: "ArrowRight",
+        previous: "ArrowLeft",
+    },
+    vertical: { next: "ArrowDown", previous: "ArrowUp" },
+};
+/**
+ * The panel bar — every tab a `<button>`, every section a
+ * `role="tabpanel"` this component renders and hides. See `Tabs`
+ * for which of the two bars a screen wants.
+ *
+ * The composition is two hooks and one decision:
+ *
+ * ```ts
+ * const selection = useSinglePicker({ selectedValue: initialKey })
+ * const focus = useRovingFocus({ activeValue: initialKey })
+ *
+ * // `automatic` is this line, and `manual` is its absence.
+ * if (activation === "automatic") selection.select(focus.activeValue)
+ * ```
+ *
+ * ### Selection, not visibility — and the difference is not cosmetic
+ *
+ * M4 built this on `VisibilityGroup`, and the panels do end up
+ * one-at-a-time either way, because the two cores are the same
+ * shape. But the thing that **registers** here is the tab, not the
+ * panel, and what a tab bar is asking is *which one did you pick*.
+ * `SinglePicker` is the kind that answers that; the panel's
+ * `hidden` is derived from the answer.
+ *
+ * Reading it the other way round cost something concrete: it made
+ * `aria-selected` a report about a *panel's* visibility, so a
+ * consumer wanting a tab bar with no panels at all — a segmented
+ * filter, a view switcher that swaps a route — had to model its
+ * choice as a group of visibilities it did not have. `Alert`'s
+ * sibling `SegmentedControl` is exactly that consumer, and it now
+ * shares this component's core rather than hand-rolling a fourth
+ * one.
+ * [Decision](../../../../docs/decisions/2026-07-30-tab-selection-is-a-single-picker.md).
+ *
+ * ### What it does not use, and why that is the right answer
+ *
+ * The plan expected `createLinkedIds` here as well. It does not
+ * fit, and forcing it would have been the wrong call: that kind
+ * exists for a **dynamic** trigger↔target pair — a `Popover` whose
+ * panel mounts and unmounts, where the multiset is what stops
+ * `aria-controls` pointing at a node React has already removed. A
+ * tab bar's pairing is static and known at render, so the ids come
+ * from one `useUniqueId` and cannot get out of step at all.
+ *
+ * ### Focus is moved deliberately, and only then
+ *
+ * `RovingFocus` is state; something still has to call `.focus()`.
+ * That happens only while the tablist already contains the focused
+ * element — otherwise mounting a tab bar, or any parent re-render
+ * that moved `activeValue`, yanks the caret out of whatever the
+ * user was actually doing.
+ */
+export const PanelTabs = ({ activation = "automatic", activeKey, className, label, onChange, orientation = "horizontal", tabs, }) => {
+    const baseId = useUniqueId();
+    const tablistRef = useRef(null);
+    const tabElements = useRef(new Map());
+    const initialKey = activeKey ??
+        tabs.find((one) => !one.isDisabled)?.key ??
+        null;
+    const selection = useSinglePicker({
+        onChange,
+        selectedValue: initialKey,
+    });
+    const focus = useRovingFocus({
+        activeValue: initialKey,
+    });
+    const { select } = selection;
+    const { activeValue, setActiveValue } = focus;
+    /**
+     * Selected **or** pending, and the fallback is load-bearing.
+     *
+     * Members register from an effect, so on the first paint
+     * `selectedValue` is still null and the intent lives in
+     * `pendingValue` — a tab bar reading only the former renders with
+     * no tab selected and no panel shown, then corrects itself a
+     * frame later. It is a flash on a fast machine and a visible
+     * blank on a kiosk Pi.
+     *
+     * The core distinguishes the two on purpose, which is why this
+     * belongs here rather than in the selector — unlike
+     * `RovingFocus`, where the equivalent first-paint hole was in
+     * `selectTabIndex` itself and got fixed there.
+     */
+    const shownKey = selection.selectedValue ?? selection.pendingValue;
+    const selectTab = useCallback((key) => {
+        // Both, because a pointer press moves focus *and* chooses.
+        // Only selecting would leave `automatic`'s effect below to
+        // put the old panel straight back.
+        setActiveValue(key);
+        select(key);
+    }, [select, setActiveValue]);
+    useEffect(() => {
+        // Automatic activation, and the only behaviour that differs
+        // between the two modes. `select` is idempotent, so this is a
+        // no-op on every render where focus did not actually move.
+        if (activation === "automatic" &&
+            activeValue !== null) {
+            select(activeValue);
+        }
+    }, [activation, activeValue, select]);
+    useEffect(() => {
+        const tablist = tablistRef.current;
+        if (!tablist ||
+            activeValue === null ||
+            !tablist.contains(document.activeElement)) {
+            return;
+        }
+        tabElements.current.get(activeValue)?.focus();
+    }, [activeValue]);
+    const keys = ORIENTATION_KEYS[orientation];
+    return (_jsxs("div", { className: toClassName("flex flex-col gap-3", className), children: [_jsx("div", { "aria-label": label, "aria-orientation": orientation, className: toTabListClass(orientation), onKeyDown: (keyEvent) => {
+                    const commands = {
+                        [keys.next]: focus.next,
+                        [keys.previous]: focus.previous,
+                        End: focus.last,
+                        Home: focus.first,
+                    };
+                    const command = commands[keyEvent.key];
+                    if (command) {
+                        // Arrow keys scroll the page by default, and a tab bar
+                        // that scrolls the window while it moves focus is the
+                        // hand-rolled version of this component.
+                        keyEvent.preventDefault();
+                        command();
+                        return;
+                    }
+                    // `manual`'s commit. In `automatic` the panel is showing
+                    // already, so this is the no-op that makes Enter behave
+                    // identically in both modes.
+                    if ((keyEvent.key === "Enter" ||
+                        keyEvent.key === " ") &&
+                        activeValue !== null) {
+                        keyEvent.preventDefault();
+                        select(activeValue);
+                    }
+                }, ref: tablistRef, role: "tablist", children: tabs.map((tab, index) => (_jsx(TabTrigger, { id: `${baseId}-tab-${index}`, isSelected: shownKey === tab.key, onSelect: selectTab, panelId: `${baseId}-panel-${index}`, registerFocus: focus.register, orientation: orientation, registerSelection: selection.register, tab: tab, 
+                    // The roving-tabindex rule read from the core rather
+                    // than restated here: exactly one member is in the tab
+                    // order, so Tab enters and leaves the bar once while
+                    // the arrow keys move inside it.
+                    tabIndex: selectTabIndex(focus, tab.key), trackElement: (key, element) => {
+                        if (element) {
+                            tabElements.current.set(key, element);
+                        }
+                        else {
+                            tabElements.current.delete(key);
+                        }
+                    } }, tab.key))) }), tabs.map((tab, index) => (_jsx("div", { "aria-labelledby": `${baseId}-tab-${index}`, hidden: shownKey !== tab.key, id: `${baseId}-panel-${index}`, role: "tabpanel", children: tab.content }, tab.key)))] }));
+};
+//# sourceMappingURL=PanelTabs.js.map

package/dist/Tabs/PanelTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTabs.js","sourceRoot":"","sources":["../../src/Tabs/PanelTabs.tsx"],"names":[],"mappings":"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"}

package/dist/Tabs/RoutedTabs.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { TabsLinkProps } from "./Tabs.tsx";
+/**
+ * The routed bar: a named `<nav>` of real links wearing the tab
+ * paint.
+ *
+ * There is **no state here at all**, and that is the difference that
+ * matters rather than a saving. A panel bar owns its choice because
+ * nothing else knows it; a routed bar's choice is the address, so
+ * owning a copy would give the app two answers that can disagree —
+ * the Back button being the first thing to prove it.
+ *
+ * `resolveActiveKey` is `Nav`'s rule, imported rather than restated:
+ * whole-segment matching, the deepest match wins, the root is exact,
+ * an external item is never current, and the query string is not
+ * part of the answer.
+ */
+export declare const RoutedTabs: ({ activeHref, className, label, orientation, tabs, }: TabsLinkProps) => ReactNode;
+//# sourceMappingURL=RoutedTabs.d.ts.map

package/dist/Tabs/RoutedTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoutedTabs.d.ts","sourceRoot":"","sources":["../../src/Tabs/RoutedTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAG/C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,GAAI,sDAMxB,aAAa,KAAG,SAyBlB,CAAA"}

package/dist/Tabs/RoutedTabs.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getNavItemKey, resolveActiveKey, } from "../Nav/navItems.js";
+import { toClassName } from "../toClassName.js";
+import { TabLink } from "./TabLink.js";
+import { toTabListClass } from "./tabStyles.js";
+/**
+ * The routed bar: a named `<nav>` of real links wearing the tab
+ * paint.
+ *
+ * There is **no state here at all**, and that is the difference that
+ * matters rather than a saving. A panel bar owns its choice because
+ * nothing else knows it; a routed bar's choice is the address, so
+ * owning a copy would give the app two answers that can disagree —
+ * the Back button being the first thing to prove it.
+ *
+ * `resolveActiveKey` is `Nav`'s rule, imported rather than restated:
+ * whole-segment matching, the deepest match wins, the root is exact,
+ * an external item is never current, and the query string is not
+ * part of the answer.
+ */
+export const RoutedTabs = ({ activeHref, className, label, orientation = "horizontal", tabs, }) => {
+    const activeKey = resolveActiveKey(tabs, activeHref);
+    return (_jsx("nav", { "aria-label": label, className: toClassName(toTabListClass(orientation), className), children: tabs.map((tab) => {
+            const key = getNavItemKey(tab);
+            return (_jsx(TabLink, { isCurrent: key === activeKey, item: tab, orientation: orientation }, key));
+        }) }));
+};
+//# sourceMappingURL=RoutedTabs.js.map

package/dist/Tabs/RoutedTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoutedTabs.js","sourceRoot":"","sources":["../../src/Tabs/RoutedTabs.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,aAAa,EACb,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAe,CAAA;AAEvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,UAAU,EACV,SAAS,EACT,KAAK,EACL,WAAW,GAAG,YAAY,EAC1B,IAAI,GACU,EAAa,EAAE;IAC7B,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;IAEpD,OAAO,CACL,4BACc,KAAK,EACjB,SAAS,EAAE,WAAW,CACpB,cAAc,CAAC,WAAW,CAAC,EAC3B,SAAS,CACV,YAEA,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YAChB,MAAM,GAAG,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;YAE9B,OAAO,CACL,KAAC,OAAO,IACN,SAAS,EAAE,GAAG,KAAK,SAAS,EAC5B,IAAI,EAAE,GAAG,EAET,WAAW,EAAE,WAAW,IADnB,GAAG,CAER,CACH,CAAA;QACH,CAAC,CAAC,GACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/Tabs/TabLink.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { TabLinkItem, TabsOrientation } from "./tabItems.ts";
+export type TabLinkProps = {
+    isCurrent: boolean;
+    item: TabLinkItem;
+    orientation: TabsOrientation;
+};
+/**
+ * One routed tab — and it is a real `<a href>`, through the same
+ * `RouterLinkProvider` seam `NavLink` uses.
+ *
+ * ### It carries no `role="tab"`, and that is the whole point
+ *
+ * `role="tab"` on an anchor **overrides** the link role. A screen
+ * reader then announces "tab", the reader expects a panel to appear
+ * beside it, and instead the address changes and the page under it
+ * is replaced. The APG tab pattern describes a disclosure inside one
+ * document; it does not describe navigation, and `aria-controls`
+ * has nothing to point at here because the section's content comes
+ * from the router — an `<Outlet />` the app renders somewhere this
+ * component cannot see.
+ *
+ * So a routed bar is what it actually is: a list of links inside a
+ * named `<nav>`, with `aria-current="page"` on the one you are on.
+ * That is `Nav`'s answer, and reusing it rather than restating it is
+ * why `resolveActiveKey` decides the current item.
+ *
+ * What the tab pattern was *really* supplying here was the paint,
+ * and the paint is shared through `toTabTriggerClass` — so this
+ * looks identical to the `<button>` beside it in Storybook and is
+ * announced correctly.
+ */
+export declare const TabLink: ({ isCurrent, item, orientation, }: TabLinkProps) => ReactNode;
+//# sourceMappingURL=TabLink.d.ts.map

package/dist/Tabs/TabLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabLink.d.ts","sourceRoot":"","sources":["../../src/Tabs/TabLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,OAAO,KAAK,EACV,WAAW,EACX,eAAe,EAChB,MAAM,eAAe,CAAA;AAGtB,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,WAAW,CAAA;IACjB,WAAW,EAAE,eAAe,CAAA;CAC7B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,OAAO,GAAI,mCAIrB,YAAY,KAAG,SAoFjB,CAAA"}

package/dist/Tabs/TabLink.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRouterLink } from "../RouterLink/RouterLinkProvider.js";
+import { getIsRoutedHref } from "../RouterLink/routerLink.js";
+import { toClassName } from "../toClassName.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { toTabTriggerClass } from "./tabStyles.js";
+/**
+ * One routed tab — and it is a real `<a href>`, through the same
+ * `RouterLinkProvider` seam `NavLink` uses.
+ *
+ * ### It carries no `role="tab"`, and that is the whole point
+ *
+ * `role="tab"` on an anchor **overrides** the link role. A screen
+ * reader then announces "tab", the reader expects a panel to appear
+ * beside it, and instead the address changes and the page under it
+ * is replaced. The APG tab pattern describes a disclosure inside one
+ * document; it does not describe navigation, and `aria-controls`
+ * has nothing to point at here because the section's content comes
+ * from the router — an `<Outlet />` the app renders somewhere this
+ * component cannot see.
+ *
+ * So a routed bar is what it actually is: a list of links inside a
+ * named `<nav>`, with `aria-current="page"` on the one you are on.
+ * That is `Nav`'s answer, and reusing it rather than restating it is
+ * why `resolveActiveKey` decides the current item.
+ *
+ * What the tab pattern was *really* supplying here was the paint,
+ * and the paint is shared through `toTabTriggerClass` — so this
+ * looks identical to the `<button>` beside it in Storybook and is
+ * announced correctly.
+ */
+export const TabLink = ({ isCurrent, item, orientation, }) => {
+    const RouterLink = useRouterLink();
+    const { href, icon, isDisabled = false, label } = item;
+    const isExternal = item.isExternal === true;
+    const className = toTabTriggerClass({
+        isDisabled,
+        isSelected: isCurrent,
+        orientation,
+    });
+    const content = (_jsxs(_Fragment, { children: [icon === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "flex shrink-0 text-content-secondary", children: icon })), label, isExternal ? (_jsxs(VisuallyHidden, { children: [" ", "(opens in a new tab)"] })) : null] }));
+    if (isDisabled) {
+        // Not a link at all, rather than a link with a `disabled`
+        // attribute an anchor does not have. `aria-disabled` alone on a
+        // real `<a href>` still navigates on Enter, which is the version
+        // of this that looks right and is not.
+        return (_jsx("span", { "aria-disabled": "true", className: toClassName("inline-flex shrink-0 items-center gap-2", className), children: content }));
+    }
+    const LinkElement = isExternal || !getIsRoutedHref(href) ? "a" : RouterLink;
+    return (_jsx(LinkElement
+    // The platform's own "you are here", and the reason the paint
+    // is never the only signal: an underline is invisible to a
+    // screen reader and to anyone who cannot tell the two colours
+    // apart.
+    , { "aria-current": isCurrent ? "page" : undefined, className: toClassName("inline-flex shrink-0 items-center gap-2 no-underline", className), href: href, 
+        // No `onClick`, deliberately — unlike `NavLink`, which has a
+        // panel to close behind the reader. A routed tab bar stays on
+        // screen across the navigation, so there is nothing to react
+        // to and a handler here would only be something to keep.
+        //
+        // `noreferrer` beside `noopener` on purpose: one closes the
+        // `window.opener` hole, the other stops this app's address
+        // leaking as the referrer to a product it does not own.
+        rel: isExternal ? "noopener noreferrer" : undefined, target: isExternal ? "_blank" : undefined, children: content }));
+};
+//# sourceMappingURL=TabLink.js.map

package/dist/Tabs/TabLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabLink.js","sourceRoot":"","sources":["../../src/Tabs/TabLink.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAsC,CAAA;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAsC,CAAA;AAKrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAQlD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,WAAW,GACE,EAAa,EAAE;IAC5B,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAElC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,GAAG,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IAEtD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAA;IAE3C,MAAM,SAAS,GAAG,iBAAiB,CAAC;QAClC,UAAU;QACV,UAAU,EAAE,SAAS;QACrB,WAAW;KACZ,CAAC,CAAA;IAEF,MAAM,OAAO,GAAG,CACd,8BACG,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAG3B,8BACc,MAAM,EAClB,SAAS,EAAC,sCAAsC,YAE/C,IAAI,GACA,CACR,EAEA,KAAK,EAEL,UAAU,CAAC,CAAC,CAAC,CACZ,MAAC,cAAc,eACZ,GAAG,4BAEW,CAClB,CAAC,CAAC,CAAC,IAAI,IACP,CACJ,CAAA;IAED,IAAI,UAAU,EAAE,CAAC;QACf,0DAA0D;QAC1D,gEAAgE;QAChE,iEAAiE;QACjE,uCAAuC;QACvC,OAAO,CACL,gCACgB,MAAM,EACpB,SAAS,EAAE,WAAW,CACpB,yCAAyC,EACzC,SAAS,CACV,YAEA,OAAO,GACH,CACR,CAAA;IACH,CAAC;IAED,MAAM,WAAW,GACf,UAAU,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAA;IAEzD,OAAO,CACL,KAAC,WAAW;IACV,8DAA8D;IAC9D,2DAA2D;IAC3D,8DAA8D;IAC9D,SAAS;wBACK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE,WAAW,CACpB,sDAAsD,EACtD,SAAS,CACV,EACD,IAAI,EAAE,IAAI;QACV,6DAA6D;QAC7D,8DAA8D;QAC9D,6DAA6D;QAC7D,yDAAyD;QACzD,EAAE;QACF,4DAA4D;QAC5D,2DAA2D;QAC3D,wDAAwD;QACxD,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EACnD,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAExC,OAAO,GACI,CACf,CAAA;AACH,CAAC,CAAA"}

package/dist/Tabs/TabTrigger.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { TabItem, TabsOrientation } from "./Tabs.tsx";
+import type { TabItem, TabsOrientation } from "./tabItems.ts";
 export type TabTriggerProps = {
     id: string;
     isSelected: boolean;

package/dist/Tabs/TabTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabTrigger.d.ts","sourceRoot":"","sources":["../../src/Tabs/TabTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAyB1D,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,WAAW,EAAE,eAAe,CAAA;IAC5B,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAC5C,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAChD,GAAG,EAAE,OAAO,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CACZ,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAC9B,IAAI,CAAA;CACV,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,GAAI,oHAWxB,eAAe,KAAG,SAoDpB,CAAA"}
+{"version":3,"file":"TabTrigger.d.ts","sourceRoot":"","sources":["../../src/Tabs/TabTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EACV,OAAO,EACP,eAAe,EAChB,MAAM,eAAe,CAAA;AAGtB,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,WAAW,EAAE,eAAe,CAAA;IAC5B,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAC5C,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAChD,GAAG,EAAE,OAAO,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CACZ,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAC9B,IAAI,CAAA;CACV,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,GAAI,oHAWxB,eAAe,KAAG,SA2CpB,CAAA"}

package/dist/Tabs/TabTrigger.js

@@ -1,26 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { FOCUS_RING_CLASS } from "../intentStyles.js";
 import { toClassName } from "../toClassName.js";
-/**
- * The selected marker runs along the edge the tab list itself
- * sits on — under a horizontal bar, down the inline-end of a
- * vertical rail — and the negative margin pulls it over the
- * list's own border so the two read as one line rather than two.
- *
- * Logical properties throughout, which is the house rule and also
- * the only way a vertical rail lands on the correct side in RTL.
- */
-const ORIENTATION_EDGE_CLASS = {
-    horizontal: {
-        base: "-mb-px border-b-2",
-        selected: "border-b-intent-accent-solid",
-    },
-    vertical: {
-        base: "-me-px border-e-2 text-start",
-        selected: "border-e-intent-accent-solid",
-    },
-};
+import { toTabTriggerClass } from "./tabStyles.js";
 /**
  * Its own file for a reason that is not style: **both
  * registrations are effects**, and an effect cannot run in a loop.
@@ -37,7 +18,6 @@ const ORIENTATION_EDGE_CLASS = {
  */
 export const TabTrigger = ({ id, isSelected, onSelect, orientation, panelId, registerFocus, registerSelection, tab, tabIndex, trackElement, }) => {
     const { isDisabled = false, key, label } = tab;
-    const edge = ORIENTATION_EDGE_CLASS[orientation];
     useEffect(() => registerSelection(key), [key, registerSelection]);
     useEffect(() => {
         if (isDisabled) {
@@ -45,15 +25,11 @@ export const TabTrigger = ({ id, isSelected, onSelect, orientation, panelId, reg
         }
         return registerFocus(key);
     }, [isDisabled, key, registerFocus]);
-    return (_jsx("button", { "aria-controls": panelId, "aria-selected": isSelected, className: toClassName("cursor-pointer border-transparent px-3 py-2 font-medium text-sm whitespace-nowrap transition-colors duration-(--duration-fast) ease-standard", edge.base, 
-        // Two entries rather than one interpolated string:
-        // `tailwindCandidates.test.ts` rejects a template literal
-        // in a className outright, because Tailwind's scanner
-        // cannot see a class that only exists at runtime.
-        isSelected && edge.selected, isSelected
-            ? "text-content-primary"
-            : "text-content-secondary hover:text-content-primary", isDisabled &&
-            "cursor-not-allowed text-content-disabled hover:text-content-disabled", FOCUS_RING_CLASS), disabled: isDisabled, id: id, onClick: () => {
+    return (_jsx("button", { "aria-controls": panelId, "aria-selected": isSelected, className: toClassName("cursor-pointer", toTabTriggerClass({
+            isDisabled,
+            isSelected,
+            orientation,
+        })), disabled: isDisabled, id: id, onClick: () => {
             onSelect(key);
         }, ref: (element) => {
             trackElement(key, element);

package/dist/Tabs/TabTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabTrigger.js","sourceRoot":"","sources":["../../src/Tabs/TabTrigger.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAG/C;;;;;;;;GAQG;AACH,MAAM,sBAAsB,GAGxB;IACF,UAAU,EAAE;QACV,IAAI,EAAE,mBAAmB;QACzB,QAAQ,EAAE,8BAA8B;KACzC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,8BAA8B;QACpC,QAAQ,EAAE,8BAA8B;KACzC;CACF,CAAA;AAoBD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,GAAG,EACH,QAAQ,EACR,YAAY,GACI,EAAa,EAAE;IAC/B,MAAM,EAAE,UAAU,GAAG,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,CAAA;IAE9C,MAAM,IAAI,GAAG,sBAAsB,CAAC,WAAW,CAAC,CAAA;IAEhD,SAAS,CACP,GAAG,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAC5B,CAAC,GAAG,EAAE,iBAAiB,CAAC,CACzB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,OAAO,aAAa,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC,CAAA;IAEpC,OAAO,CACL,kCACiB,OAAO,mBACP,UAAU,EACzB,SAAS,EAAE,WAAW,CACpB,8IAA8I,EAC9I,IAAI,CAAC,IAAI;QACT,mDAAmD;QACnD,0DAA0D;QAC1D,sDAAsD;QACtD,kDAAkD;QAClD,UAAU,IAAI,IAAI,CAAC,QAAQ,EAC3B,UAAU;YACR,CAAC,CAAC,sBAAsB;YACxB,CAAC,CAAC,mDAAmD,EACvD,UAAU;YACR,sEAAsE,EACxE,gBAAgB,CACjB,EACD,QAAQ,EAAE,UAAU,EACpB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,GAAG,CAAC,CAAA;QACf,CAAC,EACD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;QAC5B,CAAC,EACD,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,YAEZ,KAAK,GACC,CACV,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TabTrigger.js","sourceRoot":"","sources":["../../src/Tabs/TabTrigger.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAK/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAoBlD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,GAAG,EACH,QAAQ,EACR,YAAY,GACI,EAAa,EAAE;IAC/B,MAAM,EAAE,UAAU,GAAG,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,CAAA;IAE9C,SAAS,CACP,GAAG,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAC5B,CAAC,GAAG,EAAE,iBAAiB,CAAC,CACzB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,OAAO,aAAa,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC,CAAA;IAEpC,OAAO,CACL,kCACiB,OAAO,mBACP,UAAU,EACzB,SAAS,EAAE,WAAW,CACpB,gBAAgB,EAChB,iBAAiB,CAAC;YAChB,UAAU;YACV,UAAU;YACV,WAAW;SACZ,CAAC,CACH,EACD,QAAQ,EAAE,UAAU,EACpB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,GAAG,CAAC,CAAA;QACf,CAAC,EACD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;QAC5B,CAAC,EACD,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,YAEZ,KAAK,GACC,CACV,CAAA;AACH,CAAC,CAAA"}