[ @sdxc/u/layout ]

anchor-name

Applies anchor-name, the *declaring* half of anchor positioning: it goes on the element anchored **to**, and positionAnchor points back at this name.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { anchorName } from "@sdxc/u/layout";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.anchorName("tooltip-trigger")`	`css({ anchorName: "--tooltip-trigger" })`
`u.anchorName("menu-button")`	`css({ anchorName: "--menu-button" })`

Examples

Basic example

Use anchorName(name) on the element other elements position against, then point them at it with positionAnchor(name):

Opens the docs

<div mix={[relative(), center(), is(72), bs(32)]}>
	<button mix={[anchorName("help-button"), ...]}>Help</button>
	<div
		mix={[
			absolute(),
			positionAnchor("help-button"),
			positionArea("top"),
			mbe(2),
			p(1, 2),
			rounded("md"),
			bg("neutral.solid"),
			fg("neutral.onSolid"),
			text("xs"),
		]}
	>
		Opens the docs
	</div>
</div>

Naming several anchors

Give each anchor its own name so every positioned element can pick the one it belongs to:

edit-buttondelete-button

<div mix={[relative(), center(), gap(16), is(96), bs(32)]}>
	<button mix={[anchorName("edit-button"), ...]}>Edit</button>
	<button mix={[anchorName("delete-button"), ...]}>Delete</button>
	<span
		mix={[
			absolute(),
			positionAnchor("edit-button"),
			positionArea("bottom"),
			mbs(2),
			...,
		]}
	>
		edit-button
	</span>
	<span
		mix={[
			absolute(),
			positionAnchor("delete-button"),
			positionArea("bottom"),
			mbs(2),
			...,
		]}
	>
		delete-button
	</span>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.anchorName("tooltip-trigger"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.anchorName("tooltip-trigger"))

Signature

u.anchorName(name: string)