@fairgarden/design 0.1.0-alpha.0

package/components/Tabs/Tabs.d.ts

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../Icon';
+export declare const tabs: (props?: ({
+    variant?: "underline" | "segmented" | null | undefined;
+    filled?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TabsVariants = VariantProps<typeof tabs>;
+type TabsVariantProps = {
+    /** `underline` (default): tabs on a full-width `--role-rule` baseline; the current tab's bar is as wide as its label. */
+    variant?: 'underline';
+    /** Only with `segmented`. */
+    filled?: never;
+} | {
+    /** `segmented`: full-bleed equal cells; the bar spans the current cell's bottom. */
+    variant: 'segmented';
+    /**
+     * The current cell takes the `--role-select` fill, a `--role-select-edge`
+     * edge and a `--role-select-mark` label. Pass it on the light presets
+     * only (paper, white); deep and saturated grounds mark the current cell
+     * by the bar and weight alone. Default `false`.
+     */
+    filled?: boolean;
+};
+/** Props for Tabs: Base UI Tabs Root props (without `orientation`) plus the variant and color axes. */
+export type TabsProps = Omit<BaseTabs.Root.Props, 'orientation'> & TabsVariantProps & {
+    /**
+     * Primary Radix scale: labels, bar, baseline and focus ring. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: TabsVariants['primary'];
+    /**
+     * Secondary Radix scale: only the segmented current cell under `filled`.
+     * Keep it equal to the brand strip's scale so strip and cell join.
+     */
+    secondary?: TabsVariants['secondary'];
+};
+/**
+ * Tabs for 2–6 peer panels on one page (§9.5): `TabsList` holding `TabsTab`s,
+ * then one `TabsPanel` per tab. Labels are caps wayfinding (`type-label`),
+ * authored in sentence case [D165]. Never use tabs for page-to-page
+ * navigation or sequential steps. In print the list hides and every panel
+ * prints in order under its label. The root is an inline-size container, so
+ * give it a width in shrink-to-fit contexts.
+ */
+export declare function Tabs(props: TabsProps): React.JSX.Element;
+/** Props for TabsList: Base UI Tabs List props plus the overflow button's label. */
+export type TabsListProps = BaseTabs.List.Props & {
+    /** Accessible name of the overflow › button that scrolls the row. Default "More tabs". */
+    overflowLabel?: string;
+};
+/**
+ * The tab list and its current-tab indicator. When 4–6 tabs overflow their
+ * row, the row scrolls sideways in a `wide` Scroll Area (the last tab
+ * clipped, a visible scrollbar, hard overflow edges) and a `--size-px-7` ›
+ * button at its end scrolls it on. More than 6 tabs belong in navigation
+ * or a Select.
+ */
+export declare function TabsList(props: TabsListProps): React.JSX.Element;
+/** Props for TabsTab: Base UI Tab props plus an optional leading icon. */
+export type TabsTabProps = BaseTabs.Tab.Props & {
+    /**
+     * An optional leading icon, Material Symbols Rounded at the inline tier,
+     * FILL 0. Never icon-only.
+     */
+    icon?: IconName;
+};
+/**
+ * One tab: an optional icon and a caps `type-label` label, at least
+ * `--ds-size-hit` tall. Inactive labels are `--role-muted` at weight 600,
+ * the current label `--primary12` at 700 with the `--ds-stroke-3` bar.
+ * Prefer removing a tab to disabling it.
+ */
+export declare function TabsTab(props: TabsTabProps): React.JSX.Element;
+/** Props for TabsPanel: Base UI Tab Panel props plus the printed label. */
+export type TabsPanelProps = BaseTabs.Panel.Props & {
+    /**
+     * The heading this panel prints under. Omitted, it takes the matching
+     * tab's label once the page has hydrated.
+     */
+    label?: React.ReactNode;
+};
+/**
+ * One panel, `--size-px-5` below the list, with no border. Panels stay in
+ * the DOM while hidden (`keepMounted`, default `true`) so print can show
+ * every panel in order, each under its label in `type-subhead`.
+ */
+export declare function TabsPanel(props: TabsPanelProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/components/Tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAyC7C,eAAO,MAAM,IAAI;;;;;8EAiBf,CAAA;AAEF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAA;AAW7C,KAAK,gBAAgB,GACjB;IACE,yHAAyH;IACzH,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,GACD;IACE,oFAAoF;IACpF,OAAO,EAAE,WAAW,CAAA;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAEL,uGAAuG;AACvG,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,GAC9D,gBAAgB,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;CACtC,CAAA;AAEH;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,qBAqCpC;AAED,oFAAoF;AACpF,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,GAAG;IAChD,0FAA0F;IAC1F,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBA6D5C;AAED,0EAA0E;AAC1E,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,GAAG;IAC9C;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBA6B1C;AAED,2EAA2E;AAC3E,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAoB9C"}

package/components/Tabs/Tabs.js

@@ -0,0 +1,175 @@
+'use client';
+import * as React from 'react';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { cva } from 'class-variance-authority';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { ScrollArea } from '../ScrollArea';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './tabs.module.css';
+/*
+ * Tabs (§9.5): 2–6 peer panels on one page, one visible at a time.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: tabs.module.css; CVA function `tabs`.
+ * - Axes: `variant` → underline | segmented (a bar on a baseline; full-bleed
+ *   equal cells); `filled` → `filled` (typed only with `segmented`: the
+ *   current cell takes the --role-select fill; the parent passes it on the
+ *   light presets only, since the module never reads the scope [D155]);
+ *   `primary`, `secondary` → scales module classes. The `index` variant
+ *   (vertical rail) is not built yet.
+ * - Compound variants: none.
+ * - Defaults: variant underline, filled false; color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: the current tab (`data-active`, Base UI's name for §9.5's
+ *   `data-selected`) → the --ds-stroke-3 bar (the Indicator, placed from
+ *   Base UI's active-tab position variables) and --font-weight-7, plus the
+ *   --role-select cell under `filled`; `:hover` (not disabled) → the
+ *   bare-text underline under the label (--role-accent at --border-size-2,
+ *   offset --size-px-1), told from the bar by color and position, and the
+ *   `filled` current cell's fill at --role-select-hover [D181]; `:active` →
+ *   the bar at --border-size-2; `:focus-visible` → the
+ *   ring on the hit area; `data-disabled` → --role-muted label and a
+ *   `line-dotted-fine` underline.
+ * - Parts: base, list, tab, label, icon, indicator, panel, overflow (+ `bar`,
+ *   the non-scrolling row that holds the Scroll Area and the overflow
+ *   button; `scroller`, the `wide` Scroll Area root the list scrolls in;
+ *   `edge` / `edgeLine`, the disabled dotted underline; `printLabel`).
+ * - Scope: none.
+ * - Container: `base` is the inline-size container `tabs`. Baseline: up to 3
+ *   equal cells with wrapping labels; 4–6 hug their labels in a `wide`
+ *   Scroll Area with a › button; from 768 px of container one row of hugging tabs
+ *   (§5.10.2). Viewport fallback --md-n-above.
+ */
+export const tabs = cva(styles.base, {
+    variants: {
+        variant: {
+            underline: styles.underline,
+            segmented: styles.segmented,
+        },
+        filled: {
+            true: styles.filled,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        variant: 'underline',
+        filled: false,
+    },
+});
+const TabsLabelsContext = React.createContext(null);
+/**
+ * Tabs for 2–6 peer panels on one page (§9.5): `TabsList` holding `TabsTab`s,
+ * then one `TabsPanel` per tab. Labels are caps wayfinding (`type-label`),
+ * authored in sentence case [D165]. Never use tabs for page-to-page
+ * navigation or sequential steps. In print the list hides and every panel
+ * prints in order under its label. The root is an inline-size container, so
+ * give it a width in shrink-to-fit contexts.
+ */
+export function Tabs(props) {
+    const { variant, filled, primary, secondary, className, ...rest } = props;
+    const scope = useScopeAttributes();
+    const [labels, setLabels] = React.useState(() => new Map());
+    const register = React.useCallback((value, label) => {
+        setLabels((current) => {
+            if (current.get(value) === label)
+                return current;
+            const next = new Map(current);
+            next.set(value, label);
+            return next;
+        });
+        return () => {
+            setLabels((current) => {
+                if (current.get(value) !== label)
+                    return current;
+                const next = new Map(current);
+                next.delete(value);
+                return next;
+            });
+        };
+    }, []);
+    const context = React.useMemo(() => ({ labels, register }), [labels, register]);
+    return (React.createElement(TabsLabelsContext.Provider, { value: context },
+        React.createElement(BaseTabs.Root, { ...rest, ...scope, className: resolveClassName(className, (extra) => tabs({ variant, filled: filled ?? false, primary, secondary, className: extra })) })));
+}
+/**
+ * The tab list and its current-tab indicator. When 4–6 tabs overflow their
+ * row, the row scrolls sideways in a `wide` Scroll Area (the last tab
+ * clipped, a visible scrollbar, hard overflow edges) and a `--size-px-7` ›
+ * button at its end scrolls it on. More than 6 tabs belong in navigation
+ * or a Select.
+ */
+export function TabsList(props) {
+    const { overflowLabel = 'More tabs', className, children, ...rest } = props;
+    const viewportRef = React.useRef(null);
+    const [canScroll, setCanScroll] = React.useState(false);
+    React.useEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return undefined;
+        const update = () => {
+            const remaining = viewport.scrollWidth - viewport.clientWidth - Math.abs(viewport.scrollLeft);
+            setCanScroll(remaining > 1);
+        };
+        update();
+        const resize = new ResizeObserver(update);
+        resize.observe(viewport);
+        if (viewport.firstElementChild)
+            resize.observe(viewport.firstElementChild);
+        viewport.addEventListener('scroll', update, { passive: true });
+        return () => {
+            resize.disconnect();
+            viewport.removeEventListener('scroll', update);
+        };
+    }, []);
+    const scrollOn = () => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        const direction = getComputedStyle(viewport).direction === 'rtl' ? -1 : 1;
+        viewport.scrollBy({ left: direction * viewport.clientWidth * 0.75 });
+    };
+    return (React.createElement("div", { className: styles.bar },
+        React.createElement(ScrollArea, { kind: "wide", focusable: false, viewportRef: viewportRef, className: styles.scroller },
+            React.createElement(BaseTabs.List, { ...rest, className: resolveClassName(className, (extra) => cx(styles.list, extra)) },
+                children,
+                React.createElement(BaseTabs.Indicator, { className: styles.indicator, renderBeforeHydration: true }))),
+        canScroll ? (React.createElement(Button, { iconOnly: true, size: "sm", icon: "chevron_right", className: styles.overflow, onClick: scrollOn, tabIndex: -1 }, overflowLabel)) : null));
+}
+/**
+ * One tab: an optional icon and a caps `type-label` label, at least
+ * `--ds-size-hit` tall. Inactive labels are `--role-muted` at weight 600,
+ * the current label `--primary12` at 700 with the `--ds-stroke-3` bar.
+ * Prefer removing a tab to disabling it.
+ */
+export function TabsTab(props) {
+    const { icon, value, disabled, className, children, ...rest } = props;
+    const registry = React.useContext(TabsLabelsContext);
+    const register = registry?.register;
+    React.useEffect(() => register?.(value, children), [register, value, children]);
+    return (React.createElement(BaseTabs.Tab, { ...rest, value: value, disabled: disabled, className: resolveClassName(className, (extra) => cx(styles.tab, extra)) },
+        icon ? React.createElement(Icon, { name: icon, className: styles.icon }) : null,
+        React.createElement("span", { className: styles.label },
+            React.createElement("span", { className: styles.labelText }, children),
+            React.createElement("span", { className: styles.labelSizer, "aria-hidden": "true" }, children)),
+        disabled ? (React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+            React.createElement("line", { className: styles.edgeLine, x1: "0", y1: "50%", x2: "100%", y2: "50%" }))) : null));
+}
+/**
+ * One panel, `--size-px-5` below the list, with no border. Panels stay in
+ * the DOM while hidden (`keepMounted`, default `true`) so print can show
+ * every panel in order, each under its label in `type-subhead`.
+ */
+export function TabsPanel(props) {
+    const { label, value, keepMounted = true, className, children, ...rest } = props;
+    const registry = React.useContext(TabsLabelsContext);
+    const printLabel = label ?? registry?.labels.get(value);
+    return (React.createElement(BaseTabs.Panel, { ...rest, value: value, keepMounted: keepMounted, className: resolveClassName(className, (extra) => cx(styles.panel, extra)) },
+        printLabel == null ? null : (React.createElement("p", { className: styles.printLabel, "aria-hidden": "true" }, printLabel)),
+        children));
+}
+//# sourceMappingURL=Tabs.js.map

package/components/Tabs/Tabs.js.map

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

package/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tabs';
+//# sourceMappingURL=index.d.ts.map

package/components/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export * from './Tabs';
+//# sourceMappingURL=index.js.map

package/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/components/Tabs/tabs.module.css

@@ -0,0 +1,339 @@
+/*
+ * Tabs (§9.5). Parts: `base` (the Root, the `tabs` container), `bar` (the
+ * non-scrolling row: the Scroll Area and the overflow button), `scroller`
+ * (the wide Scroll Area root, §10.19), `list` (the tablist and its
+ * baseline, inside the scroller), `tab`, `icon`, `label` (with `labelText` and the hidden
+ * weight-700 `labelSizer`), `indicator` (the current bar), `edge` /
+ * `edgeLine` (the disabled `line-dotted-fine` underline, true SVG dots),
+ * `overflow` (the › button), `panel` and `printLabel`. Colors are role
+ * variables only; local custom properties carry dimensions only:
+ *   --tab-inset        the tab's side inset; the bar and pressed line match the label
+ *   --tab-ring-offset  where the focus ring sits inside the hit area
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. Labels are caps wayfinding
+ * (`type-label`) [D165]; inactive labels are muted text [D170, D175]. */
+.label {
+  composes: typeLabel typeMuted from '../../utils/type.module.css';
+}
+
+.printLabel {
+  composes: typeSubhead from '../../utils/type.module.css';
+}
+
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    --tab-inset: var(--size-px-1);
+    --tab-ring-offset: calc(-1 * var(--border-size-2));
+
+    container: tabs / inline-size;
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .bar {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-px-2);
+    min-inline-size: 0;
+  }
+
+  /*
+   * When 4–6 tabs overflow, the tablist scrolls sideways in a `wide` Scroll
+   * Area (§9.5, §10.19): the last tab clipped, a visible scrollbar under the
+   * row and the hard overflow edges, never a fade.
+   */
+  .scroller {
+    flex: 1 1 auto;
+  }
+
+  .list {
+    position: relative;
+    display: flex;
+    gap: calc(var(--size-px-5) - 2 * var(--tab-inset));
+  }
+
+  /* Each tab is at least --ds-size-hit tall; it grows when the label wraps. */
+  .tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    min-block-size: var(--ds-size-hit);
+    margin: 0;
+    padding-block: var(--size-px-2);
+    padding-inline: var(--tab-inset);
+    border: 0;
+    background: none;
+    color: var(--role-muted);
+    text-align: center;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  /* The pressed line, where the bar sits. */
+  .tab::after {
+    content: '';
+    display: none;
+    position: absolute;
+    inset-inline: var(--tab-inset);
+    inset-block-end: 0;
+    border-block-end: var(--ds-stroke-1-5) solid var(--primary12);
+  }
+
+  .icon {
+    color: inherit;
+  }
+
+  /* Label text and its weight-700 twin share one cell, so the width holds across states. */
+  .label {
+    display: inline-grid;
+    min-inline-size: 0;
+    text-wrap: balance;
+  }
+
+  .labelText,
+  .labelSizer {
+    grid-area: 1 / 1;
+  }
+
+  /*
+   * The bare-text hover underline's color, weight and offset (§9.5) [D181]:
+   * under the label, so its color and position tell it from the bar.
+   */
+  .labelText {
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  .labelSizer {
+    visibility: hidden;
+    font-weight: var(--font-weight-7);
+  }
+
+  /* The current bar: --ds-stroke-3 in --primary12, placed from Base UI's active-tab variables. */
+  .indicator {
+    position: absolute;
+    inset-block-end: 0;
+    left: calc(var(--active-tab-left) + var(--tab-inset));
+    inline-size: calc(var(--active-tab-width) - 2 * var(--tab-inset));
+    border-block-end: var(--ds-stroke-3) solid var(--primary12);
+    pointer-events: none;
+  }
+
+  /* Disabled underline host: true 1 px dots at 3 px (§4.6) [D36, D68]. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-inline-start: var(--tab-inset);
+    inset-block-end: 0;
+    inline-size: calc(100% - 2 * var(--tab-inset));
+    block-size: var(--ds-dot-fine);
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+  }
+
+  /* The › button, centred on a one-line tab row. */
+  .overflow {
+    flex: none;
+    margin-block-start: calc((var(--ds-size-hit) - var(--size-px-7)) / 2);
+  }
+
+  .panel {
+    margin-block-start: var(--size-px-5);
+  }
+
+  .printLabel {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  /* Hover transitions [D181]: --ds-duration-quick, --ease-out-3. */
+  @media (prefers-reduced-motion: no-preference) {
+    .tab {
+      transition-property: background-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    .labelText {
+      transition-property: text-decoration-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * Underline: a --border-size-1 --role-rule baseline under the tablist, at
+   * least the container width; the bar and the pressed line cover it.
+   */
+  .underline .list {
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .underline .indicator,
+  .underline .tab::after {
+    inset-block-end: calc(-1 * var(--border-size-1));
+  }
+
+  /* Baseline: up to 3 equal cells with wrapping labels (LTA)… */
+  .underline .tab {
+    flex: 1 1 0;
+  }
+
+  /* …4–6 tabs hug their labels on one scrolling line, the last one clipped (PostHog). */
+  .underline .list:has(> .tab:nth-child(4)) .tab {
+    flex: none;
+    white-space: nowrap;
+  }
+
+  /* From 768 px: one row, tabs hugging their labels. Viewport fallback, then the container (§5.10.2). */
+  @media (min-width: 768px) {
+    .underline .tab {
+      flex: none;
+    }
+  }
+
+  @container tabs (width < 768px) {
+    .underline .tab {
+      flex: 1 1 0;
+    }
+  }
+
+  @container tabs (width >= 768px) {
+    .underline .tab {
+      flex: none;
+    }
+  }
+
+  /* Segmented: full-bleed equal cells with no dividers; the bar spans the cell bottom. */
+  .segmented {
+    --tab-inset: 0px;
+    --tab-ring-offset: calc(-2 * var(--border-size-2));
+  }
+
+  .segmented .list {
+    gap: 0;
+  }
+
+  .segmented .tab {
+    flex: 1 1 0;
+    padding: calc(var(--size-px-2) + var(--border-size-2));
+  }
+}
+
+@layer states {
+  /* Current (`data-active`): --primary12 label at --font-weight-7 beside the bar. */
+  .tab[data-active],
+  .tab[data-active] .label {
+    color: var(--primary12);
+  }
+
+  .tab[data-active] .label {
+    font-weight: var(--font-weight-7);
+  }
+
+  /*
+   * Hover (not disabled) [D181]: the label keeps its ink and takes the
+   * bare-text underline (--role-accent at --border-size-2, offset
+   * --size-px-1), told from the --ds-stroke-3 --primary12 current bar by
+   * color and position, so hover never reads as current.
+   */
+  .tab:not([data-disabled]):hover .labelText {
+    text-decoration-line: underline;
+  }
+
+  /* Pressed: the bar at --border-size-2. */
+  .tab:not([data-disabled]):active::after {
+    display: block;
+    border-block-end-width: var(--border-size-2);
+  }
+
+  /* Focus: the 2 px --primary12 ring on the hit area, inside it so the scrolling row never clips it. */
+  .tab:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--tab-ring-offset);
+  }
+
+  /* Disabled: --role-muted label and the dotted underline; never dimmed [D16, D85]. */
+  .tab[data-disabled] {
+    color: var(--role-muted);
+    cursor: default;
+  }
+
+  .tab[data-disabled] .edge {
+    display: block;
+  }
+
+  /*
+   * Filled segmented cell (light scopes only): its own ground, --role-select
+   * with a --role-select-edge edge and a --role-select-mark label; the bar
+   * stays --primary12. The edge's width comes out of the padding.
+   */
+  .filled .tab[data-active] {
+    padding: var(--size-px-2);
+    border: var(--border-size-2) solid var(--role-select-edge);
+    background-color: var(--role-select);
+    color: var(--role-select-mark);
+  }
+
+  .filled .tab[data-active] .label {
+    color: var(--role-select-mark);
+  }
+
+  /* Its hover moves the fill to --role-select-hover; label, bar and edge stay [D181]. */
+  .filled .tab[data-active]:not([data-disabled]):hover {
+    background-color: var(--role-select-hover);
+  }
+
+  .panel:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* The list hides; every panel prints in order under its label over a --border-size-1 rule (§7.7). */
+    .bar {
+      display: none;
+    }
+
+    .panel,
+    .panel[hidden] {
+      display: block;
+      margin-block-start: var(--size-px-5);
+    }
+
+    .printLabel {
+      display: block;
+      margin: 0 0 var(--size-px-3);
+      padding-block-end: var(--size-px-2);
+      border-block-end: var(--border-size-1) solid var(--role-hairline);
+      color: var(--primary12);
+      break-after: avoid;
+    }
+  }
+}

package/components/Tag/Tag.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../Icon';
+export declare const tag: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TagVariants = VariantProps<typeof tag>;
+/** Props for Tag: `span` props, `render`, the link target, the icon and the color axes. */
+export type TagProps = useRender.ComponentProps<'span'> & {
+    /** Makes the tag a link to its topic; it renders an `<a>` and gains the link states. */
+    href?: string;
+    /**
+     * The topic's subject symbol, Material Symbols Rounded at the tag tier
+     * (20 px, FILL 0): an inventory name, or a registered subject symbol's
+     * SVG element, which the tag sizes and fills in `currentColor` [D166].
+     * It carries the tag's only color, `--role-accent`.
+     */
+    icon?: IconName | React.ReactElement;
+    /**
+     * Primary Radix scale: the label ink and focus ring. Never defaulted;
+     * omitted, it inherits the scope [D133].
+     */
+    primary?: TagVariants['primary'];
+    /**
+     * Secondary Radix scale: the taxonomy scale, which colors the icon
+     * through `--role-accent`. Omitted, it inherits the scope.
+     */
+    secondary?: TagVariants['secondary'];
+};
+/**
+ * A topic tag: an icon plus a caps label (`type-label` at weight 700,
+ * authored in sentence case; topic tags keep caps [D160]), with no
+ * container. Color sits on the icon only, never on the small label text.
+ * Pass `href` to link it to its topic.
+ */
+export declare function Tag(props: TagProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Tag.d.ts.map