@pecb-ui/components 1.1.12 → 1.1.13

package/index.d.ts

@@ -311,8 +311,27 @@ interface PecbTableColumn {
     width?: string;
     /** Caps the cell width so long text truncates with an ellipsis (e.g. '240px'). */
     maxWidth?: string;
+    /** Floor for the column width so it is never squeezed to nothing (e.g. '120px'). */
+    minWidth?: string;
     /** Wrap long text onto multiple lines instead of truncating. Overrides the table-level `wrapText`. */
     wrap?: boolean;
+    /**
+     * Caps wrapped text at N lines and ellipsises the rest. Implies `wrap`.
+     * Overrides the table-level `maxLines`.
+     */
+    maxLines?: number;
+    /**
+     * Hard character cap. Longer values are cut at the last word boundary and
+     * suffixed with an ellipsis; the full value stays available on hover.
+     * Use it when the column width must not depend on font metrics.
+     */
+    maxChars?: number;
+    /**
+     * Hover-hint behaviour for this column: `'auto'` (default) reveals the full
+     * value only when it is actually clipped, `'always'` always reveals it,
+     * `'never'` disables the hint.
+     */
+    hint?: 'auto' | 'always' | 'never';
     align?: 'left' | 'center' | 'right';
     sortable?: boolean;
     cellTemplate?: TemplateRef<any>;
@@ -444,6 +463,28 @@ declare class TableComponent {
      * value is shown on hover via the cell's title. Per-column `wrap` overrides this.
      */
     wrapText: _angular_core.InputSignal<boolean>;
+    /**
+     * Default width cap for plain text / link / user columns that declare no
+     * `width` or `maxWidth`. This is what keeps a single long column (a URL, a
+     * description, an unbroken token) from stretching the whole table and forcing
+     * a horizontal scrollbar - the cell truncates or wraps instead.
+     *
+     * Pass `'none'` to opt out and restore raw browser sizing.
+     * @default '320px'
+     */
+    cellMaxWidth: _angular_core.InputSignal<string>;
+    /**
+     * When cells wrap, cap them at this many lines and ellipsise the rest.
+     * `undefined` (default) leaves wrapped text unbounded.
+     * Per-column `maxLines` overrides this.
+     */
+    maxLines: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Truncate long header labels to one line with an ellipsis and show the full
+     * label on hover, so a verbose header never widens its column.
+     * @default true
+     */
+    truncateHeaders: _angular_core.InputSignal<boolean>;
     /**
      * Column key currently being sorted
      */
@@ -492,10 +533,56 @@ declare class TableComponent {
     get tableClasses(): string;
     getCellValue(row: any, key: string): any;
     getAlignmentClass(column: PecbTableColumn): string;
+    /**
+     * Columns whose content is plain text the table itself renders, and which are
+     * therefore safe to cap and ellipsise automatically. Custom templates, dynamic
+     * components, status pills and action buttons are left to size themselves.
+     */
+    private isTextualColumn;
     /** Whether a column's cells wrap long text (per-column overrides the table default). */
     isCellWrapped(column: PecbTableColumn): boolean;
-    /** Full text shown on hover for truncated text/link cells (so nothing is lost). */
+    /** Line cap for wrapped cells, or `null` when wrapped text is unbounded. */
+    getCellLineClamp(column: PecbTableColumn): number | null;
+    /** `ngStyle` map that applies the line cap (a no-op when there is none). */
+    getCellTextStyle(column: PecbTableColumn): Record<string, string> | null;
+    /**
+     * Width cap for a cell. Explicit `maxWidth`/`width` win; otherwise textual
+     * columns fall back to the table-wide `cellMaxWidth` so no single column can
+     * stretch the table.
+     */
+    getCellMaxWidth(column: PecbTableColumn): string | null;
+    /** Lower bound for a column's width, so narrow viewports do not crush it. */
+    getCellMinWidth(column: PecbTableColumn): string | null;
+    /** The raw, untruncated value of a cell as a string. */
+    private getCellText;
+    /**
+     * The text actually rendered in a cell: the raw value, shortened to
+     * `column.maxChars` at the last word boundary when one is configured.
+     */
+    getDisplayValue(row: any, column: PecbTableColumn): string;
+    /** Cuts `text` to `max` characters on a word boundary and appends an ellipsis. */
+    private clampChars;
+    /**
+     * Full text shown on hover for a cell, or `null` when the column opts out.
+     * Whether it is actually applied is decided per-cell in {@link onCellEnter}.
+     */
     getCellTitle(row: any, column: PecbTableColumn): string | null;
+    /**
+     * Attaches the hover hint lazily, on the way in, so it only appears when the
+     * value is genuinely clipped - by width, by line cap, or by `maxChars`.
+     * A `title` on every cell would otherwise fire on harmless short values.
+     */
+    onCellEnter(event: Event, row: any, column: PecbTableColumn): void;
+    /** Same lazy hint for header labels, which truncate on their own width. */
+    onHeaderEnter(event: Event, column: PecbTableColumn): void;
+    /** True when an element's content overflows its box horizontally or vertically. */
+    private isElementClipped;
+    /**
+     * A `-webkit-line-clamp` box reports `scrollHeight === clientHeight`, so the
+     * plain overflow check above can never see a clamped cell as clipped. Lift the
+     * clamp for one synchronous measurement and put it straight back.
+     */
+    private isLineClampOverflowing;
     onRowClick(row: any, index: number): void;
     onRowAction(action: string, row: any, index: number, event: Event): void;
     onHeaderClick(column: PecbTableColumn): void;
@@ -529,7 +616,7 @@ declare class TableComponent {
     getLinkHref(value: string): string;
     private emitSelectionChange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "pecb-table", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "showPagination": { "alias": "showPagination"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showPageSizeSelector": { "alias": "showPageSizeSelector"; "required": false; "isSignal": true; }; "paginationVariant": { "alias": "paginationVariant"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selectedIndices": { "alias": "selectedIndices"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "wrapText": { "alias": "wrapText"; "required": false; "isSignal": true; }; "sortColumn": { "alias": "sortColumn"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "selectAllAriaLabel": { "alias": "selectAllAriaLabel"; "required": false; "isSignal": true; }; "selectRowAriaLabel": { "alias": "selectRowAriaLabel"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; "selectedIndices": "selectedIndicesChange"; "sortColumn": "sortColumnChange"; "sortDirection": "sortDirectionChange"; "pageChange": "pageChange"; "rowClick": "rowClick"; "rowAction": "rowAction"; "sortChange": "sortChange"; "selectionChange": "selectionChange"; }, ["emptyTemplate", "loadingTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "pecb-table", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "showPagination": { "alias": "showPagination"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showPageSizeSelector": { "alias": "showPageSizeSelector"; "required": false; "isSignal": true; }; "paginationVariant": { "alias": "paginationVariant"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selectedIndices": { "alias": "selectedIndices"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "wrapText": { "alias": "wrapText"; "required": false; "isSignal": true; }; "cellMaxWidth": { "alias": "cellMaxWidth"; "required": false; "isSignal": true; }; "maxLines": { "alias": "maxLines"; "required": false; "isSignal": true; }; "truncateHeaders": { "alias": "truncateHeaders"; "required": false; "isSignal": true; }; "sortColumn": { "alias": "sortColumn"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "selectAllAriaLabel": { "alias": "selectAllAriaLabel"; "required": false; "isSignal": true; }; "selectRowAriaLabel": { "alias": "selectRowAriaLabel"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; "selectedIndices": "selectedIndicesChange"; "sortColumn": "sortColumnChange"; "sortDirection": "sortDirectionChange"; "pageChange": "pageChange"; "rowClick": "rowClick"; "rowAction": "rowAction"; "sortChange": "sortChange"; "selectionChange": "selectionChange"; }, ["emptyTemplate", "loadingTemplate"], never, true, never>;
 }
 
 type TabStyle = 'rounded' | 'line';
@@ -1124,6 +1211,878 @@ declare class SidebarComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "pecb-sidebar", never, { "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "sidebarLogo": { "alias": "sidebarLogo"; "required": false; "isSignal": true; }; "collapsedLogo": { "alias": "collapsedLogo"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "expandSidebarAriaLabel": { "alias": "expandSidebarAriaLabel"; "required": false; "isSignal": true; }; "collapseSidebarAriaLabel": { "alias": "collapseSidebarAriaLabel"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "itemClick": "itemClick"; "collapseChange": "collapseChange"; }, never, ["[sidebar-header]", "[sidebar-footer]"], true, never>;
 }
 
+/**
+ * Public data contracts for {@link AppSidebarComponent}.
+ *
+ * Everything the sidebar renders is plain, serialisable data — no template
+ * plumbing required at the call site. Icons are accepted either as inline SVG
+ * markup (`icon`) or as an image URL (`iconSrc`).
+ *
+ * @module components/app-sidebar
+ */
+/**
+ * Angular Router wiring, shared by every clickable entry.
+ *
+ * Setting {@link AppSidebarRouterLink.routerLink} makes the entry render as a
+ * `routerLink` anchor and highlight itself through `routerLinkActive`, so the
+ * sidebar follows real navigation — including back/forward and deep links.
+ *
+ * `@angular/router` is an **optional** peer dependency: the router directives
+ * are only instantiated for entries that actually carry a `routerLink`, so
+ * router-free applications are unaffected.
+ */
+interface AppSidebarRouterLink {
+    /** Router commands, e.g. `'/courses'` or `['/courses', id]`. */
+    routerLink?: string | unknown[];
+    /** Query parameters passed to the router. */
+    queryParams?: Record<string, unknown>;
+    /** URL fragment passed to the router. */
+    fragment?: string;
+    /** Match the full URL rather than a prefix when deciding the active state. */
+    routerLinkActiveExact?: boolean;
+}
+/**
+ * A single navigation entry.
+ *
+ * An item renders as a `routerLink` anchor when `routerLink` is set, a plain
+ * `<a>` when only `href` is set, and a `<button>` otherwise — so keyboard and
+ * screen-reader semantics stay correct either way.
+ */
+interface AppSidebarNavItem extends AppSidebarRouterLink {
+    /** Stable identity. Used for tracking, active state and expansion state. */
+    id: string;
+    /** Visible label. Also used as the collapsed-mode tooltip. */
+    label: string;
+    /** Inline SVG markup for the leading icon. */
+    icon?: string;
+    /** Image URL for the leading icon. Ignored when `icon` is set. */
+    iconSrc?: string;
+    /** Link target. When omitted, and with no `routerLink`, this is a button. */
+    href?: string;
+    /** Anchor target, e.g. `_blank`. Only applies when `href` is set. */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** Small trailing badge — a count or short word. */
+    badge?: string | number;
+    /** Renders the item non-interactive. */
+    disabled?: boolean;
+    /**
+     * Sub-items, nestable up to three levels. They expand inline while the rail
+     * is expanded, and inside the flyout while it is collapsed.
+     */
+    children?: AppSidebarNavItem[];
+    /** Arbitrary payload echoed back on `navigate`. */
+    data?: unknown;
+}
+/** A titled block of navigation items. */
+interface AppSidebarNavGroup {
+    /** Stable identity. */
+    id: string;
+    /** Optional uppercase heading shown above the group (hidden when collapsed). */
+    label?: string;
+    /** The group's items. */
+    items: AppSidebarNavItem[];
+}
+/**
+ * An entry in the product switcher at the top of the sidebar.
+ *
+ * A product may own its navigation. When the active product declares `items`
+ * or `groups`, the rail renders *those* and ignores the component-level
+ * navigation entirely — switching product swaps the whole tab set, which is how
+ * a multi-product shell like the Central Hub actually behaves. A hub product
+ * that only needs a dashboard simply declares one item.
+ */
+interface AppSidebarProduct extends AppSidebarRouterLink {
+    /** Stable identity, matched against `activeProductId`. */
+    id: string;
+    /** Product name. */
+    label: string;
+    /**
+     * Navigation shown while this product is active. Takes over the rail from
+     * the component-level `items` / `groups`.
+     */
+    items?: AppSidebarNavItem[];
+    /** Grouped navigation shown while this product is active. */
+    groups?: AppSidebarNavGroup[];
+    /** Secondary line shown under the name in the trigger. */
+    description?: string;
+    /** Inline SVG markup for the product tile. */
+    icon?: string;
+    /** Short text for the tile when no `icon` is given, e.g. `"St"`. */
+    initials?: string;
+    /** Link target for the menu entry. */
+    href?: string;
+    /** Anchor target, e.g. `_blank`. Only applies when `href` is set. */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** Groups the entry under an uppercase heading in the menu. */
+    section?: string;
+    /** Renders the entry non-interactive. */
+    disabled?: boolean;
+    /** Muted note under the label, e.g. `"Coming soon"`. */
+    hint?: string;
+    /** Gives the entry the dark "hub" tile and bolder label. */
+    featured?: boolean;
+}
+/** The signed-in user rendered at the bottom of the sidebar. */
+interface AppSidebarUser {
+    /** Display name. */
+    name: string;
+    /**
+     * Secondary line, e.g. the active role. A menu submenu marked
+     * {@link AppSidebarMenuItem.reflectsRole} overrides it live, so the block
+     * always shows the role that is actually selected.
+     */
+    role?: string;
+    /** Avatar image URL. */
+    avatarSrc?: string;
+    /** Fallback initials when no avatar image is available. */
+    initials?: string;
+}
+/** A selectable choice inside a profile-menu submenu (language, role, …). */
+interface AppSidebarMenuOption {
+    /** Stable identity. */
+    id: string;
+    /** Visible label. */
+    label: string;
+    /** Inline SVG markup shown before the label. */
+    icon?: string;
+}
+/**
+ * An entry in the profile dropdown.
+ *
+ * Supplying {@link AppSidebarMenuItem.options} turns the entry into a submenu
+ * that flies out beside the dropdown and reports selections through
+ * `menuOptionChange`.
+ */
+interface AppSidebarMenuItem extends AppSidebarRouterLink {
+    /** Stable identity. */
+    id: string;
+    /** Visible label. */
+    label: string;
+    /** Inline SVG markup for the leading icon. */
+    icon?: string;
+    /** Link target. When omitted the entry renders as a button. */
+    href?: string;
+    /** Anchor target, e.g. `_blank`. Only applies when `href` is set. */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** `danger` paints the entry in the destructive colour (e.g. Log out). */
+    variant?: 'default' | 'danger';
+    /** Draws a separator above the entry. */
+    dividerBefore?: boolean;
+    /** Renders the entry non-interactive. */
+    disabled?: boolean;
+    /** Turns the entry into a submenu of selectable choices. */
+    options?: AppSidebarMenuOption[];
+    /** Initially selected option id. Selection is tracked internally afterwards. */
+    selectedOptionId?: string;
+    /**
+     * Mirrors this submenu's selected option as the account block's subtitle —
+     * the "Member / Partner / Trainer" line under the user's name. Set it on the
+     * role switcher so picking a role updates the profile block immediately,
+     * with no round-trip through the host application.
+     */
+    reflectsRole?: boolean;
+}
+/** Payload emitted when a submenu choice is picked. */
+interface AppSidebarMenuOptionChange {
+    /** The menu entry that owns the submenu. */
+    item: AppSidebarMenuItem;
+    /** The chosen option. */
+    option: AppSidebarMenuOption;
+}
+/**
+ * Every user-visible string that is not supplied through data.
+ * Override any subset via the `labels` input to translate the component.
+ */
+interface AppSidebarLabels {
+    /** Aria-label of the rail toggle while the sidebar is expanded. */
+    collapse: string;
+    /** Aria-label of the rail toggle while the sidebar is collapsed. */
+    expand: string;
+    /** Aria-label of the drawer close button on small screens. */
+    closeNavigation: string;
+    /** Aria-label of the `<nav>` landmark. */
+    navigation: string;
+    /** Aria-label of the product switcher trigger. */
+    switchProduct: string;
+    /** Aria-label of the profile trigger. */
+    accountMenu: string;
+    /** Alt text for the logo image. */
+    logo: string;
+}
+/** Default English strings used when `labels` is not overridden. */
+declare const DEFAULT_APP_SIDEBAR_LABELS: AppSidebarLabels;
+
+/**
+ * Locale identifiers shared by the application-shell components.
+ *
+ * The keys are deliberately the same ids the shell's own language picker uses
+ * (`DEFAULT_APP_SIDEBAR_LANGUAGES`), so switching language is a direct lookup:
+ *
+ * ```ts
+ * onLanguage(change: AppSidebarMenuOptionChange) {
+ *   this.locale.set(change.option.id as AppShellLocale);
+ * }
+ * ```
+ *
+ * @module types
+ */
+/** A locale the shell ships translations for. */
+type AppShellLocale = 'en' | 'fr' | 'es' | 'de' | 'ja' | 'ko';
+/** Every shipped locale, in the order the language picker lists them. */
+declare const APP_SHELL_LOCALES: readonly AppShellLocale[];
+/**
+ * A complete set of translations for one label bundle — every locale present,
+ * every key filled. Anything narrower would let a locale fall back to English
+ * silently, which is the failure mode translations exist to prevent.
+ */
+type AppShellTranslations<T> = Record<AppShellLocale, T>;
+/**
+ * Resolve a bundle for a locale, tolerating region tags and unknown input.
+ *
+ * `'fr-CA'` resolves to `fr`; anything unrecognised falls back to `'en'` rather
+ * than rendering blank labels.
+ */
+declare function resolveAppShellLocale(locale: string | null | undefined): AppShellLocale;
+
+/**
+ * Shipped translations for {@link AppSidebarComponent}.
+ *
+ * Nothing the rail renders is hard-coded English: the chrome strings come from
+ * the `labels` input, and the ready-made account menu is built per locale.
+ * These bundles cover the six languages the shell's own picker offers, so
+ * switching language is a lookup rather than a translation project:
+ *
+ * ```ts
+ * labels = computed(() => APP_SIDEBAR_TRANSLATIONS[this.locale()]);
+ * menu   = computed(() => appSidebarMenu(this.locale()));
+ * ```
+ *
+ * Supplying your own strings stays supported — `labels` takes any partial
+ * bundle and merges it over the defaults, so you can override a single word
+ * without restating the rest.
+ *
+ * @module components/app-sidebar
+ */
+
+/** Chrome strings — the labels the rail renders itself, per locale. */
+declare const APP_SIDEBAR_TRANSLATIONS: AppShellTranslations<AppSidebarLabels>;
+/** The label of each entry in the ready-made account menu, per locale. */
+interface AppSidebarMenuStrings {
+    profile: string;
+    role: string;
+    language: string;
+    billing: string;
+    support: string;
+    logout: string;
+    member: string;
+    partner: string;
+    trainer: string;
+}
+/** Account-menu strings per locale. */
+declare const APP_SIDEBAR_MENU_TRANSLATIONS: AppShellTranslations<AppSidebarMenuStrings>;
+/**
+ * The rail's chrome strings for a locale. Accepts region tags (`'fr-CA'`) and
+ * falls back to English for anything unrecognised.
+ */
+declare function appSidebarLabels(locale: string | AppShellLocale): AppSidebarLabels;
+
+/**
+ * Ready-made data for {@link AppSidebarComponent}.
+ *
+ * The account dropdown is the same everywhere in the PECB estate, so it ships
+ * ready to use rather than being retyped per application — and it is built per
+ * locale, so none of its labels are hard-coded English:
+ *
+ * ```ts
+ * menu = computed(() => appSidebarMenu(this.locale()));
+ * ```
+ *
+ * `DEFAULT_APP_SIDEBAR_MENU` is simply the English build. Spread any entry to
+ * adjust it:
+ *
+ * ```ts
+ * menu = appSidebarMenu('fr').map(item =>
+ *   item.id === 'profile' ? { ...item, routerLink: '/me' } : item,
+ * );
+ * ```
+ *
+ * @module components/app-sidebar
+ */
+
+/**
+ * The line icons used by {@link DEFAULT_APP_SIDEBAR_MENU}. Exported so the same
+ * set can be reused for navigation items without redrawing them.
+ */
+declare const APP_SIDEBAR_MENU_ICONS: {
+    profile: string;
+    billing: string;
+    language: string;
+    roles: string;
+    support: string;
+    logout: string;
+    partner: string;
+    trainer: string;
+};
+/**
+ * The languages the account menu offers.
+ *
+ * Endonyms on purpose: a language picker names each language in that language,
+ * so "Deutsch" reads the same whatever the current locale is. These ids are the
+ * {@link AppShellLocale} keys, so a selection maps straight to a translation.
+ */
+declare const DEFAULT_APP_SIDEBAR_LANGUAGES: AppSidebarMenuOption[];
+/** The roles the account menu offers, translated for `locale`. */
+declare function appSidebarRoles(locale?: string | AppShellLocale): AppSidebarMenuOption[];
+/**
+ * The account dropdown, translated for `locale`, in the order the Central Hub
+ * renders it: Profile, Switch Roles, Language, Billing & Payments, Customer
+ * Service, and Log Out below a separator.
+ *
+ * Switch Roles is marked `reflectsRole`, so picking a role updates the line
+ * under the user's name straight away — the profile block doubles as the role
+ * select.
+ *
+ * Pass it straight to the `menu` input, or spread an entry to adjust it.
+ */
+declare function appSidebarMenu(locale?: string | AppShellLocale): AppSidebarMenuItem[];
+/**
+ * The English build of {@link appSidebarMenu}. Kept as a constant for the
+ * common case; call the factory when the shell is localised.
+ */
+declare const DEFAULT_APP_SIDEBAR_MENU: AppSidebarMenuItem[];
+/** The English build of {@link appSidebarRoles}. */
+declare const DEFAULT_APP_SIDEBAR_ROLES: AppSidebarMenuOption[];
+
+/** Which floating layer is currently open. Only one may be open at a time. */
+type AppSidebarLayer = 'product' | 'account' | null;
+/**
+ * Application shell sidebar — the collapsible navigation rail used by the
+ * PECB Central Hub.
+ *
+ * It bundles the four pieces that always ship together: the product switcher,
+ * the navigation tree, the collapse/expand rail, and the account dropdown with
+ * its language / role submenus. Everything is driven by plain data, so a host
+ * application only has to describe its navigation and listen for events.
+ *
+ * **Navigation belongs to the product.** Give each {@link AppSidebarProduct}
+ * its own `items` (or `groups`) and switching product swaps the entire tab set:
+ * a hub product declaring a single Dashboard shows nothing else, and the real
+ * tabs appear only once the user switches into a product. A single-product
+ * shell uses the component-level `items` / `groups` instead.
+ *
+ * **The account block is the role select.** Mark the role submenu
+ * `reflectsRole` and the line under the user's name follows the selection with
+ * no round-trip through the host — see `DEFAULT_APP_SIDEBAR_MENU`.
+ *
+ * **Layout.** The host is a plain flex child that owns its own width, so the
+ * app shell is just a flex row — no magic margins to keep in sync:
+ *
+ * ```html
+ * <div style="display:flex; min-height:100vh">
+ *   <pecb-app-sidebar [items]="nav" [(collapsed)]="collapsed" />
+ *   <main style="flex:1; min-width:0"><!-- page --></main>
+ * </div>
+ * ```
+ *
+ * **Responsive.** Below `mobileBreakpoint` the rail turns into an off-canvas
+ * drawer with a scrim, a focus trap and body scroll-lock. Bind `mobileOpen`
+ * to a hamburger button in the header — `collapsed` is ignored while the
+ * drawer is in play, and navigating closes it automatically.
+ *
+ * **Floating layers** (product menu, account menu, collapsed flyouts and
+ * tooltips) all render through the CDK overlay, so they are never clipped by
+ * the scroll container and reposition themselves inside the viewport.
+ *
+ * @example
+ * ```html
+ * <pecb-app-sidebar
+ *   [logoSrc]="'assets/my-pecb.svg'"
+ *   [collapsedLogoSrc]="'assets/pecb-mark.svg'"
+ *   [products]="products"
+ *   [(activeProductId)]="productId"
+ *   [items]="navItems"
+ *   [(activeItemId)]="activeId"
+ *   [user]="user"
+ *   [menu]="accountMenu"
+ *   [(collapsed)]="collapsed"
+ *   [(mobileOpen)]="drawerOpen"
+ *   (navigate)="go($event)"
+ *   (menuItemClick)="onAccountAction($event)"
+ *   (menuOptionChange)="onLanguageOrRole($event)"
+ * />
+ * ```
+ */
+declare class AppSidebarComponent {
+    private readonly sanitizer;
+    private readonly overlay;
+    private readonly platformId;
+    private readonly destroyRef;
+    private readonly host;
+    /** Logo image URL shown while the sidebar is expanded. */
+    readonly logoSrc: _angular_core.InputSignal<string | undefined>;
+    /** Compact logo/mark image URL shown while the sidebar is collapsed. */
+    readonly collapsedLogoSrc: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Inline SVG markup for the expanded logo. Preferred over `logoSrc` when both
+     * are given — vector markup stays crisp at any density and inherits colour.
+     */
+    readonly logo: _angular_core.InputSignal<string | undefined>;
+    /** Inline SVG markup for the collapsed mark. Preferred over `collapsedLogoSrc`. */
+    readonly collapsedLogo: _angular_core.InputSignal<string | undefined>;
+    /** Link the logo navigates to. Renders a plain image when omitted. */
+    readonly logoHref: _angular_core.InputSignal<string | undefined>;
+    /** Whether anything was supplied to render in the logo slot. */
+    readonly hasLogo: _angular_core.Signal<boolean>;
+    /** Product switcher entries. The switcher is hidden when empty. */
+    readonly products: _angular_core.InputSignal<AppSidebarProduct[]>;
+    /** Id of the product shown in the switcher trigger. Two-way bindable. */
+    readonly activeProductId: _angular_core.ModelSignal<string | null>;
+    /** Flat navigation list — the common case. Merged after `groups`. */
+    readonly items: _angular_core.InputSignal<AppSidebarNavItem[]>;
+    /** Grouped navigation, for sidebars with titled sections. */
+    readonly groups: _angular_core.InputSignal<AppSidebarNavGroup[]>;
+    /** Id of the highlighted item. Updated on click, so it works uncontrolled. */
+    readonly activeItemId: _angular_core.ModelSignal<string | null>;
+    /** Signed-in user. The account block is hidden when `null`. */
+    readonly user: _angular_core.InputSignal<AppSidebarUser | null>;
+    /** Entries of the account dropdown. The dropdown is skipped when empty. */
+    readonly menu: _angular_core.InputSignal<AppSidebarMenuItem[]>;
+    /** Whether the rail can be collapsed. Hides the toggle when `false`. */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Collapsed state. Two-way bindable; ignored while the drawer is active. */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /** Off-canvas drawer state on small screens. Two-way bindable. */
+    readonly mobileOpen: _angular_core.ModelSignal<boolean>;
+    /** Viewport width (px) at or below which the rail becomes a drawer. */
+    readonly mobileBreakpoint: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Expanded rail width in px. Leave unset to inherit
+     * `--pecb-app-sidebar-width` from an ancestor (default 270).
+     */
+    readonly width: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Collapsed rail width in px. Leave unset to inherit
+     * `--pecb-app-sidebar-collapsed-width` from an ancestor (default 84).
+     */
+    readonly collapsedWidth: _angular_core.InputSignal<number | undefined>;
+    /** Keep at most one navigation branch expanded at a time. */
+    readonly autoCollapseSiblings: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * After switching to a product that owns its navigation, land on that
+     * product's first selectable tab and emit `navigate` for it. Turn it off to
+     * leave the rail unselected until the user picks a tab themselves.
+     */
+    readonly autoSelectFirstItem: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show tooltips beside icons while collapsed. */
+    readonly showTooltips: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * `localStorage` key for persisting the collapsed state. Persistence is off
+     * when omitted; state then lives entirely in the `collapsed` binding.
+     */
+    readonly storageKey: _angular_core.InputSignal<string | undefined>;
+    /** Overrides for user-visible strings. Merged over the English defaults. */
+    readonly labels: _angular_core.InputSignal<Partial<AppSidebarLabels>>;
+    /** A leaf navigation item was activated. */
+    readonly navigate: _angular_core.OutputEmitterRef<AppSidebarNavItem>;
+    /** A product was picked in the switcher. */
+    readonly productChange: _angular_core.OutputEmitterRef<AppSidebarProduct>;
+    /** An account-menu entry without submenu was activated. */
+    readonly menuItemClick: _angular_core.OutputEmitterRef<AppSidebarMenuItem>;
+    /** A submenu choice (language, role, …) was picked. */
+    readonly menuOptionChange: _angular_core.OutputEmitterRef<AppSidebarMenuOptionChange>;
+    /** The account block was clicked while no `menu` is configured. */
+    readonly userClick: _angular_core.OutputEmitterRef<AppSidebarUser>;
+    private readonly mobile;
+    /** `true` while the viewport is at or below `mobileBreakpoint` — i.e. while
+     *  the rail is rendered as an off-canvas drawer. Read it from a template
+     *  reference to show a hamburger only when it is needed. */
+    readonly isMobile: _angular_core.Signal<boolean>;
+    /** Which of the two anchored menus is open. */
+    readonly openLayer: _angular_core.WritableSignal<AppSidebarLayer>;
+    /** Navigation branch shown as a flyout while collapsed. */
+    readonly flyoutItem: _angular_core.WritableSignal<AppSidebarNavItem | null>;
+    /** Account-menu entry whose submenu is open. */
+    readonly submenuItem: _angular_core.WritableSignal<AppSidebarMenuItem | null>;
+    /** Navigation item currently hovered while collapsed. */
+    readonly tooltipItem: _angular_core.WritableSignal<AppSidebarNavItem | null>;
+    /** Anchors for the overlays. Captured on interaction, so the origins stay
+     *  valid across the collapsed / drawer re-layouts. */
+    readonly productOrigin: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly accountOrigin: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly flyoutOrigin: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly submenuOrigin: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly tooltipOrigin: _angular_core.WritableSignal<HTMLElement | null>;
+    /** Ids of expanded navigation branches. */
+    private readonly expandedIds;
+    /** Measured trigger width, so anchored menus line up with their trigger. */
+    private readonly triggerWidth;
+    /**
+     * Selected option per submenu entry. Seeded from the data and updated on
+     * click, so selection is correct even when the host does not feed it back.
+     */
+    private readonly selectedOptionIds;
+    /** Sanitised icon markup, cached so change detection does not re-sanitise. */
+    private readonly iconCache;
+    /**
+     * Overlays follow their anchor while the sidebar scrolls.
+     *
+     * A `ScrollStrategy` instance belongs to exactly one overlay, and the account
+     * menu and its submenu are open at the same time — so each layer gets its own.
+     */
+    readonly productScroll: ScrollStrategy;
+    readonly accountScroll: ScrollStrategy;
+    readonly submenuScroll: ScrollStrategy;
+    readonly flyoutScroll: ScrollStrategy;
+    readonly tooltipScroll: ScrollStrategy;
+    private repositionScroll;
+    /** Resolved strings, defaults merged with the `labels` overrides. */
+    readonly text: _angular_core.Signal<AppSidebarLabels>;
+    /** `true` only when the rail is genuinely rendered narrow (never on mobile). */
+    readonly isCollapsed: _angular_core.Signal<boolean>;
+    /**
+     * The navigation the rail is currently showing.
+     *
+     * A product that declares its own `items` / `groups` owns the rail outright,
+     * so switching product swaps the whole tab set. Otherwise the component-level
+     * navigation is used: `groups` first, then a trailing untitled group for the
+     * flat `items` list.
+     */
+    readonly navGroups: _angular_core.Signal<AppSidebarNavGroup[]>;
+    /** Flattened lookup used for active-branch resolution. */
+    private readonly allItems;
+    /** The product rendered in the switcher trigger. */
+    readonly activeProduct: _angular_core.Signal<AppSidebarProduct | null>;
+    /** Product entries grouped by their `section`, preserving declaration order. */
+    readonly productSections: _angular_core.Signal<{
+        key: string;
+        label?: string;
+        products: AppSidebarProduct[];
+    }[]>;
+    /**
+     * The subtitle under the user's name.
+     *
+     * A submenu marked `reflectsRole` (the role switcher) wins over the static
+     * `user.role`, so the profile block always shows the role that is selected —
+     * the host does not have to feed the choice back in.
+     */
+    readonly accountRole: _angular_core.Signal<string | null>;
+    /** Width applied to the anchored menus — matched to the trigger they open from. */
+    readonly menuWidth: _angular_core.Signal<number>;
+    /** Product menu: under the trigger when expanded, beside it when collapsed. */
+    readonly productPositions: _angular_core.Signal<ConnectedPosition[]>;
+    /** Account menu: above the trigger when expanded, beside it when collapsed. */
+    readonly accountPositions: _angular_core.Signal<ConnectedPosition[]>;
+    /** Flyouts and submenus sit beside their anchor and flip when short on room. */
+    readonly flyoutPositions: ConnectedPosition[];
+    /** Tooltips sit to the right of the icon, vertically centred. */
+    readonly tooltipPositions: ConnectedPosition[];
+    private sidePositions;
+    constructor();
+    /** Collapse or expand the rail. No-op when `collapsible` is `false`. */
+    toggleCollapsed(): void;
+    /** Open the off-canvas drawer. */
+    openMobile(): void;
+    /** Close the off-canvas drawer. */
+    closeMobile(): void;
+    /** Toggle the off-canvas drawer — wire this to a header hamburger. */
+    toggleMobile(): void;
+    /** Close the product menu, the account menu and every flyout. */
+    closeAllLayers(): void;
+    /** `true` when the item itself is the active one. */
+    isActive(item: AppSidebarNavItem): boolean;
+    /** `true` when the item or any descendant is active. */
+    isActiveBranch(item: AppSidebarNavItem): boolean;
+    /** `true` when the item's inline branch is open. */
+    isExpanded(item: AppSidebarNavItem): boolean;
+    /**
+     * Class list for one navigation entry.
+     *
+     * Built here rather than as a stack of `[class.…]` bindings because the same
+     * markup is emitted from three branches (routerLink / href / button) at three
+     * depths — one source of truth keeps them from drifting apart.
+     */
+    navItemClass(item: AppSidebarNavItem, depth: number): string;
+    /**
+     * Handle a click on a navigation item, in the rail or inside a flyout.
+     *
+     * Branches toggle — inline while expanded, as a flyout while collapsed —
+     * and leaves become the active item, emit `navigate` and close the drawer.
+     */
+    onNavClick(item: AppSidebarNavItem, event: MouseEvent, source?: 'rail' | 'flyout'): void;
+    private toggleExpanded;
+    private siblingsOf;
+    /** Open or close the product menu, anchoring it to the trigger. */
+    toggleProductMenu(event: MouseEvent): void;
+    /** Class list for one product-menu entry. */
+    productItemClass(product: AppSidebarProduct): string;
+    /**
+     * Pick a product.
+     *
+     * When the product owns its navigation the rail swaps tab sets, so the stale
+     * expansion state is dropped and — unless `autoSelectFirstItem` is off — the
+     * rail lands on the new product's first selectable tab, emitting `navigate`
+     * for it so the host can route in the one place it already listens.
+     */
+    selectProduct(product: AppSidebarProduct, event: MouseEvent): void;
+    /** The first enabled leaf of the current navigation, depth-first. */
+    private firstSelectableItem;
+    /** Open or close the account dropdown. */
+    toggleAccountMenu(event: MouseEvent): void;
+    /** Class list for one account-menu entry. */
+    menuRowClass(item: AppSidebarMenuItem): string;
+    /** Handle a click on an account-menu entry. */
+    onMenuItemClick(item: AppSidebarMenuItem, event: MouseEvent): void;
+    /** Pick a submenu choice; emits `menuOptionChange`. */
+    selectMenuOption(item: AppSidebarMenuItem, option: AppSidebarMenuOption): void;
+    /** `true` when `option` is the current choice of `item`. */
+    isOptionSelected(item: AppSidebarMenuItem, option: AppSidebarMenuOption): boolean;
+    /** Show the collapsed-mode tooltip for a navigation item. */
+    onItemEnter(item: AppSidebarNavItem, event: Event): void;
+    /** Hide the collapsed-mode tooltip. */
+    onItemLeave(): void;
+    /**
+     * Trust inline SVG markup supplied through the data inputs.
+     *
+     * Icons come from the host application's own code, never from user input —
+     * the same contract as the rest of the library's icon inputs. Results are
+     * cached so repeated change detection does not re-run the sanitizer.
+     */
+    safeIcon(markup: string): SafeHtml;
+    /** Initials fallback for the avatar, derived from the name when not given. */
+    userInitials(user: AppSidebarUser): string;
+    /** Close everything on Escape; a second Escape closes the mobile drawer. */
+    onEscape(): void;
+    /** Close only the submenu layer — used when the parent menu is dismissed. */
+    onMenuOutsideClick(): void;
+    private measureTrigger;
+    /**
+     * Restore the collapsed state from `localStorage` once the key is known
+     * (inputs are not available in the constructor), then keep writing it back.
+     *
+     * Split across two effects so the restoring write never re-triggers the
+     * effect that performed it.
+     */
+    private syncCollapsedWithStorage;
+    private readStoredCollapsed;
+    private trackViewport;
+    private lockBodyScroll;
+    /** The host element — handy for hosts that need to measure the rail. */
+    get element(): HTMLElement;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppSidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppSidebarComponent, "pecb-app-sidebar", never, { "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "collapsedLogoSrc": { "alias": "collapsedLogoSrc"; "required": false; "isSignal": true; }; "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "collapsedLogo": { "alias": "collapsedLogo"; "required": false; "isSignal": true; }; "logoHref": { "alias": "logoHref"; "required": false; "isSignal": true; }; "products": { "alias": "products"; "required": false; "isSignal": true; }; "activeProductId": { "alias": "activeProductId"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "activeItemId": { "alias": "activeItemId"; "required": false; "isSignal": true; }; "user": { "alias": "user"; "required": false; "isSignal": true; }; "menu": { "alias": "menu"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mobileOpen": { "alias": "mobileOpen"; "required": false; "isSignal": true; }; "mobileBreakpoint": { "alias": "mobileBreakpoint"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "autoCollapseSiblings": { "alias": "autoCollapseSiblings"; "required": false; "isSignal": true; }; "autoSelectFirstItem": { "alias": "autoSelectFirstItem"; "required": false; "isSignal": true; }; "showTooltips": { "alias": "showTooltips"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, { "activeProductId": "activeProductIdChange"; "activeItemId": "activeItemIdChange"; "collapsed": "collapsedChange"; "mobileOpen": "mobileOpenChange"; "navigate": "navigate"; "productChange": "productChange"; "menuItemClick": "menuItemClick"; "menuOptionChange": "menuOptionChange"; "userClick": "userClick"; }, never, ["[appSidebarHeader]", "[appSidebarPromo]", "[appSidebarFooter]"], true, never>;
+}
+
+/**
+ * Public data contracts for {@link AppHeaderComponent}.
+ *
+ * @module components/app-header
+ */
+/** Colour treatment of the status chip beside the page title. */
+type AppHeaderChipTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+/** The small pill beside the page title — a role, a state, a plan. */
+interface AppHeaderChip {
+    /** Visible text. */
+    label: string;
+    /** Colour treatment. Defaults to `success`, matching the Central Hub role chip. */
+    tone?: AppHeaderChipTone;
+}
+/** An icon button in the header's action cluster (cart, help, …). */
+interface AppHeaderAction {
+    /** Stable identity, echoed back on `actionClick`. */
+    id: string;
+    /** Inline SVG markup for the glyph. */
+    icon: string;
+    /** Accessible name. Also used as the native tooltip. */
+    label: string;
+    /**
+     * Corner badge. A `0` renders nothing, so a cart count can be bound
+     * unconditionally.
+     */
+    badge?: number | string;
+    /** Renders the button as a link. */
+    href?: string;
+    /** Anchor target, e.g. `_blank`. Only applies when `href` is set. */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** Renders the action non-interactive. */
+    disabled?: boolean;
+}
+/** One entry in the notification dropdown. */
+interface AppHeaderNotification {
+    /** Stable identity, echoed back on `notificationClick`. */
+    id: string;
+    /** Headline text. */
+    title: string;
+    /** Secondary line — timestamp, priority, … */
+    meta?: string;
+    /** Read entries lose the tint and the unread dot. */
+    read?: boolean;
+    /** Inline SVG markup for the leading tile. */
+    icon?: string;
+    /** Tile foreground colour, e.g. `#a11e29`. */
+    iconColor?: string;
+    /** Tile background colour, e.g. `#fbeaea`. */
+    iconBackground?: string;
+}
+/**
+ * Every user-visible string the header renders itself.
+ * Override any subset via the `labels` input to translate the component.
+ */
+interface AppHeaderLabels {
+    /** Aria-label of the hamburger. */
+    openNavigation: string;
+    /** Aria-label of the bell button. */
+    notifications: string;
+    /** Heading of the notification dropdown. */
+    notificationsTitle: string;
+    /** Footer link of the notification dropdown. */
+    viewAll: string;
+    /** Shown when there is nothing to report. */
+    empty: string;
+    /**
+     * Screen-reader suffix for the unread count on the bell.
+     * `{n}` is replaced with the number.
+     */
+    unreadCount: string;
+}
+/** Default English strings used when `labels` is not overridden. */
+declare const DEFAULT_APP_HEADER_LABELS: AppHeaderLabels;
+
+/**
+ * Shipped translations for {@link AppHeaderComponent}.
+ *
+ * Every string the bar renders itself lives here; the title, chip, actions and
+ * notifications are consumer data and are translated wherever that data comes
+ * from.
+ *
+ * ```ts
+ * labels = computed(() => APP_HEADER_TRANSLATIONS[this.locale()]);
+ * ```
+ *
+ * @module components/app-header
+ */
+
+/**
+ * Chrome strings per locale.
+ *
+ * `unreadCount` carries a `{n}` placeholder that the component substitutes, so
+ * each locale controls where the number sits — Japanese and Korean put it after
+ * the word, unlike the European forms.
+ */
+declare const APP_HEADER_TRANSLATIONS: AppShellTranslations<AppHeaderLabels>;
+/**
+ * The bar's chrome strings for a locale. Accepts region tags (`'fr-CA'`) and
+ * falls back to English for anything unrecognised.
+ */
+declare function appHeaderLabels(locale: string | AppShellLocale): AppHeaderLabels;
+
+/**
+ * Application shell header — the bar that sits above the page beside
+ * {@link AppSidebarComponent}.
+ *
+ * Page title, an optional status chip, a cluster of icon actions with corner
+ * badges, and the notification bell with its dropdown (unread tint, coloured
+ * icon tiles, "view all" footer and an empty state).
+ *
+ * It pairs with the sidebar without either knowing about the other — bind the
+ * hamburger to the rail's own drawer state:
+ *
+ * ```html
+ * <div style="display:flex; min-height:100vh">
+ *   <pecb-app-sidebar #rail [items]="nav" [(mobileOpen)]="drawerOpen" />
+ *   <div style="flex:1; min-width:0">
+ *     <pecb-app-header
+ *       heading="Central Hub"
+ *       [chip]="{ label: 'Member' }"
+ *       [actions]="[cart]"
+ *       [notifications]="notifications"
+ *       [showMenuButton]="rail.isMobile()"
+ *       (menuClick)="rail.toggleMobile()"
+ *       (actionClick)="onAction($event)"
+ *       (notificationClick)="open($event)"
+ *       (viewAllNotifications)="goToInbox()"
+ *     />
+ *     <main><!-- page --></main>
+ *   </div>
+ * </div>
+ * ```
+ *
+ * The dropdown renders through the CDK overlay, so it is never clipped by the
+ * header's own stacking context and repositions itself inside the viewport.
+ */
+declare class AppHeaderComponent {
+    private readonly sanitizer;
+    private readonly overlay;
+    /** Page title. Omit it and project `[appHeaderTitle]` for custom markup. */
+    readonly heading: _angular_core.InputSignal<string | undefined>;
+    /** Status pill shown beside the title. */
+    readonly chip: _angular_core.InputSignal<AppHeaderChip | null>;
+    /** Icon buttons in the action cluster, in render order. */
+    readonly actions: _angular_core.InputSignal<AppHeaderAction[]>;
+    /** Whether the notification bell is rendered. */
+    readonly showNotifications: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Notification entries. An empty list renders the dropdown's empty state. */
+    readonly notifications: _angular_core.InputSignal<AppHeaderNotification[]>;
+    /** How many entries the dropdown shows before the "view all" footer. */
+    readonly notificationsLimit: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Whether the dropdown is open. Two-way bindable. */
+    readonly notificationsOpen: _angular_core.ModelSignal<boolean>;
+    /**
+     * Whether the hamburger is rendered. Bind it to the sidebar's drawer state —
+     * `[showMenuButton]="rail.isMobile()"` — so the two never disagree.
+     */
+    readonly showMenuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Keeps the header pinned while the page scrolls. */
+    readonly sticky: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Overrides for user-visible strings. Merged over the English defaults. */
+    readonly labels: _angular_core.InputSignal<Partial<AppHeaderLabels>>;
+    /** The hamburger was pressed. */
+    readonly menuClick: _angular_core.OutputEmitterRef<void>;
+    /** An action button was pressed. */
+    readonly actionClick: _angular_core.OutputEmitterRef<AppHeaderAction>;
+    /** A notification entry was pressed. */
+    readonly notificationClick: _angular_core.OutputEmitterRef<AppHeaderNotification>;
+    /** The dropdown's footer link was pressed. */
+    readonly viewAllNotifications: _angular_core.OutputEmitterRef<void>;
+    /** Anchor for the notification overlay, captured when the bell is pressed. */
+    readonly bellOrigin: _angular_core.WritableSignal<HTMLElement | null>;
+    /** The dropdown follows the bell while the page scrolls. */
+    readonly scrollStrategy: ScrollStrategy;
+    /** Below the bell, right-aligned; flips above when there is no room. */
+    readonly overlayPositions: ConnectedPosition[];
+    /** Resolved strings, defaults merged with the `labels` overrides. */
+    readonly text: _angular_core.Signal<AppHeaderLabels>;
+    /** How many notifications are unread. */
+    readonly unreadCount: _angular_core.Signal<number>;
+    /** The slice shown in the dropdown. */
+    readonly visibleNotifications: _angular_core.Signal<AppHeaderNotification[]>;
+    /** Screen-reader text for the bell's unread badge. */
+    readonly unreadLabel: _angular_core.Signal<string>;
+    /** Open or close the notification dropdown. */
+    toggleNotifications(event: MouseEvent): void;
+    /** Close the notification dropdown. */
+    closeNotifications(): void;
+    /** Handle a press on an action button. */
+    onActionClick(action: AppHeaderAction, event: MouseEvent): void;
+    /** Handle a press on a notification entry. */
+    onNotificationClick(notification: AppHeaderNotification): void;
+    /** Handle a press on the dropdown footer. */
+    onViewAll(): void;
+    /** A badge renders only for a non-zero count or a non-empty string. */
+    hasBadge(action: AppHeaderAction): boolean;
+    /** Class list for the status chip. */
+    chipClass(chip: AppHeaderChip): string;
+    /**
+     * Trust inline SVG markup supplied through the data inputs.
+     *
+     * Icons come from the host application's own code, never from user input.
+     * Results are cached so change detection does not re-run the sanitizer.
+     */
+    safeIcon(markup: string): SafeHtml;
+    private readonly iconCache;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppHeaderComponent, "pecb-app-header", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "chip": { "alias": "chip"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "showNotifications": { "alias": "showNotifications"; "required": false; "isSignal": true; }; "notifications": { "alias": "notifications"; "required": false; "isSignal": true; }; "notificationsLimit": { "alias": "notificationsLimit"; "required": false; "isSignal": true; }; "notificationsOpen": { "alias": "notificationsOpen"; "required": false; "isSignal": true; }; "showMenuButton": { "alias": "showMenuButton"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, { "notificationsOpen": "notificationsOpenChange"; "menuClick": "menuClick"; "actionClick": "actionClick"; "notificationClick": "notificationClick"; "viewAllNotifications": "viewAllNotifications"; }, never, ["[appHeaderStart]", "[appHeaderTitle]", "[appHeaderEnd]"], true, never>;
+}
+
 type ConfirmationIconType = 'success' | 'warning' | 'error' | 'info';
 declare class ConfirmationComponent implements OnDestroy {
     id: _angular_core.InputSignal<string>;
@@ -5684,6 +6643,10 @@ declare class ProjectLayoutComponent {
     calendarAriaLabel: _angular_core.InputSignal<string>;
     /** Prefix for the profile button accessible label (e.g. "Profile: Jane Doe"). */
     profileAriaLabel: _angular_core.InputSignal<string>;
+    /** Accessible label for the mobile hamburger that opens the sidebar drawer. */
+    openNavAriaLabel: _angular_core.InputSignal<string>;
+    /** Accessible label for the backdrop that closes the sidebar drawer. */
+    closeNavAriaLabel: _angular_core.InputSignal<string>;
     showLanguage: _angular_core.InputSignal<boolean>;
     language: _angular_core.InputSignal<string>;
     showBell: _angular_core.InputSignal<boolean>;
@@ -5712,11 +6675,23 @@ declare class ProjectLayoutComponent {
     profileClick: _angular_core.OutputEmitterRef<void>;
     sidebarItemClick: _angular_core.OutputEmitterRef<SidebarMenuItem>;
     sidebarCollapsed: _angular_core.WritableSignal<boolean>;
+    /**
+     * Whether the off-canvas sidebar drawer is open. Only has a visual effect
+     * below the `sm` breakpoint — above it the sidebar is always in the grid,
+     * and the CSS that reads this flag is scoped to the mobile media query.
+     */
+    mobileNavOpen: _angular_core.WritableSignal<boolean>;
     onCategoryChange(event: Event): void;
+    toggleMobileNav(): void;
+    closeMobileNav(): void;
+    /** Closing on Escape matches the drawer/modal behaviour elsewhere. */
+    onEscape(): void;
+    /** Navigating away should dismiss the drawer it was opened from. */
+    onSidebarItemClick(item: SidebarMenuItem): void;
     layoutClasses: _angular_core.Signal<string[]>;
     contentClasses: _angular_core.Signal<string[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProjectLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProjectLayoutComponent, "pecb-project-layout", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "pageTitle": { "alias": "pageTitle"; "required": false; "isSignal": true; }; "contentStyle": { "alias": "contentStyle"; "required": false; "isSignal": true; }; "showSidebar": { "alias": "showSidebar"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "sidebarSections": { "alias": "sidebarSections"; "required": false; "isSignal": true; }; "sidebarShowHeader": { "alias": "sidebarShowHeader"; "required": false; "isSignal": true; }; "sidebarLogoSrc": { "alias": "sidebarLogoSrc"; "required": false; "isSignal": true; }; "sidebarLogo": { "alias": "sidebarLogo"; "required": false; "isSignal": true; }; "sidebarCollapsedLogo": { "alias": "sidebarCollapsedLogo"; "required": false; "isSignal": true; }; "sidebarShowFooter": { "alias": "sidebarShowFooter"; "required": false; "isSignal": true; }; "searchType": { "alias": "searchType"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "productSearchPlaceholder": { "alias": "productSearchPlaceholder"; "required": false; "isSignal": true; }; "productCategories": { "alias": "productCategories"; "required": false; "isSignal": true; }; "searchAriaLabel": { "alias": "searchAriaLabel"; "required": false; "isSignal": true; }; "productSearchAriaLabel": { "alias": "productSearchAriaLabel"; "required": false; "isSignal": true; }; "categoryAriaLabel": { "alias": "categoryAriaLabel"; "required": false; "isSignal": true; }; "notificationsAriaLabel": { "alias": "notificationsAriaLabel"; "required": false; "isSignal": true; }; "cartAriaLabel": { "alias": "cartAriaLabel"; "required": false; "isSignal": true; }; "calendarAriaLabel": { "alias": "calendarAriaLabel"; "required": false; "isSignal": true; }; "profileAriaLabel": { "alias": "profileAriaLabel"; "required": false; "isSignal": true; }; "showLanguage": { "alias": "showLanguage"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "showBell": { "alias": "showBell"; "required": false; "isSignal": true; }; "showCart": { "alias": "showCart"; "required": false; "isSignal": true; }; "showCalendar": { "alias": "showCalendar"; "required": false; "isSignal": true; }; "profileName": { "alias": "profileName"; "required": false; "isSignal": true; }; "profileRole": { "alias": "profileRole"; "required": false; "isSignal": true; }; "profileImage": { "alias": "profileImage"; "required": false; "isSignal": true; }; "profileType": { "alias": "profileType"; "required": false; "isSignal": true; }; }, { "searchChange": "searchChange"; "productSearchChange": "productSearchChange"; "categoryChange": "categoryChange"; "languageClick": "languageClick"; "bellClick": "bellClick"; "cartClick": "cartClick"; "calendarClick": "calendarClick"; "profileClick": "profileClick"; "sidebarItemClick": "sidebarItemClick"; }, never, ["[sidebar-header]", "[sidebar-footer]", "[layoutHeaderActions]", "[layoutContent]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProjectLayoutComponent, "pecb-project-layout", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "pageTitle": { "alias": "pageTitle"; "required": false; "isSignal": true; }; "contentStyle": { "alias": "contentStyle"; "required": false; "isSignal": true; }; "showSidebar": { "alias": "showSidebar"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "sidebarSections": { "alias": "sidebarSections"; "required": false; "isSignal": true; }; "sidebarShowHeader": { "alias": "sidebarShowHeader"; "required": false; "isSignal": true; }; "sidebarLogoSrc": { "alias": "sidebarLogoSrc"; "required": false; "isSignal": true; }; "sidebarLogo": { "alias": "sidebarLogo"; "required": false; "isSignal": true; }; "sidebarCollapsedLogo": { "alias": "sidebarCollapsedLogo"; "required": false; "isSignal": true; }; "sidebarShowFooter": { "alias": "sidebarShowFooter"; "required": false; "isSignal": true; }; "searchType": { "alias": "searchType"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "productSearchPlaceholder": { "alias": "productSearchPlaceholder"; "required": false; "isSignal": true; }; "productCategories": { "alias": "productCategories"; "required": false; "isSignal": true; }; "searchAriaLabel": { "alias": "searchAriaLabel"; "required": false; "isSignal": true; }; "productSearchAriaLabel": { "alias": "productSearchAriaLabel"; "required": false; "isSignal": true; }; "categoryAriaLabel": { "alias": "categoryAriaLabel"; "required": false; "isSignal": true; }; "notificationsAriaLabel": { "alias": "notificationsAriaLabel"; "required": false; "isSignal": true; }; "cartAriaLabel": { "alias": "cartAriaLabel"; "required": false; "isSignal": true; }; "calendarAriaLabel": { "alias": "calendarAriaLabel"; "required": false; "isSignal": true; }; "profileAriaLabel": { "alias": "profileAriaLabel"; "required": false; "isSignal": true; }; "openNavAriaLabel": { "alias": "openNavAriaLabel"; "required": false; "isSignal": true; }; "closeNavAriaLabel": { "alias": "closeNavAriaLabel"; "required": false; "isSignal": true; }; "showLanguage": { "alias": "showLanguage"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "showBell": { "alias": "showBell"; "required": false; "isSignal": true; }; "showCart": { "alias": "showCart"; "required": false; "isSignal": true; }; "showCalendar": { "alias": "showCalendar"; "required": false; "isSignal": true; }; "profileName": { "alias": "profileName"; "required": false; "isSignal": true; }; "profileRole": { "alias": "profileRole"; "required": false; "isSignal": true; }; "profileImage": { "alias": "profileImage"; "required": false; "isSignal": true; }; "profileType": { "alias": "profileType"; "required": false; "isSignal": true; }; }, { "searchChange": "searchChange"; "productSearchChange": "productSearchChange"; "categoryChange": "categoryChange"; "languageClick": "languageClick"; "bellClick": "bellClick"; "cartClick": "cartClick"; "calendarClick": "calendarClick"; "profileClick": "profileClick"; "sidebarItemClick": "sidebarItemClick"; }, never, ["[sidebar-header]", "[sidebar-footer]", "[layoutHeaderActions]", "[layoutContent]"], true, never>;
 }
 
 interface HierarchicalTableColumn {
@@ -7389,5 +8364,5 @@ declare class TourComponent implements OnInit, OnChanges {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TourComponent, "pecb-tour", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "indicatorType": { "alias": "indicatorType"; "required": false; "isSignal": true; }; "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "finishLabel": { "alias": "finishLabel"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; "initialStep": { "alias": "initialStep"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "closed": "closed"; "previousClicked": "previousClicked"; "nextClicked": "nextClicked"; "finished": "finished"; "stepChanged": "stepChanged"; }, never, never, true, never>;
 }
 
-export { AccordionItemComponent, AccordionSmallComponent, AddButtonComponent, AdminHeaderComponent, AdminHeaderFieldTemplateDirective, AffixComponent, AlertComponent, AnchorComponent, ApplicationStatusBarComponent, AuditorStatusComponent, AuthorDateTimeComponent, BackToTopComponent, BadgeComponent, BlurDirective, BottomSheetComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CancelUpdateButtonsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CertificateUploadBarComponent, CheckDeleteIconComponent, CheckboxComponent, CheckboxDisplayComponent, CodeInputComponent, CodeSnippetComponent, ColorPaletteComponent, ConfirmationComponent, ContentTypeTagComponent, CourseContentPanelComponent, CoursePlayerComponent, DEFAULT_COURSE_CONTENT_PANEL_LABELS, DEFAULT_LANGUAGES, DEFAULT_VIDEO_PLAYER_LABELS, DEFAULT_VIDEO_PLAYER_RATES, DashboardGridComponent, DatepickerComponent, DividerComponent, DropdownComponent, EMPTY_STATE_MAX_BUTTONS, EditButtonComponent, EditCoverPhotoComponent, EmptyStateComponent, ExpandableRowTableComponent, FileUploadComponent, FilterColumnsComponent, FloatButtonComponent, FloatButtonItemComponent, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, GeneralComponent, GridComponent, GridItemComponent, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderSearchComponent, HeaderUserComponent, HierarchicalTableComponent, HorizontalStepsComponent, IconComponent, IconRegistry, IconTagComponent, InformationBoxComponent, InputComponent, LanguageDropdownComponent, LinkButtonComponent, LoadingService, MediaComponent, MessageBubbleComponent, MessageItemComponent, MetricsCardComponent, MiniIconButtonComponent, NoResultsComponent, NoteSidebarItemComponent, NotesPanelComponent, NotificationService, NotificationStatusLinkComponent, PECB_COLOR_PALETTE, PECB_CUSTOM_ICONS, PECB_FONT_STYLES, PECB_ICONS, PECB_TYPE_SCALE, PaginationComponent, PriceMethodComponent, ProfileComponent, ProfileElementsCardComponent, ProfileGroupComponent, ProgressBarComponent, ProgressCircleComponent, ProjectLayoutComponent, QuantitySelectorComponent, QuestionTypeTagComponent, RadioComponent, RadioDisplayComponent, RatingNumberComponent, ReasonForReturnComponent, RequestSentByComponent, RequestStatusBarComponent, ResultPageComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, ShadowDirective, SidebarComponent, SkeletonComponent, SlidePointsComponent, SpacerComponent, SpinnerComponent, StandardsPdfCardComponent, StatisticsCardComponent, StatusComponent, StepperComponent, TabComponent, TableComponent, TagComponent, TestimonialComponent, TextFormFieldComponent, ThemeService, ToggleComponent, ToolbarBarComponent, TooltipComponent, TooltipDirective, TourComponent, TranscriptLineComponent, TypographyComponent, UserWithEmailComponent, VerifyChecklistComponent, VideoPlayerComponent, VideoUploadBarComponent, VirtualTableComponent, addClass, announceToScreenReader, capitalize, closestElement, copyToClipboard, courseModuleStats, courseProgress, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, findCourseLesson, findCourseModule, formatCount, formatCourseDuration, formatCourseTime, formatErrorForLog, formatErrorMessage, formatVideoTime, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, parseLessonPartTitle, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, resolveLessonStatus, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
-export type { AccordionVariant, AddButtonVariant, AdminHeaderAction, AdminHeaderActionType, AdminHeaderBadgeVariant, AdminHeaderField, AdminHeaderFieldType, AdminHeaderMetadata, AdminHeaderMetadataType, AdminHeaderProfile, AffixPosition, AlertType, AlertVariant, Alignment, AnchorDirection, AnchorItem, AnchorLevel, AnimationTiming, AppStatusColor, AriaAttributes, AriaLive, AriaRole, AuditorStatusType, BadgeSize, BadgeStatus, BadgeVariant, BlurSize, BreadcrumbItem, BreadcrumbSeparator, Breakpoint, ButtonGroupIconMode, ButtonGroupItemPosition, ButtonIconStyle, ButtonSize, ButtonVariant, CalendarDay, Callback, CardElevation, CardRadius, CardRole, CheckDeleteType, CheckboxDisplayState, CheckboxLabelPosition, ClosableWithHooks, CodeInputDirection, CodeInputState, CodeSnippetTheme, CodeSnippetVariant, ColorPaletteGroup, ColorPaletteItem, ColorVariant, Colorable, ColumnOption, ComponentSize, ConfirmationIconType, ContentStyle, ContentTagDisplay, ContentTagType, CourseContentPanelAccent, CourseContentPanelDensity, CourseContentPanelLabels, CourseContentPanelLayout, CourseContentPanelTab, CourseLesson, CourseLessonRunView, CourseLessonStatus, CourseLessonType, CourseLessonView, CourseModule, CourseModuleStats, CourseModuleView, CoursePlayerPanelPosition, CourseProgressStats, CourseTimelineRow, CourseTranscriptCue, CourseTranscriptRow, CustomIconName, DashboardGridGap, DashboardGridLayout, DatepickerSize, Direction, Disableable, DividerType, DropdownOption, DropdownSize, EditButtonVariant, ElevationLevel, EmptyStateButton, EmptyStateIconTheme, ErrorCategory, ErrorHandler, ErrorOptions, ErrorSeverity, EventHandler, ExpandableRowColumn, ExpandableRowPageEvent, ExpandableRowProgressConfig, ExtendedColorVariant, FieldItem, FieldStyle, FileUploadEvent, FileUploadState, FileUploadVariant, FilterColumnsActiveTab, FilterColumnsApplyEvent, FilterField, FilterFieldType, FilterState, FloatButtonAction, FloatButtonPosition, Focusable, FormControlBase, GridAlign, GridColumns, GridGap, GridItemSpan, GridPadding, GridVerticalAlign, HeaderActionButton, HeaderLanguageOption, HeaderSearchCategory, HeaderSearchType, HierarchicalTableAction, HierarchicalTableColumn, HierarchicalTablePageEvent, IconColor, IconName, IconShape, IconSize, IconTagType, InformationBoxVariant, InputSize, InputType, LanguageDisplayMode, LanguageOption, LinkButtonType, Loadable, LoadingState, MarkedDate, MediaGroup, MediaItem, MediaSize, MediaType, MenuItem, MessageBubbleType, MessageDirection, MessageItemStatus, MetricsCardBadgeStatus, MetricsCardIconBg, MetricsCardOrientation, MetricsCardType, MetricsCardVariation, MiniIconAction, NonNullableProps, NoteGroup, NoteItem, NoteSidebarPosition, NoteSidebarState, Notification, NotificationConfig, NotificationPosition, NotificationStatusType, NotificationType, OptionalProps, Orientation, OverlayComponent, PageChangeEvent, PaginationSize, PaginationState, PaginationVariant, PdfCardVariant, PecbError, PecbTableColumn, PecbTableColumnComponent, PecbTableColumnType, Position, ProfileBadge, ProfileGroupItem, ProfileGroupSize, ProfileIndicator, ProfileSize, ProfileType, ProgressBarSize, ProgressCircleSize, ProgressType, QuestionTagDisplay, QuestionTagType, QuizType, RadioDisplayState, RadioLabelPosition, RadioVariant, RadiusScale, RatingStyle, RequestStatusIconType, RequireProps, ResultPageAction, ResultPageIcon, RibbonColor, RightModalSize, SearchMode, SelectableItem, ShadowHardSize, ShadowSize, ShadowSoftSize, ShadowType, SidebarMenuItem, SidebarSection, Size, Sizeable, SkeletonShape, SkeletonSize, SkeletonType, SortState, SpacerSize, SpacingScale, StateVariant, StatisticsIconColor, StatusColor, StatusSize, StatusType, StatusVariant, StepItem, StepOrder, StepState, StepperDirection, StepperSize, StepperTailStyle, StepperType, TabItem, TabSize, TabStyle, TableAction, TableColumn, TableRowActionEvent, TableSelectionEvent, TableSize, TableSortEvent, TableStatusConfig, TableUserConfig, TableVariant, TagAction, TagStyle, Templatable, TestimonialData, TestimonialVariant, TextFormFieldType, ThemeConfig, ThemeMode, ThemeVariables, ToggleLabelPosition, ToggleSize, ToolbarButton, ToolbarTab, ToolbarVariant, TooltipPointerPosition, TooltipTheme, TourIndicatorType, TourPlacement, TourStep, TourType, TranscriptLineState, TreeNode, TypographyScaleEntry, TypographyStyleEntry, UploadedFile, Validatable, ValidationError, ValidationState, VerifyChecklistItem, VerifyItemStatus, VideoPlayerError, VideoPlayerLabels, VideoPlayerPreload, VideoPlayerSource, VideoPlayerTimeEvent, VideoPlayerTrack, VirtualTableColumn, VirtualTablePageEvent, VirtualTableProgressConfig };
+export { APP_HEADER_TRANSLATIONS, APP_SHELL_LOCALES, APP_SIDEBAR_MENU_ICONS, APP_SIDEBAR_MENU_TRANSLATIONS, APP_SIDEBAR_TRANSLATIONS, AccordionItemComponent, AccordionSmallComponent, AddButtonComponent, AdminHeaderComponent, AdminHeaderFieldTemplateDirective, AffixComponent, AlertComponent, AnchorComponent, AppHeaderComponent, AppSidebarComponent, ApplicationStatusBarComponent, AuditorStatusComponent, AuthorDateTimeComponent, BackToTopComponent, BadgeComponent, BlurDirective, BottomSheetComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CancelUpdateButtonsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CertificateUploadBarComponent, CheckDeleteIconComponent, CheckboxComponent, CheckboxDisplayComponent, CodeInputComponent, CodeSnippetComponent, ColorPaletteComponent, ConfirmationComponent, ContentTypeTagComponent, CourseContentPanelComponent, CoursePlayerComponent, DEFAULT_APP_HEADER_LABELS, DEFAULT_APP_SIDEBAR_LABELS, DEFAULT_APP_SIDEBAR_LANGUAGES, DEFAULT_APP_SIDEBAR_MENU, DEFAULT_APP_SIDEBAR_ROLES, DEFAULT_COURSE_CONTENT_PANEL_LABELS, DEFAULT_LANGUAGES, DEFAULT_VIDEO_PLAYER_LABELS, DEFAULT_VIDEO_PLAYER_RATES, DashboardGridComponent, DatepickerComponent, DividerComponent, DropdownComponent, EMPTY_STATE_MAX_BUTTONS, EditButtonComponent, EditCoverPhotoComponent, EmptyStateComponent, ExpandableRowTableComponent, FileUploadComponent, FilterColumnsComponent, FloatButtonComponent, FloatButtonItemComponent, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, GeneralComponent, GridComponent, GridItemComponent, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderSearchComponent, HeaderUserComponent, HierarchicalTableComponent, HorizontalStepsComponent, IconComponent, IconRegistry, IconTagComponent, InformationBoxComponent, InputComponent, LanguageDropdownComponent, LinkButtonComponent, LoadingService, MediaComponent, MessageBubbleComponent, MessageItemComponent, MetricsCardComponent, MiniIconButtonComponent, NoResultsComponent, NoteSidebarItemComponent, NotesPanelComponent, NotificationService, NotificationStatusLinkComponent, PECB_COLOR_PALETTE, PECB_CUSTOM_ICONS, PECB_FONT_STYLES, PECB_ICONS, PECB_TYPE_SCALE, PaginationComponent, PriceMethodComponent, ProfileComponent, ProfileElementsCardComponent, ProfileGroupComponent, ProgressBarComponent, ProgressCircleComponent, ProjectLayoutComponent, QuantitySelectorComponent, QuestionTypeTagComponent, RadioComponent, RadioDisplayComponent, RatingNumberComponent, ReasonForReturnComponent, RequestSentByComponent, RequestStatusBarComponent, ResultPageComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, ShadowDirective, SidebarComponent, SkeletonComponent, SlidePointsComponent, SpacerComponent, SpinnerComponent, StandardsPdfCardComponent, StatisticsCardComponent, StatusComponent, StepperComponent, TabComponent, TableComponent, TagComponent, TestimonialComponent, TextFormFieldComponent, ThemeService, ToggleComponent, ToolbarBarComponent, TooltipComponent, TooltipDirective, TourComponent, TranscriptLineComponent, TypographyComponent, UserWithEmailComponent, VerifyChecklistComponent, VideoPlayerComponent, VideoUploadBarComponent, VirtualTableComponent, addClass, announceToScreenReader, appHeaderLabels, appSidebarLabels, appSidebarMenu, appSidebarRoles, capitalize, closestElement, copyToClipboard, courseModuleStats, courseProgress, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, findCourseLesson, findCourseModule, formatCount, formatCourseDuration, formatCourseTime, formatErrorForLog, formatErrorMessage, formatVideoTime, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, parseLessonPartTitle, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, resolveAppShellLocale, resolveLessonStatus, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
+export type { AccordionVariant, AddButtonVariant, AdminHeaderAction, AdminHeaderActionType, AdminHeaderBadgeVariant, AdminHeaderField, AdminHeaderFieldType, AdminHeaderMetadata, AdminHeaderMetadataType, AdminHeaderProfile, AffixPosition, AlertType, AlertVariant, Alignment, AnchorDirection, AnchorItem, AnchorLevel, AnimationTiming, AppHeaderAction, AppHeaderChip, AppHeaderChipTone, AppHeaderLabels, AppHeaderNotification, AppShellLocale, AppShellTranslations, AppSidebarLabels, AppSidebarMenuItem, AppSidebarMenuOption, AppSidebarMenuOptionChange, AppSidebarMenuStrings, AppSidebarNavGroup, AppSidebarNavItem, AppSidebarProduct, AppSidebarRouterLink, AppSidebarUser, AppStatusColor, AriaAttributes, AriaLive, AriaRole, AuditorStatusType, BadgeSize, BadgeStatus, BadgeVariant, BlurSize, BreadcrumbItem, BreadcrumbSeparator, Breakpoint, ButtonGroupIconMode, ButtonGroupItemPosition, ButtonIconStyle, ButtonSize, ButtonVariant, CalendarDay, Callback, CardElevation, CardRadius, CardRole, CheckDeleteType, CheckboxDisplayState, CheckboxLabelPosition, ClosableWithHooks, CodeInputDirection, CodeInputState, CodeSnippetTheme, CodeSnippetVariant, ColorPaletteGroup, ColorPaletteItem, ColorVariant, Colorable, ColumnOption, ComponentSize, ConfirmationIconType, ContentStyle, ContentTagDisplay, ContentTagType, CourseContentPanelAccent, CourseContentPanelDensity, CourseContentPanelLabels, CourseContentPanelLayout, CourseContentPanelTab, CourseLesson, CourseLessonRunView, CourseLessonStatus, CourseLessonType, CourseLessonView, CourseModule, CourseModuleStats, CourseModuleView, CoursePlayerPanelPosition, CourseProgressStats, CourseTimelineRow, CourseTranscriptCue, CourseTranscriptRow, CustomIconName, DashboardGridGap, DashboardGridLayout, DatepickerSize, Direction, Disableable, DividerType, DropdownOption, DropdownSize, EditButtonVariant, ElevationLevel, EmptyStateButton, EmptyStateIconTheme, ErrorCategory, ErrorHandler, ErrorOptions, ErrorSeverity, EventHandler, ExpandableRowColumn, ExpandableRowPageEvent, ExpandableRowProgressConfig, ExtendedColorVariant, FieldItem, FieldStyle, FileUploadEvent, FileUploadState, FileUploadVariant, FilterColumnsActiveTab, FilterColumnsApplyEvent, FilterField, FilterFieldType, FilterState, FloatButtonAction, FloatButtonPosition, Focusable, FormControlBase, GridAlign, GridColumns, GridGap, GridItemSpan, GridPadding, GridVerticalAlign, HeaderActionButton, HeaderLanguageOption, HeaderSearchCategory, HeaderSearchType, HierarchicalTableAction, HierarchicalTableColumn, HierarchicalTablePageEvent, IconColor, IconName, IconShape, IconSize, IconTagType, InformationBoxVariant, InputSize, InputType, LanguageDisplayMode, LanguageOption, LinkButtonType, Loadable, LoadingState, MarkedDate, MediaGroup, MediaItem, MediaSize, MediaType, MenuItem, MessageBubbleType, MessageDirection, MessageItemStatus, MetricsCardBadgeStatus, MetricsCardIconBg, MetricsCardOrientation, MetricsCardType, MetricsCardVariation, MiniIconAction, NonNullableProps, NoteGroup, NoteItem, NoteSidebarPosition, NoteSidebarState, Notification, NotificationConfig, NotificationPosition, NotificationStatusType, NotificationType, OptionalProps, Orientation, OverlayComponent, PageChangeEvent, PaginationSize, PaginationState, PaginationVariant, PdfCardVariant, PecbError, PecbTableColumn, PecbTableColumnComponent, PecbTableColumnType, Position, ProfileBadge, ProfileGroupItem, ProfileGroupSize, ProfileIndicator, ProfileSize, ProfileType, ProgressBarSize, ProgressCircleSize, ProgressType, QuestionTagDisplay, QuestionTagType, QuizType, RadioDisplayState, RadioLabelPosition, RadioVariant, RadiusScale, RatingStyle, RequestStatusIconType, RequireProps, ResultPageAction, ResultPageIcon, RibbonColor, RightModalSize, SearchMode, SelectableItem, ShadowHardSize, ShadowSize, ShadowSoftSize, ShadowType, SidebarMenuItem, SidebarSection, Size, Sizeable, SkeletonShape, SkeletonSize, SkeletonType, SortState, SpacerSize, SpacingScale, StateVariant, StatisticsIconColor, StatusColor, StatusSize, StatusType, StatusVariant, StepItem, StepOrder, StepState, StepperDirection, StepperSize, StepperTailStyle, StepperType, TabItem, TabSize, TabStyle, TableAction, TableColumn, TableRowActionEvent, TableSelectionEvent, TableSize, TableSortEvent, TableStatusConfig, TableUserConfig, TableVariant, TagAction, TagStyle, Templatable, TestimonialData, TestimonialVariant, TextFormFieldType, ThemeConfig, ThemeMode, ThemeVariables, ToggleLabelPosition, ToggleSize, ToolbarButton, ToolbarTab, ToolbarVariant, TooltipPointerPosition, TooltipTheme, TourIndicatorType, TourPlacement, TourStep, TourType, TranscriptLineState, TreeNode, TypographyScaleEntry, TypographyStyleEntry, UploadedFile, Validatable, ValidationError, ValidationState, VerifyChecklistItem, VerifyItemStatus, VideoPlayerError, VideoPlayerLabels, VideoPlayerPreload, VideoPlayerSource, VideoPlayerTimeEvent, VideoPlayerTrack, VirtualTableColumn, VirtualTablePageEvent, VirtualTableProgressConfig };