layout
anchorSize
Resolves an anchor-size() reference to a plain string, letting a panel track its trigger's size in one browser-maintained declaration.
import { anchorSize } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.minIs(u.anchorSize("trigger", "inline")) | "anchor-size(--trigger inline)" |
u.anchorSize("trigger", "block") | "anchor-size(--trigger block)" |
u.anchorSize("trigger", "self-inline") | "anchor-size(--trigger self-inline)" |
u.anchorSize("trigger", "inline", "12rem") | "anchor-size(--trigger inline, 12rem)" |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.minIs(u.anchorSize("trigger", "inline"))Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.minIs(u.anchorSize("trigger", "inline")))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.minIs(u.anchorSize("trigger", "inline")))Signature
u.anchorSize(name: string, dimension: AnchorSizeDimension, fallback?: string)