import type { EventEmitter } from '../../stencil-public-runtime'; import type { LocaleProp } from '../../utils/locale'; import type { BreadcrumbItem, BreadcrumbSelectDetail } from './mud-breadcrumb.types'; /** * Breadcrumb — navigational trail showing the user's location in the site hierarchy. * * Two equivalent authoring modes: * * 1. **Prop-driven** (preferred for dynamic data): pass `items` as a typed array. * 2. **Slot-driven** (preferred for static markup): nest `` children. * * When both are present, the `items` prop wins and the component warns once. * * On desktop the full trail renders horizontally. When `maxVisible` is exceeded, * intermediate crumbs collapse into an overflow "…" menu. On mobile (≤640px) with * `responsive=true`, the trail collapses to a single "‹ Back to {parent}" link * per the WAI-ARIA breadcrumb pattern and Figma 69:408. * * @element mud-breadcrumb * * @slot - (default) Nested `` elements (ignored when `items` is set). * @slot separator - Custom separator content rendered between crumbs (default: chevron icon). */ export declare class MudBreadcrumb { /** * Declarative crumb list. Each item renders as a `mud-breadcrumb-item`. * When omitted, the component falls back to its default slot. */ items?: BreadcrumbItem[]; /** * Maximum number of crumbs shown before collapsing the middle into an overflow menu. * Per Figma "Best Practices": limit visible items to 4. The first and last 2 are * always visible; everything between collapses into the `…` menu. * @default 4 */ maxVisible: number; /** * Override the default chevron separator with a literal string (e.g. `"/"`, `"›"`). * When empty (default), the chevron icon is rendered. When `slot="separator"` is * provided, both this prop and the chevron are ignored. * @default '' */ separator: string; /** * When true, the component collapses to a single "back" link on viewports ≤640px. * Disable for surfaces that need the full trail at every size (rare). * @default true */ responsive: boolean; /** * Accessible name for the navigation landmark when no `aria-label` is set on the * host. Overrides the `locale`'s copy when set to a non-empty string. Setting * `aria-label` directly on the host also works — the consumer-supplied attribute wins. * @default 'Breadcrumb' (ro-MD) */ label?: string; /** * Language of the built-in copy. Unset, the component follows the closest ancestor `lang` * (`` included), else `ro-MD`. */ locale?: LocaleProp; /** * Accessible label of the overflow ("…") trigger that reveals the collapsed crumbs. * Overrides the `locale`'s copy when set to a non-empty string. * @default 'Arată paginile ascunse' (ro-MD) */ overflowLabel?: string; /** * Accessible label of the spinner shown for a `loading` crumb. Overrides the `locale`'s * copy when set to a non-empty string. * @default 'Se încarcă' (ro-MD) */ loadingLabel?: string; host: HTMLMudBreadcrumbElement; private menuOpen; private focusedMenuIndex; /** Cached clone source captured from `slot="separator"` on connect. */ private customSeparatorTemplate?; /** * Names the `navigation` landmark: the consumer's own host `aria-label` when set, * otherwise the resolved-locale `navLabel` — imperative because `role="navigation"` * stays on the host itself (`observeAriaLabel` would strip and relabel the landmark * it names). See `nameHostWithFallback`. */ private hostLabel?; private stopLang?; validateMaxVisible(newValue: number): void; /** Emits when any crumb is activated (click or keyboard). */ mudSelect: EventEmitter; /** Close the overflow menu when a click lands outside it. */ handleOutsideClick(ev: MouseEvent): void; /** Full WAI-ARIA Menu keyboard support on the overflow trigger + menu. */ handleKeyDown(ev: KeyboardEvent): void; private readonly toggleMenu; private getOverflowItems; connectedCallback(): void; disconnectedCallback(): void; componentWillRender(): void; /** * Capture consumer-supplied content on connect: the first element with * `slot="separator"` → cloned and re-used between every crumb, instead of the prior * `innerHTML` round-trip (SECURITY-INNERHTML). */ componentWillLoad(): void; componentDidRender(): void; /** Built-in strings in the resolved locale, with the override props on top. */ private messages; private captureSeparatorSlot; private readonly handleCrumbClick; /** * Ref callback that appends a fresh clone of the captured separator template. * Runs once per `
  • ` instance because Stencil keys ensure stable nodes. */ private readonly attachCustomSeparator; private renderSeparator; /** * Render the crumb label, wrapping it in a tooltip when the label exceeds * `BREADCRUMB_TRUNCATE_AT` characters (per Figma "Best Practices"). The visible * text is truncated via CSS `text-overflow: ellipsis`; the tooltip exposes the * full label on hover/focus. */ /** Builds the inner label markup (icon + text) without any tooltip wrap. */ private renderLabelBody; private renderCrumb; /** * Returns the index that should carry `aria-current="page"`. Honours an explicit * `active:true` flag; otherwise picks the last navigable (non-disabled) crumb so * the trail always has a current-page marker (legacy `mud-breadcrumbs` parity). */ private resolveCurrentIndex; private renderDesktop; private renderMobile; render(): any; }