# interpolate-size

> Opts the element into animating to and from keyword sizes (`auto`, `min-content`, `max-content`, `fit-content`), so a transition to `height: auto` or `block-size: auto` animates across its full duration.

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

Opts the element into animating to and from keyword sizes (`auto`,
`min-content`, `max-content`, `fit-content`), so a transition to
`height: auto` or `block-size: auto` animates across its full duration.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.interpolateSize()` | `css({ interpolateSize: "allow-keywords" })` |

## Examples

### Basic example

Use `interpolateSize()` to let an element animate to and from a keyword size like `auto`. Open the disclosure to see its content slide down:

```tsx
<details
	mix={[
		interpolateSize(),
		detailsContent(
			combine([
				bs(0),
				overflow("clip"),
				transition("block-size, content-visibility", { duration: 300 }),
				transitionBehavior("allow-discrete"),
			]),
		),
		open(detailsContent(bs("auto"))),
		is(80),
		...,
	]}
>
	<summary>What does interpolate-size do?</summary>
	<p mix={[pbs(2), ...]}>
		It lets sizes like auto and max-content take part in a transition, so this panel grows to
		its natural height instead of jumping to it.
	</p>
</details>
```

### Animating to a content size

Keyword sizes work on either axis, so a width can animate to `max-content`. Hover the button to reveal its label:

```tsx
<button
	type="button"
	mix={[
		interpolateSize(),
		is(10),
		hover(is("max-content")),
		overflow("hidden"),
		nowrap(),
		transition("inline-size", { duration: 250 }),
		...,
	]}
>
	＋ New post
</button>
```

## Applying on a state

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

```ts
u.hover(u.interpolateSize())
```

## Responsive design

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

```ts
u.at("md", u.interpolateSize())
```

## Signature

```ts
u.interpolateSize(value?: InterpolateSizeValue)
```