# anchorSize

> Resolves an `anchor-size()` reference to a plain string, letting a panel track its trigger's size in one browser-maintained declaration.

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

Resolves an `anchor-size()` reference to a plain string, letting a panel
track its trigger's size in one browser-maintained declaration. The leading
`--` is prepended; `fallback` keeps it valid when no anchor resolves.

## 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)"` |

## Examples

### Basic example

Use `anchorSize(name, "inline")` as a size value to make a positioned element at least as wide as its anchor:

```tsx
<div mix={[relative(), flex(), items("start"), justify("center"), is(80), bs(48)]}>
	<button mix={[anchorName("country-select"), is(56), ...]}>Country</button>
	<ul
		mix={[
			absolute(),
			positionAnchor("country-select"),
			positionArea("bottom"),
			minIs(anchorSize("country-select", "inline")),
			mbs(1),
			mbe(0),
			listStyle("none"),
			...,
		]}
	>
		<li>Argentina</li>
		<li>Canada</li>
		<li>Peru</li>
	</ul>
</div>
```

### Matching the block size

Measure the anchor's height with `anchorSize(name, "block")` to make a positioned element exactly as tall as it:

```tsx
<div mix={[relative(), is(80)]}>
	<p mix={[anchorName("quote-card"), is(64), m(0), ...]}>
		Anchor positioning keeps the accent bar exactly as tall as this card, however many lines it
		grows to.
	</p>
	<div
		mix={[
			absolute(),
			positionAnchor("quote-card"),
			positionArea("right"),
			bs(anchorSize("quote-card", "block")),
			is(1.5),
			mis(3),
			rounded("full"),
			bg("brand.solid"),
		]}
	/>
</div>
```

## Applying on a state

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

```ts
u.hover(u.minIs(u.anchorSize("trigger", "inline")))
```

## Responsive design

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

```ts
u.at("md", u.minIs(u.anchorSize("trigger", "inline")))
```

## Signature

```ts
u.anchorSize(name: string, dimension: AnchorSizeDimension, fallback?: string)
```