Enhancements

Tier B modern CSS, all gated behind @supports. The framework is fully usable without any of these; they layer on where the browser supports them, with zero behavior change where it doesn't. Open this page in Chrome 149+ to see them; older browsers see the plain versions.

Scroll-state sticky-shell shadow

A sticky bar that gains an elevation shadow when it scrolls to the top of its container. The whole pattern is CSS: no JS scroll listener, no IntersectionObserver. Scroll the panel below to see the bar activate.

Sticky bar shadow appears when stuck

Row 1 — scroll up and down to make the sticky bar stick to the top of this panel.

Row 2 — scroll up and down to make the sticky bar stick to the top of this panel.

Row 3 — scroll up and down to make the sticky bar stick to the top of this panel.

Row 4 — scroll up and down to make the sticky bar stick to the top of this panel.

Row 5 — scroll up and down to make the sticky bar stick to the top of this panel.

Row 6 — scroll up and down to make the sticky bar stick to the top of this panel.

Row 7 — scroll up and down to make the sticky bar stick to the top of this panel.

Row 8 — scroll up and down to make the sticky bar stick to the top of this panel.

Row 9 — scroll up and down to make the sticky bar stick to the top of this panel.

Row 10 — scroll up and down to make the sticky bar stick to the top of this panel.

Row 11 — scroll up and down to make the sticky bar stick to the top of this panel.

Row 12 — scroll up and down to make the sticky bar stick to the top of this panel.

Grid dividers

Vertical dividers between grid items, drawn purely in the gap (the gap stays). Opt in with data-dividers="true" on .l-grid.

Widget A

Widget B

Widget C

Widget D

Typed attr() swatch

A color chip that reads its color from a data-color attribute, type-checked as <color>. No inline style="" needed for static color chips.

text-box optical alignment

Buttons and badges trim the cap-height half-leading so single-line labels sit visually centered without the inline-box overshoot that makes controls look ~1px off. (The effect is subtle; toggle the layer off to compare.)

New

interpolate-size

Set on :root, this allows height/width to animate to/from auto and content-keyword sizes. It's the foundation for native disclosure/collapsible animations. (No visible demo here; it enables @starting-style on auto-sized elements in components.)