Capsule

Surface background from the Panel scale (`surface.peak` → `surface.ground`, or `transparent`).

Panel surface options applied to the body. When set, takes full ownership of the body's padding — replacing both the size-driven vertical padding and the asymmetric horizontal rule. Default radius is `none` so a tinted body reads as a strip rather than a rounded chip.

Border color at rest: `none`, `default`, `bold`, `muted`, or `accent`. The 1px line is always reserved when a border can appear, so changing it never shifts layout.

Border color on hover and press: `none`, `default`, `bold`, `muted`, or `accent`. Composes with `border`, e.g. a muted line at rest that turns bold on hover.

Which surface ramp the panel paints with: `primary` is the filled tone accent (with contrast text), `secondary` the tone's own surface tint, `tertiary` the neutral ramp with tone-accent text. `background` then picks the step on that ramp.

Panel surface options applied to the leading wrapper (background, tone, emphasis, padding, border, radius, shadow, translucent) — like Card's `header` slot. When omitted, Capsule applies a sensible per-size inner padding; when supplied, Panel owns the slot's padding.

Elevation shadow applied to the surface.

Color tone. A semantic tone communicates status: `neutral`, `primary`, `success`, `warning`, `danger` (or `inherit`). Every component except Button also takes a color family such as `teal`, which carries no status meaning — for labels, people, categories and chart series — or `dynamic`, a family generated at runtime from a seed color (`@pindoba/core-tone`).

Panel surface options applied to the trailing wrapper. Same shape and default-padding behavior as `leadingPanel`.

Frosted glass: the chosen `background` step at /35 with a large backdrop blur, so content behind the panel shows through. A transparent background stays transparent.

Override the computed left padding. Pass any Panda spacing token name (e.g. `"sm"`, `"xs"`, `"none"`).

Override the computed right padding. Any Panda spacing token.

Locks leading/trailing zone heights and feeds the asymmetric padding rule. `sm`: 24px. `md`: 32px. `lg`: 40px.

Squeeze right-side padding so a single icon button nests into the right curve. The body's left edge tightens automatically when a leading asset is present (detected structurally — no `hasLeading` flag needed).

Semantic element. Defaults: `button` when `interactive && !href`, `a` when `href` is present, else `div`.

Enable interactive (hover / focus / press) affordances and states.

Body content. Compose any pindoba component or custom layout here.

Leading zone — icon, avatar, stamp, thumbnail.

Trailing zone — action buttons, badges, status indicators.

Bound reference to the root element (`bind:this`).

Per-slot style and HTML-attribute override bag. Each slot accepts a `style` (Panda `SystemStyleObject`) merged into the slot's class and a `props` object spread onto the slot element.

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