Alert

Import and live example#

One warning alert with an inspect action and optional dismissal.

import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoAlertElement,
  AeliqoDialogElement,
  AeliqoDrawerElement,
  AeliqoEmptyStateElement,
  AeliqoPopoverElement,
  AeliqoProgressElement,
  AeliqoSkeletonElement,
  AeliqoToastElement,
  AeliqoTooltipElement,
} from "@varendo/web/feedback";



registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const element = createCatalogElement<AeliqoAlertElement>("aeliqo-alert", root);
		element.heading = "Review scope";
		element.message = "This page contains the first authorized result window.";
		element.tone = "warning";
		element.actionLabel = "Inspect";
		element.dismissible = true;
		element.open = true;
	}))(root);

Purpose#

A persistent status or warning with a heading and message. Optional action and dismiss buttons emit separate proposals; tone supports the text, never replaces it.

When to use it#

• A status or error must stay visible until the host changes it.
• The message offers a recovery action or a dismissal.
• The information belongs inside the page's reading flow.

When to use a different component#

• Use Toast for brief feedback that can disappear.
• Use EmptyState when a region has no content to show.

Properties and defaults#

The message remains visible; action and dismiss requests are handed to the host.

Events#

Events cross the component boundary as user proposals. Validate their detail and current authority before applying a business effect.

Listen for aeliqo-alert-action

const element = document.querySelector('aeliqo-alert');<p>element?.addEventListener('aeliqo-alert-action', (event) => {
  const proposal = (event as CustomEvent<unknown>).detail;
  // Validate the proposal, update host state, then assign controlled properties.
  applyProposal(proposal);
});

Listen for aeliqo-alert-dismiss

const element = document.querySelector('aeliqo-alert');</p>
<p>element?.addEventListener('aeliqo-alert-dismiss', (event) => {
  const proposal = (event as CustomEvent<unknown>).detail;
  // Validate the proposal, update host state, then assign controlled properties.
  applyProposal(proposal);
});

States and failure handling#

Relevant states:

• ready

Expected result: The warning is exposed as an alert with separately typed action and dismissal requests.

Keyboard, focus, and accessibility#

Keyboard behavior:

• Tab
• Enter or Space on action
• Escape where host handles it

Exposed semantics:

• aria-label
• aria-live
• button
• role

Responsive behavior#

Let the message and its actions wrap together. Keep dismissal available without separating it from the alert content.

Style hooks#

• Shadow parts: actions, alert, close, heading, message
• Varendo design tokens referenced: --aeliqo-color-info, --aeliqo-color-surface, --aeliqo-control-min-target, --aeliqo-radius-medium, --aeliqo-space-12, --aeliqo-space-16, --aeliqo-space-4, --aeliqo-space-8, --aeliqo-typography-font-weight-semibold

Related components#

• Toast
• EmptyState

Generated TypeScript declaration#

export declare class AeliqoAlertElement extends AeliqoFoundationElement {
    static readonly properties: {
        open: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        message: {
            type: StringConstructor;
        };
        heading: {
            type: StringConstructor;
        };
        tone: {
            type: StringConstructor;
        };
        actionLabel: {
            type: StringConstructor;
            attribute: string;
        };
        dismissible: {
            type: BooleanConstructor;
        };
    };
    static readonly styles: import("lit").CSSResult[];
    open: boolean;
    message: string;
    heading: string;
    tone: AeliqoFeedbackTone;
    actionLabel: string;
    dismissible: boolean;
    private dismiss;
    private action;
    protected render(): import("lit").TemplateResult<1>;
}

Version#

This page documents the Varendo 0.6 component contract.