@tedi-design-system/angular 6.5.0-rc.14 → 6.5.0-rc.16

package/tedi/index.d.ts

@@ -3,7 +3,7 @@ import { AfterContentChecked, AfterViewInit, InputSignal, Signal, PipeTransform,
 import * as _tedi_design_system_angular_tedi from '@tedi-design-system/angular/tedi';
 import * as _tanstack_table_core from '@tanstack/table-core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { Table, VisibilityState, ColumnOrderState, ColumnSizingState, RowSelectionState, ExpandedState, ColumnFiltersState, SortingState, PaginationState, ColumnDef, CellContext, Column, Row } from '@tanstack/angular-table';
+import { Table, VisibilityState, ColumnOrderState, ColumnSizingState, RowSelectionState, ExpandedState, ColumnFiltersState, SortingState, PaginationState, ColumnDef, CellContext, Row, Column } from '@tanstack/angular-table';
 import * as _angular_cdk_overlay from '@angular/cdk/overlay';
 import { ConnectedOverlayPositionChange, ConnectedPosition, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
@@ -60,8 +60,8 @@ declare class IconComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "tedi-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type TextModifiers = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "normal" | "small" | "bold" | "thin" | "italic" | "center" | "left" | "right" | "nowrap" | "break-all" | "break-word" | "break-spaces" | "uppercase" | "lowercase" | "capitalize" | "capitalize-first" | "inline-block" | "inline" | "line-normal" | "line-condensed" | "subtitle";
-type TextColor = "primary" | "secondary" | "tertiary" | "white" | "disabled" | "brand" | "success" | "warning" | "danger" | "info" | "neutral";
+type TextModifiers = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "normal" | "small" | "extra-small" | "bold" | "thin" | "italic" | "center" | "left" | "right" | "nowrap" | "break-all" | "break-word" | "break-spaces" | "uppercase" | "lowercase" | "capitalize" | "capitalize-first" | "inline-block" | "inline" | "line-normal" | "line-condensed" | "subtitle";
+type TextColor = "primary" | "secondary" | "tertiary" | "white" | "disabled" | "brand" | "success" | "warning" | "danger" | "info" | "neutral" | "inherit";
 declare class TextComponent {
     /**
      * Single or multiple modifiers to change the text behavior
@@ -409,6 +409,13 @@ declare const translationsMap: {
         en: string;
         ru: string;
     };
+    "header.role-search.organization": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
     "header.role-no-representatives": {
         description: string;
         components: string[];
@@ -423,7 +430,7 @@ declare const translationsMap: {
         en: string;
         ru: string;
     };
-    "header.login-mobile": {
+    "header.login.mobile": {
         description: string;
         components: string[];
         et: string;
@@ -437,6 +444,13 @@ declare const translationsMap: {
         en: string;
         ru: string;
     };
+    "header.logout.mobile": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
     "header.logo": {
         description: string;
         components: string[];
@@ -451,6 +465,20 @@ declare const translationsMap: {
         en: string;
         ru: string;
     };
+    "header.profile.mobile": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
+    "header.search": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
     "file-upload.add": {
         description: string;
         components: string[];
@@ -2740,6 +2768,12 @@ type ComponentInputs<TComponent> = {
 };
 
 type TableSize = "medium" | "small";
+/**
+ * The auto-injected control columns, in the order they may appear. Used by the
+ * table's `controlColumnOrder` input to let consumers reorder them (e.g. place
+ * the selection checkbox before the expand chevron).
+ */
+type TableControlColumn = "drag" | "select" | "expand";
 /** Phases of keyboard-driven column reordering. */
 type ColumnReorderPhase = "idle" | "picked-up" | "moving";
 /**
@@ -2876,6 +2910,19 @@ type TediColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue> & {
      * entirely (covered by a previous spanning cell). Defaults to `1`.
      */
     rowSpan?: number | ((info: CellContext<TData, TValue>) => number);
+    /**
+     * Row grouping for this column: consecutive rendered rows with an equal key
+     * are merged into a single spanning cell (computed internally against the
+     * live, post-filter / sort / pagination row model — no manual
+     * `groupRowSpan` wiring).
+     *
+     * - A function `(row) => key` groups this column by its own key.
+     * - `true` reuses the table-level `groupRowsBy` key (shared grouping that
+     *   also drives the control columns, group selection, and group borders).
+     *
+     * Takes precedence over `rowSpan` when both are set.
+     */
+    groupBy?: boolean | ((row: Row<TData>) => unknown);
     /**
      * Opts the column into the built-in sort affordance. When `true` and the
      * column's `header` is a string, the table renders a clickable sort button
@@ -3104,6 +3151,38 @@ declare class TediTableComponent<TData> {
      * @default undefined
      */
     readonly getSubRows: _angular_core.InputSignal<((row: TData) => TData[] | undefined) | undefined>;
+    /**
+     * Table-level row grouping key. When set, consecutive rendered rows with an
+     * equal key form a group, and:
+     * - the control columns (select / expand / drag) span each group — one
+     *   checkbox and one chevron per group instead of per row,
+     * - row selection operates per group (see `enableRowSelection`),
+     * - group boundaries drive `rowGroupDividers`.
+     *
+     * Data columns opt into spanning the same groups with `groupBy: true`; a
+     * column can also group independently with its own `groupBy: (row) => key`.
+     * @default undefined
+     */
+    readonly groupRowsBy: _angular_core.InputSignal<((row: Row<TData>) => unknown) | undefined>;
+    /**
+     * How row dividers are drawn when the table is grouped via `groupRowsBy`:
+     * - `"all"` (default) — a divider under every row, as usual.
+     * - `"between"` — dividers only at group boundaries; rows within a group
+     *   read as one block.
+     * - `"none"` — no row dividers.
+     *
+     * No effect when `groupRowsBy` is not set.
+     * @default "all"
+     */
+    readonly rowGroupDividers: _angular_core.InputSignal<"none" | "all" | "between">;
+    /**
+     * Order of the auto-injected control columns (drag handle, selection
+     * checkbox, expand chevron). Only the controls that are actually enabled
+     * render; any enabled control omitted from this list is appended at the end.
+     * Use it to e.g. place the checkbox before the expand chevron.
+     * @default ["drag", "select", "expand"]
+     */
+    readonly controlColumnOrder: _angular_core.InputSignal<TableControlColumn[]>;
     /**
      * Enables pagination and configures the bottom paginator slot. This is also
      * the source of truth for `pageSize` / `pageSizeOptions` — the top slot
@@ -3299,6 +3378,20 @@ declare class TediTableComponent<TData> {
      */
     private readonly hasFilterableColumns;
     private readonly augmentedColumns;
+    /**
+     * Per-column group spans (`columnId → (rowId → span)`), computed from the
+     * live row model for every column that opts into grouping via `groupBy`.
+     * A `groupBy: true` column reuses the table-level `groupRowsBy` key.
+     */
+    protected readonly groupSpansByColumn: Signal<Map<string, Map<string, number>>>;
+    /**
+     * Table-level row groups keyed by `groupRowsBy`: maps every row id to the
+     * full set of rows in its (consecutive) group. Empty when the table is not
+     * grouped. Drives group selection and group dividers.
+     */
+    protected readonly rowGroups: Signal<Map<string, Row<TData>[]>>;
+    /** Row ids that start a group — used to draw dividers at group boundaries. */
+    protected readonly groupStartRowIds: Signal<Set<string>>;
     private buildStateChangeHandlers;
     private readonly defaultPagination;
     private buildResolvedState;
@@ -3332,7 +3425,12 @@ declare class TediTableComponent<TData> {
     protected readonly isSomePageRowsSelected: Signal<boolean>;
     constructor();
     private applyPatch;
-    protected handleRowClick(row: Row<TData>): void;
+    protected handleRowClick(event: Event, row: Row<TData>): void;
+    /**
+     * True when the click originated on an interactive control between the event
+     * target and the row element (exclusive), so row-level handlers can bow out.
+     */
+    private isInteractiveTarget;
     private hasTextSelection;
     /** Accessible name for an interactive row, from `rowAriaLabel`. `null` when
      *  the row is not interactive or no resolver is provided. */
@@ -3367,6 +3465,22 @@ declare class TediTableComponent<TData> {
     protected columnMaxWidth(column: {
         id: string;
     }): number | null;
+    /**
+     * Columns frozen by `stickyFirstColumn`, keyed by id: the leading control
+     * columns (select / expand / drag) plus the first content column, pinned
+     * together as one block. `left` is the cumulative offset; `start` / `edge`
+     * mark the block's left and right edges (the right edge draws the divider).
+     * Empty when `stickyFirstColumn` is off.
+     */
+    protected readonly stickyLeftColumns: Signal<Map<string, {
+        left: number;
+        start: boolean;
+        edge: boolean;
+    }>>;
+    /** Sticky `left` (px) for a frozen column; `null` when the column isn't frozen. */
+    protected stickyLeft(id: string): number | null;
+    /** Sticky-column class fragment for a cell (`""` when not frozen). */
+    protected stickyLeftClass(id: string): string;
     protected handleRowKeydown(event: KeyboardEvent, row: Row<TData>): void;
     protected handleRowDrop(event: CdkDragDrop<TData[]>): void;
     /** Stable id for a row's reorder handle button — used to restore keyboard
@@ -3451,7 +3565,18 @@ declare class TediTableComponent<TData> {
     /** Visible label shown while a row is expanded (`close` action). */
     protected readonly expandButtonCloseText: Signal<string | undefined>;
     protected handleSelectAll(checked: boolean): void;
+    /**
+     * Selectable rows that a single checkbox controls. For a real group (>1
+     * member) that's the whole group; otherwise it's the row itself — which
+     * keeps TanStack's parent→sub-row cascade (`row.toggleSelected`) intact for
+     * `getSubRows` parents that happen to be singleton groups.
+     */
+    private selectionGroup;
     protected handleSelectRow(row: Row<TData>, checked: boolean): void;
+    /** Whether the (group) checkbox for `row` should render as checked. */
+    protected isRowSelected(row: Row<TData>): boolean;
+    /** Whether the (group) checkbox for `row` should render as indeterminate. */
+    protected isRowIndeterminate(row: Row<TData>): boolean;
     protected handleExpandToggle(row: Row<TData>): void;
     protected handleExpandKeydown(event: KeyboardEvent): void;
     protected handleColumnFilter(column: ReturnType<Table<TData>["getAllLeafColumns"]>[number], value: string): void;
@@ -3558,11 +3683,12 @@ declare class TediTableComponent<TData> {
      */
     protected resolveRowSpan(cell: {
         column: {
+            id: string;
             columnDef: TediColumnDef<TData>;
         };
     }, cellContext: CellContext<TData, unknown>): number | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TediTableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TediTableComponent<any>, "tedi-table", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "verticalBorders": { "alias": "verticalBorders"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "required": false; "isSignal": true; }; "stickyFirstColumn": { "alias": "stickyFirstColumn"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "activeRowId": { "alias": "activeRowId"; "required": false; "isSignal": true; }; "selectedRowHighlight": { "alias": "selectedRowHighlight"; "required": false; "isSignal": true; }; "rowHover": { "alias": "rowHover"; "required": false; "isSignal": true; }; "enableRowSelection": { "alias": "enableRowSelection"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "enableColumnFilters": { "alias": "enableColumnFilters"; "required": false; "isSignal": true; }; "renderSubComponent": { "alias": "renderSubComponent"; "required": false; "isSignal": true; }; "getRowCanExpand": { "alias": "getRowCanExpand"; "required": false; "isSignal": true; }; "expandTrigger": { "alias": "expandTrigger"; "required": false; "isSignal": true; }; "expandButtonVariant": { "alias": "expandButtonVariant"; "required": false; "isSignal": true; }; "expandButtonLabel": { "alias": "expandButtonLabel"; "required": false; "isSignal": true; }; "getSubRows": { "alias": "getSubRows"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "paginationTop": { "alias": "paginationTop"; "required": false; "isSignal": true; }; "manualPagination": { "alias": "manualPagination"; "required": false; "isSignal": true; }; "manualSorting": { "alias": "manualSorting"; "required": false; "isSignal": true; }; "manualFiltering": { "alias": "manualFiltering"; "required": false; "isSignal": true; }; "pageCount": { "alias": "pageCount"; "required": false; "isSignal": true; }; "rowCount": { "alias": "rowCount"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "defaultState": { "alias": "defaultState"; "required": false; "isSignal": true; }; "persist": { "alias": "persist"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "placeholderRole": { "alias": "placeholderRole"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "rowAriaLabel": { "alias": "rowAriaLabel"; "required": false; "isSignal": true; }; "reorderableRows": { "alias": "reorderableRows"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; }, { "stateChange": "stateChange"; "rowClick": "rowClick"; "rowDrop": "rowDrop"; }, ["customResultsTemplateRef"], ["tedi-table-toolbar", "tedi-table-columns-menu"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TediTableComponent<any>, "tedi-table", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "verticalBorders": { "alias": "verticalBorders"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "required": false; "isSignal": true; }; "stickyFirstColumn": { "alias": "stickyFirstColumn"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "activeRowId": { "alias": "activeRowId"; "required": false; "isSignal": true; }; "selectedRowHighlight": { "alias": "selectedRowHighlight"; "required": false; "isSignal": true; }; "rowHover": { "alias": "rowHover"; "required": false; "isSignal": true; }; "enableRowSelection": { "alias": "enableRowSelection"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "enableColumnFilters": { "alias": "enableColumnFilters"; "required": false; "isSignal": true; }; "renderSubComponent": { "alias": "renderSubComponent"; "required": false; "isSignal": true; }; "getRowCanExpand": { "alias": "getRowCanExpand"; "required": false; "isSignal": true; }; "expandTrigger": { "alias": "expandTrigger"; "required": false; "isSignal": true; }; "expandButtonVariant": { "alias": "expandButtonVariant"; "required": false; "isSignal": true; }; "expandButtonLabel": { "alias": "expandButtonLabel"; "required": false; "isSignal": true; }; "getSubRows": { "alias": "getSubRows"; "required": false; "isSignal": true; }; "groupRowsBy": { "alias": "groupRowsBy"; "required": false; "isSignal": true; }; "rowGroupDividers": { "alias": "rowGroupDividers"; "required": false; "isSignal": true; }; "controlColumnOrder": { "alias": "controlColumnOrder"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "paginationTop": { "alias": "paginationTop"; "required": false; "isSignal": true; }; "manualPagination": { "alias": "manualPagination"; "required": false; "isSignal": true; }; "manualSorting": { "alias": "manualSorting"; "required": false; "isSignal": true; }; "manualFiltering": { "alias": "manualFiltering"; "required": false; "isSignal": true; }; "pageCount": { "alias": "pageCount"; "required": false; "isSignal": true; }; "rowCount": { "alias": "rowCount"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "defaultState": { "alias": "defaultState"; "required": false; "isSignal": true; }; "persist": { "alias": "persist"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "placeholderRole": { "alias": "placeholderRole"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "rowAriaLabel": { "alias": "rowAriaLabel"; "required": false; "isSignal": true; }; "reorderableRows": { "alias": "reorderableRows"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; }, { "stateChange": "stateChange"; "rowClick": "rowClick"; "rowDrop": "rowDrop"; }, ["customResultsTemplateRef"], ["tedi-table-toolbar", "tedi-table-columns-menu"], true, never>;
 }
 
 declare const TEDI_TABLE_CONTEXT: InjectionToken<TediTableContextValue<unknown>>;
@@ -3592,12 +3718,23 @@ declare function createTablePersistence(options: {
     onStateChange?: (state: TableState) => void;
 }): TablePersistenceController;
 
+/**
+ * Collapse consecutive rows with an equal key into row spans, keyed by row id.
+ * The first row of each run maps to the run length (`N`); the rows it covers
+ * map to `0`. Pass the **rendered** row set (typically
+ * `table.getRowModel().rows`) so spans operate post-filter / sort / pagination.
+ */
+declare function computeGroupSpans<TData>(rows: Row<TData>[], keyFn: (row: Row<TData>) => unknown): Map<string, number>;
 /**
  * Build a `rowSpan` callback that auto-collapses consecutive equal keys.
  * Returns `N > 1` for the first row in a run and `0` for the covered rows.
  * Pass the **same** array of rows the table is rendering — typically
  * `table.getRowModel().rows` — so spans operate on the post-filter / sort /
  * pagination row set.
+ *
+ * Prefer the column-level `groupBy` option, which computes this internally
+ * against the live row model; reach for this helper only when you need a
+ * standalone `rowSpan` callback.
  */
 declare function groupRowSpan<TData>(rows: Row<TData>[], keyFn: (row: Row<TData>) => unknown): (info: CellContext<TData, unknown>) => number;
 
@@ -5156,6 +5293,7 @@ declare class TextFieldComponent implements ControlValueAccessor, FormFieldContr
     private formDisabled;
     private onChange;
     private onTouched;
+    constructor();
     private setValue;
     writeValue(value: string | null): void;
     registerOnChange(fn: (value: string) => void): void;
@@ -5955,7 +6093,7 @@ declare class FooterBottomComponent implements AfterContentInit {
 
 declare class HeaderComponent {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderComponent, "header[tedi-header]", never, {}, {}, never, ["button[tedi-sidenav-toggle]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderComponent, "header[tedi-header]", never, {}, {}, never, ["button[tedi-sidenav-toggle]", "*", "tedi-header-bottom"], true, never>;
 }
 
 declare class HeaderActionsComponent {
@@ -5963,9 +6101,40 @@ declare class HeaderActionsComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderActionsComponent, "tedi-header-actions", never, {}, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Mobile-only secondary row rendered below the main header bar.
+ *
+ * Typical use: a compact search bar or mobile-specific navigation that only
+ * appears below the `md` breakpoint. Above `md` the component is hidden via
+ * CSS, so consumers can include it unconditionally — desktop users won't see it.
+ *
+ * @example
+ * <header tedi-header>
+ *   <!-- main content -->
+ *   <tedi-header-bottom>
+ *     <tedi-header-search mobileVariant="inline">
+ *       <tedi-search inputId="search" placeholder="Search..." />
+ *     </tedi-header-search>
+ *   </tedi-header-bottom>
+ * </header>
+ */
+declare class HeaderBottomComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderBottomComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderBottomComponent, "tedi-header-bottom", never, {}, {}, never, ["*"], true, never>;
+}
+
+type HeaderContentAlignment = "flex-start" | "center" | "space-between";
 declare class HeaderContentComponent {
+    /**
+     * Controls the horizontal alignment of the projected content (`justify-content`).
+     * Useful when the center area mixes nav links with another component (e.g. a
+     * `<tedi-header-search>`) and you want to push them apart or align them to one edge.
+     * @default "center"
+     */
+    readonly alignment: _angular_core.InputSignal<HeaderContentAlignment>;
+    protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderContentComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderContentComponent, "tedi-header-content", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderContentComponent, "tedi-header-content", never, { "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 type HeaderLanguage = {
@@ -5990,82 +6159,507 @@ declare class HeaderLanguageComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderLanguageComponent, "tedi-header-language", never, { "languages": { "alias": "languages"; "required": true; "isSignal": true; }; }, { "languageChange": "languageChange"; }, never, never, true, never>;
 }
 
-declare class HeaderLoginComponent {
+type HeaderLoginSize = "default" | "small";
+/**
+ * Subset of `HeaderLoginComponent` inputs that can be overridden per breakpoint
+ * via the `[xs]` / `[sm]` / `[md]` / `[lg]` / `[xl]` / `[xxl]` inputs. Mirrors
+ * React's `HeaderLoginBreakpointProps`.
+ */
+type HeaderLoginInputs = {
+    size: HeaderLoginSize | undefined;
+    label: string;
+};
+declare class HeaderLoginComponent implements BreakpointInputs<HeaderLoginInputs> {
     breakpointService: BreakpointService;
     translationService: TediTranslationService;
-    isMobile: _angular_core.Signal<boolean>;
-    textDesktop: _angular_core.Signal<string>;
-    textMobile: _angular_core.Signal<string>;
-    text: _angular_core.Signal<string>;
+    private isMobile;
+    /**
+     * Visual size of the login button.
+     * - `'small'` renders a compact icon-and-caption button (the
+     *   `<tedi-header-mobile-button>` variant).
+     * - `'default'` renders a primary button or anchor with text only.
+     *
+     * When left unset, the size is chosen automatically based on the viewport:
+     * `'small'` below the `md` breakpoint, `'default'` from `md` up. Pass an
+     * explicit value to force a variant regardless of viewport.
+     */
+    size: _angular_core.InputSignal<HeaderLoginSize | undefined>;
+    /**
+     * Custom label text for the login button. When provided, used as-is — not
+     * translated. When omitted or empty, falls back to the `header.login.mobile`
+     * translation key for the compact variant and `header.login` for the full
+     * variant.
+     */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * If provided, the login button renders as an `<a>` navigating to this URL.
+     * Otherwise renders as a `<button>`.
+     */
+    href: _angular_core.InputSignal<string | undefined>;
+    xs: _angular_core.InputSignal<HeaderLoginInputs | undefined>;
+    sm: _angular_core.InputSignal<HeaderLoginInputs | undefined>;
+    md: _angular_core.InputSignal<HeaderLoginInputs | undefined>;
+    lg: _angular_core.InputSignal<HeaderLoginInputs | undefined>;
+    xl: _angular_core.InputSignal<HeaderLoginInputs | undefined>;
+    xxl: _angular_core.InputSignal<HeaderLoginInputs | undefined>;
+    protected readonly breakpointInputs: _angular_core.Signal<HeaderLoginInputs>;
+    isSmall: _angular_core.Signal<boolean>;
+    resolvedLabel: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderLoginComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderLoginComponent, "tedi-header-login", never, {}, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderLoginComponent, "tedi-header-login", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "xs": { "alias": "xs"; "required": false; "isSignal": true; }; "sm": { "alias": "sm"; "required": false; "isSignal": true; }; "md": { "alias": "md"; "required": false; "isSignal": true; }; "lg": { "alias": "lg"; "required": false; "isSignal": true; }; "xl": { "alias": "xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "xxl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class HeaderLogoutComponent {
-    breakpointService: BreakpointService;
-    isMobile: _angular_core.Signal<boolean>;
-    classes: _angular_core.Signal<string>;
+declare class HeaderLogoComponent {
+    /**
+     * Optional link URL. When set, the logo is wrapped in an anchor element.
+     */
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Controls visibility of the logo. Useful for conditionally hiding the logo
+     * based on application state, feature flags, or custom media queries that
+     * fall between standard breakpoints (e.g. 360px). For responsive hiding at
+     * standard breakpoints, prefer wrapping `<tedi-header-logo>` with `*hideAt`
+     * or `*showAt`.
+     * @default true
+     */
+    readonly showLogo: _angular_core.InputSignal<boolean>;
+    private readonly darkSlot;
+    private readonly themeService;
+    protected readonly useDark: _angular_core.Signal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderLogoComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderLogoComponent, "tedi-header-logo", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; "showLogo": { "alias": "showLogo"; "required": false; "isSignal": true; }; }, {}, ["darkSlot"], ["*", "[tedi-header-logo-dark]"], true, never>;
+}
+
+/**
+ * Marks a projected child of `<tedi-header-logo>` as the dark-theme variant.
+ * `HeaderLogoComponent` detects it via `contentChild` and swaps to the dark
+ * slot when the active theme is `dark`.
+ */
+declare class HeaderLogoDarkDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderLogoDarkDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HeaderLogoDarkDirective, "[tedi-header-logo-dark]", never, {}, {}, never, never, true, never>;
+}
+
+type HeaderLogoutSize = "default" | "small";
+/**
+ * Subset of `HeaderLogoutComponent` inputs that can be overridden per
+ * breakpoint via the `[xs]` / `[sm]` / `[md]` / `[lg]` / `[xl]` / `[xxl]`
+ * inputs. Mirrors React's `HeaderLogoutBreakpointProps`.
+ */
+type HeaderLogoutInputs = {
+    size: HeaderLogoutSize | undefined;
+    label: string;
+};
+declare class HeaderLogoutComponent implements BreakpointInputs<HeaderLogoutInputs> {
+    private readonly translationService;
+    private readonly breakpointService;
+    private isMobile;
+    /**
+     * Visual size of the logout button.
+     * - `'small'` renders a compact icon-and-caption button (the
+     *   `<tedi-header-mobile-button>` variant).
+     * - `'default'` renders a full-width link with inline icon and text.
+     *
+     * When left unset (the default), the size is chosen automatically based on
+     * the viewport: `'small'` below the `md` breakpoint, `'default'` from `md`
+     * up. Pass an explicit value to force a variant regardless of viewport —
+     * useful inside tight containers (sidebar panel, dropdown) where the
+     * desktop layout has no room.
+     */
+    size: _angular_core.InputSignal<HeaderLogoutSize | undefined>;
+    /**
+     * Custom label text for the logout button. When provided, used as-is — not
+     * translated. When omitted or empty, falls back to the `header.logout.mobile`
+     * translation key for the compact variant and `header.logout` for the full
+     * variant.
+     */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * If provided, the logout button renders as an `<a>` navigating to this URL.
+     * Otherwise renders as a `<button>`.
+     */
+    href: _angular_core.InputSignal<string | undefined>;
+    xs: _angular_core.InputSignal<HeaderLogoutInputs | undefined>;
+    sm: _angular_core.InputSignal<HeaderLogoutInputs | undefined>;
+    md: _angular_core.InputSignal<HeaderLogoutInputs | undefined>;
+    lg: _angular_core.InputSignal<HeaderLogoutInputs | undefined>;
+    xl: _angular_core.InputSignal<HeaderLogoutInputs | undefined>;
+    xxl: _angular_core.InputSignal<HeaderLogoutInputs | undefined>;
+    protected readonly breakpointInputs: _angular_core.Signal<HeaderLogoutInputs>;
+    isSmall: _angular_core.Signal<boolean>;
+    resolvedLabel: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderLogoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderLogoutComponent, "button[tedi-header-logout]", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderLogoutComponent, "tedi-header-logout", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "xs": { "alias": "xs"; "required": false; "isSignal": true; }; "sm": { "alias": "sm"; "required": false; "isSignal": true; }; "md": { "alias": "md"; "required": false; "isSignal": true; }; "lg": { "alias": "lg"; "required": false; "isSignal": true; }; "xl": { "alias": "xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "xxl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class HeaderProfileComponent implements AfterContentInit {
-    /** Name of representative */
-    name: _angular_core.InputSignal<string>;
-    /** Breakpoint at which we show dropdown instead of modal */
-    showDropdown: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined>;
+/**
+ * Compact icon + label button used inside the mobile header row
+ * (`<tedi-header-bottom>` or a mobile-specific section of
+ * `<tedi-header-actions>`).
+ *
+ * Renders as an `<a>` when `href` is provided and `disabled` is false,
+ * otherwise as a `<button>` — mirroring the React `HeaderMobileButton`.
+ *
+ * @example
+ * <tedi-header-mobile-button icon="menu" label="Menu" />
+ * <tedi-header-mobile-button icon="search" label="Search" href="/search" />
+ * <tedi-header-mobile-button icon="notifications" label="Alerts" [selected]="true" />
+ */
+declare class HeaderMobileButtonComponent {
+    /** Material icon name displayed inside the button. */
+    icon: _angular_core.InputSignal<string>;
+    /** Label text displayed below the icon. */
+    label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * If provided (and not disabled), the button renders as an `<a>`
+     * navigating to this URL. Otherwise renders as a `<button>`.
+     */
+    href: _angular_core.InputSignal<string | undefined>;
+    /** Whether the button is in a selected state. */
+    selected: _angular_core.InputSignal<boolean>;
+    /** Whether the button is disabled. */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Accessible name override forwarded to the inner `<button>`/`<a>`.
+     * Useful when the visible label needs to be augmented for screen readers
+     * (e.g. when the button only renders an icon).
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Forwarded to the inner `<button>` as `aria-haspopup`. Set to `'dialog'`
+     * when the button opens a modal dialog, `'menu'` for menus, etc.
+     *
+     * Only applied when the component renders as a `<button>` (i.e. when
+     * `href` is not set). A real navigation link with popup-trigger semantics
+     * is confusing to assistive tech — if a popup is involved, omit `href`
+     * so the component renders as a button.
+     */
+    ariaHasPopup: _angular_core.InputSignal<"menu" | "listbox" | "dialog" | "true" | "grid" | "false" | "tree" | undefined>;
+    /**
+     * Forwarded to the inner `<button>` as `aria-expanded`. Pair with
+     * `ariaHasPopup` when this button toggles a dialog/menu open.
+     *
+     * Only applied when the component renders as a `<button>` (i.e. when
+     * `href` is not set).
+     */
+    ariaExpanded: _angular_core.InputSignal<boolean | undefined>;
+    renderAsLink: _angular_core.Signal<boolean>;
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderMobileButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderMobileButtonComponent, "tedi-header-mobile-button", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaHasPopup": { "alias": "ariaHasPopup"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type HeaderProfileSize = "default" | "small";
+/**
+ * Subset of `HeaderProfileComponent` inputs that can be overridden per
+ * breakpoint via the `[xs]` / `[sm]` / `[md]` / `[lg]` / `[xl]` / `[xxl]` inputs.
+ */
+type HeaderProfileInputs = {
+    label: string;
+    showPopover: Breakpoint;
+};
+declare class HeaderProfileComponent implements BreakpointInputs<HeaderProfileInputs>, AfterContentInit {
+    /**
+     * Custom label text for the profile button. Falls back to the `header.profile`
+     * translation key on desktop, or `header.profile.mobile` on mobile.
+     */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * Whether to display a text label next to the profile icon on non-mobile
+     * viewports. When `false` the desktop trigger renders as an icon-only button
+     * and the label (custom or translated) is used as the `aria-label` only.
+     * When `true` the label is visible and a chevron is shown next to it.
+     *
+     * Has no effect on the mobile/small variant — the mobile button always
+     * shows its label.
+     * @default false
+     */
+    showLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Defines the breakpoint from which the profile menu is displayed as a popover.
+     * Below this breakpoint, it is rendered as a modal.
+     *
+     * @default 'lg'
+     */
+    showPopover: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl" | "xxl">;
+    /**
+     * Removes default item styles from the mobile modal content. When `true`,
+     * projected children render without the padding, border, or background that
+     * `<tedi-header-profile>` normally applies to each direct child of the
+     * modal. Use when the content requires custom item styling.
+     *
+     * Only affects the mobile/modal branch. The desktop popover uses
+     * `<tedi-popover-content>`'s own styling and is unaffected.
+     *
+     * @default false
+     */
+    noStyle: _angular_core.InputSignal<boolean>;
+    /**
+     * Visual size of the profile button.
+     * - `'small'` renders a compact icon-and-caption button (the
+     *   `<tedi-header-mobile-button>` variant).
+     * - `'default'` renders a button with the user's name + icon.
+     *
+     * When left unset, the size is chosen automatically based on the viewport:
+     * `'small'` below the `md` breakpoint, `'default'` from `md` up. Pass an
+     * explicit value to force a variant regardless of viewport.
+     */
+    size: _angular_core.InputSignal<HeaderProfileSize | undefined>;
+    xs: _angular_core.InputSignal<HeaderProfileInputs | undefined>;
+    sm: _angular_core.InputSignal<HeaderProfileInputs | undefined>;
+    md: _angular_core.InputSignal<HeaderProfileInputs | undefined>;
+    lg: _angular_core.InputSignal<HeaderProfileInputs | undefined>;
+    xl: _angular_core.InputSignal<HeaderProfileInputs | undefined>;
+    xxl: _angular_core.InputSignal<HeaderProfileInputs | undefined>;
     readonly breakpointService: BreakpointService;
     readonly translationService: TediTranslationService;
     private readonly document;
     private readonly host;
     private readonly renderer;
-    private readonly eventListeners;
+    private readonly destroyRef;
+    readonly isMobile: _angular_core.Signal<boolean>;
+    readonly isSmall: _angular_core.Signal<boolean>;
+    protected readonly breakpointInputs: _angular_core.Signal<HeaderProfileInputs>;
+    readonly resolvedLabel: _angular_core.Signal<string>;
     constructor();
     modalOpen: _angular_core.WritableSignal<boolean>;
+    /**
+     * Tracks which `HeaderRoleComponent` instance currently has its
+     * accordion open. When a role opens, it writes its own reference here;
+     * other roles watch this signal and close themselves when it changes.
+     * @internal
+     */
+    readonly activeRole: _angular_core.WritableSignal<unknown>;
     readonly buttonVariant: _angular_core.Signal<ButtonVariant>;
-    readonly buttonClass: _angular_core.Signal<"tedi-header-profile--mobile" | null>;
     ngAfterContentInit(): void;
     handleModalOpen(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderProfileComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderProfileComponent, "tedi-header-profile", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "showDropdown": { "alias": "showDropdown"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderProfileComponent, "tedi-header-profile", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "showPopover": { "alias": "showPopover"; "required": false; "isSignal": true; }; "noStyle": { "alias": "noStyle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "xs": { "alias": "xs"; "required": false; "isSignal": true; }; "sm": { "alias": "sm"; "required": false; "isSignal": true; }; "md": { "alias": "md"; "required": false; "isSignal": true; }; "lg": { "alias": "lg"; "required": false; "isSignal": true; }; "xl": { "alias": "xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "xxl"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Marker directive applied to a projected child of `<tedi-header-role>` to mark it
+ * as the title content (e.g. a `<tedi-tag>`). The directive itself adds no DOM or
+ * behavior — it only exists so `HeaderRoleComponent` can detect, via `contentChild`,
+ * whether a consumer has projected title content. When projected, the title slot
+ * replaces the bold `role` string fallback.
+ *
+ * @example
+ * <tedi-header-role [representatives]="..." [currentRepresentative]="...">
+ *   <tedi-tag tedi-header-role-title>Esindatav</tedi-tag>
+ * </tedi-header-role>
+ */
+declare class HeaderRoleTitleDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderRoleTitleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HeaderRoleTitleDirective, "[tedi-header-role-title]", never, {}, {}, never, never, true, never>;
 }
 
+type RepresentativeIcon = {
+    /** Material Icon name. */
+    name: string;
+    /** Size in px. Falls back to `<tedi-icon>`'s default (24) when omitted. */
+    size?: IconSize;
+};
 type Representative = {
+    /**
+     * Stable identifier. Required for selection comparison and for re-syncing
+     * the current representative when the `representatives` input changes.
+     */
+    id: string;
     name: string;
-    icon?: string;
+    /**
+     * Icon shown next to the representative. Accepts either a Material Icon name
+     * as a string (`'person'`) for the common case, or a full
+     * `RepresentativeIcon` object (`{ name: 'person', size: 18 }`) when an
+     * explicit size is needed. The two forms are equivalent when only `name` is
+     * relevant.
+     */
+    icon?: string | RepresentativeIcon;
     description?: string;
 };
+/**
+ * Structural marker for custom content projected into the role selection
+ * popover (desktop) or accordion (tablet/mobile).
+ *
+ * When present, replaces the default representative list entirely.
+ *
+ * Usage:
+ * ```html
+ * <tedi-header-role ...>
+ *   <ng-template tedi-header-role-content>
+ *     <div>Custom content here</div>
+ *   </ng-template>
+ * </tedi-header-role>
+ * ```
+ */
+declare class HeaderRoleContentDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderRoleContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HeaderRoleContentDirective, "[tedi-header-role-content]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Structural marker for custom "no results" content shown when the search
+ * filter produces an empty representative list.
+ *
+ * When absent, the component falls back to a default translated string.
+ *
+ * Usage:
+ * ```html
+ * <tedi-header-role ...>
+ *   <ng-template tedi-header-role-no-results>
+ *     <tedi-empty-state description="No matches found" />
+ *   </ng-template>
+ * </tedi-header-role>
+ * ```
+ */
+declare class HeaderRoleNoResultsDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderRoleNoResultsDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HeaderRoleNoResultsDirective, "[tedi-header-role-no-results]", never, {}, {}, never, never, true, never>;
+}
 declare class HeaderRoleComponent {
     /**
-     * Role text
+     * Label text. Rendered as bold text in the title position when no title content is
+     * projected via `[tedi-header-role-title]`. Projected content takes precedence and
+     * replaces this string.
      */
-    role: _angular_core.InputSignal<string>;
+    label: _angular_core.InputSignal<string>;
     /**
      * Description text
      */
     description: _angular_core.InputSignal<string>;
-    /** Should show input in representative list?
+    /**
+     * Whether the consumer projected title content (e.g. `<tedi-tag tedi-header-role-title>`)
+     * via the `[tedi-header-role-title]` slot. Used by the template to know whether the
+     * title position has content even when `label` is empty.
+     */
+    protected readonly titleContent: _angular_core.Signal<HeaderRoleTitleDirective | undefined>;
+    protected readonly hasTitle: _angular_core.Signal<boolean>;
+    /**
+     * Projected custom content that replaces the default representative list.
+     */
+    protected readonly customContent: _angular_core.Signal<HeaderRoleContentDirective | undefined>;
+    protected readonly hasCustomContent: _angular_core.Signal<boolean>;
+    protected readonly customContentTemplate: _angular_core.Signal<TemplateRef<any> | null>;
+    protected readonly noResultsContent: _angular_core.Signal<HeaderRoleNoResultsDirective | undefined>;
+    protected readonly hasNoResultsContent: _angular_core.Signal<boolean>;
+    protected readonly noResultsTemplate: _angular_core.Signal<TemplateRef<any> | null>;
+    /**
+     * Whether to display the search input above the representative list.
      * @default false
      */
-    showInput: _angular_core.InputSignal<boolean>;
+    showSearch: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the search input shows a clear button.
+     * @default false
+     */
+    searchClearable: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to clear the search input when a representative is selected.
+     * @default true
+     */
+    clearSearchOnSelect: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the role represents an organization.
+     * Affects the search input label.
+     */
+    isOrganization: _angular_core.InputSignal<boolean>;
+    /**
+     * Label for the search input when selecting a representative.
+     * Falls back to i18n labels when not provided.
+     */
+    searchLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Label for the search input when selecting an organization representative.
+     * Overrides both the default and `searchLabel` when `isOrganization` is true.
+     */
+    organizationSearchLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether to show the role selection toggle and dropdown.
+     * When not set, defaults to showing the selection when there are multiple representatives.
+     */
+    showRoleSwitch: _angular_core.InputSignal<boolean | undefined>;
     /** List of representatives */
     representatives: _angular_core.InputSignal<Representative[]>;
     /** Current representative */
     currentRepresentative: _angular_core.ModelSignal<Representative>;
+    /**
+     * Emits when the role selection (mobile collapse on tablet/mobile, popover on
+     * desktop) opens or closes.
+     */
+    readonly roleSelectionToggle: _angular_core.OutputEmitterRef<boolean>;
     mobileOpen: _angular_core.WritableSignal<boolean>;
     inputValue: _angular_core.WritableSignal<string>;
+    protected readonly inputId: string;
+    readonly breakpointService: BreakpointService;
+    readonly isTabletView: _angular_core.Signal<boolean>;
+    protected readonly hasRoleSelection: _angular_core.Signal<boolean>;
+    private readonly popover;
+    private readonly searchInput;
+    private previousPopoverOpen;
+    private readonly parentProfile;
+    constructor();
     translationService: TediTranslationService;
     switchRoleText: _angular_core.Signal<string>;
     closeText: _angular_core.Signal<string>;
+    private defaultSearchText;
+    private defaultOrgSearchText;
     searchText: _angular_core.Signal<string>;
     noResultsText: _angular_core.Signal<string>;
     collapseText: _angular_core.Signal<string>;
     filteredRepresentatives: _angular_core.Signal<Representative[]>;
+    closeIfOtherRoleActive(active: unknown, isOpen: boolean): void;
     handleMobileOpen(): void;
     handleSelectRepresentative(r: Representative): void;
     handleInputChange(event: Event): void;
+    trackById: (_: number, r: Representative) => string;
+    protected resolveIcon(icon: string | RepresentativeIcon | undefined): {
+        name: string;
+        size: IconSize;
+    } | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderRoleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderRoleComponent, "tedi-header-role", never, { "role": { "alias": "role"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "showInput": { "alias": "showInput"; "required": false; "isSignal": true; }; "representatives": { "alias": "representatives"; "required": true; "isSignal": true; }; "currentRepresentative": { "alias": "currentRepresentative"; "required": true; "isSignal": true; }; }, { "currentRepresentative": "currentRepresentativeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderRoleComponent, "tedi-header-role", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "searchClearable": { "alias": "searchClearable"; "required": false; "isSignal": true; }; "clearSearchOnSelect": { "alias": "clearSearchOnSelect"; "required": false; "isSignal": true; }; "isOrganization": { "alias": "isOrganization"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "organizationSearchLabel": { "alias": "organizationSearchLabel"; "required": false; "isSignal": true; }; "showRoleSwitch": { "alias": "showRoleSwitch"; "required": false; "isSignal": true; }; "representatives": { "alias": "representatives"; "required": true; "isSignal": true; }; "currentRepresentative": { "alias": "currentRepresentative"; "required": true; "isSignal": true; }; }, { "currentRepresentative": "currentRepresentativeChange"; "roleSelectionToggle": "roleSelectionToggle"; }, ["titleContent", "customContent", "noResultsContent"], ["[tedi-header-role-title]"], true, never>;
+}
+
+type HeaderSearchMobileVariant = "modal" | "inline";
+interface HeaderSearchMobileLabels {
+    /** Label shown on the mobile toggle button. Falls back to the `header.search` translation. */
+    button?: string;
+    /** Title shown in the mobile modal heading. Falls back to the `header.search` translation. */
+    modalTitle?: string;
+}
+declare class HeaderSearchComponent {
+    /**
+     * Behavior on mobile viewports (below the `md` breakpoint).
+     * - `'modal'` shows a toggle button that opens a fullscreen native dialog containing the projected content.
+     * - `'inline'` renders the projected content inline at all breakpoints (no toggle, no dialog).
+     * @default "modal"
+     */
+    readonly mobileVariant: _angular_core.InputSignal<HeaderSearchMobileVariant>;
+    /**
+     * Mobile-specific labels for the toggle button and the modal title.
+     * When omitted, both fall back to the `header.search` translation key.
+     */
+    readonly mobileLabels: _angular_core.InputSignal<HeaderSearchMobileLabels>;
+    /**
+     * Disables the mobile toggle button. Has no effect on desktop or in the `inline` variant.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    protected readonly translationService: TediTranslationService;
+    protected readonly isMobile: _angular_core.Signal<boolean>;
+    protected readonly modalOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly dialogEl: _angular_core.Signal<ElementRef<HTMLDialogElement> | undefined>;
+    protected readonly buttonLabel: _angular_core.Signal<string>;
+    protected readonly modalTitle: _angular_core.Signal<string>;
+    protected readonly closeLabel: _angular_core.Signal<string>;
+    constructor();
+    protected open(): void;
+    protected close(): void;
+    protected onDialogClose(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderSearchComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderSearchComponent, "tedi-header-search", never, { "mobileVariant": { "alias": "mobileVariant"; "required": false; "isSignal": true; }; "mobileLabels": { "alias": "mobileLabels"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class SideNavDropdownComponent implements AfterViewInit {
@@ -6936,6 +7530,6 @@ declare const TEDI_THEME_DEFAULT_TOKEN: InjectionToken<string>;
 
 declare const TEDI_TRANSLATION_DEFAULT_TOKEN: InjectionToken<Language>;
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, calculateArrowOffset, createTablePersistence, generateUUID, getCardBorderPlacementColor, getPaddingCssVariables, getPlacementFromPositionChange, groupRowSpan, injectTediTableContext, provideTedi, resolveCardBorderRadius, toConnectedPositions, usePagination };
-export type { AlertRole, AlertTitleType, AlertType, AlertVariant, AlignItems, AlignSelf, ArrowOffset, ArrowType, AttachmentDirection, Breakpoint, BreakpointFlag, BreakpointInput, BreakpointInputs, BreakpointInputsWithoutSignals, BreakpointObject, BulletColor, ButtonGroupDropdownLabelMode, ButtonSize, ButtonVariant, CardBackground, CardBorderPlacement, CardBorderRadius, CardBorderType, CardContentInputs, CardIconSize, CardIconType, CardInputs, CardPadding, CardPaddingNumber, CardResolvedCorners, CarouselIndicatorsVariant, CheckboxCardVariant, CheckboxGroupDirection, CheckboxSize, ClosingButtonIconSize, ClosingButtonSize, ColInputs, ColWidth, CollapseButtonArrowType, CollapseButtonSize, CollapseSize, Cols, ColumnReorderPhase, CompareWithFn, ComponentInputs, DatePickerDay, DatePickerInputSize, DatePickerInputState, DatePickerMatcher, DatePickerSelectorMode, DatePickerView, DropdownApi, DropdownContentApi, DropdownItemValueLayout, DropdownItemValueType, DropdownPosition, DropdownRole, DropdownTriggerAriaHasPopup, EllipsisPosition, EmptyStateSize, EmptyStateType, FeedbackTextPosition, FeedbackTextType, FilterOption, FilterSize, FilterVariant, FooterSidePlacement, FooterSidePosition, FormFieldControl, FormFieldIcon, Gap, GroupByFn, HeaderLanguage, HorizontalStepperBackground, IconBackgroundColor, IconColor, IconSize, IconType, IconVariant, InputSize, InputState, JustifyItems, JustifySelf, LabelColor, LabelSize, Language, LinkInputs, LinkSize, LinkVariant, ModalConfig, ModalFullscreen, ModalPosition, ModalScrollBehavior, ModalSize, ModalWidth, ModalWidthPreset, NumberFieldSize, OverlayPosition, OverlaySide, PaginationBackground, PaginationDividerPosition, PaginationItem, PaginationItemType, PaginationLabels, PaginationVisibility, PopoverPosition, PopoverWidth, ProgressBarInputs, ProgressBarLabelPosition, ProgressBarSize, ProgressBarValuePosition, RadioCardVariant, RadioGroupDirection, RadioSize, Representative, RowInputs, ScrollFadePosition, ScrollFadeScrollbar, ScrollFadeSize, SelectInputSize, SelectOption, SelectOptionContext, SelectOptionGroup, SelectValueContext, SeparatorAxis, SeparatorColor, SeparatorDotSize, SeparatorSpacing, SeparatorSpacingValue, SeparatorThickness, SeparatorVariant, SideNavItemSize, SpinnerColor, SpinnerSize, StatusBadgeColor, StatusBadgeSize, StatusBadgeStatus, StatusBadgeVariant, StatusIndicatorPosition, StatusIndicatorSize, StatusIndicatorType, TEDITheme, TableColumnMeta, TableExpandTrigger, TableFilterOptions, TablePaginationOptions, TablePersistOptions, TablePersistenceController, TableSelectionMode, TableSize, TableState, TableStatePatch, TagEllipsis, TagType, TediColumnDef, TediConfig, TediTableContextValue, TediTableFilterContext, TextColor, TextGroupInputs, TextGroupType, TextModifiers, Theme, TimeFieldFullscreen, TimeFieldModal, TimeFieldPickerTrigger, TimeFieldPickerVariant, TimeFieldUseNativePicker, TimePickerVariant, TimelineCardPadding, TimelineVariant, ToastConfig, ToastPosition, ToastRole, ToastType, ToggleSize, ToggleType, ToggleVariant, TooltipOpenWith, TooltipPosition, TooltipWidth, UsePaginationArgs, VerticalSpacingSize };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, calculateArrowOffset, computeGroupSpans, createTablePersistence, generateUUID, getCardBorderPlacementColor, getPaddingCssVariables, getPlacementFromPositionChange, groupRowSpan, injectTediTableContext, provideTedi, resolveCardBorderRadius, toConnectedPositions, usePagination };
+export type { AlertRole, AlertTitleType, AlertType, AlertVariant, AlignItems, AlignSelf, ArrowOffset, ArrowType, AttachmentDirection, Breakpoint, BreakpointFlag, BreakpointInput, BreakpointInputs, BreakpointInputsWithoutSignals, BreakpointObject, BulletColor, ButtonGroupDropdownLabelMode, ButtonSize, ButtonVariant, CardBackground, CardBorderPlacement, CardBorderRadius, CardBorderType, CardContentInputs, CardIconSize, CardIconType, CardInputs, CardPadding, CardPaddingNumber, CardResolvedCorners, CarouselIndicatorsVariant, CheckboxCardVariant, CheckboxGroupDirection, CheckboxSize, ClosingButtonIconSize, ClosingButtonSize, ColInputs, ColWidth, CollapseButtonArrowType, CollapseButtonSize, CollapseSize, Cols, ColumnReorderPhase, CompareWithFn, ComponentInputs, DatePickerDay, DatePickerInputSize, DatePickerInputState, DatePickerMatcher, DatePickerSelectorMode, DatePickerView, DropdownApi, DropdownContentApi, DropdownItemValueLayout, DropdownItemValueType, DropdownPosition, DropdownRole, DropdownTriggerAriaHasPopup, EllipsisPosition, EmptyStateSize, EmptyStateType, FeedbackTextPosition, FeedbackTextType, FilterOption, FilterSize, FilterVariant, FooterSidePlacement, FooterSidePosition, FormFieldControl, FormFieldIcon, Gap, GroupByFn, HeaderContentAlignment, HeaderLanguage, HeaderLoginInputs, HeaderLoginSize, HeaderLogoutInputs, HeaderLogoutSize, HeaderProfileInputs, HeaderProfileSize, HeaderSearchMobileLabels, HeaderSearchMobileVariant, HorizontalStepperBackground, IconBackgroundColor, IconColor, IconSize, IconType, IconVariant, InputSize, InputState, JustifyItems, JustifySelf, LabelColor, LabelSize, Language, LinkInputs, LinkSize, LinkVariant, ModalConfig, ModalFullscreen, ModalPosition, ModalScrollBehavior, ModalSize, ModalWidth, ModalWidthPreset, NumberFieldSize, OverlayPosition, OverlaySide, PaginationBackground, PaginationDividerPosition, PaginationItem, PaginationItemType, PaginationLabels, PaginationVisibility, PopoverPosition, PopoverWidth, ProgressBarInputs, ProgressBarLabelPosition, ProgressBarSize, ProgressBarValuePosition, RadioCardVariant, RadioGroupDirection, RadioSize, Representative, RepresentativeIcon, RowInputs, ScrollFadePosition, ScrollFadeScrollbar, ScrollFadeSize, SelectInputSize, SelectOption, SelectOptionContext, SelectOptionGroup, SelectValueContext, SeparatorAxis, SeparatorColor, SeparatorDotSize, SeparatorSpacing, SeparatorSpacingValue, SeparatorThickness, SeparatorVariant, SideNavItemSize, SpinnerColor, SpinnerSize, StatusBadgeColor, StatusBadgeSize, StatusBadgeStatus, StatusBadgeVariant, StatusIndicatorPosition, StatusIndicatorSize, StatusIndicatorType, TEDITheme, TableColumnMeta, TableControlColumn, TableExpandTrigger, TableFilterOptions, TablePaginationOptions, TablePersistOptions, TablePersistenceController, TableSelectionMode, TableSize, TableState, TableStatePatch, TagEllipsis, TagType, TediColumnDef, TediConfig, TediTableContextValue, TediTableFilterContext, TextColor, TextGroupInputs, TextGroupType, TextModifiers, Theme, TimeFieldFullscreen, TimeFieldModal, TimeFieldPickerTrigger, TimeFieldPickerVariant, TimeFieldUseNativePicker, TimePickerVariant, TimelineCardPadding, TimelineVariant, ToastConfig, ToastPosition, ToastRole, ToastType, ToggleSize, ToggleType, ToggleVariant, TooltipOpenWith, TooltipPosition, TooltipWidth, UsePaginationArgs, VerticalSpacingSize };
 //# sourceMappingURL=index.d.ts.map