Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

API reference

Headless toast consists of one structural viewport directive and one semantic item directive. There is no root controller, no built-in queue, and no positioning runtime at the primitive level.

Viewport primitive

tngToastViewport marks the container for a stack of toast items and reflects a stable slot hook for your layout CSS.

Viewport usage

html
<section tngToastViewport class="release-toast-stack">
  <!-- owner positions and spaces the stack -->
</section>
Directive / reflected attrsTypeNotes
tngToastViewportdirectiveAttaches data-slot="toast-viewport" so the owner can target the stack container.
Placementowner-authoredThe primitive does not set position, top, right, or any stack geometry.
Queue orderowner-authoredThe order of rendered items is whatever your template collection produces.

Item primitive

tngToastItem maps toast tone and visibility to ARIA and state attributes while leaving all content and controls up to the owner.

Item usage

html
<article tngToastItem [tone]="tone" [open]="open" class="release-toast-card">
  <strong>{{ title }}</strong>
  <p>{{ message }}</p>
</article>
Input / reflected attrsTypeNotes
[tone]'neutral' | 'success' | 'warning' | 'danger'Sets data-tone and maps to the correct role and aria-live.
[open]booleanReflects data-state="open|closed" and applies the hidden attribute when false.
role'status' | 'alert'neutral and success become polite status updates; warning and danger become assertive alerts.
aria-atomic'true'Always set so assistive technology announces the toast message as one unit.

Behavior and semantics

  • The primitive does not auto-dismiss items. Timers are owned by your component.
  • The primitive does not add close buttons, action buttons, or focus handling.
  • If you keep closed items in the DOM, add a [hidden] override in your CSS so they fully disappear.
  • Reach for the component wrapper when you want built-in queue trimming, action support, and dismissal reasons.