@react-x11/components 0.4.0 → 0.5.0

package/dist/tabs/index.js

@@ -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
@@ -23,9 +30,11 @@
 // to sit on one edge, because borders alone cannot say "this side only" and a
 // box can.
 import React from 'react';
-import { useDirection, useTheme } from 'react-x11';
+import { Icon, useDirection, useTheme } from 'react-x11';
 import { interpolate } from 'react-x11/style';
-import { XK_DOWN, XK_END, XK_HOME, XK_LEFT, XK_RIGHT, XK_UP, } from 'react-x11/keysyms';
+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;
 // --- geometry ---------------------------------------------------------------
@@ -40,6 +49,32 @@ const PANEL_GAP = 8;
 /** The `enclosed` strip's chip, and an `outline` tab's shoulders — one
  *  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;
+/**
+ * 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) {
+    return variant === 'outline' ? 0 : 2;
+}
 // Chakra's proportions, and looser than a first guess would make them: the
 // labels are cap-trimmed, so `py` is the *whole* visible gap over the caps
 // and under the baseline — padding sized for an untrimmed line box reads as
@@ -52,9 +87,7 @@ const SIZES = {
     lg: { px: 20, py: 12, step: 1 },
 };
 const LookContext = React.createContext(null);
-/** What a `<TabsIndicator>` written into the strip asks the selected trigger
- *  to draw. `null` when the strip has none. */
-const IndicatorContext = React.createContext(null);
+const StripContext = React.createContext(null);
 function useLook(part) {
     const look = React.useContext(LookContext);
     if (!look) {
@@ -123,6 +156,249 @@ function styled(base, extra) {
         return [base];
     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) {
+    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) {
+    if (look.variant !== 'line')
+        return 0;
+    return look.vertical ? look.px : look.py;
+}
+/**
+ * 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, indicator, state) {
+    const { selected, disabled, hovered, grow } = state;
+    const vertical = look.vertical;
+    const variantStyle = [];
+    const hover = {};
+    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,
+    };
+}
 /**
  * Tabs.
  *
@@ -175,6 +451,7 @@ export function Tabs(props) {
         manual: props.activationMode === 'manual',
         fitted: props.fitted ?? false,
         justify: props.justify,
+        overflow: props.overflow ?? 'menu',
         accent,
         ground,
         text: String(theme.text),
@@ -195,6 +472,7 @@ export function Tabs(props) {
         props.activationMode,
         props.fitted,
         props.justify,
+        props.overflow,
         props.lazyMount,
         props.unmountOnExit,
         accent,
@@ -219,6 +497,479 @@ export function Tabs(props) {
         'data-testname': props['data-testname'],
     }, props.children));
 }
+/** 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 = [];
+function sameValues(a, b) {
+    return a.length === b.length && a.every((value, i) => b[i] === value);
+}
+/** Every primitive child, joined — see {@link OverflowItem.key}. */
+function labelKey(children) {
+    const parts = [];
+    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, items, look, listRef, moreRef) {
+    const widths = React.useRef(new Map());
+    // 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(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 = () => {
+        const list = listRef.current;
+        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) => {
+            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) => {
+            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 = 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();
+            let used = 0;
+            const take = (value, width) => {
+                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?.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((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, items, sizeOf) {
+    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) {
+    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 = () => 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) => {
+        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) => {
+        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 = () => {
+        const item = items[at];
+        if (item && !item.disabled)
+            choose(item.value);
+    };
+    const onKeyDown = (ev) => {
+        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, index) => 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' },
+            },
+        }, 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 },
+            },
+        }, items.map(row))));
+}
 /**
  * The strip of triggers — a single tab stop, walked with the arrows.
  *
@@ -229,27 +980,66 @@ export function Tabs(props) {
  * 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) {
     const look = useLook('TabsList');
     const rtl = useDirection() === 'rtl';
     const { vertical } = look;
+    const listRef = React.useRef(null);
+    const moreRef = React.useRef(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 = null;
-    for (const child of React.Children.toArray(props.children)) {
-        if (React.isValidElement(child) && child.type === TabsIndicator) {
+    const items = [];
+    for (const child of children) {
+        if (!React.isValidElement(child))
+            continue;
+        if (child.type === TabsIndicator) {
             indicator = child.props;
         }
+        else if (child.type === TabsTrigger) {
+            const trigger = child.props;
+            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) => {
         // 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;
@@ -271,7 +1061,9 @@ export function TabsList(props) {
             if (!entry)
                 return;
             entry.node.focus();
-            if (!look.manual)
+            // 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;
@@ -317,8 +1109,16 @@ export function TabsList(props) {
             padding: 3,
             gap: 2,
         }
-        : { gap: look.variant === 'outline' ? 0 : 2 };
-    return h(IndicatorContext.Provider, { value: indicator }, hx('box', {
+        : { gap: stripGap(look.variant) };
+    return h(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,
@@ -333,10 +1133,28 @@ export function TabsList(props) {
                         ? '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),
         'data-testname': props['data-testname'],
-    }, rule, props.children));
+    }, rule, hiddenSet
+        ? children.filter((child) => !(React.isValidElement(child) &&
+            child.type === TabsTrigger &&
+            hiddenSet.has(child.props.value)))
+        : children, overflowed.length > 0
+        ? h(TabsMore, {
+            key: 'tabs-more',
+            items: overflowed,
+            look,
+            moreRef,
+            sheet: menuSheet(look, overflowed, sizeOf),
+        })
+        : null));
 }
 /**
  * One tab. Prose and glyphs alike are legal children — a string is wrapped
@@ -345,10 +1163,13 @@ export function TabsList(props) {
  */
 export function TabsTrigger(props) {
     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
     // map churns with that, which is why the keyboard sorts by position
@@ -359,157 +1180,14 @@ export function TabsTrigger(props) {
         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 = [];
-    const hover = {};
-    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', {
         role: 'tab',
         'aria-selected': selected,
@@ -522,27 +1200,12 @@ export function TabsTrigger(props) {
         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, withText(props.children, CAP_TRIM), marker);
+    }, chrome.behind, withText(props.children, CAP_TRIM), chrome.after);
 }
 /**
  * A marker that follows the selected trigger — Chakra's `Tabs.Indicator`,