# anchor

> Resolves an `anchor()` reference to a plain string — the length an inset utility needs to pin an edge to the anchor's geometry.

```ts
import { anchor } from "@sdxc/u/layout";
```

Resolves an `anchor()` reference to a plain string — the length an inset
utility needs to pin an edge to the anchor's geometry. The leading `--` is
prepended; `fallback` keeps the inset valid when no anchor resolves.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.insBs(u.anchor("tip", "bottom"))` | `"anchor(--tip bottom)"` |
| `u.anchor("menu-button", "self-end")` | `"anchor(--menu-button self-end)"` |
| `u.anchor("tip", "bottom", "100%")` | `"anchor(--tip bottom, 100%)"` |
| `u.anchor("sidebar", "center", "0px")` | `"anchor(--sidebar center, 0px)"` |

## Examples

### Basic example

Use `anchor(name, side)` as an inset value to pin an edge of a positioned element to a side of the element named by `anchorName()`:

```tsx
<div mix={[relative(), center(), is(72), bs(32)]}>
	<button mix={[anchorName("save-button"), ...]}>Save</button>
	<div
		mix={[
			absolute(),
			insBs(anchor("save-button", "bottom")),
			insIs(anchor("save-button", "start")),
			mbs(2),
			p(1, 2),
			rounded("md"),
			bg("neutral.solid"),
			fg("neutral.onSolid"),
			text("xs"),
		]}
	>
		⌘S
	</div>
</div>
```

### Placing above the anchor

Pin the block-end edge to the anchor's `"top"` with `insBe(anchor(name, "top"))` to open the element above it:

```tsx
<div mix={[relative(), center(), is(72), bs(32)]}>
	<button mix={[anchorName("publish-button"), ...]}>Publish</button>
	<div
		mix={[
			absolute(),
			insBe(anchor("publish-button", "top")),
			insIs(anchor("publish-button", "start")),
			mbe(2),
			p(1, 2),
			rounded("md"),
			bg("neutral.solid"),
			fg("neutral.onSolid"),
			text("xs"),
			nowrap(),
		]}
	>
		Visible to everyone
	</div>
</div>
```

### Aligning to the end edge

Use logical sides like `"start"` and `"end"` to line edges up in the writing direction, here keeping a wide menu flush with its button's end:

```tsx
<div mix={[relative(), flex(), items("start"), justify("end"), is(80), bs(44)]}>
	<button mix={[anchorName("account-menu"), ...]}>Account</button>
	<ul
		mix={[
			absolute(),
			insBs(anchor("account-menu", "bottom")),
			insIe(anchor("account-menu", "end")),
			is(48),
			mbs(2),
			mbe(0),
			listStyle("none"),
			...,
		]}
	>
		<li>Profile</li>
		<li>Billing</li>
		<li>Sign out</li>
	</ul>
</div>
```

## Applying on a state

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

```ts
u.hover(u.insBs(u.anchor("tip", "bottom")))
```

## Responsive design

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

```ts
u.at("md", u.insBs(u.anchor("tip", "bottom")))
```

## Signature

```ts
u.anchor(name: string, side: AnchorSide, fallback?: string)
```