Tabs released

The arrows come round at both ends, which is the APG's own example. There is no typeahead: the shared walk in core switches it off when the source names no label, and a strip of a handful of visible words is not a list somebody types at. In activation="automatic" a movement also chooses; in "manual" it only moves, and Enter or Space — which this component does not handle, because a <button> already turns them into a click — does the choosing.

Two things separate it from every other component here. The panels are the consumer's markup in the place they wrote it — a <pct-tab> is the panel, and the strip above is drawn from the labels the panels hand up, so nothing is projected twice and the DOM order the pattern asks for is the order anybody would write. And a panel nobody chose is still text in the document: it is hidden="until-found", so the browser's own find-in-page searches it and can reveal it, and the reveal is answered rather than undone (0045) — and because that hiding keeps the element's box rather than taking it away, the panel drops its padding while it is hidden, or every panel nobody chose would leave its own empty space under the chosen one (lesson-150). Every rule that keys on one of the host's attributes reaches its target with child combinators for the same family of reason: a panel may hold another strip, both are the same component and so carry the same encapsulation attribute, and a descendant selector from the outer host would dress the inner one's tabs (lesson-151).

It wears two faces and two layouts, and all four are paint on the same machinery — the same roles, the same roving tabindex, the same walk. variant="underline" is the default: labels on a rail, the chosen one marked by an edge. variant="segmented" makes the strip a recessed track and raises the chosen tab out of it, which is the control a settings screen usually wants. orientation="vertical" puts the strip beside its panel rather than above it, and every distance in that layout is logical, so RTL moves the strip and the rail to the other side with nothing to set (0064).

• Every panel's content is rendered, always. That is the price of the panels being text in the document rather than a branch, and it is the whole of what 0045 buys. A consumer whose panel is expensive wraps their own content in an @defer or an @if — which this component cannot do for them without taking the text back out.
• A tab is a string, not a slot. No icon, no count badge, no two lines. A slot would be a second public directive and a second thing to type, and the first component to want one cannot tell a shared property from an accident of the only case — the same reasoning the toast's tone has.
• The strip scrolls and nothing scrolls it for you. More labels than room means a scroll container, and what carries the keyboard is the platform bringing a focused element into view. There are no scroll buttons, and a pointer user on a device with no horizontal wheel gesture has only the scrollbar. It also has a measured side effect: overflow: auto makes the strip focusable in blink and gecko, though never a stop in the tab order (lesson-126).
• A disabled panel is not findable. Deliberate, and the reason is in 0045: find-in-page promises a way in and a disabled tab has none. It does mean a consumer who disables a tab takes its text out of the page's search, which is a thing to know rather than a thing to fix.
• The panel is always a Tab stop. The APG asks for it only when the content holds nothing focusable, and whether it does is the consumer's business and not knowable here — so the answer that is right in both cases is taken, and it costs one extra stop after the strip.
• The segmented face carries its state in a fill, and a fill is the weakest channel. The track and the raised segment differ by 1.10:1 in the light theme and 1.22:1 in the dark one — measured, and a warn in the policy on purpose. What identifies the chosen tab is the label pair above it, an error-level entry in both themes, plus an outline the forced-colors block restores when the platform drops the fill. A skin that flattens surface-100 into surface gets a segmented strip with no visible track, and is told so by the build rather than blocked (0064).
• A side strip is a flex row, so a very narrow box is the consumer's problem. The strip takes its width from its longest label and the panel takes the rest; there is no breakpoint at which the layout falls back to the stacked one, because a component here answers its container and not the viewport, and the container query that could do it belongs to whoever owns the box. A consumer with a narrow column switches orientation themselves.
• No lazy value write-back. A strip whose value names nothing shows the first reachable panel and does not write that value into the consumer's signal. The alternative is a component that repairs the consumer's state during a render, which finishes in one pass for one consumer and never for two (lesson-94).
• A panel nobody chose contributes no width. It is skipped for layout, not only for paint — that is how until-found hides it — so in a box that shrinks to fit its content (a flex item, an inline-block, a dialog sized by what it holds) the host is exactly as wide as the chosen panel and changes width with every choice. In normal flow the host is a block and takes its container's width; a shrink-wrapped one needs an inline-size of its own, which is what the site's demos give it (lesson-249).