@react-x11/components 0.4.0 → 0.6.0

package/src/tabs/index.ts

@@ -11,6 +11,13 @@
 // `asChild` is the one part of the surface deliberately absent: it exists to
 // merge props into somebody else's DOM element, and there is no DOM here.
 //
+// `overflow` is the one prop with no counterpart there. A horizontal strip
+// narrower than its tabs keeps the ones that fit and drops the rest into a
+// menu at its end rather than running off its own edge — on by default,
+// because a strip cut off mid-label is nobody's intention. It is the one
+// thing here that has to measure, and `useOverflow` below is where that and
+// its consequences live.
+//
 // The behaviour is core's `<Tabs>` — the widget this one supersedes: a single
 // tab stop with roving focus, arrows that wrap and skip disabled triggers,
 // Home/End, visual arrows in an RTL strip, and `activationMode="manual"` for
@@ -24,19 +31,23 @@
 // box can.
 import React from 'react';
 import type { ReactElement, ReactNode } from 'react';
-import { useDirection, useTheme } from 'react-x11';
+import { Icon, useDirection, useTheme } from 'react-x11';
 import type { DrawnNode, KeyboardEvent } from 'react-x11';
 import { interpolate } from 'react-x11/style';
-import type { Style } from 'react-x11/style';
+import type { Style, StyleProperties } from 'react-x11/style';
 import {
   XK_DOWN,
   XK_END,
+  XK_ESCAPE,
   XK_HOME,
   XK_LEFT,
+  XK_RETURN,
   XK_RIGHT,
   XK_UP,
 } from 'react-x11/keysyms';
 
+import { afterLayout, cancelAfterLayout } from '../internal/timers.js';
+import { useDismissOnWindowBlur } from '../internal/widget.js';
 import { hx } from './hx.js';
 
 const h = React.createElement;
@@ -44,6 +55,19 @@ const h = React.createElement;
 /** What `style` props here accept, matching the rest of the package. */
 type StyleInput = Style | Style[];
 
+/**
+ * `'@supports transparency'` is a real style block — react-x11 answers it
+ * from whether the display gave the window an ARGB visual — but its `Style`
+ * type models only the `@width`/`@height` size queries and the `:state`
+ * blocks. Spelled out here rather than by augmenting `StyleBlocks` globally,
+ * for the reason `<DatePicker>` gives where it does the same: this package
+ * should not quietly widen what type-checks in an app that merely installs
+ * it.
+ */
+type SupportsStyle = Style & {
+  '@supports transparency'?: StyleProperties;
+};
+
 // --- geometry ---------------------------------------------------------------
 
 /** The selected trigger's marker in the `line` variant. */
@@ -58,8 +82,37 @@ const PANEL_GAP = 8;
  *  radius, so the two variants agree about how round this notebook is. */
 const CORNER = 6;
 
+/** The rounding on everything that is a wash rather than a tab: the `subtle`
+ *  fill, the `line` strip's hover, an `enclosed` trigger, a menu row. */
+const WASH_CORNER = 4;
+/** The gap the overflow menu leaves between two rows. Read twice: once to
+ *  lay the sheet out, and once to work out how tall it comes to. */
+const MENU_ROW_GAP = 1;
+/** The overflow menu's sheet: a hairline where it meets the desktop, as the
+ *  other popups out here use, and the inset that makes a row read as a pill
+ *  on the sheet rather than a band across it. */
+const SHEET_BORDER = 1;
+const SHEET_PAD = 4;
+/** A menu row is narrower than a tab is tall — it is a list entry, not a
+ *  target on a strip — so it takes its own padding rather than the size's. */
+const MENU_ROW_PX = 10;
+const MENU_ROW_PY = 7;
+/** So a menu of one short label is still a menu rather than a chip. */
+const MENU_MIN_WIDTH = 140;
+
 export type TabsVariant = 'line' | 'subtle' | 'enclosed' | 'outline' | 'plain';
 export type TabsSize = 'sm' | 'md' | 'lg';
+export type TabsOverflow = 'menu' | 'clip';
+
+/**
+ * Between two triggers on the strip — none in `outline`, where the tabs meet
+ * shoulder to shoulder. Read twice: once to lay the strip out, and once by
+ * the overflow arithmetic, which has to add up to the same number the strip
+ * did or it will fit one tab too many.
+ */
+function stripGap(variant: TabsVariant): number {
+  return variant === 'outline' ? 0 : 2;
+}
 
 interface SizeSpec {
   /** Horizontal padding inside a trigger. */
@@ -97,6 +150,8 @@ interface TabsLook {
   manual: boolean;
   fitted: boolean;
   justify: 'start' | 'center' | 'end' | undefined;
+  /** What a horizontal strip does with more tabs than it has room for. */
+  overflow: TabsOverflow;
   /** The marker colour, resolved: `interpolate` mixes real colours, not
    *  `$token`s. */
   accent: string;
@@ -122,9 +177,26 @@ interface TabsLook {
 
 const LookContext = React.createContext<TabsLook | null>(null);
 
-/** What a `<TabsIndicator>` written into the strip asks the selected trigger
- *  to draw. `null` when the strip has none. */
-const IndicatorContext = React.createContext<TabsIndicatorProps | null>(null);
+/**
+ * What the strip tells the triggers inside it — the two things it knows and
+ * the shared look does not.
+ *
+ * `indicator` is the `<TabsIndicator>` written into the strip, which the
+ * *selected trigger* is what draws; `null` when there is none.
+ *
+ * `grow` is whether a `fitted` strip is currently letting its triggers fill
+ * it. It stops while anything is in the overflow menu, and that is not a
+ * cosmetic call: a grown trigger lays out at its share of the strip rather
+ * than at its label, and the share is what the overflow arithmetic would
+ * then measure — hide one tab, the rest grow into the space it left, and the
+ * next pass reads them as too wide and hides another.
+ */
+interface TabsStrip {
+  indicator: TabsIndicatorProps | null;
+  grow: boolean;
+}
+
+const StripContext = React.createContext<TabsStrip | null>(null);
 
 function useLook(part: string): TabsLook {
   const look = React.useContext(LookContext);
@@ -202,6 +274,288 @@ function styled(base: Style, extra: StyleInput | undefined): Style[] {
   return Array.isArray(extra) ? [base, ...extra] : [base, extra];
 }
 
+/**
+ * The hover fill on a `line` strip — the wash a `subtle` trigger wears, on
+ * the variant whose selected mark is a rule rather than a fill.
+ *
+ * Two things about it are deliberate and neither is obvious.
+ *
+ * **It is the size a `subtle` trigger's fill is** — the label with the same
+ * padding round it — and it keeps that same distance again off the panel
+ * edge, which is what {@link railGap} adds to a `line` trigger's padding to
+ * make room for. The gap is not decoration: the strip's rule runs *under*
+ * its triggers, so a fill over the whole box would take a bite out of that
+ * line for exactly the width of whatever the pointer was on, and one that
+ * merely cleared the rule would read as a block resting on it. Which is also
+ * why it is a box and not a `backgroundColor` — a background fills the box
+ * it is on, and this must not.
+ *
+ * And the hover that raises it is **state**, not a `:hover` block. `:hover`
+ * lights the node under the pointer and its ancestors (react-x11's
+ * `_updateHover`), and this box is the label's *sibling* — so a wash that
+ * styled itself would go out every time the pointer crossed a letter.
+ */
+function hoverWash(look: TabsLook): ReactElement {
+  const gap = railGap(look);
+  return hx('box', {
+    key: 'wash',
+    style: [
+      {
+        position: 'absolute',
+        top: 0,
+        start: 0,
+        borderRadius: WASH_CORNER,
+        backgroundColor: '$surfaceHover',
+      },
+      look.vertical ? { bottom: 0, end: gap } : { bottom: gap, end: 0 },
+    ],
+  });
+}
+
+/**
+ * The air a `line` trigger keeps between its wash and the strip's rule, and
+ * therefore the padding it carries beyond the label's own on that one side.
+ * It is the label's padding on the axis the rule crosses, so that the wash's
+ * two distances — text to its edge, its edge to the line — come out the same.
+ *
+ * `0` for every other variant: they have no wash to stand off the rule, and
+ * an `outline` tab's fill is *supposed* to reach it.
+ */
+function railGap(look: TabsLook): number {
+  if (look.variant !== 'line') return 0;
+  return look.vertical ? look.px : look.py;
+}
+
+/** What a stop on the strip is, as far as its looks are concerned. */
+interface TabState {
+  selected: boolean;
+  disabled: boolean;
+  hovered: boolean;
+  /** A `fitted` strip is letting its stops fill it. */
+  grow: boolean;
+}
+
+/** A stop's own style, and the boxes drawn around its label. */
+interface TabChrome {
+  /** The box's style, under whatever the caller merges over it. */
+  style: Style;
+  /** Written **before** the label, so a descender that dips below the
+   *  baseline paints over them rather than being cut. */
+  behind: ReactNode;
+  /** Written after it: the `line` marker rides the panel edge, over the
+   *  strip's rule. */
+  after: ReactNode;
+}
+
+/**
+ * Everything a stop on the strip looks like, per variant.
+ *
+ * Shared because the strip has two kinds of stop and they have to be
+ * indistinguishable: a `<TabsTrigger>`, and the overflow button, which wears
+ * the selected look whenever the tab that is selected is one of the ones it
+ * is holding. Two copies of this switch would drift on the first variant
+ * anybody touched.
+ *
+ * Each selected state is opaque where it has to cover the strip's rule, and
+ * every ink change is a `$token` so a `theme` prop above still wins.
+ */
+function tabChrome(
+  look: TabsLook,
+  indicator: TabsIndicatorProps | null,
+  state: TabState,
+): TabChrome {
+  const { selected, disabled, hovered, grow } = state;
+  const vertical = look.vertical;
+  const variantStyle: Style[] = [];
+  const hover: Style = {};
+  switch (look.variant) {
+    case 'line':
+    case 'plain':
+      Object.assign(hover, { ':hover': { color: '$text' } });
+      break;
+    case 'subtle':
+      variantStyle.push({ borderRadius: WASH_CORNER });
+      if (selected)
+        variantStyle.push({
+          backgroundColor: over(look.ground, look.accent, 0.15),
+        });
+      else
+        Object.assign(hover, {
+          ':hover': { backgroundColor: '$surfaceHover' },
+          ':active': { backgroundColor: '$surfaceActive' },
+        });
+      break;
+    case 'enclosed':
+      // Every trigger carries the border so selecting one cannot change its
+      // size — only the selected one inks it.
+      variantStyle.push({
+        borderRadius: WASH_CORNER,
+        borderWidth: 1,
+        borderColor: 'transparent',
+      });
+      if (selected)
+        variantStyle.push({
+          backgroundColor: look.ground,
+          borderColor: '$border',
+        });
+      else Object.assign(hover, { ':hover': { color: '$text' } });
+      break;
+    case 'outline':
+      if (selected)
+        variantStyle.push({
+          // The fill is the ground, so the tab and its panel read as one
+          // surface — and it is what covers the strip's rule underneath.
+          // Rounded so the fill stays inside the frame's shoulders, but
+          // deliberately **borderless**: this renderer paints a node's
+          // border *after* its children (`Node.paint` — children, then
+          // `_paintBorder`), so a border here could never be opened by a
+          // child laid over it. The frame below carries the stroke instead.
+          backgroundColor: look.ground,
+          borderRadius: CORNER,
+        });
+      else
+        Object.assign(hover, {
+          ':hover': { backgroundColor: '$surfaceHover' },
+        });
+      break;
+  }
+
+  // The `line` strip's hover — see {@link hoverWash} for why it is a box and
+  // why `hovered` is state rather than a `:hover` block.
+  const wash =
+    look.variant === 'line' && hovered && !disabled ? hoverWash(look) : null;
+
+  // The `outline` tab's shape, from two stacked children — a shape the style
+  // vocabulary cannot say in one box. `borderRadius` is one number and
+  // requires a uniform border, so "rounded shoulders, open bottom" is drawn
+  // as: a *frame* (inset-0 box carrying the full rounded border) and, after
+  // it, a *skirt* (a strip of ground over the frame's panel edge, covering
+  // the border and the two corners that would curl toward the panel, and
+  // redrawing the straight side walls over itself). The skirt can cover the
+  // frame only because they are siblings — a node's own border paints over
+  // its children, which is why the frame is not the trigger's border.
+  const outlineShape =
+    look.variant === 'outline' && selected
+      ? [
+          hx('box', {
+            key: 'frame',
+            style: {
+              position: 'absolute',
+              top: 0,
+              bottom: 0,
+              start: 0,
+              end: 0,
+              borderWidth: 1,
+              borderColor: '$border',
+              borderRadius: CORNER,
+            },
+          }),
+          hx('box', {
+            key: 'skirt',
+            style: [
+              {
+                position: 'absolute',
+                backgroundColor: look.ground,
+                borderColor: '$border',
+              },
+              vertical
+                ? {
+                    top: 0,
+                    bottom: 0,
+                    end: 0,
+                    width: CORNER + 1,
+                    borderTopWidth: 1,
+                    borderBottomWidth: 1,
+                  }
+                : {
+                    start: 0,
+                    end: 0,
+                    bottom: 0,
+                    height: CORNER + 1,
+                    borderStartWidth: 1,
+                    borderEndWidth: 1,
+                  },
+            ],
+          }),
+        ]
+      : null;
+
+  // The selected marker in the `line` variant: a 2px box riding the panel
+  // edge of the stop, over the strip's 1px rule.
+  const marker =
+    look.variant === 'line'
+      ? hx('box', {
+          style: [
+            {
+              position: 'absolute',
+              backgroundColor: selected ? look.accent : 'transparent',
+              transition: { backgroundColor: 100 },
+            },
+            vertical
+              ? { top: 0, bottom: 0, end: 0, width: INDICATOR }
+              : { left: 0, right: 0, bottom: 0, height: INDICATOR },
+          ],
+        })
+      : null;
+
+  // A `<TabsIndicator>` in the strip is drawn here, by the selected stop,
+  // behind its label. Layout owns its geometry — see the part's own comment.
+  const chip =
+    indicator && selected
+      ? hx('box', {
+          key: 'chip',
+          style: styled(
+            {
+              position: 'absolute',
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              zIndex: -1,
+              borderRadius: WASH_CORNER,
+              backgroundColor: over(look.ground, look.accent, 0.15),
+            },
+            indicator.style,
+          ),
+        })
+      : null;
+
+  const ink = disabled
+    ? '$textMuted'
+    : selected
+      ? look.variant === 'line' || look.variant === 'subtle'
+        ? look.accent
+        : '$text'
+      : '$textMuted';
+
+  return {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+      ...(grow && { flexGrow: 1 }),
+      gap: TRIGGER_GAP,
+      // Logical rather than left/right, because the one side that differs is
+      // the panel side: a `line` trigger carries the wash's air off the rule
+      // as padding, so the label keeps the same room a `subtle` one gives it
+      // and the wash still has somewhere to stop.
+      paddingTop: look.py,
+      paddingBottom: look.py + (vertical ? 0 : railGap(look)),
+      paddingStart: look.px,
+      paddingEnd: look.px + (vertical ? railGap(look) : 0),
+      fontSize: look.font,
+      color: ink,
+      ...(disabled ? {} : { cursor: 'pointer' }),
+      transition: { backgroundColor: 100, color: 100 },
+      ...Object.assign({}, ...variantStyle),
+      ...(disabled ? {} : hover),
+    },
+    behind: [chip, wash, outlineShape],
+    after: marker,
+  };
+}
+
 // --- root -------------------------------------------------------------------
 
 /** What `onValueChange` reports — Chakra's `details` object, so a handler
@@ -240,6 +594,18 @@ export interface TabsProps {
   fitted?: boolean;
   /** Where the triggers sit along the strip. Default `'start'`. */
   justify?: 'start' | 'center' | 'end';
+  /**
+   * What a **horizontal** strip does with more tabs than it has room for.
+   *
+   * `'menu'` (the default) keeps as many as fit and moves the rest behind a
+   * button at the end of the strip, which drops them as a menu; the selected
+   * tab is never one of them. `'clip'` is the older behaviour — the strip
+   * overflows and the tabs past its edge are simply not visible.
+   *
+   * A vertical strip ignores this: it overflows downward, where a menu is
+   * the wrong answer and a scroll is the right one.
+   */
+  overflow?: TabsOverflow;
   /** Build a panel the first time its tab is selected rather than up front.
    *  Default false: every panel mounts, hidden, so its state is live. */
   lazyMount?: boolean;
@@ -320,6 +686,7 @@ export function Tabs(props: TabsProps): ReactElement {
       manual: props.activationMode === 'manual',
       fitted: props.fitted ?? false,
       justify: props.justify,
+      overflow: props.overflow ?? 'menu',
       accent,
       ground,
       text: String(theme.text),
@@ -341,6 +708,7 @@ export function Tabs(props: TabsProps): ReactElement {
       props.activationMode,
       props.fitted,
       props.justify,
+      props.overflow,
       props.lazyMount,
       props.unmountOnExit,
       accent,
@@ -379,6 +747,565 @@ export function Tabs(props: TabsProps): ReactElement {
   );
 }
 
+// --- overflow ---------------------------------------------------------------
+
+/**
+ * A trigger the strip could put in its menu, read off the element the app
+ * wrote. The menu draws the same children the tab does, so there is no
+ * second place to name a label and no way for the two to disagree.
+ */
+interface OverflowItem {
+  value: string;
+  disabled: boolean;
+  /**
+   * What this trigger's own children hash to — every primitive child, and a
+   * placeholder for each element one. A relabelled tab has to be measured
+   * again rather than kept at the width its old label had, and a tab in the
+   * menu is not on the strip to be measured, so the width cache is keyed by
+   * this as well as by `value`.
+   */
+  key: string;
+  children: ReactNode;
+}
+
+/** What the strip's own re-measure needs and `DrawnNode` does not carry: the
+ *  owning window's "something moved" signal, the display scale `abs` is in,
+ *  and the box inside the padding. The same widening `internal/widget.ts`
+ *  documents — a ref's public contract is geometry and focus. */
+interface StripNode {
+  root?: {
+    onAnchorChange?: (fn: () => void) => () => void;
+  } | null;
+  scale?: number;
+  contentBox?: () => { width: number; height: number };
+}
+
+/** A tab's laid-out size in logical pixels, or `null` for one the strip has
+ *  not drawn since its label last changed. */
+type SizeOf = (
+  value: string,
+  key: string,
+) => { width: number; height: number } | null;
+
+/** The strip's tab stop when the focus is on the overflow button rather than
+ *  on a tab. A NUL is not a value any trigger can be given. */
+const MORE = '\u0000more';
+
+const NONE: readonly string[] = [];
+
+function sameValues(a: readonly string[], b: readonly string[]): boolean {
+  return a.length === b.length && a.every((value, i) => b[i] === value);
+}
+
+/** Every primitive child, joined — see {@link OverflowItem.key}. */
+function labelKey(children: ReactNode): string {
+  const parts: string[] = [];
+  React.Children.forEach(children, (child) => {
+    parts.push(
+      typeof child === 'string' || typeof child === 'number'
+        ? String(child)
+        : '\u0000',
+    );
+  });
+  return parts.join('\u0001');
+}
+
+/**
+ * Which tabs do not fit, in the order they were written.
+ *
+ * The whole thing runs off what layout actually did, because nothing else
+ * here can answer it: a tab's width is its label in the theme's face at the
+ * size the theme is set to, plus whatever the app hung beside it. So the
+ * strip measures the triggers it has drawn and remembers what each one came
+ * out at, and the tabs in the menu are chosen from those remembered widths —
+ * they are not on the strip to be measured while they are in the menu.
+ *
+ * **Two passes, not one.** A tab whose width is not known yet (a first
+ * render, a tab just added, a label just changed) puts the strip back to
+ * showing everything for one pass, which is what gives it a width; the pass
+ * after that is the one that decides. That costs a frame of a strip
+ * overflowing its own edge — clipped, since the strip clips while the menu
+ * is on — and buys a fixed point: what is hidden is a pure function of the
+ * remembered widths and the room, so the answer does not move unless
+ * something really did.
+ *
+ * **When it re-runs.** After every commit, through `afterLayout` — react-x11
+ * lays out on a frame flush rather than in the commit, so an effect reads the
+ * *previous* pass's geometry. And after every layout this component did not
+ * cause, through the owning window's `onAnchorChange`: the strip getting
+ * narrower is usually the window being resized, which re-lays out without
+ * re-rendering anything and would otherwise leave the menu answering a width
+ * the strip stopped having.
+ */
+function useOverflow(
+  active: boolean,
+  items: readonly OverflowItem[],
+  look: TabsLook,
+  listRef: React.RefObject<DrawnNode | null>,
+  moreRef: React.RefObject<DrawnNode | null>,
+): { hidden: readonly string[]; sizeOf: SizeOf } {
+  const widths = React.useRef(
+    new Map<string, { key: string; width: number; height: number }>(),
+  );
+  // What `abs` was in when those were taken, so the menu can ask for them
+  // back in the logical pixels a style length speaks.
+  const measured = React.useRef(1);
+  const [hidden, setHidden] = React.useState<readonly string[]>(NONE);
+  // Read and written straight, beside the state: two `onAnchorChange`
+  // notifications can land in one flush, and the second has to see what the
+  // first decided rather than the render's stale copy.
+  const hiddenRef = React.useRef(hidden);
+  hiddenRef.current = hidden;
+
+  const measure = (): void => {
+    const list = listRef.current as (DrawnNode & StripNode) | null;
+    const room = list?.contentBox?.().width ?? 0;
+    // Nothing laid out yet, or laid out inside a hidden panel (`display:
+    // 'none'` is out of layout, so the strip is 0 wide there). Answering
+    // "everything overflows" would empty the strip into the menu and flash
+    // it back the moment the panel is shown.
+    if (!list || !(room > 0)) return;
+    // `abs` and `contentBox()` are device pixels; a style length is logical.
+    // Everything below is device, so the style numbers convert once, here.
+    const scale = list.scale && list.scale > 0 ? list.scale : 1;
+    measured.current = scale;
+    const gap = stripGap(look.variant) * scale;
+
+    const drawn = (value: string): DrawnNode | null => {
+      const node = look.triggers.get(value)?.node;
+      return node && node.abs.width > 0 ? node : null;
+    };
+
+    // A `fitted` strip with nothing hidden has already grown its triggers to
+    // fill it, so those widths are the strip shared out rather than what a
+    // tab needs, and writing them down would be writing down the answer to
+    // the wrong question. The exception is the pass that matters: a `fitted`
+    // strip that is *overflowing* had no free space to grow into, so the
+    // widths are honest — and that is exactly the pass the menu appears on.
+    let live = 0;
+    let count = 0;
+    for (const item of items) {
+      const node = drawn(item.value);
+      if (!node) continue;
+      live += node.abs.width;
+      count += 1;
+    }
+    live += Math.max(0, count - 1) * gap;
+    if (!look.fitted || hiddenRef.current.length > 0 || live > room) {
+      for (const item of items) {
+        const node = drawn(item.value);
+        if (!node) continue;
+        widths.current.set(item.value, {
+          key: item.key,
+          width: node.abs.width,
+          height: node.abs.height,
+        });
+      }
+    }
+    // A tab that has left the strip has no width worth keeping — and this is
+    // the only thing that ever empties the map.
+    const present = new Set(items.map((item) => item.value));
+    for (const value of [...widths.current.keys()]) {
+      if (!present.has(value)) widths.current.delete(value);
+    }
+
+    const known = (item: OverflowItem): number | null => {
+      const seen = widths.current.get(item.value);
+      return seen && seen.key === item.key ? seen.width : null;
+    };
+
+    let natural = Math.max(0, items.length - 1) * gap;
+    let unmeasured = false;
+    for (const item of items) {
+      const width = known(item);
+      if (width === null) unmeasured = true;
+      else natural += width;
+    }
+
+    // The measuring pass — everything on the strip, nothing decided yet —
+    // is `NONE`, which is also the answer when it all fits.
+    let next: readonly string[] = NONE;
+    if (!unmeasured && natural > room) {
+      // The button is measured once it exists; before that it is guessed at
+      // its own padding plus a chevron, and the pass after it mounts
+      // corrects the guess.
+      const more =
+        moreRef.current?.abs.width || (look.px * 2 + look.font) * scale;
+      const budget = room - more - gap;
+      const shown = new Set<string>();
+      let used = 0;
+      const take = (value: string, width: number): void => {
+        used += width + (shown.size ? gap : 0);
+        shown.add(value);
+      };
+      // Straight down the strip, and the first tab that does not fit ends
+      // it: which tabs are on the strip is a question about room, and
+      // nothing else. The selected tab is not pulled out of the menu to keep
+      // its place — the button wears the selected look instead, so the strip
+      // does not reshuffle itself every time a tab is picked out of it.
+      for (const item of items) {
+        if (shown.has(item.value)) continue;
+        const width = known(item) ?? 0;
+        if (used + width + (shown.size ? gap : 0) > budget) break;
+        take(item.value, width);
+      }
+      next = items
+        .filter((item) => !shown.has(item.value))
+        .map((item) => item.value);
+    }
+
+    if (sameValues(next, hiddenRef.current)) return;
+    hiddenRef.current = next;
+    setHidden(next);
+  };
+
+  // Re-read through a ref so the subscriptions below run this render's
+  // closure without being torn down and rebuilt for every one of them.
+  const measureRef = React.useRef(measure);
+  measureRef.current = measure;
+
+  // Deliberately no dependency array: any commit can move a tab's width.
+  React.useEffect(() => {
+    if (!active) return undefined;
+    const tick = afterLayout(() => measureRef.current());
+    return () => cancelAfterLayout(tick);
+  });
+
+  React.useEffect(() => {
+    if (!active) return undefined;
+    const root = (listRef.current as StripNode | null)?.root;
+    if (!root?.onAnchorChange) return undefined;
+    return root.onAnchorChange(() => measureRef.current());
+  }, [active, listRef]);
+
+  // `overflow="clip"` turned on mid-life, or the strip turned vertical: hand
+  // the tabs back rather than leaving them in a menu nothing draws.
+  React.useEffect(() => {
+    if (!active && hiddenRef.current.length > 0) {
+      hiddenRef.current = NONE;
+      setHidden(NONE);
+    }
+  }, [active]);
+
+  const sizeOf = React.useCallback<SizeOf>((value, key) => {
+    const seen = widths.current.get(value);
+    if (!seen || seen.key !== key) return null;
+    const scale = measured.current || 1;
+    return { width: seen.width / scale, height: seen.height / scale };
+  }, []);
+
+  return { hidden: active ? hidden : NONE, sizeOf };
+}
+
+/**
+ * The overflow menu's own size, worked out from the measurements the strip
+ * already took rather than left to the popup.
+ *
+ * A `<popup>` can size itself from its content, and that is normally the
+ * right answer — but its placement is then a function of a number nothing
+ * outside it can see, which is a bad thing for the one popup here whose
+ * anchor moves every time the strip re-fits. A menu row is the same content
+ * as the tab it stands for — same label, same face, same gap, same glyph
+ * beside it — laid out with the row's padding instead of the tab's, so the
+ * strip's own measurement answers it exactly.
+ *
+ * `null` when a tab in the menu has not been measured, which is the pass
+ * where nothing is decided anyway; the popup sizes itself for that frame.
+ */
+function menuSheet(
+  look: TabsLook,
+  items: readonly OverflowItem[],
+  sizeOf: SizeOf,
+): { width: number; height: number } | null {
+  if (items.length === 0) return null;
+  let content = 0;
+  let rows = 0;
+  for (const item of items) {
+    const size = sizeOf(item.value, item.key);
+    if (!size) return null;
+    content = Math.max(content, size.width - look.px * 2 + MENU_ROW_PX * 2);
+    // …and off the height, the air a `line` trigger keeps under its wash on
+    // top of its padding: a menu row has no rule to stand off.
+    rows += size.height - look.py * 2 - railGap(look) + MENU_ROW_PY * 2;
+  }
+  const frame = (SHEET_PAD + SHEET_BORDER) * 2;
+  return {
+    width: Math.ceil(Math.max(content + frame, MENU_MIN_WIDTH)),
+    height: Math.ceil(rows + (items.length - 1) * MENU_ROW_GAP + frame),
+  };
+}
+
+/**
+ * The button at the end of a strip that ran out of room, and the menu it
+ * drops.
+ *
+ * **It is a stop on the strip like any other**, drawn from the same
+ * {@link tabChrome} the triggers are — so when the selected tab is one of
+ * the ones it is holding, the button wears the selected look (the accent
+ * marker under a `line` strip, the chip on a `subtle` one) and the menu
+ * marks the row. That is what a tab picked out of the menu does instead of
+ * displacing a tab that fitted: the strip keeps the tabs it has room for,
+ * and the button says the selection is behind it. It also takes the strip's
+ * tab stop while it holds the selection, since the trigger that would
+ * normally have it is not on the strip to hold anything.
+ *
+ * The menu is a `<popup>` anchored to the button and sized from its own
+ * content — override-redirect, grabbing the pointer, dismissed by a press
+ * anywhere else. Which means it never takes the focus, so **the button keeps
+ * the keyboard** and hands the menu its keys, the way `<DatePicker>`'s
+ * trigger does: Down/Up open it and walk it, Enter and Space commit, Escape
+ * shuts it. A press elsewhere in the window blurs the button and that shuts
+ * it too, and `useDismissOnWindowBlur` covers the one case a blur cannot —
+ * the *window* going to the background, which leaves the button focused.
+ */
+function TabsMore(props: {
+  items: readonly OverflowItem[];
+  look: TabsLook;
+  moreRef: React.RefObject<DrawnNode | null>;
+  /** What the sheet comes to, from the strip's own measurements — see
+   *  {@link menuSheet}. `null` leaves the popup to size itself. */
+  sheet: { width: number; height: number } | null;
+}): ReactElement {
+  const { items, look, moreRef, sheet } = props;
+  const strip = React.useContext(StripContext);
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(false);
+  // -1 is "nothing yet", which is what a menu dropped with the mouse opens
+  // on: a row lit before the pointer or the arrows have said anything is a
+  // row the next Enter would commit by accident.
+  const [active, setActive] = React.useState(-1);
+  // The button wears whatever the tabs beside it wear — including the reason
+  // a `line` strip's fill has to be a box ({@link hoverWash}), which is why
+  // this is tracked rather than declared.
+  const [hovered, setHovered] = React.useState(false);
+  const lit = hovered || open;
+
+  /** Where the selection is, when it is behind this button. */
+  const chosen = items.findIndex((item) => item.value === look.selected);
+  const holds = chosen >= 0;
+
+  const close = (): void => setOpen(false);
+  useDismissOnWindowBlur(moreRef, open, close);
+
+  // The menu is drawn from the tabs the strip could not fit, and that set
+  // moves under it — a resize while it is open can take one back. Keeping
+  // the cursor in range is cheaper than closing on every re-fit.
+  const at = items.length ? Math.min(active, items.length - 1) : -1;
+
+  const choose = (value: string): void => {
+    close();
+    look.select(value);
+    // The focus stays here: the tab that was picked is still in this menu,
+    // and this button is the stop on the strip that now stands for it.
+  };
+
+  const step = (delta: number): number => {
+    const n = items.length;
+    if (n === 0) return -1;
+    // From "nothing yet", Down means the first row and Up means the last —
+    // which is what starting one step outside either end comes to.
+    const from = at < 0 ? (delta > 0 ? -1 : 0) : at;
+    for (let i = 1; i <= n; i++) {
+      const index = (((from + delta * i) % n) + n) % n;
+      if (!items[index]?.disabled) return index;
+    }
+    return at;
+  };
+
+  const commit = (): void => {
+    const item = items[at];
+    if (item && !item.disabled) choose(item.value);
+  };
+
+  const onKeyDown = (ev: KeyboardEvent): void => {
+    if (ev.keysym === XK_ESCAPE) {
+      if (!open) return;
+      close();
+      ev.preventDefault();
+      ev.stopPropagation();
+      return;
+    }
+    if (!open) {
+      if (ev.keysym !== XK_DOWN && ev.keysym !== XK_UP) return;
+      // Opened from the keyboard, so it opens on a row: the selected one if
+      // the selection is in here, and otherwise the end the key came from.
+      setActive(holds ? chosen : ev.keysym === XK_UP ? items.length - 1 : 0);
+      setOpen(true);
+      ev.preventDefault();
+      ev.stopPropagation();
+      return;
+    }
+    // An open menu owns the keyboard: the strip's own arrow walk is one
+    // bubble away, and a Down that both moved the menu's cursor and roved
+    // the focus off the button would close the menu it had just moved.
+    if (ev.keysym === XK_DOWN) setActive(step(1));
+    else if (ev.keysym === XK_UP) setActive(step(-1));
+    else if (ev.keysym === XK_RETURN || ev.codepoint === 32) commit();
+    else return;
+    ev.preventDefault();
+    ev.stopPropagation();
+  };
+
+  const row = (item: OverflowItem, index: number): ReactElement =>
+    hx(
+      'box',
+      {
+        key: item.value,
+        // A menu of tabs is a set of mutually exclusive choices, which is
+        // what this role says — and it is the only place a screen reader
+        // hears about a tab that is not on the strip to carry `role="tab"`.
+        role: 'menuitemradio',
+        'aria-checked': index === chosen,
+        disabled: item.disabled || undefined,
+        onMouseEnter: () => {
+          if (!item.disabled) setActive(index);
+        },
+        onClick: () => {
+          if (!item.disabled) choose(item.value);
+        },
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: TRIGGER_GAP,
+          paddingLeft: MENU_ROW_PX,
+          paddingRight: MENU_ROW_PX,
+          paddingTop: MENU_ROW_PY,
+          paddingBottom: MENU_ROW_PY,
+          borderRadius: WASH_CORNER,
+          fontSize: look.font,
+          color: item.disabled ? '$textMuted' : '$text',
+          ...(item.disabled
+            ? {}
+            : {
+                cursor: 'pointer',
+                // The lit row is state rather than a `:hover` block because
+                // the arrows move it too, and a menu with two lit rows —
+                // the pointer's and the keyboard's — is worse than one.
+                ...(index === at && { backgroundColor: '$surfaceHover' }),
+              }),
+        },
+      },
+      // The selected row's marker: the strip's own accent bar, turned to
+      // stand along a row instead of under a tab. It is a mark and not a
+      // fill so it cannot be confused with the row the cursor is on — both
+      // can be true of the same row.
+      index === chosen
+        ? hx('box', {
+            key: 'mark',
+            style: {
+              position: 'absolute',
+              start: 0,
+              top: MENU_ROW_PY / 2,
+              bottom: MENU_ROW_PY / 2,
+              width: INDICATOR,
+              borderRadius: INDICATOR / 2,
+              backgroundColor: look.accent,
+            },
+          })
+        : null,
+      withText(item.children, CAP_TRIM),
+    );
+
+  const chrome = tabChrome(look, strip?.indicator ?? null, {
+    selected: holds,
+    disabled: false,
+    hovered: lit,
+    // Never: the button only exists while something is hidden, and a
+    // `fitted` strip has stopped sharing its width out by then.
+    grow: false,
+  });
+
+  return hx(
+    'box',
+    {
+      ref: moreRef,
+      role: 'button',
+      'aria-haspopup': 'menu',
+      'aria-expanded': open,
+      'aria-label': `${items.length} more tab${items.length === 1 ? '' : 's'}`,
+      focusable: true,
+      // The strip is one tab stop. A tab holds it — unless the selected tab
+      // is one of the ones behind this button, and then this holds it.
+      tabIndex: holds ? 0 : -1,
+      // On the press, not the release: a control whose whole purpose is to
+      // be looked at has nothing to gain from waiting out the click.
+      onMouseDown: () => {
+        setActive(-1);
+        setOpen((was) => !was);
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onFocus: () => look.setFocused(MORE),
+      onBlur: () => {
+        look.setFocused(null);
+        close();
+      },
+      onKeyDown,
+      style: [
+        chrome.style,
+        // An open button reads as engaged in every variant, not only the one
+        // whose wash is a box — and not when it is already wearing the
+        // selected look, which outranks a hover.
+        lit && !holds
+          ? look.variant === 'line'
+            ? { color: '$text' }
+            : { color: '$text', backgroundColor: '$surfaceHover' }
+          : {},
+      ],
+      'data-testname': 'tabs-more',
+    },
+    chrome.behind,
+    h(Icon, { name: 'chevronDown', size: look.font - 4 }),
+    chrome.after,
+    open &&
+      items.length > 0 &&
+      hx(
+        'popup',
+        {
+          theme,
+          // Sized here rather than from its own content, so where it lands is
+          // arithmetic this component can see — {@link menuSheet}.
+          ...(sheet ?? {}),
+          anchor: {
+            to: moreRef,
+            placement: 'bottom',
+            // The menu hangs off the end of the strip because the button
+            // does, and `end` mirrors on its own in an RTL subtree.
+            align: 'end',
+          },
+          grab: true,
+          onDismiss: close,
+          // ARGB where the display has it, so the corners the sheet gives up
+          // are the desktop rather than a colour — the same call
+          // `<DatePicker>`'s sheet makes, and the same reason the window
+          // paints nothing itself when it can be seen through.
+          transparent: true,
+          style: {
+            backgroundColor: theme.background,
+            '@supports transparency': { backgroundColor: 'transparent' },
+          } as SupportsStyle,
+        },
+        hx(
+          'box',
+          {
+            role: 'menu',
+            style: {
+              flexGrow: 1,
+              minWidth: MENU_MIN_WIDTH,
+              padding: SHEET_PAD,
+              gap: MENU_ROW_GAP,
+              borderWidth: SHEET_BORDER,
+              borderColor: '$border',
+              backgroundColor: theme.background,
+              '@supports transparency': { borderRadius: theme.radiusPopup },
+            } as SupportsStyle,
+          },
+          items.map(row),
+        ),
+      ),
+  );
+}
+
 // --- list -------------------------------------------------------------------
 
 export interface TabsListProps {
@@ -397,31 +1324,75 @@ export interface TabsListProps {
  * to the ends. In `manual` mode focus moves without selecting, and Enter or
  * Space commits — those keys are not handled here, because core makes them
  * the click the trigger's own `onClick` already is.
+ *
+ * A horizontal strip with more tabs than room keeps the ones that fit and
+ * drops the rest into a menu at its end (`overflow`, on the root). The
+ * menu's button is the last stop on the same walk.
  */
 export function TabsList(props: TabsListProps): ReactElement {
   const look = useLook('TabsList');
   const rtl = useDirection() === 'rtl';
   const { vertical } = look;
+  const listRef = React.useRef<DrawnNode | null>(null);
+  const moreRef = React.useRef<DrawnNode | null>(null);
 
   // A `<TabsIndicator>` written into the strip, Chakra-style, is read here
   // and handed to the triggers — the selected one draws it. It has to be a
   // direct child for this to see it; anything else in the strip renders
   // where it was written.
+  //
+  // The triggers come off the same walk, for the overflow menu: it draws the
+  // children the app wrote on the trigger, so a tab that moves into the menu
+  // keeps its label without the app naming it twice. Anything in the strip
+  // that is *not* a trigger stays on the strip and is not accounted for —
+  // the arithmetic is about tabs.
+  const children = React.Children.toArray(props.children);
   let indicator: TabsIndicatorProps | null = null;
-  for (const child of React.Children.toArray(props.children)) {
-    if (React.isValidElement(child) && child.type === TabsIndicator) {
+  const items: OverflowItem[] = [];
+  for (const child of children) {
+    if (!React.isValidElement(child)) continue;
+    if (child.type === TabsIndicator) {
       indicator = child.props as TabsIndicatorProps;
+    } else if (child.type === TabsTrigger) {
+      const trigger = child.props as TabsTriggerProps;
+      items.push({
+        value: trigger.value,
+        disabled: trigger.disabled ?? false,
+        key: labelKey(trigger.children),
+        children: trigger.children,
+      });
     }
   }
 
+  // One tab cannot overflow into a menu that would take more room than it
+  // does, so the machinery does not start until there are two.
+  const { hidden, sizeOf } = useOverflow(
+    look.overflow === 'menu' && !vertical && items.length > 1,
+    items,
+    look,
+    listRef,
+    moreRef,
+  );
+  const hiddenSet = hidden.length > 0 ? new Set(hidden) : null;
+  const overflowed = hiddenSet
+    ? items.filter((item) => hiddenSet.has(item.value))
+    : [];
+
   const onKeyDown = (ev: KeyboardEvent) => {
     // Where layout put each trigger is the one ordering that cannot drift
     // from what the user sees — mount order can, after a remove and re-add.
-    const entries = [...look.triggers.entries()]
-      .map(([value, entry]) => ({ value, ...entry }))
-      .sort((a, b) =>
-        vertical ? a.node.abs.y - b.node.abs.y : a.node.abs.x - b.node.abs.x,
-      );
+    // The overflow button is a stop on the same walk and sorts in with the
+    // rest, which is what puts it at the end without it being told.
+    const stops = [...look.triggers.entries()].map(([value, entry]) => ({
+      value,
+      ...entry,
+    }));
+    if (moreRef.current) {
+      stops.push({ value: MORE, node: moreRef.current, disabled: false });
+    }
+    const entries = stops.sort((a, b) =>
+      vertical ? a.node.abs.y - b.node.abs.y : a.node.abs.x - b.node.abs.x,
+    );
     // Visual order back to logical: an RTL strip reads right to left. A
     // vertical strip never mirrors — Up is Up.
     const swap = !vertical && rtl;
@@ -441,7 +1412,9 @@ export function TabsList(props: TabsListProps): ReactElement {
     const goTo = (entry: { value: string; node: DrawnNode } | null) => {
       if (!entry) return;
       entry.node.focus();
-      if (!look.manual) look.select(entry.value);
+      // The overflow button selects nothing: it is the way to the tabs that
+      // did not fit, not one of them.
+      if (!look.manual && entry.value !== MORE) look.select(entry.value);
     };
 
     const back = vertical ? XK_UP : swap ? XK_RIGHT : XK_LEFT;
@@ -493,14 +1466,22 @@ export function TabsList(props: TabsListProps): ReactElement {
           padding: 3,
           gap: 2,
         }
-      : { gap: look.variant === 'outline' ? 0 : 2 };
+      : { gap: stripGap(look.variant) };
 
   return h(
-    IndicatorContext.Provider,
-    { value: indicator },
+    StripContext.Provider,
+    {
+      value: {
+        indicator,
+        // A `fitted` strip stops growing its tabs while any of them is in
+        // the menu — see {@link TabsStrip}.
+        grow: look.fitted && hidden.length === 0,
+      },
+    },
     hx(
       'box',
       {
+        ref: listRef,
         role: 'tablist',
         'aria-orientation': look.vertical ? 'vertical' : 'horizontal',
         onKeyDown,
@@ -517,6 +1498,12 @@ export function TabsList(props: TabsListProps): ReactElement {
                     ? 'flex-end'
                     : 'center',
             }),
+            // A pass that has not decided yet draws every tab at its natural
+            // width, which is wider than the strip by definition — clipped
+            // rather than spilling over the panel for the frame it takes.
+            ...(look.overflow === 'menu' && !vertical
+              ? { overflow: 'hidden' }
+              : {}),
             ...chrome,
           },
           props.style,
@@ -524,11 +1511,28 @@ export function TabsList(props: TabsListProps): ReactElement {
         'data-testname': props['data-testname'],
       },
       rule,
-      props.children,
+      hiddenSet
+        ? children.filter(
+            (child) =>
+              !(
+                React.isValidElement(child) &&
+                child.type === TabsTrigger &&
+                hiddenSet.has((child.props as TabsTriggerProps).value)
+              ),
+          )
+        : children,
+      overflowed.length > 0
+        ? h(TabsMore, {
+            key: 'tabs-more',
+            items: overflowed,
+            look,
+            moreRef,
+            sheet: menuSheet(look, overflowed, sizeOf),
+          })
+        : null,
     ),
   );
 }
-
 // --- trigger ----------------------------------------------------------------
 
 export interface TabsTriggerProps {
@@ -548,10 +1552,13 @@ export interface TabsTriggerProps {
  */
 export function TabsTrigger(props: TabsTriggerProps): ReactElement {
   const look = useLook('TabsTrigger');
-  const indicator = React.useContext(IndicatorContext);
+  const strip = React.useContext(StripContext);
+  const indicator = strip?.indicator ?? null;
   const { value, disabled = false } = props;
   const selected = look.selected === value;
-  const vertical = look.vertical;
+  // Tracked rather than declared, because the wash is a box of its own —
+  // {@link hoverWash}.
+  const [hovered, setHovered] = React.useState(false);
 
   // Registration is the ref callback: a new closure each render, so React
   // re-runs it and a `disabled` that changed is re-registered. Order in the
@@ -562,166 +1569,14 @@ export function TabsTrigger(props: TabsTriggerProps): ReactElement {
     else look.triggers.delete(value);
   };
 
-  // What the trigger looks like, per variant. Each selected state is opaque
-  // where it has to cover the strip's rule, and every ink change is a
-  // `$token` so a `theme` prop above still wins.
-  const variantStyle: Style[] = [];
-  const hover: Style = {};
-  switch (look.variant) {
-    case 'line':
-    case 'plain':
-      Object.assign(hover, { ':hover': { color: '$text' } });
-      break;
-    case 'subtle':
-      variantStyle.push({ borderRadius: 4 });
-      if (selected)
-        variantStyle.push({
-          backgroundColor: over(look.ground, look.accent, 0.15),
-        });
-      else
-        Object.assign(hover, {
-          ':hover': { backgroundColor: '$surfaceHover' },
-          ':active': { backgroundColor: '$surfaceActive' },
-        });
-      break;
-    case 'enclosed':
-      // Every trigger carries the border so selecting one cannot change its
-      // size — only the selected one inks it.
-      variantStyle.push({
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: 'transparent',
-      });
-      if (selected)
-        variantStyle.push({
-          backgroundColor: look.ground,
-          borderColor: '$border',
-        });
-      else Object.assign(hover, { ':hover': { color: '$text' } });
-      break;
-    case 'outline':
-      if (selected)
-        variantStyle.push({
-          // The fill is the ground, so the tab and its panel read as one
-          // surface — and it is what covers the strip's rule underneath.
-          // Rounded so the fill stays inside the frame's shoulders, but
-          // deliberately **borderless**: this renderer paints a node's
-          // border *after* its children (`Node.paint` — children, then
-          // `_paintBorder`), so a border here could never be opened by a
-          // child laid over it. The frame below carries the stroke instead.
-          backgroundColor: look.ground,
-          borderRadius: CORNER,
-        });
-      else
-        Object.assign(hover, {
-          ':hover': { backgroundColor: '$surfaceHover' },
-        });
-      break;
-  }
-
-  // The `outline` tab's shape, from two stacked children — a shape the style
-  // vocabulary cannot say in one box. `borderRadius` is one number and
-  // requires a uniform border, so "rounded shoulders, open bottom" is drawn
-  // as: a *frame* (inset-0 box carrying the full rounded border) and, after
-  // it, a *skirt* (a strip of ground over the frame's panel edge, covering
-  // the border and the two corners that would curl toward the panel, and
-  // redrawing the straight side walls over itself). The skirt can cover the
-  // frame only because they are siblings — a node's own border paints over
-  // its children, which is why the frame is not the trigger's border.
-  // Both are written before the label, so a descender that dips below the
-  // baseline paints over them rather than being cut.
-  const outlineShape =
-    look.variant === 'outline' && selected
-      ? [
-          hx('box', {
-            key: 'frame',
-            style: {
-              position: 'absolute',
-              top: 0,
-              bottom: 0,
-              start: 0,
-              end: 0,
-              borderWidth: 1,
-              borderColor: '$border',
-              borderRadius: CORNER,
-            },
-          }),
-          hx('box', {
-            key: 'skirt',
-            style: [
-              {
-                position: 'absolute',
-                backgroundColor: look.ground,
-                borderColor: '$border',
-              },
-              vertical
-                ? {
-                    top: 0,
-                    bottom: 0,
-                    end: 0,
-                    width: CORNER + 1,
-                    borderTopWidth: 1,
-                    borderBottomWidth: 1,
-                  }
-                : {
-                    start: 0,
-                    end: 0,
-                    bottom: 0,
-                    height: CORNER + 1,
-                    borderStartWidth: 1,
-                    borderEndWidth: 1,
-                  },
-            ],
-          }),
-        ]
-      : null;
-
-  // The selected marker in the `line` variant: a 2px box riding the panel
-  // edge of the trigger, over the strip's 1px rule.
-  const marker =
-    look.variant === 'line'
-      ? hx('box', {
-          style: [
-            {
-              position: 'absolute',
-              backgroundColor: selected ? look.accent : 'transparent',
-              transition: { backgroundColor: 100 },
-            },
-            vertical
-              ? { top: 0, bottom: 0, end: 0, width: INDICATOR }
-              : { left: 0, right: 0, bottom: 0, height: INDICATOR },
-          ],
-        })
-      : null;
-
-  // A `<TabsIndicator>` in the strip is drawn here, by the selected trigger,
-  // behind its label. Layout owns its geometry — see the part's own comment.
-  const chip =
-    indicator && selected
-      ? hx('box', {
-          style: styled(
-            {
-              position: 'absolute',
-              top: 0,
-              bottom: 0,
-              left: 0,
-              right: 0,
-              zIndex: -1,
-              borderRadius: 4,
-              backgroundColor: over(look.ground, look.accent, 0.15),
-            },
-            indicator.style,
-          ),
-        })
-      : null;
-
-  const ink = disabled
-    ? '$textMuted'
-    : selected
-      ? look.variant === 'line' || look.variant === 'subtle'
-        ? look.accent
-        : '$text'
-      : '$textMuted';
+  // Everything it looks like, shared with the overflow button beside it —
+  // {@link tabChrome}.
+  const chrome = tabChrome(look, indicator, {
+    selected,
+    disabled,
+    hovered,
+    grow: strip ? strip.grow : look.fitted,
+  });
 
   return hx(
     'box',
@@ -737,34 +1592,15 @@ export function TabsTrigger(props: TabsTriggerProps): ReactElement {
       disabled,
       onFocus: () => look.setFocused(value),
       onBlur: () => look.setFocused(null),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
       onClick: () => !disabled && look.select(value),
-      style: styled(
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexShrink: 0,
-          ...(look.fitted && { flexGrow: 1 }),
-          gap: TRIGGER_GAP,
-          paddingTop: look.py,
-          paddingBottom: look.py,
-          paddingLeft: look.px,
-          paddingRight: look.px,
-          fontSize: look.font,
-          color: ink,
-          ...(disabled ? {} : { cursor: 'pointer' }),
-          transition: { backgroundColor: 100, color: 100 },
-          ...Object.assign({}, ...variantStyle),
-          ...(disabled ? {} : hover),
-        },
-        props.style,
-      ),
+      style: styled(chrome.style, props.style),
       'data-testname': props['data-testname'],
     },
-    chip,
-    outlineShape,
+    chrome.behind,
     withText(props.children, CAP_TRIM),
-    marker,
+    chrome.after,
   );
 }