StellarUI

<stellar-spoiler>

spoiler surface that conceals sensitive content until the user intentionally reveals it.

Component

Example

Sensitive roadmap item: the release branch opens next week.

This sentence contains a hidden spoiler and keeps flowing after it.

Press Escape while the spoiler is open to hide it again. If multiple spoilers share the same name, opening one closes the others.

Copy

<stellar-spoiler
  effect="blur"
  label="Show spoiler"
>
  Sensitive roadmap item: the release branch opens next week.
</stellar-spoiler>

Complete props, events, slots, and implementation notes for the shipped spoiler surface.

Prop	Type	Default
`visible`	`boolean`	`false`
`inline`	`boolean`	`false`
`persist`	`boolean`	`false`
`effect`	`blur \| solid \| noise`	`blur`
`label`	`string`	`''`
`name`	`string`	`''`

Event	Source	Notes
`input`	host	Emitted after user interaction changes `visible`, so docs and apps can round-trip the live state.
`change`	host	Emitted alongside `input` after the visible state changes from user interaction.

Slot	Notes
default	The concealed or revealed spoiler content.
`label`	Optional custom cover label content. Use this when the plain `label` prop is not enough.

The public tag is `stellar-spoiler`, matching the component's component boundary instead of utility classes.
The default slot is authored spoiler content, so docs keep that text in `Example Properties` instead of inventing a fake content prop.
`visible` is a real mutable prop. The component emits `input` and `change` after user toggles so app state can round-trip the revealed state cleanly.
Pressing Escape hides an open spoiler, and the internal hide control is removed entirely when `persist` is true. In practice that makes `persist` a one-way reveal instead of a local show/hide toggle.
When multiple spoilers share the same `name` in the same document or shadow root, opening one hides the others.
Use the `label` slot when the reveal affordance needs custom markup; use the `label` prop when plain text is enough.