Stuck

A sticky element (--position: sticky, or raw position: sticky) is a scroll-state container. While it is stuck to the side named by --stuck-state on it (top by default; also right, bottom, left, and the logical sides), --<utility>--stuck applies on its descendants: a container query never matches the container itself, so the tiers go on a child.

<header style="--position: sticky; --position--lg: static; --top: 0; --z: 10">
  <div style="--bg: transparent; --bg--stuck: var(--color-background); --shadow--stuck: var(--shadow-md)">
    …
  </div>
</header>

stuck ranks below every other state (--bg--hover beats --bg--stuck), has no --group-* form, and --stuck-state takes no tiers: switch --position at a breakpoint to drop the state there. <ui-debug> flags an unknown side, a tiered --stuck-state, a --*--stuck on the sticky element itself, and a group form.