Attributes · Anchored Auto Layout

Quick reference

Attribute	Values	Does
`data-⚓️-name`	—	Defines this element as an anchor.
`data-⚓️-to`	—	Defines this element as a target and binds it to a named anchor.
`data-⚓️-root`	—	Marks this element as a positioned container (`position: relative`) — pair with data-⚓️-pin-* children.
`data-⚓️-scope`	"--name" "all"	Anchor scoping shorthand: `all`, or a dashed-ident (`--name`) to scope just that anchor name (same as data-⚓️-scope-name).
`data-⚓️-scope-name`	—	Fences anchor names to this subtree for component reuse (e.g. a repeated card component). Value should be a dashed-ident matching the anchor-name used inside — sets `anchor-scope`.
`data-⚓️-pin-all`	—	Pins the target to all four edges of its containing block.
`data-⚓️-pin-x`	—	Pins the target across the full inline axis of its containing block.
`data-⚓️-pin-y`	—	Pins the target across the full block axis of its containing block.
`data-⚓️-pin-top`	—	Pins the target to the top edge of its containing block.
`data-⚓️-pin-bottom`	—	Pins the target to the bottom edge of its containing block.
`data-⚓️-pin-leading`	—	Pins the target to the leading (left, in LTR) edge of its containing block.
`data-⚓️-pin-trailing`	—	Pins the target to the trailing (right, in LTR) edge of its containing block.
`data-⚓️-above`	— "--name"	Positions the target entirely above (outside) the anchor's edge.
`data-⚓️-below`	— "--name"	Positions the target entirely below (outside) the anchor's edge.
`data-⚓️-before`	— "--name"	Positions the target entirely before (left of, in LTR) the anchor's edge.
`data-⚓️-after`	— "--name"	Positions the target entirely after (right of, in LTR) the anchor's edge.
`data-⚓️-side`	"above" "below" "before" "after"	Outside edge as one attribute: which side of the anchor the target sits on.
`data-⚓️-align-top`	— "--name"	Flushes the target's top edge to the inside top edge of the anchor.
`data-⚓️-align-bottom`	— "--name"	Flushes the target's bottom edge to the inside bottom edge of the anchor.
`data-⚓️-align-leading`	— "--name"	Flushes the target's leading edge to the inside leading edge of the anchor.
`data-⚓️-align-trailing`	— "--name"	Flushes the target's trailing edge to the inside trailing edge of the anchor.
`data-⚓️-stretch-y`	— "--name"	Spans the target across the anchor's full block axis.
`data-⚓️-stretch-x`	— "--name"	Spans the target across the anchor's full inline axis.
`data-⚓️-fill`	— "--name"	Fills the anchor's full box on both axes (`inset: anchor(inside)` plus width/height from `anchor-size()`). Use instead of stretch-x + stretch-y when the target also transitions — it doesn't collapse mid-animation.
`data-⚓️-tween`	—	Opt-in: makes swaps between edge, stretch and center attributes (e.g. below → above, stretch-x → align-x=center) tween instead of snap, via a start inset + anchor-size() + percentage translate.
`data-⚓️-sync-width`	— "--name"	Sizes the target's width as (anchor width × --⚓️-mult-x) + --⚓️-offset-x, via anchor-size().
`data-⚓️-sync-height`	— "--name"	Sizes the target's height as (anchor height × --⚓️-mult-y) + --⚓️-offset-y, via anchor-size().
`data-⚓️-area`	"top" "bottom" "leading" "trailing"	Coarse anchor-relative placement — sets `position-area`.
`data-⚓️-align-x`	"center"	Horizontal self-alignment relative to the anchor.
`data-⚓️-align-y`	"center"	Vertical self-alignment relative to the anchor.
`data-⚓️-center-all`	—	Centers the target on the anchor on both axes — sets `place-self: anchor-center`. Overrides stretch-derived sizing on any axis it applies to, the same way align-self overrides align-items:stretch in flex/grid.
`data-⚓️-align-self`	"center" "start" "end"	Margin-based self-alignment, meant to pair with data-⚓️-stretch-*.
`data-⚓️-try`	"flip-y" "flip-x" "flip-all"	Automatic collision-resolution fallback — sets `position-try-fallbacks`.
`data-⚓️-try-order`	"most-y" "most-x"	Sets `position-try-order`, hunting for the quadrant with the most available space.
`data-⚓️-visibility`	"always" "valid" "visible" "no-overflow" "valid-no-overflow" "visible-no-overflow" "all"	Maps to the real `position-visibility` CSS property (default anchor-visible; the deprecated plural anchors-* spellings are declared first as a fallback for older engines). Note: `anchor-valid` (and any value including "valid") needs Chrome 157+ — see SPEC.md's Known Browser Limitations.
`data-⚓️-transition`	"morph" "glide"	Transition preset for anchored layout changes.
`data-⚓️-morph-from`	— "--name"	Sets the @starting-style origin for the AIM entry morph — the element starts collapsed inside this anchor's bounding box.

Not repeated below: 27 of the attributes also take their element out of flow with position: absolute, and every data-⚓️-to target gets container-type: anchored, which makes it a containing block for position: fixed descendants.

The Core Relationship & Resets

Three attributes make every relationship: a name on the anchor, a pointer on the target, and a positioned box to hold them. Targets also get a top-layer reset, anchored container queries and box-sizing: border-box for free.

`data-⚓️-name`

Defines this element as an anchor. Value must be a dashed-ident (e.g. "--header") — sets anchor-name.

Form	Styles
`data-⚓️-name`present	[data-⚓️-name] { anchor-name: attr(data-⚓️-name type(<custom-ident>)); }

anchor

target

Combined rules (1)

[data-⚓️-to][data-⚓️-name] {
  transform-style: preserve-3d;
}

Used in01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

`data-⚓️-to`

Defines this element as a target and binds it to a named anchor. Value must start with "--" — sets position-anchor and takes the element out of document flow.

Form Styles

Form	Styles
`data-⚓️-to`present	[data-⚓️-to] { position-anchor: attr(data-⚓️-to type(<custom-ident>)); container-type: anchored; box-sizing: border-box; } :where(:is(dialog, [popover])[data-⚓️-to]) { margin: 0; inset: auto; width: auto; height: auto; max-width: none; max-height: none; }

data-⚓️-topresent

[data-⚓️-to] {
  position-anchor: attr(data-⚓️-to type(<custom-ident>));
  container-type: anchored;
  box-sizing: border-box;
}
:where(:is(dialog, [popover])[data-⚓️-to]) {
  margin: 0;
  inset: auto;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}

anchor

target

Combined rules (1)

[data-⚓️-to][data-⚓️-name] {
  transform-style: preserve-3d;
}

Used in01 02 03 04 05 06 07 09 10 11 12 13 14 15 16 17 18 19 20

`data-⚓️-root`

Marks this element as a positioned container (position: relative) — pair with data-⚓️-pin-* children.

Form	Styles
`data-⚓️-root`present	[data-⚓️-root] { position: relative; }

Used in01 02 03 04 05 07 08 09 10 11 12 13 14 15 16 17 18 19 20

Anchor Scoping

Repeat a component and its anchor names repeat with it. Scoping fences each copy's names to its own subtree, so the badge in card two finds card two.

`data-⚓️-scope`

Anchor scoping shorthand: all, or a dashed-ident (--name) to scope just that anchor name (same as data-⚓️-scope-name).

Form	Styles
`data-⚓️-scope="--name"`named	[data-⚓️-scope^="--"] { anchor-scope: attr(data-⚓️-scope type(<custom-ident>)); }
`data-⚓️-scope="all"`valueScopes all anchor names within this subtree — sets `anchor-scope: all`.	[data-⚓️-scope="all"] { anchor-scope: all; }

AlphaA

BetaB

GammaG

Cards

Used in11 14 15 16

`data-⚓️-scope-name`

Fences anchor names to this subtree for component reuse (e.g. a repeated card component). Value should be a dashed-ident matching the anchor-name used inside — sets anchor-scope.

Form	Styles
`data-⚓️-scope-name`present	[data-⚓️-scope-name] { anchor-scope: attr(data-⚓️-scope-name type(<custom-ident>)); }

AlphaA

BetaB

GammaG

Cards

Used in03 04 09 10 12 17 20

Parent Constraints

Relative to the containing block, not an anchor. For the parts of a layout that hang off their parent's edges.

`data-⚓️-pin-all`

Pins the target to all four edges of its containing block.

Form	Styles
`data-⚓️-pin-all`present	[data-⚓️-pin-all] { inset: 0; }

target

Used in13 16

`data-⚓️-pin-x`

Pins the target across the full inline axis of its containing block.

Form	Styles
`data-⚓️-pin-x`present	[data-⚓️-pin-x] { inset-inline: 0; }

target

Used in13 14 15 16

`data-⚓️-pin-y`

Pins the target across the full block axis of its containing block.

Form	Styles
`data-⚓️-pin-y`present	[data-⚓️-pin-y] { inset-block: 0; }

target

Used in15 16

`data-⚓️-pin-top`

Pins the target to the top edge of its containing block.

Form	Styles
`data-⚓️-pin-top`present	[data-⚓️-pin-top] { inset-block-start: 0; }

target

Used in08 13 14 15 16

`data-⚓️-pin-bottom`

Pins the target to the bottom edge of its containing block.

Form	Styles
`data-⚓️-pin-bottom`present	[data-⚓️-pin-bottom] { inset-block-end: 0; }

target

Used in08 13 14 15

`data-⚓️-pin-leading`

Pins the target to the leading (left, in LTR) edge of its containing block.

Form	Styles
`data-⚓️-pin-leading`present	[data-⚓️-pin-leading] { inset-inline-start: 0; }

target

Used in08 15

`data-⚓️-pin-trailing`

Pins the target to the trailing (right, in LTR) edge of its containing block.

Form	Styles
`data-⚓️-pin-trailing`present	[data-⚓️-pin-trailing] { inset-inline-end: 0; }

target

Used in08 15

Anchor Edge Bindings

The core vocabulary. Outside edges put the target beyond one of the anchor's edges, inside alignment flushes it to one, stretch spans an axis. All logical: before and after mirror in RTL with no extra CSS.

`data-⚓️-above`

Positions the target entirely above (outside) the anchor's edge. Empty value targets the anchor set via data-⚓️-to; a "--name" value targets a specific named anchor.

Form	Styles
`data-⚓️-above`boolean	[data-⚓️-above=""] { inset-block-end: anchor(self-start); }
`data-⚓️-above="--name"`named	[data-⚓️-above^="--"] { inset-block-end: anchor(attr(data-⚓️-above type(<custom-ident>)) self-start); }

anchor

target

Edge

Combined rules (2)

[data-⚓️-tween][data-⚓️-above=""] {
  inset-block-end: auto;
  inset-block-start: anchor(self-start);
  --⚓️-ty: -100%;
}
[data-⚓️-tween][data-⚓️-above^="--"] {
  inset-block-end: auto;
  inset-block-start: anchor(attr(data-⚓️-above type(<custom-ident>)) self-start);
  --⚓️-ty: -100%;
}

Used in13 15

`data-⚓️-below`

Positions the target entirely below (outside) the anchor's edge. Empty value targets the anchor set via data-⚓️-to; a "--name" value targets a specific named anchor.

Form	Styles
`data-⚓️-below`boolean	[data-⚓️-below=""] { inset-block-start: anchor(self-end); }
`data-⚓️-below="--name"`named	[data-⚓️-below^="--"] { inset-block-start: anchor(attr(data-⚓️-below type(<custom-ident>)) self-end); }

anchor

target

Edge

Used in13 14 15

`data-⚓️-before`

Positions the target entirely before (left of, in LTR) the anchor's edge. Empty value targets the anchor set via data-⚓️-to; a "--name" value targets a specific named anchor.

Form	Styles
`data-⚓️-before`boolean	[data-⚓️-before=""] { inset-inline-end: anchor(self-start); }
`data-⚓️-before="--name"`named	[data-⚓️-before^="--"] { inset-inline-end: anchor(attr(data-⚓️-before type(<custom-ident>)) self-start); }

anchor

target

Edge

Combined rules (3)

[data-⚓️-tween][data-⚓️-before]:dir(rtl) {
  --⚓️-tx: 100%;
}
[data-⚓️-tween][data-⚓️-before=""] {
  inset-inline-end: auto;
  inset-inline-start: anchor(self-start);
  --⚓️-tx: -100%;
}
[data-⚓️-tween][data-⚓️-before^="--"] {
  inset-inline-end: auto;
  inset-inline-start: anchor(attr(data-⚓️-before type(<custom-ident>)) self-start);
  --⚓️-tx: -100%;
}

`data-⚓️-after`

Positions the target entirely after (right of, in LTR) the anchor's edge. Empty value targets the anchor set via data-⚓️-to; a "--name" value targets a specific named anchor.

Form	Styles
`data-⚓️-after`boolean	[data-⚓️-after=""] { inset-inline-start: anchor(self-end); }
`data-⚓️-after="--name"`named	[data-⚓️-after^="--"] { inset-inline-start: anchor(attr(data-⚓️-after type(<custom-ident>)) self-end); }

anchor

target

Edge

Used in14 15 16

`data-⚓️-side`

Outside edge as one attribute: which side of the anchor the target sits on. Same as the boolean data-⚓️-above/below/before/after, but a state change is a single value swap. Requires data-⚓️-to (no named-anchor form). Works with data-⚓️-try flips and data-⚓️-tween.

Form	Styles
`data-⚓️-side="above"`valueBottom edge on the anchor's top edge.	[data-⚓️-side="above"] { inset-block-end: anchor(self-start); }
`data-⚓️-side="below"`valueTop edge on the anchor's bottom edge.	[data-⚓️-side="below"] { inset-block-start: anchor(self-end); }
`data-⚓️-side="before"`valueInline-end edge on the anchor's inline-start edge (left in LTR, right in RTL).	[data-⚓️-side="before"] { inset-inline-end: anchor(self-start); }
`data-⚓️-side="after"`valueInline-start edge on the anchor's inline-end edge (right in LTR, left in RTL).	[data-⚓️-side="after"] { inset-inline-start: anchor(self-end); }

anchor

target

data-⚓️-side

Combined rules (3)

[data-⚓️-tween][data-⚓️-side="above"] {
  inset-block-end: auto;
  inset-block-start: anchor(self-start);
  --⚓️-ty: -100%;
}
[data-⚓️-tween][data-⚓️-side="before"] {
  inset-inline-end: auto;
  inset-inline-start: anchor(self-start);
  --⚓️-tx: -100%;
}
[data-⚓️-tween][data-⚓️-side="before"]:dir(rtl) {
  --⚓️-tx: 100%;
}

Used in01 02 03 04 05 06 07 08 12 13 15 16 17

`data-⚓️-align-top`

Flushes the target's top edge to the inside top edge of the anchor.

Form	Styles
`data-⚓️-align-top`boolean	[data-⚓️-align-top=""] { inset-block-start: anchor(self-start); }
`data-⚓️-align-top="--name"`named	[data-⚓️-align-top^="--"] { inset-block-start: anchor(attr(data-⚓️-align-top type(<custom-ident>)) self-start); }

anchor

target

Edge

Used in01 02 04 13 14 16

`data-⚓️-align-bottom`

Flushes the target's bottom edge to the inside bottom edge of the anchor.

Form	Styles
`data-⚓️-align-bottom`boolean	[data-⚓️-align-bottom=""] { inset-block-end: anchor(self-end); }
`data-⚓️-align-bottom="--name"`named	[data-⚓️-align-bottom^="--"] { inset-block-end: anchor(attr(data-⚓️-align-bottom type(<custom-ident>)) self-end); }

anchor

target

Edge

Combined rules (2)

[data-⚓️-tween][data-⚓️-align-bottom=""] {
  inset-block-end: auto;
  inset-block-start: anchor(self-end);
  --⚓️-ty: -100%;
}
[data-⚓️-tween][data-⚓️-align-bottom^="--"] {
  inset-block-end: auto;
  inset-block-start: anchor(attr(data-⚓️-align-bottom type(<custom-ident>)) self-end);
  --⚓️-ty: -100%;
}

Used in03 13 14 15 16

`data-⚓️-align-leading`

Flushes the target's leading edge to the inside leading edge of the anchor.

Form Styles

Form	Styles
`data-⚓️-align-leading`boolean	[data-⚓️-align-leading=""] { inset-inline-start: anchor(self-start); }
`data-⚓️-align-leading="--name"`named	[data-⚓️-align-leading^="--"] { inset-inline-start: anchor(attr(data-⚓️-align-leading type(<custom-ident>)) self-start); }

data-⚓️-align-leadingboolean

[data-⚓️-align-leading=""] {
  inset-inline-start: anchor(self-start);
}

data-⚓️-align-leading="--name"named

[data-⚓️-align-leading^="--"] {
  inset-inline-start: anchor(attr(data-⚓️-align-leading type(<custom-ident>)) self-start);
}

anchor

target

Edge

Used in01 02 07 12 13 14 15 16 17

`data-⚓️-align-trailing`

Flushes the target's trailing edge to the inside trailing edge of the anchor.

Form	Styles
`data-⚓️-align-trailing`boolean	[data-⚓️-align-trailing=""] { inset-inline-end: anchor(self-end); }
`data-⚓️-align-trailing="--name"`named	[data-⚓️-align-trailing^="--"] { inset-inline-end: anchor(attr(data-⚓️-align-trailing type(<custom-ident>)) self-end); }

anchor

target

Edge

Combined rules (3)

[data-⚓️-tween][data-⚓️-align-trailing]:dir(rtl) {
  --⚓️-tx: 100%;
}
[data-⚓️-tween][data-⚓️-align-trailing=""] {
  inset-inline-end: auto;
  inset-inline-start: anchor(self-end);
  --⚓️-tx: -100%;
}
[data-⚓️-tween][data-⚓️-align-trailing^="--"] {
  inset-inline-end: auto;
  inset-inline-start: anchor(attr(data-⚓️-align-trailing type(<custom-ident>)) self-end);
  --⚓️-tx: -100%;
}

Used in03 13 16

`data-⚓️-stretch-y`

Spans the target across the anchor's full block axis.

Form Styles

Form	Styles
`data-⚓️-stretch-y`boolean	[data-⚓️-stretch-y=""] { inset-block-start: anchor(self-start); inset-block-end: anchor(self-end); }
`data-⚓️-stretch-y="--name"`named	[data-⚓️-stretch-y^="--"] { inset-block-start: anchor(attr(data-⚓️-stretch-y type(<custom-ident>)) self-start); inset-block-end: anchor(attr(data-⚓️-stretch-y type(<custom-ident>)) self-end); }

data-⚓️-stretch-yboolean

[data-⚓️-stretch-y=""] {
  inset-block-start: anchor(self-start);
  inset-block-end: anchor(self-end);
}

data-⚓️-stretch-y="--name"named

[data-⚓️-stretch-y^="--"] {
  inset-block-start: anchor(attr(data-⚓️-stretch-y type(<custom-ident>)) self-start);
  inset-block-end: anchor(attr(data-⚓️-stretch-y type(<custom-ident>)) self-end);
}

anchor

target

Axis

Combined rules (2)

[data-⚓️-tween]:where([data-⚓️-stretch-y=""]) {
  inset-block-end: auto;
  height: anchor-size(block);
}
[data-⚓️-tween]:where([data-⚓️-stretch-y^="--"]) {
  inset-block-end: auto;
  height: anchor-size(attr(data-⚓️-stretch-y type(<custom-ident>)) block);
}

Used in14 17

`data-⚓️-stretch-x`

Spans the target across the anchor's full inline axis.

Form Styles

Form	Styles
`data-⚓️-stretch-x`boolean	[data-⚓️-stretch-x=""] { inset-inline-start: anchor(self-start); inset-inline-end: anchor(self-end); }
`data-⚓️-stretch-x="--name"`named	[data-⚓️-stretch-x^="--"] { inset-inline-start: anchor(attr(data-⚓️-stretch-x type(<custom-ident>)) self-start); inset-inline-end: anchor(attr(data-⚓️-stretch-x type(<custom-ident>)) self-end); }

data-⚓️-stretch-xboolean

[data-⚓️-stretch-x=""] {
  inset-inline-start: anchor(self-start);
  inset-inline-end: anchor(self-end);
}

data-⚓️-stretch-x="--name"named

[data-⚓️-stretch-x^="--"] {
  inset-inline-start: anchor(attr(data-⚓️-stretch-x type(<custom-ident>)) self-start);
  inset-inline-end: anchor(attr(data-⚓️-stretch-x type(<custom-ident>)) self-end);
}

anchor

target

Axis

Combined rules (2)

[data-⚓️-tween]:where([data-⚓️-stretch-x=""]) {
  inset-inline-end: auto;
  width: anchor-size(inline);
}
[data-⚓️-tween]:where([data-⚓️-stretch-x^="--"]) {
  inset-inline-end: auto;
  width: anchor-size(attr(data-⚓️-stretch-x type(<custom-ident>)) inline);
}

Used in13 14 15 16

`data-⚓️-fill`

Fills the anchor's full box on both axes (inset: anchor(inside) plus width/height from anchor-size()). Use instead of stretch-x + stretch-y when the target also transitions — it doesn't collapse mid-animation.

Form Styles

Form	Styles
`data-⚓️-fill`boolean	[data-⚓️-fill=""] { inset: anchor(inside); width: anchor-size(inline); height: anchor-size(block); }
`data-⚓️-fill="--name"`named	[data-⚓️-fill^="--"] { inset: anchor(attr(data-⚓️-fill type(<custom-ident>)) inside); width: anchor-size(attr(data-⚓️-fill type(<custom-ident>)) inline); height: anchor-size(attr(data-⚓️-fill type(<custom-ident>)) block); }

data-⚓️-fillboolean

[data-⚓️-fill=""] {
  inset: anchor(inside);
  width: anchor-size(inline);
  height: anchor-size(block);
}

data-⚓️-fill="--name"named

[data-⚓️-fill^="--"] {
  inset: anchor(attr(data-⚓️-fill type(<custom-ident>)) inside);
  width: anchor-size(attr(data-⚓️-fill type(<custom-ident>)) inline);
  height: anchor-size(attr(data-⚓️-fill type(<custom-ident>)) block);
}

anchor

target

Used in07 09 10 11 12 13 14 15 17 18 19 20

`data-⚓️-tween`

Opt-in: makes swaps between edge, stretch and center attributes (e.g. below → above, stretch-x → align-x=center) tween instead of snap, via a start inset + anchor-size() + percentage translate. Horizontal writing modes only; don't combine with data-⚓️-try. Use with data-⚓️-transition=morph|glide.

Form	Styles
`data-⚓️-tween`present	[data-⚓️-tween] { translate: var(--⚓️-tx, 0%) var(--⚓️-ty, 0%); }

anchor

target

Side

Combined rules (20)

[data-⚓️-tween][data-⚓️-above=""] {
  inset-block-end: auto;
  inset-block-start: anchor(self-start);
  --⚓️-ty: -100%;
}
[data-⚓️-tween][data-⚓️-above^="--"] {
  inset-block-end: auto;
  inset-block-start: anchor(attr(data-⚓️-above type(<custom-ident>)) self-start);
  --⚓️-ty: -100%;
}
[data-⚓️-tween][data-⚓️-side="above"] {
  inset-block-end: auto;
  inset-block-start: anchor(self-start);
  --⚓️-ty: -100%;
}
[data-⚓️-tween][data-⚓️-side="before"] {
  inset-inline-end: auto;
  inset-inline-start: anchor(self-start);
  --⚓️-tx: -100%;
}
[data-⚓️-tween][data-⚓️-align-bottom=""] {
  inset-block-end: auto;
  inset-block-start: anchor(self-end);
  --⚓️-ty: -100%;
}
[data-⚓️-tween][data-⚓️-align-bottom^="--"] {
  inset-block-end: auto;
  inset-block-start: anchor(attr(data-⚓️-align-bottom type(<custom-ident>)) self-end);
  --⚓️-ty: -100%;
}
[data-⚓️-tween][data-⚓️-before=""] {
  inset-inline-end: auto;
  inset-inline-start: anchor(self-start);
  --⚓️-tx: -100%;
}
[data-⚓️-tween][data-⚓️-before^="--"] {
  inset-inline-end: auto;
  inset-inline-start: anchor(attr(data-⚓️-before type(<custom-ident>)) self-start);
  --⚓️-tx: -100%;
}
[data-⚓️-tween][data-⚓️-align-trailing=""] {
  inset-inline-end: auto;
  inset-inline-start: anchor(self-end);
  --⚓️-tx: -100%;
}
[data-⚓️-tween][data-⚓️-align-trailing^="--"] {
  inset-inline-end: auto;
  inset-inline-start: anchor(attr(data-⚓️-align-trailing type(<custom-ident>)) self-end);
  --⚓️-tx: -100%;
}
[data-⚓️-tween][data-⚓️-before]:dir(rtl) {
  --⚓️-tx: 100%;
}
[data-⚓️-tween][data-⚓️-side="before"]:dir(rtl) {
  --⚓️-tx: 100%;
}
[data-⚓️-tween][data-⚓️-align-trailing]:dir(rtl) {
  --⚓️-tx: 100%;
}
[data-⚓️-tween]:where([data-⚓️-stretch-y=""]) {
  inset-block-end: auto;
  height: anchor-size(block);
}
[data-⚓️-tween]:where([data-⚓️-stretch-y^="--"]) {
  inset-block-end: auto;
  height: anchor-size(attr(data-⚓️-stretch-y type(<custom-ident>)) block);
}
[data-⚓️-tween]:where([data-⚓️-stretch-x=""]) {
  inset-inline-end: auto;
  width: anchor-size(inline);
}
[data-⚓️-tween]:where([data-⚓️-stretch-x^="--"]) {
  inset-inline-end: auto;
  width: anchor-size(attr(data-⚓️-stretch-x type(<custom-ident>)) inline);
}
[data-⚓️-tween]:is([data-⚓️-align-y="center"], [data-⚓️-center-all]) {
  align-self: normal;
  inset-block-start: anchor(center);
  --⚓️-ty: -50%;
}
[data-⚓️-tween]:is([data-⚓️-align-x="center"], [data-⚓️-center-all]) {
  justify-self: normal;
  inset-inline-start: anchor(center);
  --⚓️-tx: -50%;
}
[data-⚓️-tween]:is([data-⚓️-align-x="center"], [data-⚓️-center-all]):dir(rtl) {
  --⚓️-tx: 50%;
}

Used in01 02 04 05 07 08

Sizing Synchronization

Size from the anchor: (anchor × multiplier) + offset, with the multiplier and offset as custom properties you can set inline.

`data-⚓️-sync-width`

Sizes the target's width as (anchor width × --⚓️-mult-x) + --⚓️-offset-x, via anchor-size().

Form Styles

Form	Styles
`data-⚓️-sync-width`boolean	[data-⚓️-sync-width=""] { width: calc((anchor-size(inline) * var(--⚓️-mult-x, 1)) + var(--⚓️-offset-x, 0px)); }
`data-⚓️-sync-width="--name"`named	[data-⚓️-sync-width^="--"] { width: calc((anchor-size(attr(data-⚓️-sync-width type(<custom-ident>)) inline) * var(--⚓️-mult-x, 1)) + var(--⚓️-offset-x, 0px)); }

data-⚓️-sync-widthboolean

[data-⚓️-sync-width=""] {
  width: calc((anchor-size(inline) * var(--⚓️-mult-x, 1)) + var(--⚓️-offset-x, 0px));
}

data-⚓️-sync-width="--name"named

[data-⚓️-sync-width^="--"] {
  width: calc((anchor-size(attr(data-⚓️-sync-width type(<custom-ident>)) inline) * var(--⚓️-mult-x, 1)) + var(--⚓️-offset-x, 0px));
}

anchor

target

--⚓️-mult-x

Used in01 02 13 14 15 16

`data-⚓️-sync-height`

Sizes the target's height as (anchor height × --⚓️-mult-y) + --⚓️-offset-y, via anchor-size().

Form Styles

Form	Styles
`data-⚓️-sync-height`boolean	[data-⚓️-sync-height=""] { height: calc((anchor-size(block) * var(--⚓️-mult-y, 1)) + var(--⚓️-offset-y, 0px)); }
`data-⚓️-sync-height="--name"`named	[data-⚓️-sync-height^="--"] { height: calc((anchor-size(attr(data-⚓️-sync-height type(<custom-ident>)) block) * var(--⚓️-mult-y, 1)) + var(--⚓️-offset-y, 0px)); }

data-⚓️-sync-heightboolean

[data-⚓️-sync-height=""] {
  height: calc((anchor-size(block) * var(--⚓️-mult-y, 1)) + var(--⚓️-offset-y, 0px));
}

data-⚓️-sync-height="--name"named

[data-⚓️-sync-height^="--"] {
  height: calc((anchor-size(attr(data-⚓️-sync-height type(<custom-ident>)) block) * var(--⚓️-mult-y, 1)) + var(--⚓️-offset-y, 0px));
}

anchor

target

--⚓️-offset-y

Used in01 02 13 14

Position Area & Alignment

Coarser tools: a position-area region, centring on the anchor, and margin alignment inside a stretch.

`data-⚓️-area`

Coarse anchor-relative placement — sets position-area.

Form	Styles
`data-⚓️-area="top"`valueposition-area: block-start	[data-⚓️-area="top"] { position-area: block-start; }
`data-⚓️-area="bottom"`valueposition-area: block-end	[data-⚓️-area="bottom"] { position-area: block-end; }
`data-⚓️-area="leading"`valueposition-area: inline-start	[data-⚓️-area="leading"] { position-area: inline-start; }
`data-⚓️-area="trailing"`valueposition-area: inline-end	[data-⚓️-area="trailing"] { position-area: inline-end; }

anchor

target

data-⚓️-area

`data-⚓️-align-x`

Horizontal self-alignment relative to the anchor.

Form	Styles
`data-⚓️-align-x="center"`valuejustify-self: anchor-center	[data-⚓️-align-x="center"] { justify-self: anchor-center; }

anchor

target

Combined rules (2)

[data-⚓️-tween]:is([data-⚓️-align-x="center"], [data-⚓️-center-all]) {
  justify-self: normal;
  inset-inline-start: anchor(center);
  --⚓️-tx: -50%;
}
[data-⚓️-tween]:is([data-⚓️-align-x="center"], [data-⚓️-center-all]):dir(rtl) {
  --⚓️-tx: 50%;
}

Used in05 06 13 14 16

`data-⚓️-align-y`

Vertical self-alignment relative to the anchor.

Form	Styles
`data-⚓️-align-y="center"`valuealign-self: anchor-center	[data-⚓️-align-y="center"] { align-self: anchor-center; }

anchor

target

Combined rules (1)

[data-⚓️-tween]:is([data-⚓️-align-y="center"], [data-⚓️-center-all]) {
  align-self: normal;
  inset-block-start: anchor(center);
  --⚓️-ty: -50%;
}

Used in03 05 12 13 16

`data-⚓️-center-all`

Centers the target on the anchor on both axes — sets place-self: anchor-center. Overrides stretch-derived sizing on any axis it applies to, the same way align-self overrides align-items:stretch in flex/grid.

Form	Styles
`data-⚓️-center-all`present	[data-⚓️-center-all] { place-self: anchor-center; }

anchor

target

Combined rules (3)

[data-⚓️-tween]:is([data-⚓️-align-y="center"], [data-⚓️-center-all]) {
  align-self: normal;
  inset-block-start: anchor(center);
  --⚓️-ty: -50%;
}
[data-⚓️-tween]:is([data-⚓️-align-x="center"], [data-⚓️-center-all]) {
  justify-self: normal;
  inset-inline-start: anchor(center);
  --⚓️-tx: -50%;
}
[data-⚓️-tween]:is([data-⚓️-align-x="center"], [data-⚓️-center-all]):dir(rtl) {
  --⚓️-tx: 50%;
}

Used in13 14

`data-⚓️-align-self`

Margin-based self-alignment, meant to pair with data-⚓️-stretch-*.

Form	Styles
`data-⚓️-align-self="center"`valuemargin: auto	[data-⚓️-align-self="center"] { margin: auto; }
`data-⚓️-align-self="start"`valuemargin-inline-end: auto	[data-⚓️-align-self="start"] { margin-inline-end: auto; }
`data-⚓️-align-self="end"`valuemargin-inline-start: auto	[data-⚓️-align-self="end"] { margin-inline-start: auto; }

anchor

target

data-⚓️-align-self

Used in13

Collision Resolution

Let the browser try the other side when the preferred one doesn't fit. Native flip keywords, no custom @position-try blocks.

`data-⚓️-try`

Automatic collision-resolution fallback — sets position-try-fallbacks.

Form	Styles
`data-⚓️-try="flip-y"`valueposition-try-fallbacks: flip-block	[data-⚓️-try="flip-y"] { position-try-fallbacks: flip-block; }
`data-⚓️-try="flip-x"`valueposition-try-fallbacks: flip-inline	[data-⚓️-try="flip-x"] { position-try-fallbacks: flip-inline; }
`data-⚓️-try="flip-all"`valueposition-try-fallbacks: flip-block, flip-inline, flip-block flip-inline	[data-⚓️-try="flip-all"] { position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }

anchor

target

Fallback

Used in06 12 13

`data-⚓️-try-order`

Sets position-try-order, hunting for the quadrant with the most available space.

Form	Styles
`data-⚓️-try-order="most-y"`valueposition-try-order: most-block-size	[data-⚓️-try-order="most-y"] { position-try-order: most-block-size; }
`data-⚓️-try-order="most-x"`valueposition-try-order: most-inline-size	[data-⚓️-try-order="most-x"] { position-try-order: most-inline-size; }

Visibility State

Hide a target when its anchor scrolls out of view, or when it would overflow.

`data-⚓️-visibility`

Maps to the real position-visibility CSS property (default anchor-visible; the deprecated plural anchors-* spellings are declared first as a fallback for older engines). Note: anchor-valid (and any value including "valid") needs Chrome 157+ — see SPEC.md's Known Browser Limitations.

Form	Styles
`data-⚓️-visibility="always"`valueposition-visibility: always	[data-⚓️-visibility="always"] { position-visibility: always; }
`data-⚓️-visibility="valid"`valueposition-visibility: anchor-valid	[data-⚓️-visibility="valid"] { position-visibility: anchors-valid; position-visibility: anchor-valid; }
`data-⚓️-visibility="visible"`valueposition-visibility: anchor-visible (the default)	[data-⚓️-visibility="visible"] { position-visibility: anchors-visible; position-visibility: anchor-visible; }
`data-⚓️-visibility="no-overflow"`valueposition-visibility: no-overflow	[data-⚓️-visibility="no-overflow"] { position-visibility: no-overflow; }
`data-⚓️-visibility="valid-no-overflow"`valueposition-visibility: anchor-valid no-overflow	[data-⚓️-visibility="valid-no-overflow"] { position-visibility: anchors-valid no-overflow; position-visibility: anchor-valid no-overflow; }
`data-⚓️-visibility="visible-no-overflow"`valueposition-visibility: anchor-visible no-overflow	[data-⚓️-visibility="visible-no-overflow"] { position-visibility: anchors-visible no-overflow; position-visibility: anchor-visible no-overflow; }
`data-⚓️-visibility="all"`valueposition-visibility: anchor-valid anchor-visible no-overflow (strictest)	[data-⚓️-visibility="all"] { position-visibility: anchors-valid anchors-visible no-overflow; position-visibility: anchor-valid anchor-visible no-overflow; }

Used in16

AIM

Motion between anchored layouts: an entry morph out of the anchor's box, and two transition presets. Both snap geometry under prefers-reduced-motion.

`data-⚓️-transition`

Transition preset for anchored layout changes.

Form Styles

Form	Styles
`data-⚓️-transition="morph"`valueAnimates the element in from data-⚓️-morph-from's collapsed starting-style to its resolved layout, and animates later geometry changes (0.5s).	[data-⚓️-transition="morph"] { /* Use a nice spatial bezier for the geometry, and ease for opacity/colors */ transition: inset 0.5s cubic-bezier(0.25, 1, 0.5, 1), width 0.5s cubic-bezier(0.25, 1, 0.5, 1), height 0.5s cubic-bezier(0.25, 1, 0.5, 1), position-area 0.5s cubic-bezier(0.25, 1, 0.5, 1), translate 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease; } @media (prefers-reduced-motion: reduce) { [data-⚓️-transition="morph"] { transition: opacity 0.2s ease; } }
`data-⚓️-transition="glide"`valueShort (0.25s) geometry-only transition for layouts that reflow while visible (grid reflow, re-sorting) — no entry animation, no opacity.	[data-⚓️-transition="glide"] { transition: inset 0.25s cubic-bezier(0.25, 1, 0.5, 1), width 0.25s cubic-bezier(0.25, 1, 0.5, 1), height 0.25s cubic-bezier(0.25, 1, 0.5, 1), translate 0.25s cubic-bezier(0.25, 1, 0.5, 1); } @media (prefers-reduced-motion: reduce) { [data-⚓️-transition="glide"] { transition: none; } }

data-⚓️-transition="morph"valueAnimates the element in from data-⚓️-morph-from's collapsed starting-style to its resolved layout, and animates later geometry changes (0.5s).

[data-⚓️-transition="morph"] {
  /* Use a nice spatial bezier for the geometry, and ease for opacity/colors */ transition: inset 0.5s cubic-bezier(0.25, 1, 0.5, 1), width 0.5s cubic-bezier(0.25, 1, 0.5, 1), height 0.5s cubic-bezier(0.25, 1, 0.5, 1), position-area 0.5s cubic-bezier(0.25, 1, 0.5, 1), translate 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-⚓️-transition="morph"] {
    transition: opacity 0.2s ease;
  }
}

data-⚓️-transition="glide"valueShort (0.25s) geometry-only transition for layouts that reflow while visible (grid reflow, re-sorting) — no entry animation, no opacity.

[data-⚓️-transition="glide"] {
  transition: inset 0.25s cubic-bezier(0.25, 1, 0.5, 1), width 0.25s cubic-bezier(0.25, 1, 0.5, 1), height 0.25s cubic-bezier(0.25, 1, 0.5, 1), translate 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (prefers-reduced-motion: reduce) {
  [data-⚓️-transition="glide"] {
    transition: none;
  }
}

anchor

target

Side

Used in01 02 04 05 07 08 09 10 11 12 13 14 15 16 17 18 19 20

`data-⚓️-morph-from`

Sets the @starting-style origin for the AIM entry morph — the element starts collapsed inside this anchor's bounding box. Empty value defaults to the element's own data-⚓️-to target. Pair with data-⚓️-transition="morph".

Form Styles

Form	Styles
`data-⚓️-morph-from`boolean	@starting-style { :is(dialog, [popover])[data-⚓️-morph-from=""] { inset-block-start: anchor(self-start); inset-block-end: anchor(self-end); inset-inline-start: anchor(self-start); inset-inline-end: anchor(self-end); width: anchor-size(inline); height: anchor-size(block); opacity: 0; } } @starting-style { [data-⚓️-morph-from=""]:not([hidden]) { inset-block-start: anchor(self-start); inset-block-end: anchor(self-end); inset-inline-start: anchor(self-start); inset-inline-end: anchor(self-end); width: anchor-size(inline); height: anchor-size(block); opacity: 0; } }
`data-⚓️-morph-from="--name"`named	@starting-style { :is(dialog, [popover])[data-⚓️-morph-from^="--"] { inset-block-start: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-start); inset-block-end: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-end); inset-inline-start: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-start); inset-inline-end: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-end); width: anchor-size(attr(data-⚓️-morph-from type(<custom-ident>)) inline); height: anchor-size(attr(data-⚓️-morph-from type(<custom-ident>)) block); opacity: 0; } } @starting-style { [data-⚓️-morph-from^="--"]:not([hidden]) { inset-block-start: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-start); inset-block-end: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-end); inset-inline-start: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-start); inset-inline-end: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-end); width: anchor-size(attr(data-⚓️-morph-from type(<custom-ident>)) inline); height: anchor-size(attr(data-⚓️-morph-from type(<custom-ident>)) block); opacity: 0; } }

data-⚓️-morph-fromboolean

@starting-style {
  :is(dialog, [popover])[data-⚓️-morph-from=""] {
    inset-block-start: anchor(self-start);
    inset-block-end: anchor(self-end);
    inset-inline-start: anchor(self-start);
    inset-inline-end: anchor(self-end);
    width: anchor-size(inline);
    height: anchor-size(block);
    opacity: 0;
  }
}
@starting-style {
  [data-⚓️-morph-from=""]:not([hidden]) {
    inset-block-start: anchor(self-start);
    inset-block-end: anchor(self-end);
    inset-inline-start: anchor(self-start);
    inset-inline-end: anchor(self-end);
    width: anchor-size(inline);
    height: anchor-size(block);
    opacity: 0;
  }
}

data-⚓️-morph-from="--name"named

@starting-style {
  :is(dialog, [popover])[data-⚓️-morph-from^="--"] {
    inset-block-start: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-start);
    inset-block-end: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-end);
    inset-inline-start: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-start);
    inset-inline-end: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-end);
    width: anchor-size(attr(data-⚓️-morph-from type(<custom-ident>)) inline);
    height: anchor-size(attr(data-⚓️-morph-from type(<custom-ident>)) block);
    opacity: 0;
  }
}
@starting-style {
  [data-⚓️-morph-from^="--"]:not([hidden]) {
    inset-block-start: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-start);
    inset-block-end: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-end);
    inset-inline-start: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-start);
    inset-inline-end: anchor(attr(data-⚓️-morph-from type(<custom-ident>)) self-end);
    width: anchor-size(attr(data-⚓️-morph-from type(<custom-ident>)) inline);
    height: anchor-size(attr(data-⚓️-morph-from type(<custom-ident>)) block);
    opacity: 0;
  }
}

Used in04 05 16

Custom properties

Property	Default
`--⚓️-tx`	`0%`
`--⚓️-ty`	`0%`
`--⚓️-mult-x`	`1`
`--⚓️-offset-x`	`0px`
`--⚓️-mult-y`	`1`
`--⚓️-offset-y`	`0px`