Attachment

Silhouette of the target. Use "circle" so diagonal placements hug the arc of a round target instead of floating off its bounding corner.

How the attachment is anchored to the target. "corner" centers the attachment on the target corner (badges, dots); "outside" places it flush against the target edge (tooltips, popovers); "inside" tucks it fully within the target's bounds (`offset` becomes an inward inset), so it can't overlap neighbouring rows or a scrollbar.

Pull the attachment inward along the diagonal so it hugs the target's rounded corner instead of sitting on the bounding-box corner. Ignored when `shape="circle"`.

Extra px nudge along the placement axis, stacked on top of the anchor. Under `anchor="inside"` it reads as an inward inset from the target's edges.

Extra px nudge on the horizontal axis, applied after all positioning.

Extra px nudge on the vertical axis, applied after all positioning.

Floating UI placement relative to the target's outer bounds.

How the content element is positioned. `"absolute"` lays it out inside the attachment root — cheapest, but an ancestor with `overflow` other than `visible` (a scrolling rail, an `overflow: hidden` card) clips the part of the attachment that hangs outside the target. `"fixed"` positions it against the viewport so it escapes every such clip without being portalled out of the DOM, and auto-hides while the target is scrolled out of view. Note that an ancestor with `transform`/`filter`/`contain`/`will-change` establishes a fixed containing block and clips again. **On a Flow or pan-zoom surface, always use `"absolute"`.** Their content layer is *permanently* transformed, so it always establishes that containing block — `"fixed"` buys nothing there and reintroduces the clipping it was meant to escape. `"absolute"` is also what you want on principle: the attachment then moves with the content for free. Reach for `trackTransform` instead when an attachment must follow a target across a transform. `"inline"` positions the content with CSS alone (percentages of the root plus a `translate` of the content's own size) — no JavaScript, correct on the first server-rendered paint, and it moves in the same frame as its target, so a badge never trails an icon through a layout animation. Use it for in-flow decorations (badges, dots, counts) that need no collision handling. It supports `placement`, `anchor`, `shape="circle"` (exact for square or round targets), `offset`, `offsetX`, `offsetY` and `interactive`; `hugCorners`, `flip`, `shift` and `trackTransform` need a measurement and are ignored. A `passThrough.content.props.style` must be a CSS string to merge with the placement.

Flip to the opposite side when overflowing the viewport.

Whether the content takes pointer events. The content is painted on top of the target, so while it's interactive it also swallows the target's clicks and hovers over its own box — a badge pinned to a link's corner carves a dead spot out of the link. Pass `false` for a decorative indicator (badge, dot, count) so pointer events fall through to the target; keep it `true` when the content is itself a control, like a dismiss button.

Viewport padding used by the flip/shift middleware.

Shift along the alignment axis to stay within the viewport.

Re-measure on every animation frame, not just on scroll and resize. Floating UI's default observers miss ancestor **transform** changes, so an attachment inside a panning or zooming surface drifts without this. Costs a callback per frame, so it is opt-in.

The attachment's trigger/label content.

The attached flag content (e.g. a Badge) positioned on the anchor.

Consumer class merged onto the root slot.

Bindable reference to the root element.

Per-slot override bag for styling and HTML attributes on each rendered element.

Astro / vanilla: serialize the props into `data-attachment-config` so the client runtime hydrates this instance and `getPindoba(el, "attachment")` can `update()` it. Frameworks with their own reactivity don't need it.