import type { EventEmitter } from '../../stencil-public-runtime'; import { type IconName } from '../mud-icon/mud-icon.types'; import type { LocaleProp } from '../../utils/locale'; import type { BannerEmphasis, BannerVariant } from './mud-banner.types'; /** * Banner — full-width, top-of-page system message. * * A persistent, non-contextual notification that spans the width of its * container and informs users of important system-wide events (scheduled * maintenance, outages, announcements). Draws attention without blocking * interaction; remains visible until dismissed or resolved. * * Pattern B (atom-display + interactive close): the optional close affordance * lives in shadow DOM with a real `button` role. The body is not interactive * apart from the optional actions (`actions` slot). * * `variant` selects the semantic color family — `info`, `warning`, or `error` * (Figma exposes no `success` for banners). `emphasis` selects the surface * treatment — `subtle` (tinted) or `strong` (filled, on-color foreground). * * Live-region routing follows WCAG status/alert conventions: * - `info` → `role="status"` + `aria-live="polite"` * - `warning` / `error` → `role="alert"` + `aria-live="assertive"` * * Give the banner an accessible name by setting the native `aria-label` * attribute on the host directly — the platform keeps it there untouched. * * @element mud-banner * * @slot - (default) The banner message. Plain text or rich inline content. * @slot icon-start - Optional override for the leading icon. When supplied, * suppresses both the `iconName` prop and the per-variant * default icon. * @slot actions - Optional inline actions after the message, typically one * `mud-link` (Figma's "Click here" is the link component, Primary, * 16, underlined; use `variant="white"` on `emphasis="strong"`). * Replaces `linkText` / `linkHref` when filled. */ export declare class MudBanner { /** * Semantic color family. Per Figma the banner exposes `info`, `warning`, * and `error` (no `success`). * @default 'info' */ variant: BannerVariant; /** * Surface treatment: `subtle` (tinted background, dark text) or `strong` * (filled background, on-color text). * @default 'subtle' */ emphasis: BannerEmphasis; /** * When `true`, renders a trailing close (×) button. Activating it emits * `mudDismiss`; the consumer is responsible for removing the banner from * the DOM. * @default false */ dismissible: boolean; /** * Optional inline link text rendered after the message (the Figma * "Click here" affordance). Pair with `linkHref` for a real destination. * * @deprecated A link built from props cannot take routing, `target` / `rel` or a * click handler. Put a `mud-link` in the `actions` slot instead; `linkText` goes * away in the next major. */ linkText?: string; /** * Href for the optional inline link. Defaults to `#` when omitted. * * @deprecated Use the `actions` slot, as for `linkText`. */ linkHref?: string; /** * Override the default `mud-icon` name for the variant. Ignored when the * `icon-start` slot is populated. */ iconName?: IconName; /** * Language of the built-in copy. Unset, the component follows the closest ancestor `lang` * (`` included), else `ro-MD`. */ locale?: LocaleProp; /** * Close-button accessible label. Overrides the `locale`'s copy when set to a non-empty string. * @default 'Închide' (ro-MD) */ closeLabel?: string; private hasIconStart; private hasActions; host: HTMLMudBannerElement; /** * Fires when the user activates the close button. Payload is `void` — the * consumer owns the dismiss animation / DOM removal. */ mudDismiss: EventEmitter; private stopLang?; private warnedLinkDeprecated; connectedCallback(): void; disconnectedCallback(): void; componentWillLoad(): void; componentDidRender(): void; /** * Built-in strings in the resolved locale, with the override props on top. */ private messages; private detectSlots; private onActionsSlotChange; private onIconSlotChange; private handleCloseClick; private handleCloseKeyDown; private resolveIconName; private resolveAriaRole; private resolveAriaLive; private hasLink; render(): any; }