Scroll-Marker Tabs Switcher

A real tab switcher — tablist, tab, and tabpanel roles, roving tabindex, arrow-key navigation between tabs — generated entirely by the browser from `scroll-marker-group: before tabs` on a native scroll-snap row, zero JavaScript and zero `role="tab"`/`aria-selected` attributes written by hand. **Real, current, genuinely new ground for this catalog, cross-checked across independent sources:** Chrome's own 'New in Chrome 154' post (developer.chrome.com/blog/new-in-chrome-154) and Chrome 154 Release Notes (developer.chrome.com/release-notes/154) give the exact syntax — `scroll-marker-group: after links` is the default ('links mode': the generated group gets a navigation role, each `::scroll-marker` gets a link role, and every marker is a sequential tab stop — this is the mode this catalog's existing 'Scroll Marker Carousel' entry already uses, implicitly, via its bare `scroll-marker-group:after`); `scroll-marker-group: before tabs` is new in Chrome 154 ('tabs mode': the group gets a real tablist role, each marker gets a tab role, the originating panel gets a tabpanel role, only the *active* marker is a tab stop, and arrow keys move focus between the rest) — genuinely different generated semantics, not a recolor of the same demo. MDN's own `::scroll-marker-group` reference page independently corroborates the tablist/tab/tabpanel role mapping and separately recommends matching the keyword to visual position (`before` when the marker row sits above/before the content, `after` when below/after it — this entry uses `before`, matching its own tab-bar-above-content layout, unlike the carousel entry's dots-after-content layout). **Stable-date discrepancy, named rather than silently picked:** Chrome's own chromestatus/developer.chrome.com release notes give **2026-09-22** as Chrome 154's stable date — the same date this catalog's day-45 'Inset Underline Reveal' entry already cross-checked and used — but a GIGAZINE report on the same rollout gives **2026-09-25**; this entry follows the official first-party date for consistency with this catalog's own prior entries, rather than treating the two as interchangeable. **Also surfaced, flagged as unverified rather than stated as fact:** a third-party blog (alexanderburgos.netlify.app/blog/css-scroll-markers-tabs) claims inactive tabpanel content can be fully removed from the accessibility tree in tabs mode — a real-sounding implementation detail, but not something MDN's own page states, so not relied on here. **Cross-engine status:** Chrome/Edge 154+ only — Firefox and Safari ship neither mode (the same 'no Firefox/Safari support yet' gap this catalog's own 'Scroll Marker Carousel' entry already found for the base property), so correctly not Baseline. Checked for overlap first: distinct from 'Scroll Marker Carousel' (links mode, round dots + prev/next arrows, a visual carousel) — this entry is the `tabs`-mode value specifically, added in Chrome 154 after the carousel entry was already built, with named text tabs rather than dots and real tablist semantics rather than a link list. **Fit check — DIY $999 tier, real, strong fit:** zero WebGL, zero scroll-jacking, zero JavaScript — a pricing-tier or FAQ-category tab switcher is exactly the small-business content this tier ships; not added to `docs/diy-website-style-catalog.md` this run — that file is still missing (see this run's log entry, now day 47 of the same standing gap). **Correction to this run's own first assumption, found and fixed before shipping, not after:** every prior entry since day 44 established that this sandbox's pinned Chromium (153.0.8010.12) sits behind the Chrome 154/155 features it was testing (`text-decoration-inset`, `margin-trim` both confirmed `CSS.supports(...) === false`), so this entry's first draft assumed the same and was written around an untestable fallback. That assumption was checked, not carried over: `CSS.supports('scroll-marker-group', 'before tabs')` on this exact sandbox returns **`true`** — this specific Chrome 154 feature is genuinely implemented here, unlike the other two. **Verified live, not inferred from `CSS.supports` alone** (a real headless-Chromium render, Playwright, the exact HTML/CSS shipped below, viewport 420×220 @2x): a real screenshot shows three generated pill-shaped tabs ('Starter'/'Growth'/'Pro') positioned above the panel, with the active one genuinely styled via `:target-current` (`getComputedStyle(panel, '::scroll-marker')` on the first panel returned `background-color: rgb(79, 70, 229)` — the `:target-current` color, not the resting `#1f2937`). Clicking the 'Growth' pill moved `.smt-track`'s real `scrollLeft` from `0` to `386` (dragging the correct panel into view) with zero console/page errors. **The accessibility-role claim specifically checked, not assumed from the spec text, with a real nuance found:** Chrome DevTools Protocol's `Accessibility.getFullAXTree` on the rendered page confirms a real `tablist` role and three real `tab` roles were generated — the semantic mapping genuinely exists in this build, not just the visual styling. But no `tabpanel` role was found anywhere in that same tree, despite Chrome's own release notes and MDN both stating the originating panel should get one — a real, verified gap between this build's implementation and its own spec, not a flattened 'fully supported' claim. (Playwright's higher-level `page.locator().ariaSnapshot()` reported no roles at all for this region, which would have under-claimed the gap the other way; the raw CDP `Accessibility.getFullAXTree` call is what actually surfaced the real tablist/tab roles, so that's the method trusted here.) The base, pre-`@supports` row (`scroll-snap-type:x mandatory`, no tab bar) was also confirmed real and usable on its own — a `getComputedStyle` check on all three panels found each computes a non-zero `width`, so the underlying content is never dependent on the enhancement to be reachable. (Vanilla example: live iframe preview + HTML/CSS tabs, no JS tab at all — scroll or drag inside the box, or click a tab once the named bar renders; needs a Chrome/Edge 154+ engine, confirmed present in this run's own sandbox.)

<div class="smt-wrap">
  <div class="smt-track" tabindex="0" aria-label="Plan tabs">
    <section class="smt-panel">
      <h3>Starter</h3>
      <p>Core templates, one revision round.</p>
    </section>
    <section class="smt-panel">
      <h3>Growth</h3>
      <p>Everything in Starter, plus three revisions.</p>
    </section>
    <section class="smt-panel">
      <h3>Pro</h3>
      <p>Everything in Growth, plus priority support.</p>
    </section>
  </div>
  <span class="smt-note">Tab bar needs Chrome/Edge 154+ — arrow keys switch tabs once it renders</span>
</div>