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 a current browser to inspect each feature. Support varies by feature.
Scroll-state sticky-shell shadow
The bar gains a shadow only while stuck. The query observes the sticky bar itself; the persistent border and sticky positioning work without the enhancement.
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 .pl-l-grid.
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.)
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 allows size interpolation where a component transitions an intrinsic size.)