The holographic layer, <os-switch>, and the Components tab

[AllTerrainDeveloper]

The brand ships five mesh gradients and one instruction about them — "meshes reserved for hero surfaces" — and nothing in the component kit was wearing them. This puts them in, as a moment rather than a skin: a control paints the mesh when it is on, selected, primary or filled, and wears ordinary Obsidian the rest of the time. A panel where every surface is iridescent has no identity moments left to spend, which is the failure mode the whole shape of this is built to avoid.

Four commits: the layer, its motion, a pile of Components-tab bugs the review turned up, and two stale labels.

---

The meshes, in CSS

--os-mesh-holo / -pulse / -auro / -star / -mio are the brand's SVGs transcribed stop-for-stop — Holomesh is its base linear plus all eight radial glows, at the artboard's own offsets, radii, colours and alphas, converted from 1440×960 into percentages.

Gradient stacks rather than url()s, and that is the point rather than an optimisation. background-position can slide a gradient, and that slide IS the holographic effect — a foil card shifting hue as you tilt it. An SVG could not be animated, could not be tinted, and would rasterise one flat corner of a 1440×960 artboard onto a 44 px switch track.

src/ui/holo.ts

Eleven css fragments so no component re-decides what holographic means. Three surfaces — holoEdge (an iridescent hairline), holoSheen (a 10%-alpha film), holoFill (the mesh itself, Void ink on top) — and four motions:

glint	a specular band crossing once on hover. Foil does not glow, it catches.
ring	a press response that expands and fades, so a click reads as received before its result paints.
shimmer	the mesh travelling, for waits of unknown length.
enter	scale-and-fade arrival for menus, dialogs and popovers.

Plus the ones that belong to a single component: the <os-segmented> thumb that slides between segments (the group owns one lit pill that moves, rather than each child owning a fill that appears — so the selection travels and the eye follows it), the <os-tabs> underline growing from the centre, <os-toast> arriving from above and leaving sideways, and the <os-avatar> presence ring, which pulses only on online so "who is here" stops depending on telling three dot colours apart.

Every fragment honours prefers-reduced-motion by stopping the tilt — never by removing the fill. A control that lost its mesh would lose its state, not just its animation.

<os-switch>

New component. role="switch" on a real <button>, so Space, Enter, the disabled semantics and the focus ring come from the platform. Off is a lifted well; on is the Holomesh with a Pulse glow and Void ink. Tap, drag (the knob tracks the pointer live and snaps past the midpoint), plus ArrowLeft/Home and ArrowRight/End for absolute off/on — the pair a screen-reader user can use without tracking the current state.

It emits os-checkbox-change alongside os-switch-change, so swapping a checkbox for a switch is a tag change and nothing else.

Dimming Pulse

Per a designer note, and the measurement disagrees with the premise. Pulse #f252fc is not a contrast problem — it carries 6.2:1 against Obsidian. It is saturated (HSL 296, 97, 65), and what hurts is where it is spread rather than stated.

So --os-ui-accent stays #f252fc (that one is the brand's, not ours, and brand-palette.test.ts pins it) and --os-ui-accent-dim #d92ee3 takes over everything ambient — glows, washes, focus blooms. Turning the station up or down is now one edit. The focus ring deliberately does not follow it; only the bloom behind it does, because a focus indicator is the last place to trade legibility for calm.

---

Three contrast fixes, all measured

The switch changed size between states. A 1px border plus the default border-box background clip: off drew a grey ring over the fill's outer edge, on (border-color: transparent) let the mesh through it. The visible pill grew a pixel per side as it turned on. The border is gone; the off edge is an inset shadow, which occupies no layout.

The unlit half was not drawn. --os-ui-holo-track was rgba( 12, 11, 15, 0.55 ), which composites to #121017 on an Obsidian panel: 1.07:1. An off switch was, to a good approximation, invisible — and the same token is the unchecked checkbox and every empty slider half. The well is now lifted rather than sunk, and the 3:1 WCAG 1.4.11 asks of a control boundary comes from a new --os-ui-holo-track-edge: Pewter #66636b, the first step on the Shade ramp that reaches it (Silver manages 2.03, Astro 1.37).

The knob vanished on its own mesh. Holomesh's white glow is #fffdff, so the Starlight knob measured 1.01:1 where the lit track is brightest. Not dim — absent. Its ring was Void at 12% alpha; at 55% it carries the knob at 3.5:1 there and 6.9:1 over the mesh's darkest stop.

Text selection had no rule at all. The shell shipped no ::selection, so every selection was the browser default — a colour chosen for a white page landing on a near-black one. --os-ui-selection-bg is Lagoon at 60%: the one primary colour in the guidelines the shell had no job for, and violet-blue is what every OS has trained people to read as "selected". The alpha is squeezed from both ends — the selected text must stay readable (Starlight over it, 5.1:1 on Obsidian) and the highlight must separate from the unselected background (3.4:1). An accent wash cannot do this at all: the Pulse family only separates above 75%, by which point it is a fill rather than a highlight. Both halves are set, because leaving the text colour to the UA is how a selection ends up black-on-violet.

---

The Components tab was showing empty examples

Seventeen of them, in three ways, none of which fails loudly — a blank example is not an error, it is an empty <div>.

1. A <script> that could never run. <os-crumb-chain> set its segments from an inline script. The html tag compiles by assigning to a <template>'s innerHTML; the fragment-parsing algorithm sets a parsed script's already-started flag, and the cloning steps copy it. Inert in the template, inert in every clone.
2. Property-driven components with nothing to render. segments, data, columns, entries, ratings are JS properties — no markup can fill them, so <os-table> and <os-log> rendered their empty states. OsHelp gains exampleInit( root ), run after the example renders and scoped to its own container. It calls customElements.upgrade() first, and that is not belt-and-braces: on the first paint the section is still detached, so assigning to an un-upgraded element defines an own property that permanently shadows the accessor the upgrade installs — the setter never runs and the component sits there empty holding data it cannot see.
3. Twelve classes with no example at all. Overlays are display: none until opened, so they now ship a trigger; children like <os-tab> have no shape outside their parent, so each example is the parent in miniature.

Two more from the same review: <os-tag-input> rendered "++ Add" (the default label was literally '+ Add' and the button draws its own SVG plus — and since the icon is aria-hidden, a screen reader was announcing "plus Add" too), and the detail pane kept its scrollTop when switching components, so a long entry opened the next one halfway down.

Two labels that had stopped telling the truth

since was a version-history annotation rendered into the UI, which AGENTS.md already bans in docs and comments for the reason it is wrong here too. Removed from all 63 declarations, from OsHelp, from the panel and from the stylesheet.

experimental was on 27 components that several windows already depend on. A badge saying "experimental" on a shipped component is not a caveat, it is stale metadata — it tells plugin authors not to rely on something they safely can. All promoted to stable; OsHelpStatus still accepts the value for a component that genuinely is one.

---

Guards

• holo-layer.test.ts — the mesh transcriptions against the brand's own hexes (a typo in a nine-layer gradient is invisible in review and wrong forever), alias privacy, the :where() specificity below, the dim routing, and prefers-reduced-motion on every fragment.
• help-examples.test.ts — every class with static help has an example, no example contains a <script>, every property-driven component has an exampleInit, every overlay ships a trigger, no exampleInit accumulates listeners, and no descriptor carries a version stamp or an experimental badge.
• css-template-hygiene.test.ts — a backtick inside a css template closes it early and the toolchain reports "expected a semicolon" pointing at prose. This one says what is actually wrong; it caught a live defect in <os-progress-bar> on its first run.

Two traps worth knowing about

holoField uses bare input / select / textarea selectors — safe inside a shadow root. Spelled honestly with :not() they weigh (0,3,1), heavier than input[aria-invalid='true']:focus at (0,2,1) — so the shared fragment would have outranked every component's own error ring and an invalid field would focus in Pulse instead of red. The exclusions are wrapped in :where() to hold the selector at (0,1,1). No test that renders a valid form would have caught this.

The pseudo-element budget is spent. holoSheen owns ::before and holoEdge owns ::after. Glint and ring are therefore element-based, driven from the parent's state through the child combinator — :active matches an activated element and every ancestor of it, so :active .os-holo-ring would fire every ring on the page.

---

Green: lint, typecheck, 3634 vitest, build. No PHP touched.

Docs: a holographic layer section in docs/components-reference.md (which treatment goes where, the token tables, how to use it in your own component), the new themeable tokens and motion scale in docs/desktop-themes.md, and rules in AGENTS.md for the holo module, the accent-dim knob and the backtick trap.

Worth looking at on a real install: OS Settings (the sliding segmented thumb, switches off and on), any dialog (spring entry), a Posts table (selection marker, checkboxes), the Components tab end to end, and drag-selecting some text anywhere.

🤖 Generated with Claude Code