@tedi-design-system/angular 6.5.0-rc.9 → 7.0.0-rc.2

package/tedi/index.d.ts

@@ -1,20 +1,20 @@
 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, AfterViewChecked, AfterContentInit, QueryList, EnvironmentProviders } from '@angular/core';
 import * as _tedi_design_system_angular_tedi from '@tedi-design-system/angular/tedi';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 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 { NgxFloatUiContentComponent, NgxFloatUiPlacements } from 'ngx-float-ui';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { ConnectedPosition, CdkConnectedOverlay } from '@angular/cdk/overlay';
+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 { _IdGenerator } from '@angular/cdk/a11y';
 import { CdkListbox } from '@angular/cdk/listbox';
 import { Observable } from 'rxjs';
 import { DialogRef } from '@angular/cdk/dialog';
 import { ComponentType } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/scrolling';
-import { _IdGenerator } from '@angular/cdk/a11y';
 
-type IconSize = 8 | 12 | 16 | 18 | 24 | 36 | 48 | "inherit";
+type IconSize = 8 | 12 | 16 | 18 | 22 | 24 | 36 | 48 | "inherit";
 type IconVariant = "filled" | "outlined";
 type IconType = "outlined" | "sharp" | "rounded";
 type IconColor = "primary" | "secondary" | "tertiary" | "brand" | "brand-dark" | "success" | "warning" | "warning-dark" | "danger" | "white" | "inherit";
@@ -26,10 +26,12 @@ declare class IconComponent {
      */
     name: _angular_core.InputSignal<string>;
     /**
-     * Size of the icon in pixels.
+     * Size of the icon in pixels. When unset, the icon uses the contextual
+     * default of its host (e.g. `tedi-button`/`tedi-link`), falling back to 24.
+     * An explicit value always takes precedence over the contextual default.
      * @default 24
      */
-    size: _angular_core.InputSignal<IconSize>;
+    size: _angular_core.InputSignal<IconSize | undefined>;
     /**
      * Color of the icon.
      * @default primary
@@ -55,13 +57,15 @@ declare class IconComponent {
      * If omitted then the icon is hidden for screen-readers.
      */
     label: _angular_core.InputSignal<string | undefined>;
+    iconSizeVar: _angular_core.Signal<string | null>;
+    iconBgPadding: _angular_core.Signal<string | null>;
     classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
     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 +98,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,13 +120,156 @@ 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
+ * element provides the interaction semantics and applies the hover, active,
+ * focus and disabled states to the card and its blocks inside.
+ *
+ * Only a projected `tedi-card` is rendered — other content is ignored. The
+ * card may use any card sub-components (content, rows, icon cells). Do not
+ * place other interactive elements inside.
+ */
+declare class CardButtonComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardButtonComponent, "a[tedi-card-button], button[tedi-card-button]", never, {}, {}, never, ["tedi-card"], true, never>;
+}
+
+/**
+ * Grid breakpoints in `rem`, mirroring `$grid-breakpoints` in
+ * `@tedi-design-system/core`. `rem` is used (instead of `px`) so breakpoints
+ * resolve against the browser's base font size and scale with the user's font
+ * preference — keeping these JS breakpoints aligned with the rem-based CSS
+ * tokens at any zoom / font-size setting.
+ */
 declare const BREAKPOINTS: {
     readonly xs: 0;
-    readonly sm: 576;
-    readonly md: 768;
-    readonly lg: 992;
-    readonly xl: 1200;
-    readonly xxl: 1400;
+    readonly sm: 36;
+    readonly md: 48;
+    readonly lg: 62;
+    readonly xl: 75;
+    readonly xxl: 87.5;
 };
 type Breakpoint = keyof typeof BREAKPOINTS;
 type BreakpointInputs<TInputs> = {
@@ -262,6 +413,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[];
@@ -276,7 +434,7 @@ declare const translationsMap: {
         en: string;
         ru: string;
     };
-    "header.login-mobile": {
+    "header.login.mobile": {
         description: string;
         components: string[];
         et: string;
@@ -290,6 +448,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[];
@@ -304,6 +469,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[];
@@ -374,6 +553,13 @@ declare const translationsMap: {
         en: string;
         ru: string;
     };
+    "file-attachment.uploading": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
     "modal.close": {
         description: string;
         components: string[];
@@ -871,6 +1057,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[];
@@ -1172,6 +1365,13 @@ declare const translationsMap: {
         en: string;
         ru: string;
     };
+    "date-picker.today": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
     "date-picker.go-next-month": {
         description: string;
         components: string[];
@@ -1179,6 +1379,41 @@ declare const translationsMap: {
         en: string;
         ru: string;
     };
+    "date-picker.calendar-nav": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
+    "date-picker.choose-month": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
+    "date-picker.choose-year": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
+    "date-picker.week-number": {
+        description: string;
+        components: string[];
+        et: (n: number) => string;
+        en: (n: number) => string;
+        ru: (n: number) => string;
+    };
+    "date-picker.week-number-header": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
     "date-picker.go-prev-month": {
         description: string;
         components: string[];
@@ -1228,6 +1463,41 @@ declare const translationsMap: {
         en: string;
         ru: string;
     };
+    "date-field.remove-chip": {
+        description: string;
+        components: string[];
+        et: (label: string) => string;
+        en: (label: string) => string;
+        ru: (label: string) => string;
+    };
+    "date-field.calendar-dialog": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
+    "date-field.modal-title": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
+    "date-field.confirm": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
+    "date-field.cancel": {
+        description: string;
+        components: string[];
+        et: string;
+        en: string;
+        ru: string;
+    };
     "time-picker.hours": {
         description: string;
         components: string[];
@@ -1371,6 +1641,9 @@ declare class AlertComponent {
     icon: _angular_core.InputSignal<string>;
     /**
      * If true, a close button will be displayed.
+     *
+     * Ignored when a `[tedi-alert-action]` element is projected — the action
+     * slot wins, and is responsible for any close affordance it wants to expose.
      * @default false
      */
     showClose: _angular_core.InputSignal<boolean>;
@@ -1417,7 +1690,7 @@ declare class AlertComponent {
     }>;
     handleClose(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "tedi-alert", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "titleElement": { "alias": "titleElement"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closeClick": "closeClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "tedi-alert", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "titleElement": { "alias": "titleElement"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closeClick": "closeClick"; }, never, ["[tedi-alert-action]", "*"], true, never>;
 }
 
 declare const TOAST_DEFAULT_DURATION = 6000;
@@ -1775,14 +2048,228 @@ declare class ClosingButtonComponent {
      * @default 24
      */
     iconSize: _angular_core.InputSignal<ClosingButtonIconSize>;
+    /**
+     * Material Symbols icon rendered inside the button. Override for other
+     * closing-like actions such as delete/remove (e.g. `delete`). When
+     * overriding, also provide a matching `ariaLabel` — the default label
+     * is "close".
+     * @default close
+     */
+    icon: _angular_core.InputSignal<string>;
     /**
      * ARIA label to override default label "close"
      */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Render the label as a native `title` attribute (browser tooltip on
+     * hover). Set to `false` when the button is wrapped in a `tedi-tooltip`
+     * so the native tooltip does not double the custom one. The `aria-label`
+     * is kept either way.
+     * @default true
+     */
+    showTitle: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private translationService;
     private readonly _defaultLabel;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClosingButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClosingButtonComponent, "button[tedi-closing-button]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClosingButtonComponent, "button[tedi-closing-button]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type CardBorderPlacement = "top" | "left";
+type CardBackground = "primary" | "secondary" | "tertiary" | "accent" | "brand-primary" | "brand-secondary" | "brand-tertiary" | "brand-quaternary" | "danger-primary" | "danger-secondary" | "success-primary" | "success-secondary" | "info-primary" | "info-secondary" | "warning-primary" | "warning-secondary" | "neutral-primary" | "neutral-secondary";
+type CardBorderType = `${CardBorderPlacement}-${CardBackground}` | CardBackground;
+type CardPaddingNumber = 0 | 0.25 | 0.5 | 0.75 | 1 | 1.25 | 1.5 | 2 | 2.5 | 3;
+type CardPadding = CardPaddingNumber | {
+    vertical: CardPaddingNumber;
+    horizontal: CardPaddingNumber;
+} | {
+    top?: CardPaddingNumber;
+    right?: CardPaddingNumber;
+    bottom?: CardPaddingNumber;
+    left?: CardPaddingNumber;
+};
+type CardBorderRadius = false | {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+    topLeft?: boolean;
+    topRight?: boolean;
+    bottomRight?: boolean;
+    bottomLeft?: boolean;
+};
+type CardResolvedCorners = {
+    topLeft: boolean;
+    topRight: boolean;
+    bottomRight: boolean;
+    bottomLeft: boolean;
+};
+declare function getCardBorderPlacementColor(border?: CardBorderType): [CardBorderPlacement | undefined, CardBackground | undefined];
+declare function getPaddingCssVariables(padding: CardPadding): Record<string, string>;
+declare function resolveCardBorderRadius(config?: CardBorderRadius): CardResolvedCorners;
+
+type CardInputs = {
+    background?: CardBackground;
+    padding?: CardPadding;
+    borderRadius?: CardBorderRadius;
+    borderless?: boolean;
+    border?: CardBorderType;
+};
+/**
+ * Card is a container for grouping related content. Compose it from
+ * `tedi-card-header`, `tedi-card-content` and `tedi-card-notification` blocks.
+ * `background` and `padding` set here act as defaults for all child blocks.
+ */
+declare class CardComponent implements BreakpointInputs<CardInputs> {
+    /**
+     * Default background color for child content blocks.
+     */
+    background: _angular_core.InputSignal<CardBackground | undefined>;
+    /**
+     * Default padding for child content blocks.
+     * Value is either a predefined number in rems or an object of
+     * vertical/horizontal or top/right/bottom/left number values in rems.
+     */
+    padding: _angular_core.InputSignal<CardPadding | undefined>;
+    /**
+     * Controls card border radius.
+     * Accepts `false` to remove all radius or an object to control
+     * sides or individual corners. Corner values take precedence over sides.
+     */
+    borderRadius: _angular_core.InputSignal<CardBorderRadius | undefined>;
+    /**
+     * Removes border from card.
+     * @default false
+     */
+    borderless: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Type of border. Plain background value colors the whole border,
+     * `top-` or `left-` prefixed value draws a thick accent border on that side.
+     */
+    border: _angular_core.InputSignal<CardBorderType | undefined>;
+    xs: _angular_core.InputSignal<CardInputs | undefined>;
+    sm: _angular_core.InputSignal<CardInputs | undefined>;
+    md: _angular_core.InputSignal<CardInputs | undefined>;
+    lg: _angular_core.InputSignal<CardInputs | undefined>;
+    xl: _angular_core.InputSignal<CardInputs | undefined>;
+    xxl: _angular_core.InputSignal<CardInputs | undefined>;
+    private breakpointService;
+    breakpointInputs: _angular_core.Signal<CardInputs>;
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "tedi-card", never, { "background": { "alias": "background"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "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>;
+}
+
+type CardContentInputs = {
+    background?: CardBackground;
+    padding?: CardPadding;
+    backgroundImage?: string;
+    backgroundPosition?: string;
+    backgroundSize?: string;
+    backgroundRepeat?: string;
+    autoWidth?: boolean;
+};
+/**
+ * Content block of a card. Inherits unset `background` and `padding`
+ * from the parent `tedi-card`.
+ */
+declare class CardContentComponent implements BreakpointInputs<CardContentInputs> {
+    /**
+     * Background color.
+     * @default primary
+     */
+    background: _angular_core.InputSignal<CardBackground | undefined>;
+    /**
+     * Content padding.
+     * Value is either a predefined number in rems or an object of
+     * vertical/horizontal or top/right/bottom/left number values in rems.
+     * @default 1
+     */
+    padding: _angular_core.InputSignal<CardPadding | undefined>;
+    /**
+     * Background image url.
+     */
+    backgroundImage: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Background position for the image.
+     */
+    backgroundPosition: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Background size for the image.
+     */
+    backgroundSize: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Background repeat for the image.
+     */
+    backgroundRepeat: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Takes only as much width as its content needs instead of growing.
+     * Useful for icon or date cells inside `tedi-card-row`.
+     * @default false
+     */
+    autoWidth: _angular_core.InputSignal<boolean | undefined>;
+    xs: _angular_core.InputSignal<CardContentInputs | undefined>;
+    sm: _angular_core.InputSignal<CardContentInputs | undefined>;
+    md: _angular_core.InputSignal<CardContentInputs | undefined>;
+    lg: _angular_core.InputSignal<CardContentInputs | undefined>;
+    xl: _angular_core.InputSignal<CardContentInputs | undefined>;
+    xxl: _angular_core.InputSignal<CardContentInputs | undefined>;
+    protected blockClass: string;
+    protected defaultBackground: CardBackground;
+    private breakpointService;
+    private card;
+    breakpointInputs: _angular_core.Signal<CardContentInputs>;
+    classes: _angular_core.Signal<string>;
+    styles: _angular_core.Signal<Record<string, string>>;
+    protected inheritedBackground(): CardBackground | undefined;
+    protected defaultPadding(): CardPadding;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardContentComponent, "tedi-card-content", never, { "background": { "alias": "background"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "backgroundImage": { "alias": "backgroundImage"; "required": false; "isSignal": true; }; "backgroundPosition": { "alias": "backgroundPosition"; "required": false; "isSignal": true; }; "backgroundSize": { "alias": "backgroundSize"; "required": false; "isSignal": true; }; "backgroundRepeat": { "alias": "backgroundRepeat"; "required": false; "isSignal": true; }; "autoWidth": { "alias": "autoWidth"; "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>;
+}
+
+type CardIconType = "default" | "brand";
+type CardIconSize = "default" | "small";
+/**
+ * Icon cell for a card row. The projected icon is aligned to the top of the
+ * cell and inherits the cell color. Pair the small size with a 16px icon.
+ */
+declare class CardIconComponent extends CardContentComponent {
+    /**
+     * Visual type of the icon cell.
+     * @default default
+     */
+    type: _angular_core.InputSignal<CardIconType>;
+    /**
+     * Size of the icon cell.
+     * @default default
+     */
+    size: _angular_core.InputSignal<CardIconSize>;
+    protected blockClass: string;
+    protected inheritedBackground(): CardBackground | undefined;
+    protected defaultPadding(): CardPadding;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardIconComponent, "tedi-card-icon", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Lays out card content cells horizontally inside a card.
+ * Place a `tedi-separator` between cells (vertical, `size="auto"`) or
+ * between rows (horizontal) to draw dividers.
+ */
+declare class CardRowComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardRowComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardRowComponent, "tedi-card-row", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Header block of a card. Same API as `tedi-card-content`, but defaults to
+ * the brand-primary background and does not inherit background from the card.
+ */
+declare class CardHeaderComponent extends CardContentComponent {
+    protected blockClass: string;
+    protected defaultBackground: CardBackground;
+    protected inheritedBackground(): CardBackground | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardHeaderComponent, "tedi-card-header", never, {}, {}, never, ["*"], true, never>;
 }
 
 type BulletColor = "primary" | "secondary" | "tertiary" | "brand" | "brand-dark" | "success" | "warning" | "warning-dark" | "danger" | "white";
@@ -1969,50 +2456,481 @@ declare class CarouselNavigationComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselNavigationComponent, "tedi-carousel-navigation", never, {}, {}, never, never, true, never>;
 }
 
-type PaginationBackground = "white" | "transparent";
 /**
- * Visibility toggle for the results / page-size / pager / arrow slots.
- * - `true` — always hidden
- * - `false` (default) — always visible
- * - `'sm'` / `'md'` / `'lg'` / `'xl'` / `'xxl'` — hidden below that breakpoint
+ * A date range with an inclusive start (`from`) and optional inclusive end (`to`).
+ * When `to` is undefined the range degenerates to the single day `from`.
+ */
+type DateRange = {
+    from: Date;
+    to?: Date;
+};
+/**
+ * Formats a Date object to dd.MM.yyyy string format.
  *
- * Mirrors the `boolean | breakpoint` pattern used by `tedi-modal`'s
- * `fullscreen` input.
+ * Thin wrapper around `formatLocaleDate(date, 'et-EE')` kept for back-compat.
+ * New code should call `formatLocaleDate` directly with the desired locale.
  */
-type PaginationVisibility = boolean | "sm" | "md" | "lg" | "xl" | "xxl";
+declare function formatDate(date: Date): string;
 /**
- * Where the divider sits relative to the pagination row.
- * - `'top'` (default) — border on top, matches single-row layouts under content
- * - `'bottom'` — border on bottom, for above-content placements
- * - `'none'` — no divider, useful when the surrounding container already has one
+ * Parses a dd.MM.yyyy string to a Date object.
+ * Returns null if the string is invalid.
+ *
+ * Thin wrapper around `parseLocaleDate(str, 'et-EE')` kept for back-compat.
+ * Note: `parseLocaleDate` returns `Date | undefined`; this wrapper normalizes
+ * undefined to null so existing callers asserting `=== null` still work.
  */
-type PaginationDividerPosition = "top" | "bottom" | "none";
-type PaginationItemType = "page" | "previous" | "next" | "ellipsis";
+declare function parseDate(str: string): Date | null;
 /**
- * A labelled page-size option. Use it alongside plain numbers in
- * `pageSizeOptions` when the visible text should differ from the value —
- * most commonly a "Show all" entry: `{ value: totalItems, label: 'Show all' }`.
- * The label is rendered as-is, so supply it already translated.
+ * Checks if two dates represent the same calendar day.
  */
-interface PaginationPageSizeOption {
-    value: number;
-    label: string;
-}
-interface PaginationItem {
-    type: PaginationItemType;
-    page: number | null;
-    selected: boolean;
-    disabled: boolean;
-}
-interface PaginationLabels {
-    /** Accessible label for the nav wrapper. @default 'Pagination' */
-    ariaLabel: string;
-    /** Previous button label (icon-only, used as aria-label). @default 'Previous page' */
-    previous: string;
-    /** Next button label (icon-only, used as aria-label). @default 'Next page' */
-    next: string;
-    /** aria-label for a numeric page button. @default (page) => 'Go to page {page}' */
-    pageAriaLabel: (page: number) => string;
+declare function isSameDay(a: Date, b: Date): boolean;
+/**
+ * Checks if date a is before date b (day-level, time ignored).
+ */
+declare function isBeforeDay(a: Date, b: Date): boolean;
+/**
+ * Checks if date a is after date b (day-level, time ignored).
+ */
+declare function isAfterDay(a: Date, b: Date): boolean;
+/**
+ * Returns the ISO week number for a given date.
+ */
+declare function getISOWeek(date: Date): number;
+/**
+ * Returns a new Date offset by `n` days from `date`. `n` may be negative.
+ */
+declare function addDays(date: Date, n: number): Date;
+/**
+ * Returns a new Date offset by `n` months from `date`. Clamps the day to the
+ * last day of the target month (e.g. Jan 31 + 1 month → Feb 28/29).
+ */
+declare function addMonths(date: Date, n: number): Date;
+/**
+ * Returns a new Date offset by `n` years from `date`. Clamps Feb 29 to Feb 28
+ * in non-leap target years.
+ */
+declare function addYears(date: Date, n: number): Date;
+/**
+ * Returns the first day of the month for `date` at 00:00 local time.
+ */
+declare function startOfMonth(date: Date): Date;
+/**
+ * Returns the last day of the month for `date` at 00:00 local time.
+ */
+declare function endOfMonth(date: Date): Date;
+/**
+ * Returns the first day of the week containing `date`, given a locale's
+ * first day of week (0=Sun..6=Sat).
+ */
+declare function startOfWeek(date: Date, firstDayOfWeek: number): Date;
+/**
+ * Returns the number of days in the given month/year. `monthIndex` is 0-based.
+ */
+declare function getDaysInMonth(year: number, monthIndex: number): number;
+/**
+ * Checks if two dates fall in the same calendar month and year.
+ */
+declare function isSameMonth(a: Date, b: Date): boolean;
+/**
+ * Checks if two dates fall in the same calendar year.
+ */
+declare function isSameYear(a: Date, b: Date): boolean;
+/**
+ * Returns the locale's first day of week as a JS day index (0=Sun..6=Sat).
+ *
+ * Reads `Intl.Locale(localeCode).getWeekInfo()` when available, falling back
+ * to 1 (Monday) when unavailable. Intl returns 1-7 (1=Mon..7=Sun); this
+ * function converts to JS's 0-6 convention.
+ */
+declare function getFirstDayOfWeek(localeCode: string): number;
+/**
+ * Returns 12 month names (January..December) in the requested locale and format.
+ */
+declare function getMonthNames(localeCode: string, format: "long" | "short"): string[];
+/**
+ * Returns 7 weekday names starting at `firstDayOfWeek` (0=Sun..6=Sat) in the
+ * requested locale and format.
+ */
+declare function getWeekdayNames(localeCode: string, format: "long" | "short" | "narrow", firstDayOfWeek: number): string[];
+/**
+ * Formats a Date according to the given locale's short numeric form.
+ * For `et-EE` produces `dd.MM.yyyy`; for `en-US` `MM/dd/yyyy`; for `en-GB`
+ * `dd/MM/yyyy`; etc.
+ */
+declare function formatLocaleDate(date: Date, localeCode: string): string;
+/**
+ * Formats a Date as a long-form, locale-aware string suitable for
+ * `aria-label` use — e.g. for `en-US` produces "Friday, May 16, 2026" and for
+ * `et-EE` "reede, 16. mai 2026". Matches react-day-picker's `labelDay` shape.
+ */
+declare function formatLocaleDateLong(date: Date, localeCode: string): string;
+/**
+ * Formats a Date as a locale-aware "Month Year" string — e.g. "May 2026" for
+ * `en-US` and "mai 2026" for `et-EE`. Used as the aria-label for the day
+ * grid and inside the calendar header's aria-live region so screen readers
+ * announce the visible month/year on navigation.
+ */
+declare function formatMonthYear(date: Date, localeCode: string): string;
+/**
+ * Builds a locale-aware manual-entry hint such as `pp.kk.aaaa` (et-EE),
+ * `dd.mm.yyyy` (en) or `дд.мм.гггг` (ru). Field order and separators are
+ * derived from `Intl.DateTimeFormat` (so they always match what the field
+ * formats and parses), while the letter tokens are localized per language.
+ * Falls back to English tokens for unknown languages.
+ */
+declare function formatLocaleDateHint(localeCode: string): string;
+/**
+ * Parses a locale-formatted date string back into a Date.
+ *
+ * Algorithm (mirrors React's defaultParseDate):
+ *   1. Format a reference date with distinct y/m/d digits via Intl.DateTimeFormat.
+ *   2. Walk `formatToParts` to discover the field order and the literal
+ *      separators the locale uses.
+ *   3. Build a regex from that ordering using field-aware digit ranges
+ *      (day/month: 1-2 digits, year: 2 or 4 digits) and the actual escaped
+ *      separators. 3-digit years are rejected.
+ *   4. Match the (trimmed) input; reject if no match.
+ *   5. Validate ranges and check the constructed Date round-trips (so e.g.
+ *      Feb 30 is rejected).
+ *
+ * Returns `undefined` on any failure — silent, caller decides UX.
+ */
+declare function parseLocaleDate(value: string, localeCode: string): Date | undefined;
+/**
+ * Returns true if `date` falls within the inclusive `[from, to]` range
+ * (day-level). When `to` is undefined, only `from` matters (same-day check).
+ */
+declare function isDateInRange(date: Date, range: DateRange): boolean;
+/**
+ * Toggles a date in an array of dates (day-level). If a same-day entry exists
+ * it is removed; otherwise the date is appended. Returns a new array.
+ */
+declare function toggleDateInArray(dates: Date[], date: Date): Date[];
+/**
+ * Builds a 6×7 grid of Date cells for the calendar day view.
+ *
+ * - The first weekday of the month is found, then we walk back to
+ *   `firstDayOfWeek` to fill leading cells.
+ * - Cells outside the current month are real Date objects when
+ *   `showOutsideDays` is true, otherwise `null`.
+ * - Always returns 6 rows × 7 cells (42 cells total).
+ */
+declare function buildMonthGrid(month: Date, firstDayOfWeek: number, showOutsideDays: boolean): (Date | null)[][];
+
+type DateBefore = {
+    before: Date;
+};
+type DateAfter = {
+    after: Date;
+};
+type DateInterval = {
+    before: Date;
+    after: Date;
+};
+type DayOfWeek = {
+    dayOfWeek: number[];
+};
+type Matcher = boolean | Date | Date[] | DateBefore | DateAfter | DateInterval | DateRange | DayOfWeek | ((date: Date) => boolean);
+/**
+ * Returns whether `date` matches the given matcher.
+ *
+ * Semantics mirror react-day-picker:
+ * - `boolean` — returned as-is.
+ * - `Date` — true if same day.
+ * - `Date[]` — true if any entry is the same day.
+ * - `{ before }` — true if date is strictly before `before` (day-level).
+ * - `{ after }` — true if date is strictly after `after` (day-level).
+ * - `{ before, after }` — true if date is OUTSIDE the interval `(after, before)`
+ *   (i.e. `date <= after || date >= before`, day-level).
+ * - `{ from, to? }` — true if date is within `[from, to]` inclusive (day-level).
+ *   If `to` is omitted, only `from` matters.
+ * - `{ dayOfWeek }` — true if `date.getDay()` is in the array.
+ * - function — called with the date.
+ */
+declare function matchDate(date: Date, matcher: Matcher): boolean;
+/**
+ * Returns true if any matcher in the list matches the given date.
+ * An empty array returns false.
+ */
+declare function matchAny(date: Date, matchers: Matcher[]): boolean;
+
+type StatusIndicatorType = "success" | "danger" | "warning" | "inactive";
+type StatusIndicatorSize = "sm" | "lg";
+type StatusIndicatorPosition = "default" | "top-right";
+declare class StatusIndicatorComponent {
+    /**
+     * Accessible label for the indicator. When provided, the indicator is
+     * exposed to assistive technology with `role="img"`. When omitted, the
+     * indicator is treated as decorative (`aria-hidden="true"`).
+     */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The status type, which determines the indicator color.
+     * @default success
+     */
+    readonly type: _angular_core.InputSignal<StatusIndicatorType>;
+    /**
+     * The size of the indicator.
+     * @default sm
+     */
+    readonly size: _angular_core.InputSignal<StatusIndicatorSize>;
+    /**
+     * Whether the indicator has a white border ring.
+     * @default false
+     */
+    readonly hasBorder: _angular_core.InputSignal<boolean>;
+    /**
+     * Controls positioning of the indicator.
+     * - `'default'` — inline, no absolute positioning
+     * - `'top-right'` — absolutely positioned at the top-right corner of the parent
+     * @default default
+     */
+    readonly position: _angular_core.InputSignal<StatusIndicatorPosition>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusIndicatorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusIndicatorComponent, "tedi-status-indicator", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hasBorder": { "alias": "hasBorder"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type CalendarView = "days" | "months" | "years";
+type DateFieldMode = "single" | "multiple" | "range";
+
+interface DayStatus {
+    type: StatusIndicatorType;
+    /**
+     * Accessible label for the status. Surfaced on the day button's `aria-label`
+     * so screen readers announce the date together with its status — required to
+     * meet WCAG 1.1.1 / 1.4.1 since the indicator dot alone is decorative.
+     */
+    label: string;
+}
+type DayStatusFn = (date: Date) => DayStatus | null | undefined;
+
+type CalendarValue = Date | Date[] | DateRange | null;
+type DayPredicate = (date: Date) => boolean;
+type DayAvailabilityInput$1 = Date[] | DayPredicate | undefined;
+type MonthPredicate$1 = (month: Date) => boolean;
+type YearPredicate$1 = (year: Date) => boolean;
+declare class CalendarComponent implements ControlValueAccessor {
+    /**
+     * Active view (two-way). `days` shows the day grid, `months` the month grid,
+     * `years` the year grid. Driven by `selectionLevel` and the header navigation,
+     * but can be set directly to open the calendar on a specific level.
+     */
+    readonly view: _angular_core.ModelSignal<CalendarView>;
+    /**
+     * The first (left-most) month shown (two-way). Drives which month grid is
+     * rendered and is updated by header navigation and keyboard paging. For
+     * multi-month layouts the additional months follow this one.
+     */
+    readonly currentMonth: _angular_core.ModelSignal<Date>;
+    /**
+     * The selected value (two-way / `ControlValueAccessor`). Shape follows `mode`:
+     * `single` → `Date | null`, `multiple` → `Date[]`, `range` → `{ from, to }`.
+     */
+    readonly value: _angular_core.ModelSignal<CalendarValue>;
+    /**
+     * Selection mode. `single` selects one date, `multiple` toggles dates in an
+     * array, `range` builds a `{ from, to }` range across two clicks.
+     */
+    readonly mode: _angular_core.InputSignal<DateFieldMode>;
+    /**
+     * Lowest level the user can commit to. `days` shows the day grid as the final
+     * step; `months` and `years` commit at that level instead.
+     */
+    readonly selectionLevel: _angular_core.InputSignal<CalendarView>;
+    /**
+     * BCP-47 locale used for weekday/month names and the first day of the week.
+     */
+    readonly localeCode: _angular_core.InputSignal<string>;
+    /**
+     * Render the trailing/leading days from the adjacent month inside the current
+     * month's grid.
+     */
+    readonly showOutsideDays: _angular_core.InputSignal<boolean>;
+    /** Render the ISO week-number column at the start of each row. */
+    readonly showWeekNumbers: _angular_core.InputSignal<boolean>;
+    /** Show the previous/next navigation chevrons in the header. */
+    readonly showNavigation: _angular_core.InputSignal<boolean>;
+    /**
+     * Render the calendar with its own outer border and rounded corners. Disable
+     * when embedding inside a surface that already has a border (e.g. the
+     * DateField overlay).
+     */
+    readonly bordered: _angular_core.InputSignal<boolean>;
+    /**
+     * Matchers that mark dates as disabled. Each matcher can be a `Date`, `Date[]`,
+     * `{ before }`, `{ after }`, `{ before, after }`, `{ from, to? }`,
+     * `{ dayOfWeek: number[] }`, or a `(date) => boolean` predicate.
+     */
+    readonly disabledMatchers: _angular_core.InputSignal<Matcher[]>;
+    /**
+     * Whitelist of selectable days — an explicit `Date[]` or a predicate
+     * `(date) => boolean`. Days outside the whitelist are disabled.
+     */
+    readonly availableDays: _angular_core.InputSignal<DayAvailabilityInput$1>;
+    /**
+     * Blacklist of unavailable days — a `Date[]` or a predicate `(date) => boolean`.
+     * Takes precedence over `availableDays`.
+     */
+    readonly unavailableDays: _angular_core.InputSignal<DayAvailabilityInput$1>;
+    /**
+     * Function `(date) => { type, label } | null | undefined` that overlays a
+     * `tedi-status-indicator` dot on specific days. The `label` is surfaced on the
+     * day button's `aria-label` for screen readers.
+     */
+    readonly dayStatus: _angular_core.InputSignal<DayStatusFn | undefined>;
+    /**
+     * How the header exposes month/year picking. `dropdown` shows two dropdowns;
+     * `grid` switches the body to a month or year grid when the header label is
+     * clicked; `static` renders just the label — only the prev/next chevrons can
+     * change the month.
+     */
+    readonly monthYearSelectType: _angular_core.InputSignal<"static" | "dropdown" | "grid">;
+    /**
+     * When `mode='multiple'`, prevents clearing the last selected date — at least
+     * one date must remain selected.
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * How many consecutive months to render side by side. Useful for range
+     * selection. The visible count is capped to what fits the viewport width.
+     */
+    readonly numberOfMonths: _angular_core.InputSignal<number>;
+    /**
+     * Disables all interactions. Combines with the reactive-forms disabled state.
+     */
+    readonly inputDisabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Predicate `(month) => boolean` returning `true` to disable a whole month
+     * (header navigation and the month grid). Leave `undefined` to disable nothing.
+     */
+    readonly shouldDisableMonth: _angular_core.InputSignal<MonthPredicate$1 | undefined>;
+    /**
+     * Predicate `(year) => boolean` returning `true` to disable a whole year
+     * (header navigation and the year grid). Leave `undefined` to disable nothing.
+     */
+    readonly shouldDisableYear: _angular_core.InputSignal<YearPredicate$1 | undefined>;
+    /**
+     * Earliest year offered in the year grid/dropdown. Defaults to 10 years before
+     * the current year when `null`.
+     */
+    readonly minYear: _angular_core.InputSignal<number | null>;
+    /**
+     * Latest year offered in the year grid/dropdown. Defaults to 10 years after
+     * the current year when `null`.
+     */
+    readonly maxYear: _angular_core.InputSignal<number | null>;
+    /**
+     * Emitted whenever a value is committed. `date` is the new full value (shape
+     * follows `mode`); `day` is the specific day/month/year that was clicked.
+     */
+    readonly select: _angular_core.OutputEmitterRef<{
+        date: CalendarValue;
+        day: Date;
+    }>;
+    private readonly hostEl;
+    private readonly injector;
+    private readonly destroyRef;
+    readonly yearPageSize = 12;
+    private readonly cvaDisabled;
+    private readonly internalYearPageStart;
+    readonly hoveredDay: _angular_core.WritableSignal<Date | null>;
+    private readonly viewportWidth;
+    private onChange;
+    private onTouched;
+    constructor();
+    private static readonly VIEWPORT_MARGIN_PX;
+    private updateFitColumns;
+    readonly effectiveDisabled: _angular_core.Signal<boolean>;
+    readonly firstDayOfWeek: _angular_core.Signal<number>;
+    readonly monthDates: _angular_core.Signal<Date[]>;
+    readonly resolvedMinYear: _angular_core.Signal<number>;
+    readonly resolvedMaxYear: _angular_core.Signal<number>;
+    readonly yearPageStart: _angular_core.Signal<number>;
+    readonly selectedSingle: _angular_core.Signal<Date | null>;
+    readonly computedDisabledMatchers: _angular_core.Signal<Matcher[]>;
+    readonly effectiveIsMonthDisabled: _angular_core.Signal<MonthPredicate$1>;
+    readonly effectiveIsYearDisabled: _angular_core.Signal<YearPredicate$1>;
+    writeValue(value: CalendarValue): void;
+    registerOnChange(fn: (value: CalendarValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    handlePrev(): void;
+    handleNext(): void;
+    handleHeaderMonthChange(monthStartDate: Date, index?: number): void;
+    handleHeaderYearChange(yearStartDate: Date, index?: number): void;
+    handleHeaderViewChange(nextView: CalendarView): void;
+    handleDaySelect(day: Date): void;
+    handleMonthSelect(monthStartDate: Date): void;
+    handleYearSelect(yearStartDate: Date): void;
+    private applyModeSelection;
+    handleKeydown(event: KeyboardEvent): void;
+    private handleDaysKeydown;
+    private computeDayKeyTarget;
+    private skipDisabledDays;
+    private adjustCurrentMonthForFocus;
+    private handleMonthsKeydown;
+    private handleYearsKeydown;
+    private focusGridIndex;
+    private queryGridButtons;
+    /**
+     * Moves focus to the calendar's active cell — the roving-tabindex day in the
+     * day view, or the first enabled control in the month/year views. Used by
+     * popover hosts (e.g. date-field) to pull focus into the calendar when it
+     * opens, since the CDK overlay is detached from the trigger in DOM order.
+     */
+    focusActiveCell(): void;
+    private focusDayCell;
+    private commit;
+    private partialRange;
+    private deriveAnchor;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalendarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "tedi-calendar", never, { "view": { "alias": "view"; "required": false; "isSignal": true; }; "currentMonth": { "alias": "currentMonth"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "selectionLevel": { "alias": "selectionLevel"; "required": false; "isSignal": true; }; "localeCode": { "alias": "localeCode"; "required": false; "isSignal": true; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "showNavigation": { "alias": "showNavigation"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "disabledMatchers": { "alias": "disabledMatchers"; "required": false; "isSignal": true; }; "availableDays": { "alias": "availableDays"; "required": false; "isSignal": true; }; "unavailableDays": { "alias": "unavailableDays"; "required": false; "isSignal": true; }; "dayStatus": { "alias": "dayStatus"; "required": false; "isSignal": true; }; "monthYearSelectType": { "alias": "monthYearSelectType"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "inputDisabled": { "alias": "inputDisabled"; "required": false; "isSignal": true; }; "shouldDisableMonth": { "alias": "shouldDisableMonth"; "required": false; "isSignal": true; }; "shouldDisableYear": { "alias": "shouldDisableYear"; "required": false; "isSignal": true; }; "minYear": { "alias": "minYear"; "required": false; "isSignal": true; }; "maxYear": { "alias": "maxYear"; "required": false; "isSignal": true; }; }, { "view": "viewChange"; "currentMonth": "currentMonthChange"; "value": "valueChange"; "select": "select"; }, never, ["[tediCalendarFooter]"], true, never>;
+}
+
+type PaginationBackground = "white" | "transparent";
+/**
+ * Visibility toggle for the results / page-size / pager / arrow slots.
+ * - `true` — always hidden
+ * - `false` (default) — always visible
+ * - `'sm'` / `'md'` / `'lg'` / `'xl'` / `'xxl'` — hidden below that breakpoint
+ *
+ * Mirrors the `boolean | breakpoint` pattern used by `tedi-modal`'s
+ * `fullscreen` input.
+ */
+type PaginationVisibility = boolean | "sm" | "md" | "lg" | "xl" | "xxl";
+/**
+ * Where the divider sits relative to the pagination row.
+ * - `'top'` (default) — border on top, matches single-row layouts under content
+ * - `'bottom'` — border on bottom, for above-content placements
+ * - `'none'` — no divider, useful when the surrounding container already has one
+ */
+type PaginationDividerPosition = "top" | "bottom" | "none";
+type PaginationItemType = "page" | "previous" | "next" | "ellipsis";
+/**
+ * A labelled page-size option. Use it alongside plain numbers in
+ * `pageSizeOptions` when the visible text should differ from the value —
+ * most commonly a "Show all" entry: `{ value: totalItems, label: 'Show all' }`.
+ * The label is rendered as-is, so supply it already translated.
+ */
+interface PaginationPageSizeOption {
+    value: number;
+    label: string;
+}
+interface PaginationItem {
+    type: PaginationItemType;
+    page: number | null;
+    selected: boolean;
+    disabled: boolean;
+}
+interface PaginationLabels {
+    /** Accessible label for the nav wrapper. @default 'Pagination' */
+    ariaLabel: string;
+    /** Previous button label (icon-only, used as aria-label). @default 'Previous page' */
+    previous: string;
+    /** Next button label (icon-only, used as aria-label). @default 'Next page' */
+    next: string;
+    /** aria-label for a numeric page button. @default (page) => 'Go to page {page}' */
+    pageAriaLabel: (page: number) => string;
     /** aria-label for the currently active page. @default (page) => 'Current page, page {page}' */
     currentPageAriaLabel: (page: number) => string;
     /** Rendered to the left of the nav when `totalItems` is set. @default (count) => '{count} results' */
@@ -2027,6 +2945,30 @@ interface PaginationLabels {
     pageSizeTitle: string;
 }
 
+type OverlayPosition = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "auto" | "auto-start" | "auto-end";
+declare function toConnectedPositions(placement: OverlayPosition, preventOverflow: boolean, extraOffset?: number): ConnectedPosition[];
+/** The side of the trigger an overlay resolved to after positioning. */
+type OverlaySide = "top" | "bottom" | "left" | "right";
+declare function getPlacementFromPositionChange(change: ConnectedOverlayPositionChange): OverlaySide;
+interface ArrowOffset {
+    left: number | null;
+    top: number | null;
+}
+/**
+ * Manages horizontal-only push and resize recalculation for CDK overlays.
+ */
+declare class HorizontalPushHandler {
+    private readonly getOverlayEl;
+    private readonly onAfterPush?;
+    private resizeCleanup?;
+    private rafId?;
+    constructor(getOverlayEl: () => HTMLElement | undefined, onAfterPush?: (() => void) | undefined);
+    apply(): void;
+    attach(): void;
+    detach(): void;
+}
+declare function calculateArrowOffset(placement: OverlaySide, triggerEl: HTMLElement, overlayEl: HTMLElement, arrowSize: number, padding?: number): ArrowOffset;
+
 declare class PopoverTriggerDirective {
     /**
      * Should add underline class to trigger element?
@@ -2035,85 +2977,98 @@ declare class PopoverTriggerDirective {
     readonly underline: _angular_core.InputSignal<boolean>;
     readonly host: ElementRef<HTMLElement>;
     readonly popover: PopoverComponent;
+    readonly overlayOrigin: CdkOverlayOrigin;
     onClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverTriggerDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[tedi-popover-trigger]", never, { "underline": { "alias": "underline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[tedi-popover-trigger]", never, { "underline": { "alias": "underline"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _angular_cdk_overlay.CdkOverlayOrigin; inputs: {}; outputs: {}; }]>;
 }
 
-type PopoverPosition = `${NgxFloatUiPlacements}`;
-declare class PopoverComponent implements AfterContentChecked {
+type PopoverPosition = OverlayPosition;
+declare class PopoverComponent {
     /**
      * The position of the popover relative to the trigger element.
      * @default top
      */
-    position: _angular_core.InputSignal<"left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "bottom-start" | "left-start" | "right-start" | "top-end" | "bottom-end" | "left-end" | "right-end">;
+    readonly position: _angular_core.InputSignal<OverlayPosition>;
     /**
      * Should position flip to opposite direction when overflowing screen?
      * @default false
      */
-    preventOverflow: _angular_core.InputSignal<boolean>;
+    readonly preventOverflow: _angular_core.InputSignal<boolean>;
     /**
      * Is dismissible by clicking outside of content?
      * @default true
      */
-    dismissible: _angular_core.InputSignal<boolean>;
+    readonly dismissible: _angular_core.InputSignal<boolean>;
     /**
      * Does popover content hide on scroll?
      * @default false
      */
-    hideOnScroll: _angular_core.InputSignal<boolean>;
+    readonly hideOnScroll: _angular_core.InputSignal<boolean>;
     /**
      * Does popover have illustrative border on the arrow side?
      * @default false
      */
-    withBorder: _angular_core.InputSignal<boolean>;
+    readonly withBorder: _angular_core.InputSignal<boolean>;
     /**
      * Should show arrow?
      */
-    withArrow: _angular_core.InputSignal<boolean>;
+    readonly withArrow: _angular_core.InputSignal<boolean>;
     /**
      * Lock scrolling on rest of the page?
      * @default false
      */
-    lockScroll: _angular_core.InputSignal<boolean>;
-    /**
-     * Append floating element to given selector.
-     * Use 'body' to append at the end of DOM or empty string to append next to trigger element.
-     * @default "body"
-     */
-    readonly appendTo: _angular_core.InputSignal<string>;
+    readonly lockScroll: _angular_core.InputSignal<boolean>;
     /** Delay time (in ms) for closing popover when not hovering trigger or content.
      * @default 100
      */
     readonly timeoutDelay: _angular_core.InputSignal<number>;
     private readonly document;
     private readonly renderer;
-    readonly floatUiComponent: _angular_core.Signal<NgxFloatUiContentComponent>;
+    private readonly connectedOverlay;
     readonly popoverTrigger: _angular_core.Signal<PopoverTriggerDirective>;
     private readonly popoverContent;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly currentPlacement: _angular_core.WritableSignal<OverlaySide>;
     readonly containerId: _angular_core.WritableSignal<string>;
     readonly isContentHovered: _angular_core.WritableSignal<boolean>;
+    readonly arrowLeft: _angular_core.WritableSignal<number | null>;
+    readonly arrowTop: _angular_core.WritableSignal<number | null>;
+    readonly overlayOrigin: _angular_core.Signal<_angular_cdk_overlay.CdkOverlayOrigin>;
+    private readonly arrowOffset;
+    readonly overlayPositions: _angular_core.Signal<_angular_cdk_overlay.ConnectedPosition[]>;
+    readonly panelClasses: _angular_core.Signal<string>;
+    readonly ariaLabelledBy: _angular_core.Signal<string>;
     hideTimeout?: ReturnType<typeof setTimeout>;
+    /** Whether this popover locked body scroll when it opened — read on close
+     * so a mid-open change to the lockScroll input can't leave the lock stuck. */
+    private lockedScrollAtOpen;
     private keydownListener?;
     private scrollListener?;
     private focusinListener?;
     private mousedownListener?;
-    ngAfterContentChecked(): void;
+    private readonly horizontalPush;
+    constructor();
     showPopover(): void;
+    onOverlayAttach(): void;
+    onPositionChange(change: ConnectedOverlayPositionChange): void;
     hidePopover(focusTrigger?: boolean): void;
     togglePopover(): void;
-    readonly floatUiContainerClass: _angular_core.Signal<string>;
+    private updateArrowPosition;
     private setupKeyboardNavigation;
     private cleanupKeyboardNavigation;
     private setupScrollListener;
     private cleanupScrollListener;
     private setupDismissListeners;
     private cleanupDismissListeners;
+    /** Focusable elements on the page, excluding the popover's own overlay —
+     * those are detached on close, so focusing them would drop focus to body. */
+    private getPageFocusableElements;
     private focusElementAfterTrigger;
     private focusElementBeforeTrigger;
     private handleClosePopoverEvent;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopoverComponent, "tedi-popover", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "preventOverflow": { "alias": "preventOverflow"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "hideOnScroll": { "alias": "hideOnScroll"; "required": false; "isSignal": true; }; "withBorder": { "alias": "withBorder"; "required": false; "isSignal": true; }; "withArrow": { "alias": "withArrow"; "required": false; "isSignal": true; }; "lockScroll": { "alias": "lockScroll"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "timeoutDelay": { "alias": "timeoutDelay"; "required": false; "isSignal": true; }; }, {}, ["popoverTrigger", "popoverContent"], ["[tedi-popover-trigger]", "tedi-popover-content"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopoverComponent, "tedi-popover", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "preventOverflow": { "alias": "preventOverflow"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "hideOnScroll": { "alias": "hideOnScroll"; "required": false; "isSignal": true; }; "withBorder": { "alias": "withBorder"; "required": false; "isSignal": true; }; "withArrow": { "alias": "withArrow"; "required": false; "isSignal": true; }; "lockScroll": { "alias": "lockScroll"; "required": false; "isSignal": true; }; "timeoutDelay": { "alias": "timeoutDelay"; "required": false; "isSignal": true; }; }, {}, ["popoverTrigger", "popoverContent"], ["[tedi-popover-trigger]", "tedi-popover-content"], true, never>;
 }
 
 /**
@@ -2325,6 +3280,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";
 /**
@@ -2461,6 +3422,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
@@ -2689,6 +3663,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
@@ -2884,6 +3890,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;
@@ -2917,7 +3937,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. */
@@ -2952,6 +3977,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
@@ -3036,7 +4077,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;
@@ -3143,11 +4195,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>>;
@@ -3177,12 +4230,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;
 
@@ -3248,6 +4312,7 @@ declare class DropdownTriggerDirective implements AfterViewInit {
     readonly ariaHaspopup: _angular_core.InputSignal<DropdownTriggerAriaHasPopup>;
     readonly host: ElementRef<HTMLElement>;
     readonly dropdown: DropdownComponent;
+    readonly overlayOrigin: CdkOverlayOrigin;
     private readonly renderer;
     /**
      * The element that actually receives focus and ARIA semantics. When the directive
@@ -3270,13 +4335,13 @@ declare class DropdownTriggerDirective implements AfterViewInit {
     private openAndFocusFirst;
     private openAndFocusLast;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownTriggerDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DropdownTriggerDirective, "[tedi-dropdown-trigger]", never, { "ariaHaspopup": { "alias": "ariaHaspopup"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DropdownTriggerDirective, "[tedi-dropdown-trigger]", never, { "ariaHaspopup": { "alias": "ariaHaspopup"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _angular_cdk_overlay.CdkOverlayOrigin; inputs: {}; outputs: {}; }]>;
 }
 
 interface DropdownApi {
     /** Current value of the dropdown. Used to track the selected option in listbox mode. */
     value: WritableSignal<string | undefined>;
-    /** ID of the float-ui container element. Used to link trigger and content for accessibility. */
+    /** ID of the overlay container element. Used to link trigger and content for accessibility. */
     containerId: WritableSignal<string>;
     /** Move focus to the next enabled item after the given element. */
     focusNextItem(fromEl: HTMLLIElement): void;
@@ -3346,6 +4411,13 @@ declare class DropdownItemComponent {
     readonly value: _angular_core.InputSignal<string | undefined>;
     /** Is item disabled? */
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the item's label clips overflowing content (for text ellipsis).
+     * Set `false` when projecting content with decorations that intentionally
+     * sit outside the line box, e.g. status indicator.
+     * @default true
+     */
+    readonly clipContent: _angular_core.InputSignal<boolean>;
     /**
      * Whether selecting this item closes the dropdown. Set `false` for items
      * that should keep the dropdown open after selection (e.g. multi-select
@@ -3367,10 +4439,11 @@ declare class DropdownItemComponent {
     isSelected(): boolean;
     focus(): void;
     onClick(): void;
+    onMousedown(event: MouseEvent): void;
     onKeydown(event: KeyboardEvent): void;
     private onItemSelect;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemComponent, "li[tedi-dropdown-item]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, ["customItemValue"], ["tedi-dropdown-item-value", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemComponent, "li[tedi-dropdown-item]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clipContent": { "alias": "clipContent"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, ["customItemValue"], ["tedi-dropdown-item-value", "*"], true, never>;
 }
 
 type DropdownRole = "menu" | "listbox";
@@ -3380,6 +4453,7 @@ declare class DropdownContentComponent {
      * @default menu
      */
     readonly dropdownRole: _angular_core.InputSignal<DropdownRole>;
+    readonly host: ElementRef<HTMLElement>;
     private readonly dropdownApi;
     readonly containerId: _angular_core.Signal<string>;
     readonly items: _angular_core.Signal<readonly DropdownItemComponent[]>;
@@ -3387,26 +4461,25 @@ declare class DropdownContentComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownContentComponent, "tedi-dropdown-content", never, { "dropdownRole": { "alias": "dropdownRole"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*", "li[tedi-dropdown-item]"], true, never>;
 }
 
-type DropdownPosition = `${NgxFloatUiPlacements}`;
-declare class DropdownComponent implements AfterContentChecked, OnDestroy {
+type DropdownPosition = OverlayPosition;
+declare class DropdownComponent implements OnDestroy {
     /** Current value of dropdown (used with listbox) */
     readonly value: _angular_core.ModelSignal<string | undefined>;
     /**
      * The position of the dropdown relative to the trigger element.
      * @default bottom-start
      */
-    readonly position: _angular_core.InputSignal<"left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "bottom-start" | "left-start" | "right-start" | "top-end" | "bottom-end" | "left-end" | "right-end">;
+    readonly position: _angular_core.InputSignal<OverlayPosition>;
     /**
      * Should position to opposite direction when overflowing screen?
      * @default true
      */
     readonly preventOverflow: _angular_core.InputSignal<boolean>;
     /**
-     * Append floating element to given selector.
-     * Use 'body' to append at the end of DOM or empty string to append next to trigger element.
-     * @default ""
+     * Gap in px between the trigger and the dropdown panel.
+     * @default 4
      */
-    readonly appendTo: _angular_core.InputSignal<string>;
+    readonly offset: _angular_core.InputSignal<number>;
     /**
      * Does the dropdown hide when the page scrolls?
      * @default false
@@ -3414,23 +4487,32 @@ declare class DropdownComponent implements AfterContentChecked, OnDestroy {
     readonly hideOnScroll: _angular_core.InputSignal<boolean>;
     readonly dropdownTrigger: _angular_core.Signal<DropdownTriggerDirective>;
     readonly dropdownContent: _angular_core.Signal<DropdownContentComponent>;
-    readonly floatUiComponent: _angular_core.Signal<NgxFloatUiContentComponent>;
     private readonly activeIndex;
     readonly containerId: _angular_core.WritableSignal<string>;
-    readonly isContentHovered: _angular_core.WritableSignal<boolean>;
-    readonly floatUiDisplay: _angular_core.WritableSignal<"inline" | "block">;
-    readonly opened: _angular_core.Signal<boolean>;
+    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<{
+        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;
     private readonly renderer;
     private scrollListener?;
     constructor();
     ngOnDestroy(): void;
-    ngAfterContentChecked(): void;
-    showDropdown(): void;
+    showDropdown(initialFocus?: "selected" | "first" | "last"): void;
     hideDropdown(): void;
     toggleDropdown(): void;
-    handleOutsideClick: (event: Event) => void;
+    onOutsideClick(): void;
     handleFocusOut: (event: FocusEvent) => void;
     tabOutOfDropdown(shiftKey: boolean): void;
     focusFirstItem(): void;
@@ -3446,7 +4528,7 @@ declare class DropdownComponent implements AfterContentChecked, 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; }; "appendTo": { "alias": "appendTo"; "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";
@@ -3537,12 +4619,6 @@ declare class FilterComponent implements ControlValueAccessor {
      * @default false
      */
     readonly preserveLabel: _angular_core.InputSignal<boolean>;
-    /**
-     * Append dropdown to given selector.
-     * Use 'body' to append at the end of DOM or empty string to append next to trigger.
-     * @default ""
-     */
-    readonly appendTo: _angular_core.InputSignal<string>;
     /**
      * Whether the filter is disabled. Also set automatically when used with a disabled FormControl
      * or when nested in a disabled FilterGroup.
@@ -3614,7 +4690,7 @@ declare class FilterComponent implements ControlValueAccessor {
     private setActiveOption;
     private getTabStops;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterComponent, "tedi-filter", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "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; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "preserveLabel": { "alias": "preserveLabel"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "value": "valueChange"; "cleared": "cleared"; }, ["customContent", "filterPrepend"], ["[tediFilterContent]", "[tediFilterPrepend]", "[tediFilterAppend]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterComponent, "tedi-filter", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "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; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "preserveLabel": { "alias": "preserveLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "value": "valueChange"; "cleared": "cleared"; }, ["customContent", "filterPrepend"], ["[tediFilterContent]", "[tediFilterPrepend]", "[tediFilterAppend]"], true, never>;
 }
 
 declare class FilterContentDirective {
@@ -3930,6 +5006,402 @@ declare class RadioCardGroupComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioCardGroupComponent, "tedi-radio-card-group", never, { "grouped": { "alias": "grouped"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+type EllipsisPosition = "start" | "end";
+declare class EllipsisComponent {
+    /** Maximum number of lines before truncating. End (multi-line) only. */
+    readonly lineClamp: _angular_core.InputSignal<number>;
+    /** Whether truncated content shows a hover/focus tooltip with full text. */
+    readonly tooltip: _angular_core.InputSignal<boolean>;
+    /** Ellipsis position. 'start' = leading, single-line. 'end' = trailing, multi-line. */
+    readonly position: _angular_core.InputSignal<EllipsisPosition>;
+    readonly content: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    readonly isEllipsed: _angular_core.WritableSignal<boolean>;
+    readonly fullText: _angular_core.WritableSignal<string>;
+    constructor();
+    readonly contentClasses: _angular_core.Signal<string>;
+    readonly clampStyle: _angular_core.Signal<string | null>;
+    private updateEllipsedState;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EllipsisComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EllipsisComponent, "tedi-ellipsis", never, { "lineClamp": { "alias": "lineClamp"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type TagType = "primary" | "secondary" | "danger";
+type TagEllipsis = "start" | "end" | false;
+declare class TagComponent {
+    readonly idGenerator: _IdGenerator;
+    readonly uniqueId: string;
+    /**
+     * Whether the tag is in loading state.
+     * When true, a spinner will be displayed inside the tag.
+     * @default false
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the tag can be closed.
+     * When true, a close button will be displayed that emits the 'closed' event when clicked.
+     * @default false
+     */
+    closable: _angular_core.InputSignal<boolean>;
+    /**
+     * The visual style of the tag.
+     * Possible values: 'primary', 'secondary', 'danger'
+     * @default "primary"
+     */
+    type: _angular_core.InputSignal<TagType>;
+    /**
+     * Which end the label truncates from when it doesn't fit. `false` (default)
+     * never truncates — the label wraps and the tag keeps its full width. `end`
+     * shows an ellipsis at the end (`Long label…`); `start` shows it at the start
+     * (`…label`), which keeps the most significant part of values like dates
+     * visible. Truncation only kicks in when the tag is width-constrained, and the
+     * full label is revealed in a tooltip on hover/focus.
+     * @default false
+     */
+    ellipsis: _angular_core.InputSignal<TagEllipsis>;
+    /**
+     * Event emitted when the close button is clicked.
+     */
+    closed: _angular_core.OutputEmitterRef<Event>;
+    classes: _angular_core.Signal<string>;
+    ellipsisPosition: _angular_core.Signal<EllipsisPosition>;
+    handleClose(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "tedi-tag", never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
+}
+
+interface DateInputTag {
+    id: string;
+    label: string;
+}
+declare class DateInputComponent implements AfterViewChecked {
+    readonly inputId: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly tags: _angular_core.InputSignal<readonly DateInputTag[]>;
+    readonly mode: _angular_core.InputSignal<DateFieldMode>;
+    /**
+     * Multiple mode: when `true` (default) the tags wrap to multiple rows and the
+     * field grows in height. When `false` the tags stay on a single row and the
+     * overflow collapses into a "+N" counter tag.
+     */
+    readonly multiRow: _angular_core.InputSignal<boolean>;
+    /** Which end the tag labels truncate from when they don't fit (`false` = no truncation). */
+    readonly ellipsis: _angular_core.InputSignal<TagEllipsis>;
+    /** Whether the tags show a remove (close) button. */
+    readonly removable: _angular_core.InputSignal<boolean>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly readOnly: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly iconActive: _angular_core.InputSignal<boolean>;
+    readonly iconDisabled: _angular_core.InputSignal<boolean>;
+    readonly useNativePicker: _angular_core.InputSignal<boolean>;
+    readonly nativeIsoValue: _angular_core.InputSignal<string>;
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    readonly inputChange: _angular_core.OutputEmitterRef<string>;
+    readonly iconClick: _angular_core.OutputEmitterRef<void>;
+    readonly tagRemove: _angular_core.OutputEmitterRef<string>;
+    readonly clear: _angular_core.OutputEmitterRef<void>;
+    private readonly translationService;
+    private readonly ngZone;
+    private readonly inputElement;
+    private readonly fieldElement;
+    private readonly tagElements;
+    /** Number of tags that fit on a single row; `null` until measured. */
+    readonly visibleTagsCount: _angular_core.WritableSignal<number | null>;
+    constructor();
+    ngAfterViewChecked(): void;
+    onResize(): void;
+    readonly hasTags: _angular_core.Signal<boolean>;
+    readonly visibleTags: _angular_core.Signal<readonly DateInputTag[]>;
+    readonly hiddenTagsCount: _angular_core.Signal<number>;
+    readonly inputType: _angular_core.Signal<"date" | "text">;
+    readonly inputValue: _angular_core.Signal<string>;
+    readonly showClear: _angular_core.Signal<boolean>;
+    readonly iconAriaLabel: _angular_core.Signal<string>;
+    readonly clearAriaLabel: _angular_core.Signal<string>;
+    handleInput(event: Event): void;
+    handleIconClick(): void;
+    handleTagRemove(id: string): void;
+    handleClear(): void;
+    private calculateVisibleTags;
+    private getAvailableTagWidth;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateInputComponent, "tedi-date-input", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "tags": { "alias": "tags"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "multiRow": { "alias": "multiRow"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "iconActive": { "alias": "iconActive"; "required": false; "isSignal": true; }; "iconDisabled": { "alias": "iconDisabled"; "required": false; "isSignal": true; }; "useNativePicker": { "alias": "useNativePicker"; "required": false; "isSignal": true; }; "nativeIsoValue": { "alias": "nativeIsoValue"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "inputChange": "inputChange"; "iconClick": "iconClick"; "tagRemove": "tagRemove"; "clear": "clear"; }, never, never, true, never>;
+}
+
+/**
+ * Interface implemented by controls that can be used inside `tedi-form-field`.
+ * Allows the form field container to interact with the underlying control.
+ */
+interface FormFieldControl<T = unknown> {
+    /**
+     * Current value of the control.
+     */
+    value: Signal<T>;
+    /**
+     * Whether the control is disabled.
+     */
+    disabled: Signal<boolean>;
+    /** Reactive invalid state (driven by FormField) */
+    invalid: Signal<boolean>;
+    /** Called by FormField to update invalid state */
+    setInvalidState(isInvalid: boolean): void;
+    /**
+     * Optional method used by the form field clear button.
+     * If implemented, the form field can trigger clearing the value.
+     */
+    clearField?(): void;
+}
+/**
+ * Injection token used by `tedi-form-field` to obtain
+ * the associated control instance.
+ */
+declare const TEDI_FORM_FIELD_CONTROL: InjectionToken<FormFieldControl<unknown>>;
+
+type DateFieldValue = Date | Date[] | DateRange | null;
+type DateFieldFormatter = (value: DateFieldValue) => string;
+type DateFieldParser = (value: string) => DateFieldValue | undefined;
+type DayAvailabilityInput = Date[] | ((d: Date) => boolean) | undefined;
+type MonthPredicate = (month: Date) => boolean;
+type YearPredicate = (year: Date) => boolean;
+type DateFieldCalendarTrigger = "input" | "button";
+type DateFieldModalInput = boolean | "sm" | "md" | "lg" | "xl";
+type DateFieldUseNativePicker = boolean | "sm" | "md" | "lg" | "xl";
+type DateFieldSize = "default" | "small";
+declare class DateFieldComponent implements ControlValueAccessor, FormFieldControl<DateFieldValue> {
+    /**
+     * Unique ID for label association and accessibility. Bind the sibling
+     * `<label tedi-label [for]>` to the same value.
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
+    /**
+     * The selected value (two-way / `ControlValueAccessor`). Shape follows `mode`:
+     * `single` → `Date | null`, `multiple` → `Date[]`, `range` → `{ from, to }`.
+     */
+    readonly value: _angular_core.ModelSignal<DateFieldValue>;
+    /**
+     * Selection mode. `single` selects one date, `multiple` toggles dates in an
+     * array (rendered as tags), `range` builds a `{ from, to }` range across two
+     * clicks.
+     */
+    readonly mode: _angular_core.InputSignal<DateFieldMode>;
+    /**
+     * `multiple` mode tag layout. `true` (default) wraps tags across rows and
+     * grows the field height; `false` keeps a single row and collapses overflow
+     * into a "+N" counter.
+     */
+    readonly multiRow: _angular_core.InputSignal<boolean>;
+    /**
+     * Which end the `multiple`-mode tags truncate from when a label doesn't fit.
+     * `false` (default) never truncates; `end` → `05.06…`; `start` → `…06.2026`
+     * (keeps the year visible).
+     */
+    readonly tagEllipsis: _angular_core.InputSignal<TagEllipsis>;
+    /**
+     * Whether `multiple`-mode tags show a remove button. `true` (default) lets
+     * users remove a selected date by closing its tag; `false` renders them as
+     * read-only chips.
+     */
+    readonly isTagRemovable: _angular_core.InputSignal<boolean>;
+    /** Placeholder rendered in the input when there is no value. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Disables specific days via matchers (does not disable the whole field).
+     * Accepts a `Date`, `Date[]`, `{ before }`, `{ after }`, `{ from, to? }`,
+     * `{ dayOfWeek: number[] }`, or a `(date) => boolean` predicate (single or
+     * array). Named `disabledMatchers` (not `disabled`) so it doesn't clash with
+     * `FormControlDirective`'s boolean `disabled` when used with `[formControl]`.
+     */
+    readonly disabledMatchers: _angular_core.InputSignal<Matcher | Matcher[] | undefined>;
+    /** Disables the field entirely — text input, icon button, and calendar. */
+    readonly inputDisabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Blocks typing into the input but leaves the calendar interactive — useful
+     * for guided picking.
+     */
+    readonly readOnly: _angular_core.InputSignal<boolean>;
+    /**
+     * Marks the input as required (sets the native `required` attribute). In
+     * `multiple` mode it also prevents clearing the last selected date. The
+     * asterisk indicator lives on the sibling `<label tedi-label [required]>` —
+     * bind it there too, since DateField owns no label.
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /** Field size — matches the surrounding `tedi-form-field`. */
+    readonly size: _angular_core.InputSignal<DateFieldSize>;
+    /** Disables all dates before this date (inclusive boundary stays enabled). */
+    readonly minDate: _angular_core.InputSignal<Date | undefined>;
+    /** Disables all dates after this date (inclusive boundary stays enabled). */
+    readonly maxDate: _angular_core.InputSignal<Date | undefined>;
+    /** Disable all dates before today. */
+    readonly disablePast: _angular_core.InputSignal<boolean>;
+    /** Disable all dates after today. */
+    readonly disableFuture: _angular_core.InputSignal<boolean>;
+    /**
+     * Predicate `(month) => boolean` returning `true` to disable a whole month in
+     * the calendar's month navigation/grid. Leave `undefined` to disable nothing.
+     */
+    readonly shouldDisableMonth: _angular_core.InputSignal<MonthPredicate | undefined>;
+    /**
+     * Predicate `(year) => boolean` returning `true` to disable a whole year in
+     * the calendar's year navigation/grid. Leave `undefined` to disable nothing.
+     */
+    readonly shouldDisableYear: _angular_core.InputSignal<YearPredicate | undefined>;
+    /**
+     * Whitelist of selectable days — an explicit `Date[]` or a predicate
+     * `(date) => boolean`. Every other day is disabled.
+     */
+    readonly availableDays: _angular_core.InputSignal<DayAvailabilityInput>;
+    /**
+     * Blacklist of unavailable days — a `Date[]` or a predicate `(date) => boolean`.
+     * Takes precedence over `availableDays`.
+     */
+    readonly unavailableDays: _angular_core.InputSignal<DayAvailabilityInput>;
+    /**
+     * Lowest level the user can commit to. `days` shows the day grid as the final
+     * step; `months` and `years` commit at that level instead.
+     */
+    readonly selectionLevel: _angular_core.InputSignal<CalendarView>;
+    /**
+     * How the calendar header exposes month/year picking. `dropdown` shows two
+     * dropdowns; `grid` drills into a month/year grid when the header label is
+     * clicked.
+     */
+    readonly monthYearSelectType: _angular_core.InputSignal<"dropdown" | "grid">;
+    /**
+     * Month the calendar opens on when there is no value. Ignored once a value is
+     * set (the calendar anchors to the selected date).
+     */
+    readonly initialMonth: _angular_core.InputSignal<Date | undefined>;
+    /**
+     * BCP-47 locale for weekday/month names, the first day of the week, and the
+     * default `formatDate`/`parseDate` behaviour.
+     */
+    readonly localeCode: _angular_core.InputSignal<string>;
+    /**
+     * Whether to close the picker after a selection. Defaults to `true` in
+     * `single` mode and `false` in `multiple`/`range` when left `undefined`.
+     */
+    readonly closeOnSelect: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Render the trailing/leading days from the adjacent month inside the current
+     * month's grid.
+     */
+    readonly showOutsideDays: _angular_core.InputSignal<boolean>;
+    /** Render an ISO week-number column on the left of the day grid. */
+    readonly showWeekNumbers: _angular_core.InputSignal<boolean>;
+    /**
+     * Number of month grids shown side by side. Accepts a `BreakpointInput<number>`:
+     * a plain number (e.g. `2`) applies at every breakpoint; pass a per-breakpoint
+     * object (e.g. `{ xs: 1, lg: 2 }`) to narrow it on small screens.
+     */
+    readonly numberOfMonths: _angular_core.InputSignalWithTransform<BreakpointObject<number>, BreakpointInput<number>>;
+    /**
+     * Enables the calendar picker UI. When resolved to `false`, hides the icon
+     * button and disables the popover/modal — the user can only type a date.
+     * Accepts a `BreakpointInput<boolean>` for per-breakpoint behaviour.
+     */
+    readonly enableCalendar: _angular_core.InputSignalWithTransform<BreakpointObject<boolean>, BreakpointInput<boolean>>;
+    /**
+     * What opens the calendar. `button` opens it from the icon button; `input`
+     * also opens it when the text input is clicked (and blocks typing). Accepts a
+     * `BreakpointInput` for per-breakpoint behaviour.
+     */
+    readonly calendarTrigger: _angular_core.InputSignalWithTransform<BreakpointObject<DateFieldCalendarTrigger>, BreakpointInput<DateFieldCalendarTrigger>>;
+    /**
+     * Use the OS native date picker instead of the custom popover (single mode only).
+     * `true` always, `false` never, breakpoint name → native below that breakpoint
+     * (custom popover from that breakpoint up).
+     */
+    readonly useNativePicker: _angular_core.InputSignal<DateFieldUseNativePicker>;
+    /** Open the calendar in a modal: `true` always, `false` never, breakpoint name → modal below that breakpoint. */
+    readonly modal: _angular_core.InputSignal<DateFieldModalInput>;
+    /** Make the modal fullscreen: `true` always, `false` never, breakpoint name → fullscreen below that breakpoint. Only applies when the calendar actually opens as a modal. */
+    readonly fullscreen: _angular_core.InputSignal<_tedi_design_system_angular_tedi.BreakpointFlag>;
+    /**
+     * Custom formatter for the input's display string. Overrides the locale-aware
+     * default. Receives the `DateFieldValue` and returns a string.
+     */
+    readonly formatDate: _angular_core.InputSignal<DateFieldFormatter | undefined>;
+    /**
+     * Custom parser for turning typed input into a value. Overrides the
+     * locale-aware default. Receives the raw string and returns a `DateFieldValue`,
+     * or `undefined` when the input can't be parsed.
+     */
+    readonly parseDate: _angular_core.InputSignal<DateFieldParser | undefined>;
+    /** Emitted whenever the picker (popover/modal) open state changes. */
+    readonly openChange: _angular_core.OutputEmitterRef<boolean>;
+    private readonly breakpointService;
+    private readonly modalService;
+    private readonly hostEl;
+    readonly calendar: _angular_core.Signal<CalendarComponent | undefined>;
+    readonly dateInput: _angular_core.Signal<DateInputComponent>;
+    readonly currentMonth: _angular_core.WritableSignal<Date>;
+    readonly overlayOpen: _angular_core.WritableSignal<boolean>;
+    private readonly openedBy;
+    readonly overlayPositions: _angular_core.Signal<ConnectedPosition[]>;
+    private readonly cvaDisabled;
+    private readonly formInvalid;
+    private modalRef;
+    private onChange;
+    private onTouched;
+    readonly fieldDisabled: _angular_core.Signal<boolean>;
+    readonly disabled: _angular_core.Signal<boolean>;
+    readonly invalid: _angular_core.Signal<boolean>;
+    readonly resolvedDisabledMatchers: _angular_core.Signal<Matcher[]>;
+    readonly useNativePickerResolved: _angular_core.Signal<boolean>;
+    readonly useNativePickerEffective: _angular_core.Signal<boolean>;
+    readonly numberOfMonthsResolved: _angular_core.Signal<number>;
+    readonly enableCalendarResolved: _angular_core.Signal<boolean>;
+    readonly calendarTriggerResolved: _angular_core.Signal<DateFieldCalendarTrigger>;
+    readonly modalEnabled: _angular_core.Signal<boolean>;
+    readonly closeOnSelectEffective: _angular_core.Signal<boolean>;
+    readonly showCalendar: _angular_core.Signal<boolean>;
+    readonly useModal: _angular_core.Signal<boolean>;
+    readonly usePopover: _angular_core.Signal<boolean>;
+    readonly nativeIsoValue: _angular_core.Signal<string>;
+    readonly effectivePlaceholder: _angular_core.Signal<string>;
+    readonly displayValue: _angular_core.Signal<string>;
+    readonly tagsForMultipleMode: _angular_core.Signal<DateInputTag[]>;
+    readonly canClear: _angular_core.Signal<boolean>;
+    readonly inputIsTrigger: _angular_core.Signal<boolean>;
+    private initialOpenEmit;
+    constructor();
+    writeValue(value: DateFieldValue): void;
+    registerOnChange(fn: (value: DateFieldValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    setInvalidState(isInvalid: boolean): void;
+    clearField(): void;
+    handleClear(): void;
+    handleIconClick(): void;
+    private togglePicker;
+    handleInputChange(value: string): void;
+    handleTagRemove(id: string): void;
+    handleInputClick(event: Event): void;
+    handleCalendarSelect(): void;
+    handleCurrentMonthChange(month: Date): void;
+    closeOverlay(): void;
+    handleOverlayOutsideClick(event: MouseEvent): void;
+    handleOverlayAttached(): void;
+    handleOverlayKeydown(event: KeyboardEvent): void;
+    private focusIconButton;
+    private openNativePicker;
+    private openModal;
+    private handleNativeInputChange;
+    private handleSingleParseInput;
+    private parsedValueIsDisabled;
+    private commitValue;
+    private defaultFormat;
+    private deriveAnchor;
+    private resolveBreakpointInput;
+    private startOfToday;
+    private toIsoDate;
+    private queryNativeInput;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateFieldComponent, "tedi-date-field", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "multiRow": { "alias": "multiRow"; "required": false; "isSignal": true; }; "tagEllipsis": { "alias": "tagEllipsis"; "required": false; "isSignal": true; }; "isTagRemovable": { "alias": "isTagRemovable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabledMatchers": { "alias": "disabledMatchers"; "required": false; "isSignal": true; }; "inputDisabled": { "alias": "inputDisabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "disablePast": { "alias": "disablePast"; "required": false; "isSignal": true; }; "disableFuture": { "alias": "disableFuture"; "required": false; "isSignal": true; }; "shouldDisableMonth": { "alias": "shouldDisableMonth"; "required": false; "isSignal": true; }; "shouldDisableYear": { "alias": "shouldDisableYear"; "required": false; "isSignal": true; }; "availableDays": { "alias": "availableDays"; "required": false; "isSignal": true; }; "unavailableDays": { "alias": "unavailableDays"; "required": false; "isSignal": true; }; "selectionLevel": { "alias": "selectionLevel"; "required": false; "isSignal": true; }; "monthYearSelectType": { "alias": "monthYearSelectType"; "required": false; "isSignal": true; }; "initialMonth": { "alias": "initialMonth"; "required": false; "isSignal": true; }; "localeCode": { "alias": "localeCode"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "enableCalendar": { "alias": "enableCalendar"; "required": false; "isSignal": true; }; "calendarTrigger": { "alias": "calendarTrigger"; "required": false; "isSignal": true; }; "useNativePicker": { "alias": "useNativePicker"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; "formatDate": { "alias": "formatDate"; "required": false; "isSignal": true; }; "parseDate": { "alias": "parseDate"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "openChange": "openChange"; }, never, ["[tediCalendarFooter]"], true, never>;
+}
+
 declare class DatePickerCalendarGridComponent {
     private readonly gridElement;
     /** Grid element unique ID for ARIA */
@@ -3994,8 +5466,20 @@ declare class DatePickerComponent implements OnInit, ControlValueAccessor {
     readonly selected: _angular_core.ModelSignal<Date | null>;
     /** Currently shown month */
     readonly month: _angular_core.ModelSignal<Date>;
-    /** Disabled dates that cannot be selected. */
+    /**
+     * Disabled dates that cannot be selected.
+     *
+     * @deprecated Use `disabledMatchers` instead. This input shares the public
+     * binding name `disabled` with `FormControlDirective`, so binding `[disabled]`
+     * on a date-picker that also uses `[formControl]` raises a template type error
+     * (`Type 'DatePickerMatcher[]' is not assignable to type 'boolean'`).
+     */
     readonly disabled: _angular_core.InputSignal<DatePickerMatcher | DatePickerMatcher[] | null>;
+    /**
+     * Disabled dates that cannot be selected (`Date`, `Date[]`, `{ before }`,
+     * `{ after }`, `{ from, to? }`, or a `(date) => boolean` predicate).
+     */
+    readonly disabledMatchers: _angular_core.InputSignal<DatePickerMatcher | DatePickerMatcher[] | null>;
     /** Shows or hides the calendar navigation controls (previous/next month buttons). */
     readonly showNavigation: _angular_core.InputSignal<boolean>;
     /** Month selector mode: none | label | grid | dropdown */
@@ -4095,7 +5579,7 @@ declare class DatePickerComponent implements OnInit, ControlValueAccessor {
      */
     private findNextEnabledDate;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "tedi-date-picker", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "month": { "alias": "month"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showNavigation": { "alias": "showNavigation"; "required": false; "isSignal": true; }; "monthMode": { "alias": "monthMode"; "required": false; "isSignal": true; }; "yearMode": { "alias": "yearMode"; "required": false; "isSignal": true; }; "startYear": { "alias": "startYear"; "required": false; "isSignal": true; }; "endYear": { "alias": "endYear"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "inputPlaceholder": { "alias": "inputPlaceholder"; "required": false; "isSignal": true; }; "inputState": { "alias": "inputState"; "required": false; "isSignal": true; }; "inputSize": { "alias": "inputSize"; "required": false; "isSignal": true; }; "inputDisabled": { "alias": "inputDisabled"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "month": "monthChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "tedi-date-picker", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "month": { "alias": "month"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledMatchers": { "alias": "disabledMatchers"; "required": false; "isSignal": true; }; "showNavigation": { "alias": "showNavigation"; "required": false; "isSignal": true; }; "monthMode": { "alias": "monthMode"; "required": false; "isSignal": true; }; "yearMode": { "alias": "yearMode"; "required": false; "isSignal": true; }; "startYear": { "alias": "startYear"; "required": false; "isSignal": true; }; "endYear": { "alias": "endYear"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "inputPlaceholder": { "alias": "inputPlaceholder"; "required": false; "isSignal": true; }; "inputState": { "alias": "inputState"; "required": false; "isSignal": true; }; "inputSize": { "alias": "inputSize"; "required": false; "isSignal": true; }; "inputDisabled": { "alias": "inputDisabled"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "month": "monthChange"; }, never, never, true, never>;
 }
 
 type FeedbackTextType = "hint" | "valid" | "error";
@@ -4297,35 +5781,6 @@ declare class SelectValueTemplateDirective<T = unknown> {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SelectValueTemplateDirective<any>, "[tediSelectValue]", never, {}, {}, never, never, true, never>;
 }
 
-/**
- * Interface implemented by controls that can be used inside `tedi-form-field`.
- * Allows the form field container to interact with the underlying control.
- */
-interface FormFieldControl<T = unknown> {
-    /**
-     * Current value of the control.
-     */
-    value: Signal<T>;
-    /**
-     * Whether the control is disabled.
-     */
-    disabled: Signal<boolean>;
-    /** Reactive invalid state (driven by FormField) */
-    invalid: Signal<boolean>;
-    /** Called by FormField to update invalid state */
-    setInvalidState(isInvalid: boolean): void;
-    /**
-     * Optional method used by the form field clear button.
-     * If implemented, the form field can trigger clearing the value.
-     */
-    clearField?(): void;
-}
-/**
- * Injection token used by `tedi-form-field` to obtain
- * the associated control instance.
- */
-declare const TEDI_FORM_FIELD_CONTROL: InjectionToken<FormFieldControl<unknown>>;
-
 type InputSize = "small" | "large" | "default";
 type InputState = "valid" | "error" | "default";
 type ValidationState = "invalid" | "valid" | "neutral";
@@ -4379,7 +5834,7 @@ declare class FormFieldComponent implements AfterContentInit {
     }>;
     clear(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormFieldComponent, "tedi-form-field", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; }, {}, ["control", "ngControl", "feedback"], ["label[tedi-label]", "input[tedi-text-field], tedi-time-field", "tedi-feedback-text"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormFieldComponent, "tedi-form-field", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; }, {}, ["control", "ngControl", "feedback"], ["label[tedi-label]", "input[tedi-text-field], tedi-time-field, tedi-date-field", "tedi-feedback-text", "*"], true, never>;
 }
 
 type SelectInputSize = Exclude<InputSize, "large">;
@@ -4446,7 +5901,7 @@ declare class SelectComponent<T = unknown> implements AfterContentChecked, After
      * inward instead of overflowing.
      * @default "start"
      */
-    dropdownAlign: _angular_core.InputSignal<"end" | "start">;
+    dropdownAlign: _angular_core.InputSignal<"start" | "end">;
     /**
      * Configuration for the feedback text displayed below the select.
      */
@@ -4500,6 +5955,12 @@ declare class SelectComponent<T = unknown> implements AfterContentChecked, After
      * @default false
      */
     multiRow: _angular_core.InputSignal<boolean>;
+    /**
+     * Which end a selected tag's label truncates from when it doesn't fit.
+     * `false` (default) never truncates; `end` → `label…`; `start` → `…label`.
+     * @default false
+     */
+    tagEllipsis: _angular_core.InputSignal<TagEllipsis>;
     /**
      * Function used to compare option values for equality.
      * Used to determine which options are selected.
@@ -4656,7 +6117,7 @@ declare class SelectComponent<T = unknown> implements AfterContentChecked, After
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent<any>, "tedi-select", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "dropdownWidthRef": { "alias": "dropdownWidthRef"; "required": false; "isSignal": true; }; "dropdownAlign": { "alias": "dropdownAlign"; "required": false; "isSignal": true; }; "feedbackText": { "alias": "feedbackText"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; "isSignal": true; }; "selectableGroups": { "alias": "selectableGroups"; "required": false; "isSignal": true; }; "isTagRemovable": { "alias": "isTagRemovable"; "required": false; "isSignal": true; }; "multiRow": { "alias": "multiRow"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "disabledKey": { "alias": "disabledKey"; "required": false; "isSignal": true; }; "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; "isSignal": true; }; "maxDropdownHeight": { "alias": "maxDropdownHeight"; "required": false; "isSignal": true; }; "dropdownType": { "alias": "dropdownType"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchFn": { "alias": "searchFn"; "required": false; "isSignal": true; }; "clearSearchOnSelect": { "alias": "clearSearchOnSelect"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; }, ["optionTemplate", "valueTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent<any>, "tedi-select", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "dropdownWidthRef": { "alias": "dropdownWidthRef"; "required": false; "isSignal": true; }; "dropdownAlign": { "alias": "dropdownAlign"; "required": false; "isSignal": true; }; "feedbackText": { "alias": "feedbackText"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; "isSignal": true; }; "selectableGroups": { "alias": "selectableGroups"; "required": false; "isSignal": true; }; "isTagRemovable": { "alias": "isTagRemovable"; "required": false; "isSignal": true; }; "multiRow": { "alias": "multiRow"; "required": false; "isSignal": true; }; "tagEllipsis": { "alias": "tagEllipsis"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "disabledKey": { "alias": "disabledKey"; "required": false; "isSignal": true; }; "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; "isSignal": true; }; "maxDropdownHeight": { "alias": "maxDropdownHeight"; "required": false; "isSignal": true; }; "dropdownType": { "alias": "dropdownType"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchFn": { "alias": "searchFn"; "required": false; "isSignal": true; }; "clearSearchOnSelect": { "alias": "clearSearchOnSelect"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; "cleared": "cleared"; }, ["optionTemplate", "valueTemplate"], never, true, never>;
 }
 
 type ToggleVariant = "primary" | "colored";
@@ -4737,6 +6198,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;
@@ -4952,7 +6414,7 @@ declare class TimeFieldComponent implements ControlValueAccessor, FormFieldContr
     readonly hasPicker: _angular_core.Signal<boolean>;
     readonly hasNativePicker: _angular_core.Signal<boolean>;
     readonly customPickerVariant: _angular_core.Signal<TimePickerVariant>;
-    readonly inputType: _angular_core.Signal<"time" | "text">;
+    readonly inputType: _angular_core.Signal<"text" | "time">;
     readonly inputIsTrigger: _angular_core.Signal<boolean>;
     readonly useMobileModal: _angular_core.Signal<boolean>;
     readonly usePopover: _angular_core.Signal<boolean>;
@@ -4983,48 +6445,216 @@ declare class TimeFieldComponent implements ControlValueAccessor, FormFieldContr
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimeFieldComponent, "tedi-time-field", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "pickerVariant": { "alias": "pickerVariant"; "required": false; "isSignal": true; }; "useNativePicker": { "alias": "useNativePicker"; "required": false; "isSignal": true; }; "pickerTrigger": { "alias": "pickerTrigger"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "timeSlots": { "alias": "timeSlots"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "showSlotIndicator": { "alias": "showSlotIndicator"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
-type EmptyStateType = "separate" | "attached" | "inside";
-type EmptyStateSize = "default" | "small";
+type ProgressBarSize = "default" | "small";
+type ProgressBarLabelPosition = "top" | "horizontal";
+type ProgressBarValuePosition = "horizontal" | "bottom";
 /**
- * Communicates that there is nothing to display — empty search results, an
- * unpopulated list, a freshly-created workspace — and optionally guides the
- * user toward the next step via action buttons or a link.
- *
- * Description is projected via `<ng-content>`. Actions are projected via
- * `<ng-content select="[tedi-empty-state-actions]">`.
+ * The subset of inputs that can be overridden per breakpoint via the
+ * `xs`–`xxl` inputs. Every field is optional — only the ones you set override
+ * the base value at that breakpoint.
  */
-declare class EmptyStateComponent {
+type ProgressBarInputs = {
+    /** Overrides {@link ProgressBarComponent.size}. */
+    size?: ProgressBarSize;
+    /** Overrides {@link ProgressBarComponent.labelPosition}. */
+    labelPosition?: ProgressBarLabelPosition;
+    /** Overrides {@link ProgressBarComponent.showValue}. */
+    showValue?: boolean;
+    /** Overrides {@link ProgressBarComponent.valuePosition}. */
+    valuePosition?: ProgressBarValuePosition;
+    /** Overrides {@link ProgressBarComponent.valueLabel}. */
+    valueLabel?: string;
+};
+declare class ProgressBarComponent {
     /**
-     * Container variant — matches the Figma "Types" section.
-     * - `'separate'` (default) — full border + radius, stands on its own.
-     * - `'attached'` — top border omitted so the block sits flush beneath a
-     *   preceding card or table (same width + same bottom-radius).
-     * - `'inside'` — no border, no radius; intended to be placed inside another
-     *   container such as a `<tedi-card>` or `<tedi-table>`.
-     * @default separate
+     * Optional id for the underlying `<progress>` element. Useful when an
+     * external `<label for=…>` should bind to it.
      */
-    readonly type: _angular_core.InputSignal<EmptyStateType>;
+    progressId: _angular_core.InputSignal<string | undefined>;
     /**
-     * Padding scale. `default` = 24px, `small` = 16px.
-     * @default default
+     * Progress value between 0 and 100. Values are clamped.
+     * @default 0
      */
-    readonly size: _angular_core.InputSignal<EmptyStateSize>;
+    value: _angular_core.InputSignalWithTransform<number, number>;
     /**
-     * Material icon name rendered above the text block. Pass `null` to hide.
-     * @default spa
+     * Size of the bar. `small` renders a 4px bar height instead of the
+     * default 8px.
+     * @default default
      */
-    readonly icon: _angular_core.InputSignal<string | null>;
+    size: _angular_core.InputSignal<ProgressBarSize>;
     /**
-     * Color of the icon. Defaults to brand so the empty state reads as a
-     * "fresh canvas" cue rather than a destructive state.
-     * @default brand
+     * Optional title rendered above (default) or to the left of the bar.
      */
-    readonly iconColor: _angular_core.InputSignal<IconColor>;
+    label: _angular_core.InputSignal<string | undefined>;
     /**
-     * Size of the icon, in pixels.
-     * @default 36
+     * Where to place the label relative to the bar.
+     * Has no effect when `label` is not set.
+     * @default top
      */
-    readonly iconSize: _angular_core.InputSignal<IconSize>;
+    labelPosition: _angular_core.InputSignal<ProgressBarLabelPosition>;
+    /**
+     * Render a red `*` after the label to indicate a required field.
+     * Has no effect when `label` is not set.
+     * @default false
+     */
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Show or hide the percentage value.
+     * @default true
+     */
+    showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Where to place the percentage value.
+     * - `horizontal` – next to the bar.
+     * - `bottom` – on the hint row beneath the bar.
+     * @default horizontal
+     */
+    valuePosition: _angular_core.InputSignal<ProgressBarValuePosition>;
+    /**
+     * Override the rendered value text. Defaults to `"{value}%"`.
+     *
+     * Use this when the progress represents something other than a percentage —
+     * e.g. `value=20` with `valueLabel="1/5"` shows the bar at 20% but renders
+     * the label as "1/5". `value` still drives the bar fill; the label is also
+     * exposed to assistive technology via `aria-valuetext`.
+     */
+    valueLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Accessible label for the progress bar. Falls back to `label()` when omitted.
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Overrides applied from the `xs` breakpoint (≥ 0px) and up. */
+    xs: _angular_core.InputSignal<ProgressBarInputs | undefined>;
+    /** Overrides applied from the `sm` breakpoint (≥ 576px) and up. */
+    sm: _angular_core.InputSignal<ProgressBarInputs | undefined>;
+    /** Overrides applied from the `md` breakpoint (≥ 768px) and up. */
+    md: _angular_core.InputSignal<ProgressBarInputs | undefined>;
+    /** Overrides applied from the `lg` breakpoint (≥ 992px) and up. */
+    lg: _angular_core.InputSignal<ProgressBarInputs | undefined>;
+    /** Overrides applied from the `xl` breakpoint (≥ 1200px) and up. */
+    xl: _angular_core.InputSignal<ProgressBarInputs | undefined>;
+    /** Overrides applied from the `xxl` breakpoint (≥ 1400px) and up. */
+    xxl: _angular_core.InputSignal<ProgressBarInputs | undefined>;
+    private breakpointService;
+    protected currentProps: _angular_core.Signal<ProgressBarInputs>;
+    protected formattedValue: _angular_core.Signal<string>;
+    protected accessibleLabel: _angular_core.Signal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressBarComponent, "tedi-progress-bar", never, { "progressId": { "alias": "progressId"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valuePosition": { "alias": "valuePosition"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "valueLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "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, ["tedi-feedback-text"], true, never>;
+}
+
+type AttachmentDirection = "horizontal" | "vertical";
+declare class AttachmentComponent {
+    protected projectedProgress: _angular_core.Signal<ProgressBarComponent | undefined>;
+    private breakpointService;
+    /**
+     * File name to display.
+     */
+    name: _angular_core.InputSignal<string>;
+    /**
+     * Pre-formatted file size string (e.g. `"0.9 MB"`). Consumer formats the
+     * value; the component renders it as-is to the right of the name.
+     */
+    fileSize: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Leading file-type icon shown before the file name. Pass a Material Symbol
+     * name (e.g. `"description"`, `"picture_as_pdf"`, `"imagesmode"`).
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Error feedback message. When set, the attachment switches to its error
+     * visual: red card background, error icon next to the name, and the
+     * message rendered as feedback text below the card. Implies `invalid`.
+     */
+    error: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Mark the attachment as invalid. Switches to the error visual (red card
+     * background, error icon next to the name) but does **not** render any
+     * feedback text below the card. Use when the validation message is
+     * shown elsewhere (e.g. as an aggregate error on the parent control).
+     * Implied automatically when `error` is set.
+     * @default false
+     */
+    invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Content layout direction.
+     * - `horizontal` – name/size and progress sit on a single row beside the
+     *   actions (the default desktop layout).
+     * - `vertical` – name, size and progress stack in a column with the actions
+     *   pinned top-right. Useful in narrow containers (mobile, sidebars).
+     *
+     * When `undefined`, the direction is auto-derived from the viewport: it
+     * switches to `vertical` below the `verticalBelow` breakpoint.
+     */
+    direction: _angular_core.InputSignal<AttachmentDirection | undefined>;
+    /**
+     * Viewport breakpoint below which the layout auto-switches to `vertical`
+     * when `direction` is not set explicitly.
+     * @default "sm"
+     */
+    verticalBelow: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl" | "xxl">;
+    private _autoVertical;
+    protected isVertical: _angular_core.Signal<boolean>;
+    protected hasErrorVisual: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AttachmentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AttachmentComponent, "tedi-attachment", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "fileSize": { "alias": "fileSize"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "verticalBelow": { "alias": "verticalBelow"; "required": false; "isSignal": true; }; }, {}, ["projectedProgress"], ["tedi-progress-bar", "tedi-attachment-actions"], true, never>;
+}
+
+declare class AttachmentActionsComponent {
+    /**
+     * Adds a 12px gap between the actions and 8px inline padding to the group.
+     * Enable for labeled (text) buttons, whose neutral variant has no horizontal
+     * padding of its own and would otherwise touch the card edge. Leave off for
+     * icon-only buttons, which sit flush.
+     * @default false
+     */
+    padded: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AttachmentActionsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AttachmentActionsComponent, "tedi-attachment-actions", never, { "padded": { "alias": "padded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type EmptyStateType = "separate" | "attached" | "inside";
+type EmptyStateSize = "default" | "small";
+/**
+ * Communicates that there is nothing to display — empty search results, an
+ * unpopulated list, a freshly-created workspace — and optionally guides the
+ * user toward the next step via action buttons or a link.
+ *
+ * Description is projected via `<ng-content>`. Actions are projected via
+ * `<ng-content select="[tedi-empty-state-actions]">`.
+ */
+declare class EmptyStateComponent {
+    /**
+     * Container variant — matches the Figma "Types" section.
+     * - `'separate'` (default) — full border + radius, stands on its own.
+     * - `'attached'` — top border omitted so the block sits flush beneath a
+     *   preceding card or table (same width + same bottom-radius).
+     * - `'inside'` — no border, no radius; intended to be placed inside another
+     *   container such as a `<tedi-card>` or `<tedi-table>`.
+     * @default separate
+     */
+    readonly type: _angular_core.InputSignal<EmptyStateType>;
+    /**
+     * Padding scale. `default` = 24px, `small` = 16px.
+     * @default default
+     */
+    readonly size: _angular_core.InputSignal<EmptyStateSize>;
+    /**
+     * Material icon name rendered above the text block. Pass `null` to hide.
+     * @default spa
+     */
+    readonly icon: _angular_core.InputSignal<string | null>;
+    /**
+     * Color of the icon. Defaults to brand so the empty state reads as a
+     * "fresh canvas" cue rather than a destructive state.
+     * @default brand
+     */
+    readonly iconColor: _angular_core.InputSignal<IconColor>;
+    /**
+     * Size of the icon, in pixels.
+     * @default 36
+     */
+    readonly iconSize: _angular_core.InputSignal<IconSize>;
     /**
      * Optional heading rendered above the description — appears as an `<h3>` in
      * brand-primary text color.
@@ -5035,25 +6665,6 @@ declare class EmptyStateComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyStateComponent, "tedi-empty-state", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[tedi-empty-state-actions]"], true, never>;
 }
 
-type EllipsisPosition = "start" | "end";
-declare class EllipsisComponent {
-    /** Maximum number of lines before truncating. End (multi-line) only. */
-    readonly lineClamp: _angular_core.InputSignal<number>;
-    /** Whether truncated content shows a hover/focus tooltip with full text. */
-    readonly tooltip: _angular_core.InputSignal<boolean>;
-    /** Ellipsis position. 'start' = leading, single-line. 'end' = trailing, multi-line. */
-    readonly position: _angular_core.InputSignal<EllipsisPosition>;
-    readonly content: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
-    readonly isEllipsed: _angular_core.WritableSignal<boolean>;
-    readonly fullText: _angular_core.WritableSignal<string>;
-    constructor();
-    readonly contentClasses: _angular_core.Signal<string>;
-    readonly clampStyle: _angular_core.Signal<string | null>;
-    private updateEllipsedState;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EllipsisComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EllipsisComponent, "tedi-ellipsis", never, { "lineClamp": { "alias": "lineClamp"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
 type ColWidth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type JustifySelf = "start" | "end" | "center" | "stretch";
 type AlignSelf = "start" | "end" | "center" | "stretch";
@@ -5230,28 +6841,55 @@ declare class SeparatorComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SeparatorComponent, "tedi-separator", never, { "axis": { "alias": "axis"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dotSize": { "alias": "dotSize"; "required": false; "isSignal": true; }; "dotFilled": { "alias": "dotFilled"; "required": false; "isSignal": true; }; "thickness": { "alias": "thickness"; "required": false; "isSignal": true; }; "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Marks content that is pinned to the bottom of a timeline item's timings
+ * column on desktop and rendered after the item content on mobile.
+ *
+ * Usage: `<p *tediTimelineTimingsBottom>Muudetud 08.02.2024</p>`
+ */
+declare class TimelineTimingsBottomDirective {
+    templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimelineTimingsBottomDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TimelineTimingsBottomDirective, "[tediTimelineTimingsBottom]", never, {}, {}, never, never, true, never>;
+}
+
 type TimelineItemState = "current" | "past" | "future";
 declare class TimelineItemComponent implements OnInit, OnDestroy {
     /** Item timings */
     timings: _angular_core.InputSignal<string[]>;
     timeline: TimelineComponent | null;
+    protected isMobile: _angular_core.Signal<boolean>;
+    protected timingsBottom: _angular_core.Signal<TimelineTimingsBottomDirective | undefined>;
     ngOnInit(): void;
     ngOnDestroy(): void;
     isLast: _angular_core.Signal<boolean>;
     state: _angular_core.Signal<TimelineItemState>;
     color: _angular_core.Signal<SeparatorColor>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimelineItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineItemComponent, "tedi-timeline-item", never, { "timings": { "alias": "timings"; "required": false; "isSignal": true; }; }, {}, never, ["tedi-timeline-title", "tedi-timeline-description", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineItemComponent, "tedi-timeline-item", never, { "timings": { "alias": "timings"; "required": false; "isSignal": true; }; }, {}, ["timingsBottom"], ["tedi-timeline-title", "tedi-timeline-description", "*"], true, never>;
 }
 
+type TimelineVariant = "default" | "card";
+type TimelineCardPadding = CardPaddingNumber;
 declare class TimelineComponent {
     /** Index of active item */
     activeIndex: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Visual variant. "card" wraps the timeline in the borders and paddings
+     * of a card.
+     * @default default
+     */
+    variant: _angular_core.InputSignal<TimelineVariant>;
+    /**
+     * Item padding in rems for the card variant.
+     * @default 1
+     */
+    cardPadding: _angular_core.InputSignal<CardPaddingNumber | undefined>;
     items: _angular_core.WritableSignal<TimelineItemComponent[]>;
     registerItem(item: TimelineItemComponent): void;
     unregisterItem(item: TimelineItemComponent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimelineComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineComponent, "tedi-timeline", never, { "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineComponent, "tedi-timeline", never, { "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "cardPadding": { "alias": "cardPadding"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class TimelineDescriptionComponent {
@@ -5341,7 +6979,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 {
@@ -5349,9 +6987,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 = {
@@ -5368,7 +7037,7 @@ declare class HeaderLanguageComponent {
      * This is event emitter for changing language
      */
     languageChange: _angular_core.OutputEmitterRef<Language>;
-    popover?: PopoverComponent;
+    readonly popover: _angular_core.Signal<PopoverComponent | undefined>;
     translationService: TediTranslationService;
     languageKeys: _angular_core.Signal<Language[]>;
     handleChangeLang(lang: Language): void;
@@ -5376,82 +7045,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 {
@@ -5735,9 +7829,132 @@ interface UsePaginationArgs {
  */
 declare function usePagination({ page, pageCount, boundaryCount, siblingCount, }: UsePaginationArgs): PaginationItem[];
 
+/**
+ * Root of the Tabs compound component. Wraps `tedi-tabs-list` and
+ * `tedi-tabs-content` elements and owns the active-tab state, which the list,
+ * triggers and panels read by injecting this component.
+ *
+ * Use `defaultValue` for uncontrolled usage, or bind `[(value)]`
+ * (or `[value]` + `(valueChange)`) for controlled usage.
+ */
+declare class TabsComponent {
+    /** Controlled active tab id. Use with `(valueChange)` or `[(value)]`. */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    /** Initial active tab id for uncontrolled usage. */
+    readonly defaultValue: _angular_core.InputSignal<string>;
+    /** Emitted when the active tab changes. */
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /** Currently active tab id, read by the list, triggers and panels. */
+    readonly activeTab: _angular_core.WritableSignal<string>;
+    private initialized;
+    constructor();
+    /**
+     * Requests activation of a tab. In uncontrolled mode the active tab updates
+     * immediately; in controlled mode only `valueChange` fires and the consumer
+     * is expected to update the bound value.
+     */
+    select(id: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "tedi-tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * A single tab button inside `tedi-tabs-list`. Applied to a native `<button>`
+ * so it inherits native focus, disabled and activation behaviour.
+ */
+declare class TabsTriggerComponent {
+    private readonly tabs;
+    private readonly host;
+    /**
+     * Unique identifier for this tab. Used as the element id and to link to the
+     * corresponding `tedi-tabs-content` panel (`aria-controls="{id}-panel"`).
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /** Icon displayed before the label. */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /** Whether the tab is disabled. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly isSelected: _angular_core.Signal<boolean>;
+    /** Plain-text label, used as the accessible name of the overflow dropdown item. */
+    get label(): string;
+    get contentNodes(): Node[];
+    /** Scrolls this trigger into view within a horizontally scrolling tablist. */
+    scrollIntoView(): void;
+    handleClick(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsTriggerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsTriggerComponent, "button[tedi-tabs-trigger]", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type TabsOverflowMode = "dropdown" | "scroll";
+interface OverflowItem {
+    id: string;
+    disabled: boolean;
+    trigger: TabsTriggerComponent;
+}
+/**
+ * Container for the tab triggers. Renders the `role="tablist"` element and
+ * handles tab overflow either through a "More" dropdown or horizontal scroll.
+ */
+declare class TabsListComponent implements AfterViewInit, OnDestroy {
+    private readonly tabs;
+    private readonly platformId;
+    private readonly host;
+    private readonly injector;
+    /** Accessible label for the tablist. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Id of the element labelling the tablist. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /**
+     * How to handle tab overflow when tabs do not fit in the available space.
+     * - `dropdown`: overflowing tabs move into a "More" dropdown (default)
+     * - `scroll`: enables horizontal scrolling with a fade indicator
+     */
+    readonly overflowMode: _angular_core.InputSignal<TabsOverflowMode>;
+    /** Label for the overflow dropdown trigger. Defaults to the `more` translation. */
+    readonly dropdownLabel: _angular_core.InputSignal<string | undefined>;
+    private readonly listRef;
+    private readonly triggers;
+    private readonly isOverflowing;
+    private resizeObserver?;
+    readonly canScrollStart: _angular_core.WritableSignal<boolean>;
+    readonly canScrollEnd: _angular_core.WritableSignal<boolean>;
+    readonly showMore: _angular_core.Signal<boolean>;
+    readonly dropdownItems: _angular_core.Signal<OverflowItem[]>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    selectTab(id: string): void;
+    updateScrollFade(): void;
+    private checkOverflow;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsListComponent, "tedi-tabs-list", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "overflowMode": { "alias": "overflowMode"; "required": false; "isSignal": true; }; "dropdownLabel": { "alias": "dropdownLabel"; "required": false; "isSignal": true; }; }, {}, ["triggers"], ["*"], true, never>;
+}
+
+/**
+ * A tab panel. When `id` matches a trigger, the panel is only shown while that
+ * tab is active. When `id` is omitted the content is always rendered (useful
+ * for router outlets).
+ */
+declare class TabsContentComponent {
+    private readonly tabs;
+    /** Unique identifier matching the corresponding trigger id. */
+    readonly id: _angular_core.InputSignal<string | undefined>;
+    readonly isActive: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsContentComponent, "tedi-tabs-content", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 declare class DropdownItemValueLabelComponent {
+    /**
+     * Whether the label clips overflowing content for text ellipsis. Set `false`
+     * when the label holds content with decorations that intentionally sit
+     * outside the line box (e.g. status indicator), so they are not cut off.
+     * @default true
+     */
+    readonly clipContent: _angular_core.InputSignal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItemValueLabelComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemValueLabelComponent, "tedi-dropdown-item-value-label", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemValueLabelComponent, "tedi-dropdown-item-value-label", never, { "clipContent": { "alias": "clipContent"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class DropdownItemValueMetaComponent {
@@ -5879,6 +8096,7 @@ declare class ModalHeaderComponent {
 
 declare class TooltipTriggerComponent implements AfterContentChecked {
     readonly host: ElementRef<HTMLElement>;
+    readonly overlayOrigin: CdkOverlayOrigin;
     private renderer;
     readonly tooltip: TooltipComponent;
     private interactiveElement;
@@ -5893,18 +8111,28 @@ declare class TooltipTriggerComponent implements AfterContentChecked {
     onFocusOut(): void;
     onEscape(): void;
     ngAfterContentChecked(): void;
+    /**
+     * The element that actually receives focus and ARIA semantics. When the
+     * projected child is itself focusable (a `<button>`/`<a href>`) it is used
+     * directly. When it is a non-focusable wrapper that renders its own
+     * interactive element (e.g. a `tedi-dropdown` projecting a trigger button),
+     * the first focusable descendant is used instead — otherwise focus and the
+     * tooltip description would land on the non-interactive wrapper.
+     */
+    private resolveInteractiveElement;
+    private isFocusable;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipTriggerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipTriggerComponent, "tedi-tooltip-trigger", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipTriggerComponent, "tedi-tooltip-trigger", never, {}, {}, never, ["*"], true, [{ directive: typeof _angular_cdk_overlay.CdkOverlayOrigin; inputs: {}; outputs: {}; }]>;
 }
 
-type TooltipPosition = `${NgxFloatUiPlacements}`;
+type TooltipPosition = OverlayPosition;
 type TooltipOpenWith = "hover" | "click" | "both";
 declare class TooltipComponent implements AfterContentChecked {
     /**
      * The position of the tooltip relative to the trigger element.
      * @default top
      */
-    readonly position: _angular_core.InputSignal<"left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "bottom-start" | "left-start" | "right-start" | "top-end" | "bottom-end" | "left-end" | "right-end">;
+    readonly position: _angular_core.InputSignal<OverlayPosition>;
     /**
      * Should position to opposite direction when overflowing screen?
      * @default true
@@ -5915,12 +8143,6 @@ declare class TooltipComponent implements AfterContentChecked {
      * @default both
      */
     readonly openWith: _angular_core.InputSignal<TooltipOpenWith>;
-    /**
-     * Append floating element to given selector.
-     * Use 'body' to append at the end of DOM or empty string to append next to trigger element.
-     * @default body
-     */
-    readonly appendTo: _angular_core.InputSignal<string>;
     /** Delay time (in ms) for closing tooltip when not hovering trigger or content.
      * @default 100
      */
@@ -5929,19 +8151,29 @@ declare class TooltipComponent implements AfterContentChecked {
     readonly tooltipTrigger: _angular_core.Signal<TooltipTriggerComponent>;
     /** Tooltip content component */
     readonly tooltipContent: _angular_core.Signal<ElementRef<any>>;
+    private readonly connectedOverlay;
     readonly descriptionId: string;
     readonly contentText: _angular_core.WritableSignal<string>;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
-    isContentHovered: _angular_core.WritableSignal<boolean>;
-    floatUiDisplay: _angular_core.WritableSignal<"inline" | "block">;
-    floatUiComponent: _angular_core.Signal<NgxFloatUiContentComponent>;
+    readonly currentPlacement: _angular_core.WritableSignal<OverlaySide>;
+    readonly arrowLeft: _angular_core.WritableSignal<number | null>;
+    readonly arrowTop: _angular_core.WritableSignal<number | null>;
+    readonly overlayPositions: _angular_core.Signal<_angular_cdk_overlay.ConnectedPosition[]>;
+    readonly overlayOrigin: _angular_core.Signal<_angular_cdk_overlay.CdkOverlayOrigin>;
+    readonly isContentHovered: _angular_core.WritableSignal<boolean>;
     hideTimeout?: ReturnType<typeof setTimeout>;
+    private readonly horizontalPush;
+    constructor();
     showTooltip(): void;
     hideTooltip(): void;
     toggleTooltip(): void;
+    onPositionChange(change: ConnectedOverlayPositionChange): void;
+    onOverlayAttach(): void;
+    private updateArrowPosition;
     ngAfterContentChecked(): void;
+    private syncContentText;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "tedi-tooltip", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "preventOverflow": { "alias": "preventOverflow"; "required": false; "isSignal": true; }; "openWith": { "alias": "openWith"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "timeoutDelay": { "alias": "timeoutDelay"; "required": false; "isSignal": true; }; }, {}, ["tooltipTrigger", "tooltipContent"], ["tedi-tooltip-trigger", "tedi-tooltip-content"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "tedi-tooltip", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "preventOverflow": { "alias": "preventOverflow"; "required": false; "isSignal": true; }; "openWith": { "alias": "openWith"; "required": false; "isSignal": true; }; "timeoutDelay": { "alias": "timeoutDelay"; "required": false; "isSignal": true; }; }, {}, ["tooltipTrigger", "tooltipContent"], ["tedi-tooltip-trigger", "tedi-tooltip-content"], true, never>;
 }
 
 type TooltipWidth = "none" | "small" | "medium" | "large";
@@ -5983,50 +8215,6 @@ declare class PopoverContentComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopoverContentComponent, "tedi-popover-content", never, { "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-type TagType = "primary" | "secondary" | "danger";
-type TagEllipsis = "start" | "end" | false;
-declare class TagComponent {
-    readonly idGenerator: _IdGenerator;
-    readonly uniqueId: string;
-    /**
-     * Whether the tag is in loading state.
-     * When true, a spinner will be displayed inside the tag.
-     * @default false
-     */
-    loading: _angular_core.InputSignal<boolean>;
-    /**
-     * Whether the tag can be closed.
-     * When true, a close button will be displayed that emits the 'closed' event when clicked.
-     * @default false
-     */
-    closable: _angular_core.InputSignal<boolean>;
-    /**
-     * The visual style of the tag.
-     * Possible values: 'primary', 'secondary', 'danger'
-     * @default "primary"
-     */
-    type: _angular_core.InputSignal<TagType>;
-    /**
-     * Which end the label truncates from when it doesn't fit. `false` (default)
-     * never truncates — the label wraps and the tag keeps its full width. `end`
-     * shows an ellipsis at the end (`Long label…`); `start` shows it at the start
-     * (`…label`), which keeps the most significant part of values like dates
-     * visible. Truncation only kicks in when the tag is width-constrained, and the
-     * full label is revealed in a tooltip on hover/focus.
-     * @default false
-     */
-    ellipsis: _angular_core.InputSignal<TagEllipsis>;
-    /**
-     * Event emitted when the close button is clicked.
-     */
-    closed: _angular_core.OutputEmitterRef<Event>;
-    classes: _angular_core.Signal<string>;
-    ellipsisPosition: _angular_core.Signal<EllipsisPosition>;
-    handleClose(event: Event): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "tedi-tag", never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
-}
-
 type StatusBadgeColor = "neutral" | "brand" | "accent" | "success" | "danger" | "warning" | "transparent";
 type StatusBadgeVariant = "filled" | "filled-bordered" | "bordered";
 type StatusBadgeSize = "default" | "large";
@@ -6080,42 +8268,6 @@ declare class StatusBadgeComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusBadgeComponent, "tedi-status-badge", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type StatusIndicatorType = "success" | "danger" | "warning" | "inactive";
-type StatusIndicatorSize = "sm" | "lg";
-type StatusIndicatorPosition = "default" | "top-right";
-declare class StatusIndicatorComponent {
-    /**
-     * Accessible label for the indicator. When provided, the indicator is
-     * exposed to assistive technology with `role="img"`. When omitted, the
-     * indicator is treated as decorative (`aria-hidden="true"`).
-     */
-    readonly label: _angular_core.InputSignal<string | undefined>;
-    /**
-     * The status type, which determines the indicator color.
-     * @default success
-     */
-    readonly type: _angular_core.InputSignal<StatusIndicatorType>;
-    /**
-     * The size of the indicator.
-     * @default sm
-     */
-    readonly size: _angular_core.InputSignal<StatusIndicatorSize>;
-    /**
-     * Whether the indicator has a white border ring.
-     * @default false
-     */
-    readonly hasBorder: _angular_core.InputSignal<boolean>;
-    /**
-     * Controls positioning of the indicator.
-     * - `'default'` — inline, no absolute positioning
-     * - `'top-right'` — absolutely positioned at the top-right corner of the parent
-     * @default default
-     */
-    readonly position: _angular_core.InputSignal<StatusIndicatorPosition>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusIndicatorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusIndicatorComponent, "tedi-status-indicator", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hasBorder": { "alias": "hasBorder"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 /**
  * A single item inside a `tedi-accordion`. Owns the item's state (expanded)
  * and the inputs shared by header and content (selected, showIconCard,
@@ -6205,7 +8357,7 @@ declare class AccordionItemHeaderComponent {
     /**
      * Position of the expand action relative to the header content.
      */
-    expandActionPosition: _angular_core.InputSignal<"end" | "start">;
+    expandActionPosition: _angular_core.InputSignal<"start" | "end">;
     /**
      * Custom CSS classes for the accordion header.
      */
@@ -6239,6 +8391,14 @@ declare class HideAtDirective {
     private templateRef;
     private viewContainerRef;
     private breakpointService;
+    private visible;
+    /**
+     * Attribute usage (`hideAt` on a real element) toggles `display` so the
+     * element stays in the DOM and remains eligible for content projection.
+     * Structural usage (`*hideAt`) creates/clears the view instead and leaves
+     * `display` untouched (returns `null`).
+     */
+    protected hostDisplay: _angular_core.Signal<"none" | null>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HideAtDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HideAtDirective, "[hideAt]", never, { "hideAt": { "alias": "hideAt"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -6249,6 +8409,14 @@ declare class ShowAtDirective {
     private templateRef;
     private viewContainerRef;
     private breakpointService;
+    private visible;
+    /**
+     * Attribute usage (`showAt` on a real element) toggles `display` so the
+     * element stays in the DOM and remains eligible for content projection.
+     * Structural usage (`*showAt`) creates/clears the view instead and leaves
+     * `display` untouched (returns `null`).
+     */
+    protected hostDisplay: _angular_core.Signal<"none" | null>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShowAtDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShowAtDirective, "[showAt]", never, { "showAt": { "alias": "showAt"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -6291,6 +8459,52 @@ declare const TEDI_THEME_DEFAULT_TOKEN: InjectionToken<string>;
 
 declare const TEDI_TRANSLATION_DEFAULT_TOKEN: InjectionToken<Language>;
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, 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, 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, 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, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, createTablePersistence, generateUUID, groupRowSpan, injectTediTableContext, provideTedi, usePagination };
-export type { AlertRole, AlertTitleType, AlertType, AlertVariant, AlignItems, AlignSelf, ArrowType, Breakpoint, BreakpointFlag, BreakpointInput, BreakpointInputs, BreakpointInputsWithoutSignals, BreakpointObject, BulletColor, ButtonSize, ButtonVariant, 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, PaginationBackground, PaginationDividerPosition, PaginationItem, PaginationItemType, PaginationLabels, PaginationVisibility, PopoverPosition, PopoverWidth, 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, ToastConfig, ToastPosition, ToastRole, ToastType, ToggleSize, ToggleType, ToggleVariant, TooltipOpenWith, TooltipPosition, TooltipWidth, UsePaginationArgs, VerticalSpacingSize };
+declare function cookieSignal<T>(key: string, initialValue: T): _angular_core.WritableSignal<T>;
+
+declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+
+/** Horizontal gap (px) between tags in a single row. */
+declare const TAG_GAP = 8;
+/** Reserved width (px) for the "+N" counter tag. */
+declare const COUNTER_TAG_WIDTH = 40;
+interface TagOverflowOptions {
+    /** Gap between adjacent tags. Defaults to {@link TAG_GAP}. */
+    gap?: number;
+    /** Width reserved for the "+N" counter tag. Defaults to {@link COUNTER_TAG_WIDTH}. */
+    counterWidth?: number;
+}
+/**
+ * Given the measured widths of single-row tags and the available width, returns
+ * how many tags fit before the overflow collapses into a "+N" counter.
+ *
+ * Space for the counter is reserved while more tags remain, so the counter
+ * stays visible. At least one tag is always shown when any exist, even if it
+ * overflows on its own.
+ */
+declare function calculateVisibleTagCount(tagWidths: readonly number[], availableWidth: number, { gap, counterWidth }?: TagOverflowOptions): number;
+
+/**
+ * Checks if a string is a valid `HH:mm` time (00:00 – 23:59).
+ */
+declare function isValidTime(time: string | null | undefined): boolean;
+/**
+ * Normalizes common typing patterns into `HH:mm`.
+ *
+ * Returns:
+ *   - the canonical `HH:mm` string when the input can be normalized
+ *   - `""` when the input is empty
+ *   - `null` when the input is non-empty but cannot be normalized
+ *
+ * Examples:
+ *   `"9:5"`              → `"09:05"`
+ *   `"14:5"`             → `"14:05"`
+ *   `"2359"`             → `"23:59"`
+ *   `"930"`              → `"09:30"`
+ *   `"11.55"` / `"11-55"` → `"11:55"` (any non-digit treated as separator)
+ *   `"4:89"` / `"24:00"`  → `null`
+ */
+declare function normalizeTime(input: string): string | null;
+
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, 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, DateFieldComponent, 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, TAG_GAP, 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, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, 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, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
+export type { AlertRole, AlertTitleType, AlertType, AlertVariant, AlignItems, AlignSelf, ArrowOffset, ArrowType, AttachmentDirection, Breakpoint, BreakpointFlag, BreakpointInput, BreakpointInputs, BreakpointInputsWithoutSignals, BreakpointObject, BulletColor, ButtonGroupDropdownLabelMode, ButtonSize, ButtonVariant, CalendarView, 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, DateAfter, DateBefore, DateFieldMode, DateInterval, DatePickerDay, DatePickerInputSize, DatePickerInputState, DatePickerMatcher, DatePickerSelectorMode, DatePickerView, DateRange, DayOfWeek, 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, Matcher, 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, TabsOverflowMode, TagEllipsis, TagOverflowOptions, 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