StellarUI

<stellar-veil>

blocking veil for contained or fullscreen loading states, with cancelable activation lifecycle events and a custom front slot.

Properties

Component

Example

Preview

Contained mode covers the slotted content and disables interaction inside the host. Fullscreen mode moves the same veil surface into a native dialog-backed viewport overlay.

Release checklist

Use veil for important blocked states like submit, save, or full-page loading, not for passive skeletons or small inline spinners.

Ship docs

Preview release

Markup

Copy

<stellar-veil
  active
  label="Loading"
>
  <div slot="front">
    <strong>Syncing changes</strong>
  </div>
  <article>Release checklist</article>
</stellar-veil>

API

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

Props

Prop	Type	Default
`label`	`string`	`''`
`active`	`boolean`	`false`
`fullscreen`	`boolean`	`false`

Events

Event	Source	Notes
`before-activate`	`stellar-veil`	Cancelable. Prevent default to stop activation.
`activate`	`stellar-veil`	Fires after the veil becomes active.
`before-deactivate`	`stellar-veil`	Cancelable. Prevent default to keep the veil active.
`deactivate`	`stellar-veil`	Fires after the hide phase completes.

Slots

Slot	Notes
default	Contained content that the veil should cover and temporarily disable while active.
`front`	Foreground status content such as a spinner, message, or custom blocked-state actions.

Notes

The public tag is `stellar-veil`, matching the component's blocked-state overlay instead of inventing separate loading-screen and loading-card components.
`active`, `fullscreen`, and `label` are the complete prop surface.
The component owns the blocked-state layer only. In contained mode your authored content stays in the default slot; in fullscreen mode that same front layer expands into a viewport overlay.
The `front` slot is where custom status content belongs. If you omit it, the component falls back to a small built-in spinner.
`before-activate` and `before-deactivate` are cancelable so the app can veto a transition when the blocked state still must remain in place.
The contained case disables interaction by making the slotted content inert while the veil is active.