HyEmptyState

A placeholder for "no data / no results / error / loading" regions.

Collapses the hand-rolled empty + load-state markup duplicated across an app (icon/illustration + heading + body + actions) into one element. A state axis (empty | loading | error) absorbs the {loading}…{error}…{empty} triplet with a built-in spinner and retry button; a variant axis presets the icon + copy per scenario.

Key Features:

• Scenario presets (no-data, no-results, error, not-found, success, offline)
• Async-state mode (loading → built-in spinner; error → retry button firing retry)
• Search-aware no-results via the query prop
• Compact (inline) vs medium (full-region) sizes
• Dark-mode raster media swap (light-src / dark-src + theme, mirroring hy-logo)
• Slots for media / title / description / actions / footer

Accessibility Highlights:

• role="status" (implicit aria-live="polite") so a list becoming empty after filtering is announced to screen readers
• High contrast + forced-colors support

Examples

No-data with an action

<hy-empty-state variant="no-data" heading="No design systems yet">
  Create your first design system to get started.
  <hy-button slot="actions" variant="brand">New design system</hy-button>
</hy-empty-state>

Search-aware no-results

<hy-empty-state variant="no-results" query="brutalist"></hy-empty-state>

The async triplet, one element

<hy-empty-state state="loading"></hy-empty-state>
<hy-empty-state state="error"></hy-empty-state>
<hy-empty-state state="empty" variant="no-data"></hy-empty-state>

Events

• retry - Fired when the built-in retry button (shown in state="error") is clicked. Detail: {}

Slots

• media - The visual — icon, illustration, or animation. Defaults to a variant icon.
• default - The description body (richer than the description prop).
• title - Heading override.
• actions - Primary + secondary action buttons.
• footer - Help link / "learn more".