@tedi-design-system/angular 6.5.0-rc.13 → 6.5.0-rc.15

package/tedi/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { AfterContentChecked, InputSignal, Signal, PipeTransform, AfterViewInit, ElementRef, TemplateRef, OnDestroy, Injector, InjectionToken, WritableSignal, OnInit, AfterContentInit, AfterViewChecked, QueryList, EnvironmentProviders } from '@angular/core';
+import { AfterContentChecked, AfterViewInit, InputSignal, Signal, PipeTransform, ElementRef, TemplateRef, OnDestroy, Injector, InjectionToken, WritableSignal, OnInit, AfterContentInit, AfterViewChecked, QueryList, EnvironmentProviders } from '@angular/core';
 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';
@@ -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
@@ -94,11 +94,15 @@ declare class BaseButtonDirective implements AfterContentChecked {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseButtonDirective, never, never, {}, {}, never, never, true, never>;
 }
 
-type ButtonVariant = "primary" | "secondary" | "neutral" | "success" | "danger" | "danger-neutral" | "primary-inverted" | "secondary-inverted" | "neutral-inverted";
+type ButtonVariant = "primary" | "secondary" | "neutral" | "success" | "danger" | "danger-neutral" | "primary-inverted" | "secondary-inverted" | "neutral-inverted" | "primary-button-group" | "secondary-button-group";
 type ButtonSize = "default" | "small";
 declare class ButtonComponent {
     /**
      * Specifies the color theme of the button. The color should meet accessibility standards for color contrast.
+     *
+     * `primary-button-group` and `secondary-button-group` are intended for items inside
+     * `tedi-button-group`: they use the small (`button-radius-sm`) corner radius and show
+     * their selected state via `aria-pressed`.
      * @default primary
      */
     variant: _angular_core.InputSignal<ButtonVariant>;
@@ -112,6 +116,127 @@ declare class ButtonComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "[tedi-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof BaseButtonDirective; inputs: {}; outputs: {}; }]>;
 }
 
+/**
+ * Turns a `<button>` inside `tedi-button-group` into a styled, selectable item.
+ * Extends `tedi-button` (composes `BaseButtonDirective` and applies the
+ * `tedi-button` variant classes), inherits `variant`/`size` from the parent
+ * group (overridable per item), and derives its selected state from the group's
+ * `value`. The `iconLeft`/`iconRight`/`icon` inputs are auto-rendered as
+ * `tedi-icon` elements and reused by the mobile dropdown.
+ */
+declare class ButtonGroupButtonDirective implements AfterViewInit {
+    /** Identity contributing to the group's selected value. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Visible text; used by the mobile dropdown and as the accessible name in icon-only mode. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Disables interaction via the native `disabled` attribute. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Icon rendered before the label (and in the dropdown item). */
+    readonly iconLeft: _angular_core.InputSignal<string | undefined>;
+    /** Icon rendered after the label (and in the dropdown item). */
+    readonly iconRight: _angular_core.InputSignal<string | undefined>;
+    /** Icon-only mode: icon for the button, dropdown trigger and dropdown item. */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /** Overrides the group's `variant` for this item. */
+    readonly variant: _angular_core.InputSignal<ButtonVariant | undefined>;
+    /** Overrides the group's `size` for this item. */
+    readonly size: _angular_core.InputSignal<ButtonSize | undefined>;
+    /** Fires on user activation (click). Disabled items don't emit. */
+    readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    private readonly host;
+    private readonly viewContainer;
+    private readonly renderer;
+    private readonly parent;
+    private readonly iconRefs;
+    readonly effectiveVariant: _angular_core.Signal<ButtonVariant>;
+    readonly effectiveSize: _angular_core.Signal<ButtonSize>;
+    readonly selected: _angular_core.Signal<boolean>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    constructor();
+    ngAfterViewInit(): void;
+    /** Wraps the projected text in a padded span so the gap to an adjacent icon
+     * comes from the label (the icon itself stays flush), matching the design. */
+    private wrapLabel;
+    private syncIcon;
+    protected onClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonGroupButtonDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonGroupButtonDirective, "button[tedi-button-group-button]", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconLeft": { "alias": "iconLeft"; "required": false; "isSignal": true; }; "iconRight": { "alias": "iconRight"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, [{ directive: typeof BaseButtonDirective; inputs: {}; outputs: {}; }]>;
+}
+
+type ButtonGroupDropdownLabelMode = "selected" | "static";
+declare class ButtonGroupComponent {
+    /**
+     * Variant applied to every item button (each item may override via its own
+     * `variant`). Accepts the full `ButtonVariant` union. Only the
+     * `*-button-group` variants get the connected/segmented strip geometry; other
+     * variants keep their own radius and show their active colors when selected.
+     * @default primary-button-group
+     */
+    readonly variant: _angular_core.InputSignal<ButtonVariant>;
+    /**
+     * Size applied to every item button.
+     * @default default
+     */
+    readonly size: _angular_core.InputSignal<ButtonSize>;
+    /**
+     * When true, multiple items can be toggled on and `value` is a string array.
+     * @default false
+     */
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Selected value(s). A single `string` (or `undefined`) in single mode, a
+     * `string[]` in `multiple` mode. Two-way bindable via `[(value)]`.
+     */
+    readonly value: _angular_core.ModelSignal<string | string[] | undefined>;
+    /**
+     * When true, items share the available horizontal space equally.
+     * @default false
+     */
+    readonly stretch: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name for the group. Required if no visible heading labels it. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * When true, the strip collapses into a dropdown below `mobileBreakpoint`.
+     * @default false
+     */
+    readonly enableMobileDropdown: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Viewport breakpoint at which the strip switches to a dropdown.
+     * @default md
+     */
+    readonly mobileBreakpoint: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl" | "xxl">;
+    /** Label for the dropdown trigger. Falls back to the `buttonGroup.menu` translation. */
+    readonly dropdownLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Source for the dropdown trigger label.
+     * - `static` (default) — always show `dropdownLabel`.
+     * - `selected` — show the selected item's label (single mode only).
+     * @default static
+     */
+    readonly dropdownLabelMode: _angular_core.InputSignal<ButtonGroupDropdownLabelMode>;
+    /** Emits the value of the item the user toggled. */
+    readonly selectionChange: _angular_core.OutputEmitterRef<string>;
+    protected readonly items: _angular_core.Signal<readonly any[]>;
+    private readonly breakpointService;
+    private readonly translations;
+    private readonly isBelowMobile;
+    protected readonly isDropdownMode: _angular_core.Signal<boolean>;
+    /** Trigger variant derived from the group `variant` (button-group variants map
+     * to their plain counterpart; any other variant is used as-is). */
+    readonly triggerVariant: _angular_core.Signal<ButtonVariant>;
+    /** Whether the group uses a *-button-group variant (drives the trigger radius). */
+    protected readonly isButtonGroupVariant: _angular_core.Signal<boolean>;
+    protected readonly selectedItem: _angular_core.Signal<any>;
+    protected readonly triggerLabel: _angular_core.Signal<any>;
+    protected readonly triggerIcon: _angular_core.Signal<any>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    isSelected(value: string): boolean;
+    toggle(value: string): void;
+    protected onDropdownItemSelect(item: ButtonGroupButtonDirective): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonGroupComponent, "tedi-button-group", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "stretch": { "alias": "stretch"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "enableMobileDropdown": { "alias": "enableMobileDropdown"; "required": false; "isSignal": true; }; "mobileBreakpoint": { "alias": "mobileBreakpoint"; "required": false; "isSignal": true; }; "dropdownLabel": { "alias": "dropdownLabel"; "required": false; "isSignal": true; }; "dropdownLabelMode": { "alias": "dropdownLabelMode"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; }, ["items"], ["*"], true, never>;
+}
+
 /**
  * Interactive wrapper around a `tedi-card`. Apply to an anchor (with `href`
  * or `routerLink`) for navigation or to a button for actions — the host
@@ -284,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[];
@@ -298,7 +430,7 @@ declare const translationsMap: {
         en: string;
         ru: string;
     };
-    "header.login-mobile": {
+    "header.login.mobile": {
         description: string;
         components: string[];
         et: string;
@@ -312,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[];
@@ -326,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[];
@@ -900,6 +1053,13 @@ declare const translationsMap: {
         en: (value: string, isOpen: boolean) => string;
         ru: (value: string, isOpen: boolean) => string;
     };
+    "buttonGroup.menu": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
     carousel: {
         description: string;
         components: string[];
@@ -3686,6 +3846,11 @@ declare class DropdownComponent implements OnDestroy {
      * @default true
      */
     readonly preventOverflow: _angular_core.InputSignal<boolean>;
+    /**
+     * Gap in px between the trigger and the dropdown panel.
+     * @default 4
+     */
+    readonly offset: _angular_core.InputSignal<number>;
     /**
      * Does the dropdown hide when the page scrolls?
      * @default false
@@ -3698,7 +3863,16 @@ declare class DropdownComponent implements OnDestroy {
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly triggerWidth: _angular_core.WritableSignal<number | null>;
     readonly overlayOrigin: _angular_core.Signal<_angular_cdk_overlay.CdkOverlayOrigin>;
-    readonly overlayPositions: _angular_core.Signal<_angular_cdk_overlay.ConnectedPosition[]>;
+    readonly overlayPositions: _angular_core.Signal<{
+        offsetX: number | undefined;
+        offsetY: number | undefined;
+        originX: "start" | "center" | "end";
+        originY: "top" | "center" | "bottom";
+        overlayX: "start" | "center" | "end";
+        overlayY: "top" | "center" | "bottom";
+        weight?: number;
+        panelClass?: string | string[];
+    }[]>;
     readonly triggerWidthVar: _angular_core.Signal<string | null>;
     private readonly platformId;
     private readonly document;
@@ -3725,7 +3899,7 @@ declare class DropdownComponent implements OnDestroy {
     private getNextEnabledIndex;
     private getPrevEnabledIndex;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "tedi-dropdown", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "preventOverflow": { "alias": "preventOverflow"; "required": false; "isSignal": true; }; "hideOnScroll": { "alias": "hideOnScroll"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["dropdownTrigger", "dropdownContent"], ["[tedi-dropdown-trigger]", "tedi-dropdown-content"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "tedi-dropdown", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "preventOverflow": { "alias": "preventOverflow"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "hideOnScroll": { "alias": "hideOnScroll"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["dropdownTrigger", "dropdownContent"], ["[tedi-dropdown-trigger]", "tedi-dropdown-content"], true, never>;
 }
 
 type FilterVariant = "primary" | "secondary";
@@ -5809,7 +5983,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 {
@@ -5817,9 +5991,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 = {
@@ -5844,82 +6049,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
+     */
+    showSearch: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the search input shows a clear button.
      * @default false
      */
-    showInput: _angular_core.InputSignal<boolean>;
+    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 {
@@ -6790,6 +7420,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, 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, 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, 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, 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