@tedi-design-system/angular 8.1.0-rc.9 → 8.1.1

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, DestroyRef, HostAttributeToken, viewChild, NgZone, viewChildren, afterNextRender, afterRenderEffect, Optional, SkipSelf, untracked, ViewChild, TemplateRef, numberAttribute, linkedSignal, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, ContentChild, makeEnvironmentProviders } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, DestroyRef, afterRenderEffect, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, HostAttributeToken, viewChild, NgZone, viewChildren, afterNextRender, Optional, SkipSelf, linkedSignal, untracked, ViewChild, TemplateRef, numberAttribute, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, ContentChild, makeEnvironmentProviders } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i1 from '@angular/cdk/overlay';
-import { CdkOverlayOrigin, OverlayModule, Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, OverlayContainer, OverlayModule, Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, NgClass, NgIf } from '@angular/common';
 import { NG_VALUE_ACCESSOR, NgControl, Validators, FormsModule } from '@angular/forms';
@@ -486,8 +486,15 @@ function breakpointInput(input) {
 
 const FOCUSABLE_SELECTOR$1 = "button, a[href], [tabindex]";
 class DropdownTriggerDirective {
-    /** Defines the aria-haspopup attribute for the trigger, informing assistive technologies whether it opens a menu or listbox. Improves accessibility by describing the type of popup. */
-    ariaHaspopup = input("menu", ...(ngDevMode ? [{ debugName: "ariaHaspopup" }] : []));
+    /**
+     * The `aria-haspopup` value for the trigger, telling assistive technology
+     * what kind of popup it opens.
+     *
+     * Defaults to the content's `dropdownRole`: `menu` for a menu, `listbox` for
+     * a listbox, and no attribute for a plain `list`, which ARIA has no
+     * `aria-haspopup` token for. `false` also omits the attribute.
+     */
+    ariaHaspopup = input(...(ngDevMode ? [undefined, { debugName: "ariaHaspopup" }] : []));
     host = inject(ElementRef);
     dropdown = inject(DropdownComponent);
     overlayOrigin = inject(CdkOverlayOrigin, { self: true });
@@ -500,14 +507,40 @@ class DropdownTriggerDirective {
      * would both be tab stops, and the ARIA state would land on the wrong element.
      */
     triggerElement = signal(null, ...(ngDevMode ? [{ debugName: "triggerElement" }] : []));
+    hasPopup = computed(() => {
+        const explicit = this.ariaHaspopup();
+        if (explicit)
+            return explicit;
+        switch (this.dropdown.dropdownContent().dropdownRole()) {
+            case "menu":
+                return "menu";
+            case "listbox":
+                return "listbox";
+            default:
+                return "false";
+        }
+    }, ...(ngDevMode ? [{ debugName: "hasPopup" }] : []));
     constructor() {
         effect(() => {
             const el = this.triggerElement();
             if (!el)
                 return;
             this.renderer.setAttribute(el, "id", `${this.dropdown.containerId()}_trigger`);
-            this.renderer.setAttribute(el, "aria-controls", this.dropdown.containerId());
-            this.renderer.setAttribute(el, "aria-haspopup", this.ariaHaspopup());
+            // The panel only exists while open, so a permanent `aria-controls` would
+            // point at nothing.
+            if (this.dropdown.isOpen()) {
+                this.renderer.setAttribute(el, "aria-controls", this.dropdown.containerId());
+            }
+            else {
+                this.renderer.removeAttribute(el, "aria-controls");
+            }
+            const hasPopup = this.hasPopup();
+            if (hasPopup === "false") {
+                this.renderer.removeAttribute(el, "aria-haspopup");
+            }
+            else {
+                this.renderer.setAttribute(el, "aria-haspopup", hasPopup);
+            }
             this.renderer.setAttribute(el, "aria-expanded", String(this.dropdown.isOpen()));
             if (!this.isNativelyFocusable(el)) {
                 this.renderer.setAttribute(el, "role", "button");
@@ -533,10 +566,14 @@ class DropdownTriggerDirective {
         const key = event.key;
         switch (key) {
             case "ArrowDown":
+                if (!this.isWidgetContent())
+                    break;
                 event.preventDefault();
                 this.openAndFocusFirst();
                 break;
             case "ArrowUp":
+                if (!this.isWidgetContent())
+                    break;
                 event.preventDefault();
                 this.openAndFocusLast();
                 break;
@@ -547,6 +584,9 @@ class DropdownTriggerDirective {
                 break;
         }
     }
+    isWidgetContent() {
+        return this.dropdown.dropdownContent().isWidget();
+    }
     resolveTriggerElement() {
         const el = this.host.nativeElement;
         if (this.isNativelyFocusable(el))
@@ -893,11 +933,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 }]
         }], propDecorators: { clipContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipContent", required: false }] }] } });
 
+const INTERACTIVE_CONTENT_SELECTOR = "a[href], button";
 class DropdownItemComponent {
     /** Item value */
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     /** Is item disabled? */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Whether the projected content is itself the interactive control, e.g. a
+     * button. In a `menu` or `listbox` the item role and the roving tabindex then
+     * move onto that element instead of the host `li`, so assistive technology
+     * reports one control per item and the control keeps its own activation
+     * behaviour.
+     *
+     * A widget role replaces the control's own role, so a projected link stops
+     * being announced as a link. For navigation links use
+     * `dropdownRole="list"` instead, where this input is not needed: a plain list
+     * adds no roles, and the links stay links and stay in the tab order.
+     * @default false
+     */
+    interactiveContent = input(false, ...(ngDevMode ? [{ debugName: "interactiveContent" }] : []));
     /**
      * Whether the item's label clips overflowing content (for text ellipsis).
      * Set `false` when projecting content with decorations that intentionally
@@ -923,30 +978,143 @@ class DropdownItemComponent {
     dropdownContent = inject(DROPDOWN_CONTENT_API);
     /** Check if custom dropdown-item-value is provided */
     customItemValue = contentChild(DropdownItemValueComponent, ...(ngDevMode ? [{ debugName: "customItemValue" }] : []));
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    control = null;
+    constructor() {
+        this.destroyRef.onDestroy(this.renderer.listen(this.host.nativeElement, "click", (event) => {
+            if (!this.disabled())
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+        }, { capture: true }));
+        afterRenderEffect(() => {
+            const control = this.controlElement();
+            if (!control)
+                return;
+            if (this.disabled()) {
+                control.setAttribute("aria-disabled", "true");
+            }
+            else {
+                control.removeAttribute("aria-disabled");
+            }
+            // A plain `list` assigns no role, so the control keeps the semantics it
+            // came with and a link is still announced as a link.
+            const role = this.itemRole();
+            if (!role)
+                return;
+            control.setAttribute("role", role);
+            // The control carries `role="option"` in a listbox, so the selection
+            // state has to travel with it instead of staying on the presentational
+            // host `li`.
+            if (this.dropdownContent.dropdownRole() === "listbox") {
+                control.setAttribute("aria-selected", String(this.isSelected()));
+            }
+            else {
+                control.removeAttribute("aria-selected");
+            }
+        });
+    }
+    /** The widget role for this item, or `null` in a plain `list`. */
+    itemRole() {
+        switch (this.dropdownContent.dropdownRole()) {
+            case "menu":
+                return "menuitem";
+            case "listbox":
+                return "option";
+            default:
+                return null;
+        }
+    }
+    hostRole() {
+        if (!this.dropdownContent.isWidget())
+            return null;
+        return this.controlOwnsSemantics() ? "none" : this.itemRole();
+    }
+    hostAriaSelected() {
+        if (this.controlOwnsSemantics())
+            return null;
+        return this.dropdownContent.dropdownRole() === "listbox"
+            ? this.isSelected()
+            : null;
+    }
+    hostAriaDisabled() {
+        if (this.controlOwnsSemantics())
+            return null;
+        return this.disabled() ? "true" : null;
+    }
+    hostTabindex() {
+        if (this.controlOwnsSemantics())
+            return null;
+        switch (this.dropdownContent.dropdownRole()) {
+            case "menu":
+                return "-1";
+            default:
+                return this.disabled() ? null : "-1";
+        }
+    }
+    /**
+     * Whether the item's ARIA state and focus belong on the projected control
+     * rather than the host `li`. Always true in a plain `list`, where the
+     * projected control is what the item is.
+     */
+    controlOwnsSemantics() {
+        return this.interactiveContent() || !this.dropdownContent.isWidget();
+    }
     isSelected() {
         return this.dropdown.value() === this.value();
     }
+    /**
+     * The element that carries the item's role, roving tabindex and focus: the
+     * projected control when it owns the item's semantics, the host `li`
+     * otherwise.
+     */
+    focusTarget() {
+        return this.controlElement() ?? this.host.nativeElement;
+    }
     focus() {
-        this.host.nativeElement.focus();
+        this.focusTarget().focus();
+    }
+    setTabindex(value) {
+        const element = this.focusTarget();
+        if (value === null) {
+            element.removeAttribute("tabindex");
+        }
+        else {
+            element.setAttribute("tabindex", value);
+        }
+    }
+    controlElement() {
+        if (!this.controlOwnsSemantics())
+            return null;
+        this.control ??= this.host.nativeElement.querySelector(INTERACTIVE_CONTENT_SELECTOR);
+        return this.control;
     }
     onClick() {
+        // Clicks on a disabled item are already cancelled during capture.
         if (this.disabled())
             return;
         this.onItemSelect();
     }
     // Disabled items keep `aria-disabled` (and a roving tabindex in menus) so they
-    // stay discoverable, but they must not take focus on a mouse press — that focus
+    // stay discoverable, but they must not take focus on a mouse press: that focus
     // would otherwise trigger mouse-focus styling on a non-interactive item.
     onMousedown(event) {
         if (this.disabled())
             event.preventDefault();
     }
     onKeydown(event) {
+        // A plain `list` is not a composite widget: arrow keys, Enter and Space
+        // belong to the projected control, and the panel takes Escape and Tab.
+        if (!this.dropdownContent.isWidget())
+            return;
         const key = event.key;
         if (this.disabled()) {
             event.preventDefault();
             return;
         }
+        if (this.handleActivationKey(event))
+            return;
         switch (key) {
             case "ArrowDown":
                 event.preventDefault();
@@ -964,15 +1132,13 @@ class DropdownItemComponent {
                 event.preventDefault();
                 this.dropdown.focusLastItem();
                 break;
-            case "Enter":
-            case " ":
-                event.preventDefault();
-                this.onItemSelect();
-                break;
             case "Escape":
                 event.preventDefault();
-                this.dropdown.hideDropdown();
+                // Focus first, close second: closing detaches the focused item and
+                // focus falls to `body` until the trigger takes it, which a screen
+                // reader announces as a step out to the container.
                 this.dropdown.dropdownTrigger()?.focus();
+                this.dropdown.hideDropdown();
                 break;
             case "Tab":
                 event.preventDefault();
@@ -980,6 +1146,29 @@ class DropdownItemComponent {
                 break;
         }
     }
+    /** Returns whether the key was an activation key and has been dealt with. */
+    handleActivationKey(event) {
+        if (event.key === "Enter") {
+            // An interactive item's control activates itself, and preventing the
+            // default would swallow a link's navigation. The resulting click bubbles
+            // here and closes the dropdown.
+            if (!this.controlOwnsSemantics()) {
+                event.preventDefault();
+                this.onItemSelect();
+            }
+            return true;
+        }
+        if (event.key !== " ")
+            return false;
+        event.preventDefault();
+        if (this.controlOwnsSemantics()) {
+            this.controlElement()?.click();
+        }
+        else {
+            this.onItemSelect();
+        }
+        return true;
+    }
     onItemSelect() {
         if (this.dropdownContent.dropdownRole() === "listbox") {
             this.dropdown.value.set(this.value());
@@ -991,17 +1180,17 @@ class DropdownItemComponent {
         this.dropdown.dropdownTrigger()?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropdownItemComponent, isStandalone: true, selector: "li[tedi-dropdown-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clipContent: { classPropertyName: "clipContent", publicName: "clipContent", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "click": "onClick()", "mousedown": "onMousedown($event)", "keydown": "onKeydown($event)" }, properties: { "attr.role": "dropdownContent.dropdownRole() === 'menu' ? 'menuitem' : 'option'", "attr.aria-selected": "dropdownContent.dropdownRole() === 'listbox' ? isSelected() : null", "attr.aria-disabled": "disabled() ? 'true' : null", "tabindex": "dropdownContent.dropdownRole() === 'menu' ? '-1' : (disabled() ? null : '-1')" } }, queries: [{ propertyName: "customItemValue", first: true, predicate: DropdownItemValueComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-dropdown-item-value\" />\n\n@if (!customItemValue()) {\n  <tedi-dropdown-item-value>\n    <tedi-dropdown-item-value-label [clipContent]=\"clipContent()\">\n      <ng-content />\n    </tedi-dropdown-item-value-label>\n  </tedi-dropdown-item-value>\n}\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}\n"], dependencies: [{ kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropdownItemComponent, isStandalone: true, selector: "li[tedi-dropdown-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactiveContent: { classPropertyName: "interactiveContent", publicName: "interactiveContent", isSignal: true, isRequired: false, transformFunction: null }, clipContent: { classPropertyName: "clipContent", publicName: "clipContent", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "click": "onClick()", "mousedown": "onMousedown($event)", "keydown": "onKeydown($event)" }, properties: { "attr.role": "hostRole()", "attr.aria-selected": "hostAriaSelected()", "attr.aria-disabled": "hostAriaDisabled()", "attr.tabindex": "hostTabindex()" } }, queries: [{ propertyName: "customItemValue", first: true, predicate: DropdownItemValueComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-dropdown-item-value\" />\n\n@if (!customItemValue()) {\n  <tedi-dropdown-item-value>\n    <tedi-dropdown-item-value-label [clipContent]=\"clipContent()\">\n      <ng-content />\n    </tedi-dropdown-item-value-label>\n  </tedi-dropdown-item-value>\n}\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}\n"], dependencies: [{ kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "li[tedi-dropdown-item]", standalone: true, imports: [DropdownItemValueComponent, DropdownItemValueLabelComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        "[attr.role]": "dropdownContent.dropdownRole() === 'menu' ? 'menuitem' : 'option'",
-                        "[attr.aria-selected]": "dropdownContent.dropdownRole() === 'listbox' ? isSelected() : null",
-                        "[attr.aria-disabled]": "disabled() ? 'true' : null",
-                        "[tabindex]": "dropdownContent.dropdownRole() === 'menu' ? '-1' : (disabled() ? null : '-1')",
-                    }, template: "<ng-content select=\"tedi-dropdown-item-value\" />\n\n@if (!customItemValue()) {\n  <tedi-dropdown-item-value>\n    <tedi-dropdown-item-value-label [clipContent]=\"clipContent()\">\n      <ng-content />\n    </tedi-dropdown-item-value-label>\n  </tedi-dropdown-item-value>\n}\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clipContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipContent", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], customItemValue: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemValueComponent), { isSignal: true }] }], onClick: [{
+                        "[attr.role]": "hostRole()",
+                        "[attr.aria-selected]": "hostAriaSelected()",
+                        "[attr.aria-disabled]": "hostAriaDisabled()",
+                        "[attr.tabindex]": "hostTabindex()",
+                    }, template: "<ng-content select=\"tedi-dropdown-item-value\" />\n\n@if (!customItemValue()) {\n  <tedi-dropdown-item-value>\n    <tedi-dropdown-item-value-label [clipContent]=\"clipContent()\">\n      <ng-content />\n    </tedi-dropdown-item-value-label>\n  </tedi-dropdown-item-value>\n}\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactiveContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveContent", required: false }] }], clipContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipContent", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], customItemValue: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemValueComponent), { isSignal: true }] }], onClick: [{
                 type: HostListener,
                 args: ["click"]
             }], onMousedown: [{
@@ -1014,7 +1203,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 
 class DropdownContentComponent {
     /**
-     * Role for content, use listbox for list and menu for actions
+     * How the panel is exposed to assistive technology: `menu` for actions,
+     * `listbox` for selectable options, `list` for a plain list of links.
+     *
+     * `menu` and `listbox` are composite widgets, so the panel is a single tab
+     * stop with arrow-key navigation and the items carry `menuitem` / `option`.
+     * `list` is not a widget: it adds no item roles and no key handling, so
+     * projected links keep the link role and each one is its own tab stop. A
+     * panel of navigation links belongs in `list`, because a widget role would
+     * replace the link role and screen readers would stop announcing them as
+     * links. The `role="list"` it puts on the `ul` is redundant on paper but not
+     * in Safari, which drops list semantics from a list with no marker. A `list`
+     * panel also renders in the dropdown's own place in the DOM rather than at the
+     * end of `<body>`, so it keeps its place in reading order for the screen
+     * readers that navigate by DOM order instead of by `Tab`.
      * @default menu
      */
     dropdownRole = input("menu", ...(ngDevMode ? [{ debugName: "dropdownRole" }] : []));
@@ -1022,28 +1224,71 @@ class DropdownContentComponent {
     dropdownApi = inject(DROPDOWN_API);
     containerId = computed(() => this.dropdownApi.containerId(), ...(ngDevMode ? [{ debugName: "containerId" }] : []));
     items = contentChildren(DropdownItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    isWidget = computed(() => this.dropdownRole() !== "list", ...(ngDevMode ? [{ debugName: "isWidget" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: DropdownContentComponent, isStandalone: true, selector: "tedi-dropdown-content", inputs: { dropdownRole: { classPropertyName: "dropdownRole", publicName: "dropdownRole", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.aria-labelledby": "containerId() + '_trigger'" }, classAttribute: "tedi-dropdown-content" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: DropdownContentComponent, isStandalone: true, selector: "tedi-dropdown-content", inputs: { dropdownRole: { classPropertyName: "dropdownRole", publicName: "dropdownRole", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, classAttribute: "tedi-dropdown-content" }, providers: [
             {
                 provide: DROPDOWN_CONTENT_API,
                 useExisting: forwardRef(() => DropdownContentComponent),
             },
-        ], queries: [{ propertyName: "items", predicate: DropdownItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n<ul [attr.role]=\"dropdownRole()\">\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content ul{padding:0;margin:0;list-style:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "items", predicate: DropdownItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n<ul\n  class=\"tedi-dropdown-content__list\"\n  [class.tedi-dropdown-content__list--plain]=\"!isWidget()\"\n  [id]=\"containerId()\"\n  [attr.role]=\"dropdownRole()\"\n  [attr.aria-labelledby]=\"containerId() + '_trigger'\"\n>\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content__list{padding:0;margin:0;list-style:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownContentComponent, decorators: [{
             type: Component,
             args: [{ selector: "tedi-dropdown-content", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "tedi-dropdown-content",
                         role: "presentation",
-                        "[attr.aria-labelledby]": "containerId() + '_trigger'",
                     }, providers: [
                         {
                             provide: DROPDOWN_CONTENT_API,
                             useExisting: forwardRef(() => DropdownContentComponent),
                         },
-                    ], template: "<ng-content />\n<ul [attr.role]=\"dropdownRole()\">\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content ul{padding:0;margin:0;list-style:none}\n"] }]
+                    ], template: "<ng-content />\n<ul\n  class=\"tedi-dropdown-content__list\"\n  [class.tedi-dropdown-content__list--plain]=\"!isWidget()\"\n  [id]=\"containerId()\"\n  [attr.role]=\"dropdownRole()\"\n  [attr.aria-labelledby]=\"containerId() + '_trigger'\"\n>\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content__list{padding:0;margin:0;list-style:none}\n"] }]
         }], propDecorators: { dropdownRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRole", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DropdownItemComponent), { isSignal: true }] }] } });
 
+/**
+ * Renders the dropdown panel in the dropdown's own place in the DOM instead of
+ * the shared container at the end of `<body>`.
+ *
+ * Mobile screen readers walk the page in DOM order and never send a `Tab` key,
+ * so the panel's tab-order stitching does not exist for them: from a body-level
+ * panel, swiping past the last item leaves the page for the browser's own UI
+ * instead of reaching whatever follows the trigger. Rendering the panel where
+ * the trigger sits is the only placement that reads correctly for them.
+ *
+ * Widget panels (`menu`, `listbox`) stay in the shared container, where no
+ * ancestor's `overflow` or stacking context can clip them.
+ */
+class DropdownOverlayContainer extends OverlayContainer {
+    rootContainer = inject(OverlayContainer, { skipSelf: true });
+    host = inject(ElementRef);
+    inline = false;
+    setInline(inline) {
+        this.inline = inline;
+    }
+    getContainerElement() {
+        return this.inline
+            ? super.getContainerElement()
+            : this.rootContainer.getContainerElement();
+    }
+    /**
+     * Builds the container by hand rather than through `super`, which appends it
+     * to `<body>` and, in a test environment, clears every other container it
+     * finds there — including the shared one other overlays are still using.
+     */
+    _createContainer() {
+        const container = this._document.createElement("div");
+        container.classList.add("cdk-overlay-container");
+        this.host.nativeElement.appendChild(container);
+        this._containerElement = container;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownOverlayContainer });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownOverlayContainer, decorators: [{
+            type: Injectable
+        }] });
+
 function getFocusableElements(container) {
     const selectors = [
         "a[href]",
@@ -1388,6 +1633,7 @@ class DropdownComponent {
     platformId = inject(PLATFORM_ID);
     document = inject(DOCUMENT);
     renderer = inject(Renderer2);
+    overlayContainer = inject(DropdownOverlayContainer);
     scrollListener;
     skipNextGestureOutsideClick = false;
     constructor() {
@@ -1404,16 +1650,28 @@ class DropdownComponent {
     showDropdown(initialFocus = "selected") {
         if (this.isOpen())
             return;
+        // A plain `list` is content, not a widget, so it renders where it sits in
+        // the DOM and keeps its place in reading order.
+        this.overlayContainer.setInline(!this.dropdownContent().isWidget());
         const width = this.dropdownTrigger()?.host.nativeElement.offsetWidth;
         if (width) {
             this.triggerWidth.set(width);
         }
         this.isOpen.set(true);
         this.skipNextGestureOutsideClick = true;
-        this.setActiveToSelectedOrFirst();
         if (this.hideOnScroll()) {
             this.setupScrollListener();
         }
+        // A plain `list` has no active item and no roving tabindex: opening it just
+        // moves focus to its first link.
+        if (!this.dropdownContent().isWidget()) {
+            setTimeout(() => {
+                if (this.isOpen())
+                    this.focusPanelStart();
+            });
+            return;
+        }
+        this.setActiveToSelectedOrFirst();
         // Deferred so the overlay content is attached before focusing
         setTimeout(() => {
             if (initialFocus === "first") {
@@ -1472,10 +1730,20 @@ class DropdownComponent {
         const next = shiftKey
             ? focusable[triggerIndex - 1]
             : focusable[triggerIndex + 1];
+        // Move focus first, then close. Closing while the panel still holds focus
+        // detaches the focused element, which drops focus to `body` until the next
+        // task runs, and a screen reader reads that gap as the whole page/container
+        // before it reaches the real target.
+        this.moveFocusOut(next ?? triggerEl);
+    }
+    /**
+     * Focuses `target` and only then tears the panel down, so focus is never on a
+     * detached element. `handleFocusOut` already closes on the resulting
+     * `focusin`; the explicit call covers a target that refuses focus.
+     */
+    moveFocusOut(target) {
+        target.focus();
         this.hideDropdown();
-        if (next) {
-            setTimeout(() => next.focus());
-        }
     }
     focusFirstItem() {
         const items = this.dropdownContent().items();
@@ -1518,7 +1786,7 @@ class DropdownComponent {
         const items = this.dropdownContent().items();
         if (!items[index])
             return;
-        const el = items[index].host.nativeElement;
+        const el = items[index].focusTarget();
         el.focus();
         el.scrollIntoView({
             block: "nearest",
@@ -1550,24 +1818,42 @@ class DropdownComponent {
         items[prevIndex].focus();
     }
     updateTabindexes() {
+        if (!this.dropdownContent().isWidget())
+            return;
         const items = this.dropdownContent().items();
         const role = this.dropdownContent().dropdownRole();
         const active = this.activeIndex();
         items.forEach((item, i) => {
-            const el = item.host.nativeElement;
             if (i === active && !item.disabled()) {
-                el.setAttribute("tabindex", "0");
+                item.setTabindex("0");
+            }
+            else if (role === "listbox" && item.disabled()) {
+                item.setTabindex(null);
             }
             else {
-                if (role === "listbox" && item.disabled()) {
-                    el.removeAttribute("tabindex");
-                }
-                else {
-                    el.setAttribute("tabindex", "-1");
-                }
+                item.setTabindex("-1");
             }
         });
     }
+    /** Moves focus to the first focusable element in the panel. */
+    focusPanelStart() {
+        this.panelFocusables()[0]?.focus();
+    }
+    onPanelKeydown(event) {
+        // Widget content is driven by its items' own key handling, and a plain
+        // `list` renders in document order, so Tab out of it belongs to the
+        // browser.
+        if (this.dropdownContent().isWidget() || event.key !== "Escape")
+            return;
+        event.preventDefault();
+        this.closeAndFocusTrigger();
+    }
+    panelFocusables() {
+        return getFocusableElements(this.dropdownContent().host.nativeElement);
+    }
+    closeAndFocusTrigger() {
+        this.moveFocusOut(this.dropdownTrigger().focusableElement);
+    }
     setupScrollListener() {
         this.cleanupScrollListener();
         this.scrollListener = this.renderer.listen(this.document, "scroll", (event) => {
@@ -1614,7 +1900,12 @@ class DropdownComponent {
                 provide: DROPDOWN_API,
                 useExisting: forwardRef(() => DropdownComponent),
             },
-        ], queries: [{ propertyName: "dropdownTrigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownContent", first: true, predicate: DropdownContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n  <div\n    class=\"tedi-dropdown__panel\"\n    [style.--_tedi-dropdown-trigger-width]=\"triggerWidthVar()\"\n  >\n    <ng-content select=\"tedi-dropdown-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-dropdown{display:inline-flex}.tedi-dropdown__panel{z-index:var(--z-index-dropdown)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+            DropdownOverlayContainer,
+            {
+                provide: OverlayContainer,
+                useExisting: DropdownOverlayContainer,
+            },
+        ], queries: [{ propertyName: "dropdownTrigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownContent", first: true, predicate: DropdownContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n  <div\n    class=\"tedi-dropdown__panel\"\n    [style.--_tedi-dropdown-trigger-width]=\"triggerWidthVar()\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <ng-content select=\"tedi-dropdown-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-dropdown{display:inline-flex}.tedi-dropdown__panel{z-index:var(--z-index-dropdown)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -1623,7 +1914,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             provide: DROPDOWN_API,
                             useExisting: forwardRef(() => DropdownComponent),
                         },
-                    ], template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n  <div\n    class=\"tedi-dropdown__panel\"\n    [style.--_tedi-dropdown-trigger-width]=\"triggerWidthVar()\"\n  >\n    <ng-content select=\"tedi-dropdown-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-dropdown{display:inline-flex}.tedi-dropdown__panel{z-index:var(--z-index-dropdown)}\n"] }]
+                        DropdownOverlayContainer,
+                        {
+                            provide: OverlayContainer,
+                            useExisting: DropdownOverlayContainer,
+                        },
+                    ], template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n  <div\n    class=\"tedi-dropdown__panel\"\n    [style.--_tedi-dropdown-trigger-width]=\"triggerWidthVar()\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <ng-content select=\"tedi-dropdown-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-dropdown{display:inline-flex}.tedi-dropdown__panel{z-index:var(--z-index-dropdown)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], dropdownTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownTriggerDirective), { isSignal: true }] }], dropdownContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownContentComponent), { isSignal: true }] }] } });
 
 const translationsMap = {
@@ -1929,6 +2225,13 @@ const translationsMap = {
         en: "Uploading",
         ru: "Загрузка",
     },
+    "toast.close": {
+        description: "Accessible label for a toast's close button, naming which toast it closes",
+        components: ["Toast"],
+        et: (title) => `Sulge teavitus: ${title}`,
+        en: (title) => `Close notification: ${title}`,
+        ru: (title) => `Закрыть уведомление: ${title}`,
+    },
     "modal.close": {
         description: "Label for modals close button",
         components: ["Modal"],
@@ -2404,20 +2707,6 @@ const translationsMap = {
         en: "Table of contents",
         ru: "Содержание",
     },
-    "table-of-contents.valid": {
-        description: "Number of valid steps",
-        components: ["TableOfContents"],
-        et: (count) => `${count} valiidsed`,
-        en: (count) => `${count} valid`,
-        ru: (count) => `${count} действительны`,
-    },
-    "table-of-contents.invalid": {
-        description: "Number of invalid steps",
-        components: ["TableOfContents"],
-        et: (count) => `${count} mitte valiidne`,
-        en: (count) => `${count} invalid`,
-        ru: (count) => `${count} неверный`,
-    },
     "truncate.see-more": {
         description: "See more button label",
         components: ["Truncate"],
@@ -3372,7 +3661,7 @@ class ButtonGroupComponent {
         this.toggle(item.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ButtonGroupComponent, isStandalone: true, selector: "tedi-button-group", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, enableMobileDropdown: { classPropertyName: "enableMobileDropdown", publicName: "enableMobileDropdown", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabel: { classPropertyName: "dropdownLabel", publicName: "dropdownLabel", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabelMode: { classPropertyName: "dropdownLabelMode", publicName: "dropdownLabelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange" }, host: { properties: { "class": "hostClasses()", "attr.role": "isDropdownMode() ? null : 'group'", "attr.aria-label": "ariaLabel() || null" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => ButtonGroupButtonDirective), isSignal: true }], ngImport: i0, template: "<ng-content />\n\n@if (isDropdownMode()) {\n  <tedi-dropdown\n    class=\"tedi-button-group__dropdown\"\n    appendTo=\"body\"\n    [offset]=\"0\"\n  >\n    <button\n      tedi-dropdown-trigger\n      tedi-button\n      type=\"button\"\n      [variant]=\"triggerVariant()\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      class=\"tedi-button-group__dropdown-trigger\"\n    >\n      <tedi-icon [name]=\"triggerIcon()\" color=\"inherit\" [size]=\"18\" />\n      {{ triggerLabel() }}\n    </button>\n\n    <tedi-dropdown-content>\n      @for (item of items(); track item.value()) {\n        <li\n          tedi-dropdown-item\n          [value]=\"item.value()\"\n          [disabled]=\"item.disabled()\"\n          [class.tedi-dropdown-item--selected]=\"item.selected()\"\n          (itemSelect)=\"onDropdownItemSelect(item)\"\n        >\n          <tedi-dropdown-item-value>\n            @if (item.iconLeft()) {\n              <tedi-icon\n                [name]=\"item.iconLeft()!\"\n                color=\"inherit\"\n                [size]=\"18\"\n              />\n            } @else if (item.icon()) {\n              <tedi-icon [name]=\"item.icon()!\" color=\"inherit\" [size]=\"18\" />\n            }\n            <tedi-dropdown-item-value-label>{{\n              item.label()\n            }}</tedi-dropdown-item-value-label>\n            @if (item.iconRight()) {\n              <tedi-icon\n                [name]=\"item.iconRight()!\"\n                color=\"inherit\"\n                [size]=\"18\"\n              />\n            }\n          </tedi-dropdown-item-value>\n        </li>\n      }\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n}\n", styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var(--button-main-primary-background-hover, var(--button-main-primary-background-default));--_btn-hover-border: var(--button-main-primary-border-hover, var(--button-main-primary-border-default));--_btn-hover-text: var(--button-main-primary-text-hover, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-focus-bg: var(--button-main-primary-background-focus, var(--button-main-primary-background-default));--_btn-focus-border: var(--button-main-primary-border-focus, var(--button-main-primary-border-default));--_btn-focus-text: var(--button-main-primary-text-focus, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-active-bg: var(--button-main-primary-background-active, var(--button-main-primary-background-default));--_btn-active-border: var(--button-main-primary-border-active, var(--button-main-primary-border-default));--_btn-active-text: var(--button-main-primary-text-active, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var(--button-main-secondary-background-hover, var(--button-main-secondary-background-default));--_btn-hover-border: var(--button-main-secondary-border-hover, var(--button-main-secondary-border-default));--_btn-hover-text: var(--button-main-secondary-text-hover, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-focus-bg: var(--button-main-secondary-background-focus, var(--button-main-secondary-background-default));--_btn-focus-border: var(--button-main-secondary-border-focus, var(--button-main-secondary-border-default));--_btn-focus-text: var(--button-main-secondary-text-focus, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-active-bg: var(--button-main-secondary-background-active, var(--button-main-secondary-background-default));--_btn-active-border: var(--button-main-secondary-border-active, var(--button-main-secondary-border-default));--_btn-active-text: var(--button-main-secondary-text-active, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-background-hover, var(--button-main-neutral-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-background-focus, var(--button-main-neutral-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-background-active, var(--button-main-neutral-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var(--button-main-success-background-hover, var(--button-main-success-background-default));--_btn-hover-border: var(--button-main-success-border-hover, var(--button-main-success-border-default));--_btn-hover-text: var(--button-main-success-text-hover, var(--button-main-success-text-default))}.tedi-button--success{--_btn-focus-bg: var(--button-main-success-background-focus, var(--button-main-success-background-default));--_btn-focus-border: var(--button-main-success-border-focus, var(--button-main-success-border-default));--_btn-focus-text: var(--button-main-success-text-focus, var(--button-main-success-text-default))}.tedi-button--success{--_btn-active-bg: var(--button-main-success-background-active, var(--button-main-success-background-default));--_btn-active-border: var(--button-main-success-border-active, var(--button-main-success-border-default));--_btn-active-text: var(--button-main-success-text-active, var(--button-main-success-text-default))}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var(--button-main-danger-background-hover, var(--button-main-danger-background-default));--_btn-hover-border: var(--button-main-danger-border-hover, var(--button-main-danger-border-default));--_btn-hover-text: var(--button-main-danger-text-hover, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-focus-bg: var(--button-main-danger-background-focus, var(--button-main-danger-background-default));--_btn-focus-border: var(--button-main-danger-border-focus, var(--button-main-danger-border-default));--_btn-focus-text: var(--button-main-danger-text-focus, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-active-bg: var(--button-main-danger-background-active, var(--button-main-danger-background-default));--_btn-active-border: var(--button-main-danger-border-active, var(--button-main-danger-border-default));--_btn-active-text: var(--button-main-danger-text-active, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var(--button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default));--_btn-hover-border: var(--button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default));--_btn-hover-text: var(--button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-focus-bg: var(--button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default));--_btn-focus-border: var(--button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default));--_btn-focus-text: var(--button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-active-bg: var(--button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default));--_btn-active-border: var(--button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default));--_btn-active-text: var(--button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var(--button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default));--_btn-hover-border: var(--button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default));--_btn-hover-text: var(--button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-focus-bg: var(--button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default));--_btn-focus-border: var(--button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default));--_btn-focus-text: var(--button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-active-bg: var(--button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default));--_btn-active-border: var(--button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default));--_btn-active-text: var(--button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--primary-button-group{--_btn-text: var(--button-group-primary-inactive-text);--_btn-bg: var(--button-group-primary-inactive-background);--_btn-border: var(--button-group-primary-inactive-border);--_btn-hover-text: var(--button-group-primary-hover-text);--_btn-hover-bg: var(--button-group-primary-hover-background);--_btn-hover-border: var(--button-group-primary-hover-border);--_btn-active-text: var(--button-group-primary-selected-text);--_btn-active-bg: var(--button-group-primary-selected-background);--_btn-active-border: var(--button-group-primary-selected-border);--_btn-focus-text: var(--button-group-primary-inactive-text);--_btn-focus-bg: var(--button-group-primary-inactive-background);--_btn-focus-border: var(--button-group-primary-inactive-border);--_btn-disabled-text: var(--button-group-primary-disabled-text);--_btn-disabled-bg: var(--button-group-primary-disabled-background);--_btn-disabled-border: var(--button-group-primary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--primary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-primary-selected-text);background:var(--button-group-primary-selected-background);border-color:var(--button-group-primary-selected-border)}.tedi-button--secondary-button-group{--_btn-text: var(--button-group-secondary-inactive-text);--_btn-bg: var(--button-group-secondary-inactive-background);--_btn-border: var(--button-group-secondary-inactive-border);--_btn-hover-text: var(--button-group-secondary-hover-text);--_btn-hover-bg: var(--button-group-secondary-hover-background);--_btn-hover-border: var(--button-group-secondary-hover-border);--_btn-active-text: var(--button-group-secondary-selected-text);--_btn-active-bg: var(--button-group-secondary-selected-background);--_btn-active-border: var(--button-group-secondary-selected-border);--_btn-focus-text: var(--button-group-secondary-inactive-text);--_btn-focus-bg: var(--button-group-secondary-inactive-background);--_btn-focus-border: var(--button-group-secondary-inactive-border);--_btn-disabled-text: var(--button-group-secondary-disabled-text);--_btn-disabled-bg: var(--button-group-secondary-disabled-background);--_btn-disabled-border: var(--button-group-secondary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--secondary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-secondary-selected-text);background:var(--button-group-secondary-selected-background);border-color:var(--button-group-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--button-group-secondary-selected-border)}.tedi-button[class*=-inverted]:focus-visible{outline:none;border-color:var(--tedi-neutral-100);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-icon-only-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-icon-only-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-icon-only-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}.tedi-button-group{display:flex}.tedi-button-group--stretch .tedi-button{flex:1}.tedi-button-group .tedi-button:focus-visible{z-index:2}.tedi-button-group .tedi-button[aria-pressed=true]{z-index:1}.tedi-button-group .tedi-button[aria-pressed=true]:not(:disabled){color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group>.tedi-button:not(:first-child){margin-left:calc(var(--tedi-borders-01) * -1);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group>.tedi-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.tedi-button-group tedi-tooltip:not(:first-child) tedi-tooltip-trigger{margin-left:calc(var(--tedi-borders-01) * -1)}.tedi-button-group tedi-tooltip:not(:first-child) .tedi-button{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group tedi-tooltip:not(:last-child) .tedi-button{border-top-right-radius:0;border-bottom-right-radius:0}@media(max-width:47.98rem){.tedi-button-group .tedi-button{flex:1}}.tedi-button-group--dropdown-mode>.tedi-button,.tedi-button-group--dropdown-mode>tedi-tooltip{display:none}.tedi-button-group__dropdown{display:flex;flex:1 1 auto}.tedi-button-group__dropdown-trigger{flex:1}.tedi-button-group__dropdown-trigger[aria-expanded=true]{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger{border-radius:var(--button-radius-sm)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary{padding:calc(var(--_btn-padding-y) - var(--tedi-borders-02)) calc(var(--_btn-padding-x) - var(--tedi-borders-02));border-width:var(--tedi-borders-02)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary:not([aria-expanded=true]){border-color:var(--button-group-secondary-selected-border)}.tedi-button.tedi-button-group-button{gap:0}.tedi-button-group-button__label{padding-inline:var(--_btn-inner-spacing)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ButtonGroupComponent, isStandalone: true, selector: "tedi-button-group", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, enableMobileDropdown: { classPropertyName: "enableMobileDropdown", publicName: "enableMobileDropdown", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabel: { classPropertyName: "dropdownLabel", publicName: "dropdownLabel", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabelMode: { classPropertyName: "dropdownLabelMode", publicName: "dropdownLabelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange" }, host: { properties: { "class": "hostClasses()", "attr.role": "isDropdownMode() ? null : 'group'", "attr.aria-label": "ariaLabel() || null" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => ButtonGroupButtonDirective), isSignal: true }], ngImport: i0, template: "<ng-content />\n\n@if (isDropdownMode()) {\n  <tedi-dropdown\n    class=\"tedi-button-group__dropdown\"\n    appendTo=\"body\"\n    [offset]=\"0\"\n  >\n    <button\n      tedi-dropdown-trigger\n      tedi-button\n      type=\"button\"\n      [variant]=\"triggerVariant()\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      class=\"tedi-button-group__dropdown-trigger\"\n    >\n      <tedi-icon [name]=\"triggerIcon()\" color=\"inherit\" [size]=\"18\" />\n      {{ triggerLabel() }}\n    </button>\n\n    <tedi-dropdown-content>\n      @for (item of items(); track item.value()) {\n        <li\n          tedi-dropdown-item\n          [value]=\"item.value()\"\n          [disabled]=\"item.disabled()\"\n          [class.tedi-dropdown-item--selected]=\"item.selected()\"\n          (itemSelect)=\"onDropdownItemSelect(item)\"\n        >\n          <tedi-dropdown-item-value>\n            @if (item.iconLeft()) {\n              <tedi-icon\n                [name]=\"item.iconLeft()!\"\n                color=\"inherit\"\n                [size]=\"18\"\n              />\n            } @else if (item.icon()) {\n              <tedi-icon [name]=\"item.icon()!\" color=\"inherit\" [size]=\"18\" />\n            }\n            <tedi-dropdown-item-value-label>{{\n              item.label()\n            }}</tedi-dropdown-item-value-label>\n            @if (item.iconRight()) {\n              <tedi-icon\n                [name]=\"item.iconRight()!\"\n                color=\"inherit\"\n                [size]=\"18\"\n              />\n            }\n          </tedi-dropdown-item-value>\n        </li>\n      }\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n}\n", styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var(--button-main-primary-background-hover, var(--button-main-primary-background-default));--_btn-hover-border: var(--button-main-primary-border-hover, var(--button-main-primary-border-default));--_btn-hover-text: var(--button-main-primary-text-hover, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-focus-bg: var(--button-main-primary-background-focus, var(--button-main-primary-background-default));--_btn-focus-border: var(--button-main-primary-border-focus, var(--button-main-primary-border-default));--_btn-focus-text: var(--button-main-primary-text-focus, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-active-bg: var(--button-main-primary-background-active, var(--button-main-primary-background-default));--_btn-active-border: var(--button-main-primary-border-active, var(--button-main-primary-border-default));--_btn-active-text: var(--button-main-primary-text-active, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var(--button-main-secondary-background-hover, var(--button-main-secondary-background-default));--_btn-hover-border: var(--button-main-secondary-border-hover, var(--button-main-secondary-border-default));--_btn-hover-text: var(--button-main-secondary-text-hover, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-focus-bg: var(--button-main-secondary-background-focus, var(--button-main-secondary-background-default));--_btn-focus-border: var(--button-main-secondary-border-focus, var(--button-main-secondary-border-default));--_btn-focus-text: var(--button-main-secondary-text-focus, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-active-bg: var(--button-main-secondary-background-active, var(--button-main-secondary-background-default));--_btn-active-border: var(--button-main-secondary-border-active, var(--button-main-secondary-border-default));--_btn-active-text: var(--button-main-secondary-text-active, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-background-hover, var(--button-main-neutral-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-background-focus, var(--button-main-neutral-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-background-active, var(--button-main-neutral-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var(--button-main-success-background-hover, var(--button-main-success-background-default));--_btn-hover-border: var(--button-main-success-border-hover, var(--button-main-success-border-default));--_btn-hover-text: var(--button-main-success-text-hover, var(--button-main-success-text-default))}.tedi-button--success{--_btn-focus-bg: var(--button-main-success-background-focus, var(--button-main-success-background-default));--_btn-focus-border: var(--button-main-success-border-focus, var(--button-main-success-border-default));--_btn-focus-text: var(--button-main-success-text-focus, var(--button-main-success-text-default))}.tedi-button--success{--_btn-active-bg: var(--button-main-success-background-active, var(--button-main-success-background-default));--_btn-active-border: var(--button-main-success-border-active, var(--button-main-success-border-default));--_btn-active-text: var(--button-main-success-text-active, var(--button-main-success-text-default))}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var(--button-main-danger-background-hover, var(--button-main-danger-background-default));--_btn-hover-border: var(--button-main-danger-border-hover, var(--button-main-danger-border-default));--_btn-hover-text: var(--button-main-danger-text-hover, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-focus-bg: var(--button-main-danger-background-focus, var(--button-main-danger-background-default));--_btn-focus-border: var(--button-main-danger-border-focus, var(--button-main-danger-border-default));--_btn-focus-text: var(--button-main-danger-text-focus, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-active-bg: var(--button-main-danger-background-active, var(--button-main-danger-background-default));--_btn-active-border: var(--button-main-danger-border-active, var(--button-main-danger-border-default));--_btn-active-text: var(--button-main-danger-text-active, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var(--button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default));--_btn-hover-border: var(--button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default));--_btn-hover-text: var(--button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-focus-bg: var(--button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default));--_btn-focus-border: var(--button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default));--_btn-focus-text: var(--button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-active-bg: var(--button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default));--_btn-active-border: var(--button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default));--_btn-active-text: var(--button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var(--button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default));--_btn-hover-border: var(--button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default));--_btn-hover-text: var(--button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-focus-bg: var(--button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default));--_btn-focus-border: var(--button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default));--_btn-focus-text: var(--button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-active-bg: var(--button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default));--_btn-active-border: var(--button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default));--_btn-active-text: var(--button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--primary-button-group{--_btn-text: var(--button-group-primary-inactive-text);--_btn-bg: var(--button-group-primary-inactive-background);--_btn-border: var(--button-group-primary-inactive-border);--_btn-hover-text: var(--button-group-primary-hover-text);--_btn-hover-bg: var(--button-group-primary-hover-background);--_btn-hover-border: var(--button-group-primary-hover-border);--_btn-active-text: var(--button-group-primary-selected-text);--_btn-active-bg: var(--button-group-primary-selected-background);--_btn-active-border: var(--button-group-primary-selected-border);--_btn-focus-text: var(--button-group-primary-inactive-text);--_btn-focus-bg: var(--button-group-primary-inactive-background);--_btn-focus-border: var(--button-group-primary-inactive-border);--_btn-disabled-text: var(--button-group-primary-disabled-text);--_btn-disabled-bg: var(--button-group-primary-disabled-background);--_btn-disabled-border: var(--button-group-primary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--primary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-primary-selected-text);background:var(--button-group-primary-selected-background);border-color:var(--button-group-primary-selected-border)}.tedi-button--secondary-button-group{--_btn-text: var(--button-group-secondary-inactive-text);--_btn-bg: var(--button-group-secondary-inactive-background);--_btn-border: var(--button-group-secondary-inactive-border);--_btn-hover-text: var(--button-group-secondary-hover-text);--_btn-hover-bg: var(--button-group-secondary-hover-background);--_btn-hover-border: var(--button-group-secondary-hover-border);--_btn-active-text: var(--button-group-secondary-selected-text);--_btn-active-bg: var(--button-group-secondary-selected-background);--_btn-active-border: var(--button-group-secondary-selected-border);--_btn-focus-text: var(--button-group-secondary-inactive-text);--_btn-focus-bg: var(--button-group-secondary-inactive-background);--_btn-focus-border: var(--button-group-secondary-inactive-border);--_btn-disabled-text: var(--button-group-secondary-disabled-text);--_btn-disabled-bg: var(--button-group-secondary-disabled-background);--_btn-disabled-border: var(--button-group-secondary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--secondary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-secondary-selected-text);background:var(--button-group-secondary-selected-background);border-color:var(--button-group-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--button-group-secondary-selected-border)}.tedi-button[class*=-inverted]:focus-visible{outline:none;border-color:var(--tedi-neutral-100);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-icon-only-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-icon-only-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-icon-only-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}.tedi-button-group{display:flex}.tedi-button-group--stretch .tedi-button{flex:1}.tedi-button-group .tedi-button:focus-visible{z-index:2}.tedi-button-group .tedi-button[aria-pressed=true]{z-index:1}.tedi-button-group .tedi-button[aria-pressed=true]:not(:disabled){color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group>.tedi-button:not(:first-child){margin-left:calc(var(--tedi-borders-01) * -1);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group>.tedi-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.tedi-button-group tedi-tooltip:not(:first-child) tedi-tooltip-trigger{margin-left:calc(var(--tedi-borders-01) * -1)}.tedi-button-group tedi-tooltip:not(:first-child) .tedi-button{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group tedi-tooltip:not(:last-child) .tedi-button{border-top-right-radius:0;border-bottom-right-radius:0}@media(max-width:47.98rem){.tedi-button-group .tedi-button{flex:1}}.tedi-button-group--dropdown-mode>.tedi-button,.tedi-button-group--dropdown-mode>tedi-tooltip{display:none}.tedi-button-group__dropdown{display:flex;flex:1 1 auto}.tedi-button-group__dropdown-trigger{flex:1}.tedi-button-group__dropdown-trigger[aria-expanded=true]{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger{border-radius:var(--button-radius-sm)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary{padding:calc(var(--_btn-padding-y) - var(--tedi-borders-02)) calc(var(--_btn-padding-x) - var(--tedi-borders-02));border-width:var(--tedi-borders-02)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary:not([aria-expanded=true]){border-color:var(--button-group-secondary-selected-border)}.tedi-button.tedi-button-group-button{gap:0}.tedi-button-group-button__label{padding-inline:var(--_btn-inner-spacing)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
@@ -3535,12 +3824,19 @@ class AlertComponent {
      * @default false
      */
     showClose = input(false, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
+    /**
+     * Accessible name for the close button. Override the generic default
+     * ("Close") when several alerts can be on screen at once, so the button
+     * says which one it closes.
+     */
+    closeAriaLabel = input(...(ngDevMode ? [undefined, { debugName: "closeAriaLabel" }] : []));
     /**
      * The ARIA role of the alert, informing screen readers about the alert's purpose.
+     * The role carries its own live-region semantics, so no separate `aria-live` is set.
      * Options:
-     * - 'alert': For high-priority messages that demand immediate attention.
-     * - 'status': For less urgent messages providing feedback or updates.
-     * - 'none': Used when no ARIA role is needed.
+     * - 'alert': For high-priority messages that demand immediate attention (announced assertively).
+     * - 'status': For less urgent messages providing feedback or updates (announced politely).
+     * - 'none': No role and no announcement.
      * @default alert
      */
     role = input("alert", ...(ngDevMode ? [{ debugName: "role" }] : []));
@@ -3575,22 +3871,6 @@ class AlertComponent {
      * Close click output
      */
     closeClick = output();
-    getAriaLive = computed(() => {
-        switch (this.role()) {
-            case "alert":
-                return "assertive";
-            case "status":
-                return "polite";
-            case "none":
-                return "off";
-        }
-    }, ...(ngDevMode ? [{ debugName: "getAriaLive" }] : []));
-    getAriaLabel = computed(() => {
-        if (this.title()) {
-            return `${this.type()} alert: ${this.title()}`;
-        }
-        return `${this.type()} alert`;
-    }, ...(ngDevMode ? [{ debugName: "getAriaLabel" }] : []));
     classes = computed(() => {
         return {
             "tedi-alert": true,
@@ -3611,18 +3891,16 @@ class AlertComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AlertComponent, isStandalone: true, selector: "tedi-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, titleElement: { classPropertyName: "titleElement", publicName: "titleElement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeClick: "closeClick" }, host: { properties: { "style.display": "open() ? 'flex' : 'none'", "attr.aria-live": "getAriaLive()", "attr.aria-label": "getAriaLabel()", "class": "classes()", "attr.role": "role() === 'none' ? null : role()" } }, ngImport: i0, template: "<div class=\"tedi-alert__body\">\n  @if (title()) {\n    <div class=\"tedi-alert__head\">\n      @if (icon()) {\n        <tedi-icon [name]=\"icon()\" [size]=\"18\" />\n      }\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  } @else {\n    <div class=\"tedi-alert__content\">\n      @if (icon()) {\n        <tedi-icon\n          [name]=\"icon()\"\n          [size]=\"18\"\n          class=\"tedi-alert__content-icon\"\n        />\n      }\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  }\n</div>\n\n<div class=\"tedi-alert__action\">\n  <ng-content select=\"[tedi-alert-action]\"></ng-content>\n</div>\n\n@if (showClose()) {\n  <button\n    tedi-closing-button\n    class=\"tedi-alert__close\"\n    size=\"small\"\n    [iconSize]=\"18\"\n    (click)=\"handleClose()\"\n  ></button>\n}\n\n<ng-template #heading>\n  @if (titleElement() === \"h1\") {\n    <h1 class=\"tedi-alert__title\">{{ title() }}</h1>\n  } @else if (titleElement() === \"h2\") {\n    <h2 class=\"tedi-alert__title\">{{ title() }}</h2>\n  } @else if (titleElement() === \"h3\") {\n    <h3 class=\"tedi-alert__title\">{{ title() }}</h3>\n  } @else if (titleElement() === \"h4\") {\n    <h4 class=\"tedi-alert__title\">{{ title() }}</h4>\n  } @else if (titleElement() === \"h5\") {\n    <h5 class=\"tedi-alert__title\">{{ title() }}</h5>\n  } @else if (titleElement() === \"h6\") {\n    <h6 class=\"tedi-alert__title\">{{ title() }}</h6>\n  } @else {\n    <div class=\"tedi-alert__title\">{{ title() }}</div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <div>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".tedi-alert{--_close-button-size: 18px;--_padding-y: var(--alert-default-padding-y);--_padding-x: var(--alert-default-padding-x);position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--_padding-y) var(--_padding-x);border:1px solid;border-radius:var(--alert-radius);color:var(--alert-default-text-info);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert__body{display:contents}.tedi-alert__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-alert:has(.tedi-alert__close):not(:has(.tedi-alert__action>*)){padding-right:calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--_padding-x))}.tedi-alert__close{position:absolute;top:var(--_padding-y);right:var(--_padding-x)}.tedi-alert__action{display:none}.tedi-alert__action:has(>*){display:flex;flex-shrink:0;align-items:center}.tedi-alert:has(.tedi-alert__action>*){flex-direction:row;gap:var(--layout-grid-gutters-12);align-items:center}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__body{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-04)}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__close{display:none}@media(max-width:35.98rem){.tedi-alert:has(.tedi-alert__action>*){flex-direction:column;align-items:flex-start}}.tedi-alert__content{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start}.tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-regular-line-height)}.tedi-alert__title{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-alert--size-default{font-size:var(--body-regular-size)}.tedi-alert--size-small{--_padding-y: var(--alert-default-padding-y-sm);--_padding-x: var(--alert-default-padding-x-sm);gap:var(--layout-grid-gutters-02);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height)}.tedi-alert--size-small .tedi-alert__content{gap:var(--layout-grid-gutters-04)}.tedi-alert--size-small .tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-small-regular-line-height)}.tedi-alert--info{color:var(--alert-default-text-info);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert--success{color:var(--alert-default-text-success);background-color:var(--alert-default-background-success);border-color:var(--alert-default-border-success)}.tedi-alert--warning{color:var(--alert-default-text-warning);background-color:var(--alert-default-background-warning);border-color:var(--alert-default-border-warning)}.tedi-alert--danger{color:var(--alert-default-text-danger);background-color:var(--alert-default-background-danger);border-color:var(--alert-default-border-danger)}.tedi-alert--global{width:100%;border:0;border-radius:0}.tedi-alert--no-side-borders{border-right:none;border-left:none;border-radius:0}@media print{.tedi-alert{color:var(--general-text-primary);background-color:var(--tedi-neutral-100);border-color:var(--tedi-neutral-350)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AlertComponent, isStandalone: true, selector: "tedi-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, titleElement: { classPropertyName: "titleElement", publicName: "titleElement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeClick: "closeClick" }, host: { properties: { "style.display": "open() ? 'flex' : 'none'", "class": "classes()", "attr.role": "role() === 'none' ? null : role()" } }, ngImport: i0, template: "<div class=\"tedi-alert__body\">\n  @if (title()) {\n    <div class=\"tedi-alert__head\">\n      @if (icon()) {\n        <tedi-icon [name]=\"icon()\" [size]=\"18\" />\n      }\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  } @else {\n    <div class=\"tedi-alert__content\">\n      @if (icon()) {\n        <tedi-icon\n          [name]=\"icon()\"\n          [size]=\"18\"\n          class=\"tedi-alert__content-icon\"\n        />\n      }\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  }\n</div>\n\n<div class=\"tedi-alert__action\">\n  <ng-content select=\"[tedi-alert-action]\"></ng-content>\n</div>\n\n@if (showClose()) {\n  <button\n    tedi-closing-button\n    class=\"tedi-alert__close\"\n    size=\"small\"\n    [iconSize]=\"18\"\n    [ariaLabel]=\"closeAriaLabel()\"\n    (click)=\"handleClose()\"\n  ></button>\n}\n\n<ng-template #heading>\n  @if (titleElement() === \"h1\") {\n    <h1 class=\"tedi-alert__title\">{{ title() }}</h1>\n  } @else if (titleElement() === \"h2\") {\n    <h2 class=\"tedi-alert__title\">{{ title() }}</h2>\n  } @else if (titleElement() === \"h3\") {\n    <h3 class=\"tedi-alert__title\">{{ title() }}</h3>\n  } @else if (titleElement() === \"h4\") {\n    <h4 class=\"tedi-alert__title\">{{ title() }}</h4>\n  } @else if (titleElement() === \"h5\") {\n    <h5 class=\"tedi-alert__title\">{{ title() }}</h5>\n  } @else if (titleElement() === \"h6\") {\n    <h6 class=\"tedi-alert__title\">{{ title() }}</h6>\n  } @else {\n    <div class=\"tedi-alert__title\">{{ title() }}</div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <div>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".tedi-alert{--_close-button-size: 18px;--_padding-y: var(--alert-default-padding-y);--_padding-x: var(--alert-default-padding-x);position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--_padding-y) var(--_padding-x);border:1px solid;border-radius:var(--alert-radius);color:var(--alert-default-text-info);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert__body{display:contents}.tedi-alert__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-alert:has(.tedi-alert__close):not(:has(.tedi-alert__action>*)){padding-right:calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--_padding-x))}.tedi-alert__close{position:absolute;top:var(--_padding-y);right:var(--_padding-x)}.tedi-alert__action{display:none}.tedi-alert__action:has(>*){display:flex;flex-shrink:0;align-items:center}.tedi-alert:has(.tedi-alert__action>*){flex-direction:row;gap:var(--layout-grid-gutters-12);align-items:center}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__body{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-04)}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__close{display:none}@media(max-width:35.98rem){.tedi-alert:has(.tedi-alert__action>*){flex-direction:column;align-items:flex-start}}.tedi-alert__content{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start}.tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-regular-line-height)}.tedi-alert__title{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-alert--size-default{font-size:var(--body-regular-size)}.tedi-alert--size-small{--_padding-y: var(--alert-default-padding-y-sm);--_padding-x: var(--alert-default-padding-x-sm);gap:var(--layout-grid-gutters-02);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height)}.tedi-alert--size-small .tedi-alert__content{gap:var(--layout-grid-gutters-04)}.tedi-alert--size-small .tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-small-regular-line-height)}.tedi-alert--info{color:var(--alert-default-text-info);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert--success{color:var(--alert-default-text-success);background-color:var(--alert-default-background-success);border-color:var(--alert-default-border-success)}.tedi-alert--warning{color:var(--alert-default-text-warning);background-color:var(--alert-default-background-warning);border-color:var(--alert-default-border-warning)}.tedi-alert--danger{color:var(--alert-default-text-danger);background-color:var(--alert-default-background-danger);border-color:var(--alert-default-border-danger)}.tedi-alert--global{width:100%;border:0;border-radius:0}.tedi-alert--no-side-borders{border-right:none;border-left:none;border-radius:0}@media print{.tedi-alert{color:var(--general-text-primary);background-color:var(--tedi-neutral-100);border-color:var(--tedi-neutral-350)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "tedi-alert", imports: [IconComponent, ClosingButtonComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         "[style.display]": "open() ? 'flex' : 'none'",
-                        "[attr.aria-live]": "getAriaLive()",
-                        "[attr.aria-label]": "getAriaLabel()",
                         "[class]": "classes()",
                         "[attr.role]": "role() === 'none' ? null : role()",
-                    }, template: "<div class=\"tedi-alert__body\">\n  @if (title()) {\n    <div class=\"tedi-alert__head\">\n      @if (icon()) {\n        <tedi-icon [name]=\"icon()\" [size]=\"18\" />\n      }\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  } @else {\n    <div class=\"tedi-alert__content\">\n      @if (icon()) {\n        <tedi-icon\n          [name]=\"icon()\"\n          [size]=\"18\"\n          class=\"tedi-alert__content-icon\"\n        />\n      }\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  }\n</div>\n\n<div class=\"tedi-alert__action\">\n  <ng-content select=\"[tedi-alert-action]\"></ng-content>\n</div>\n\n@if (showClose()) {\n  <button\n    tedi-closing-button\n    class=\"tedi-alert__close\"\n    size=\"small\"\n    [iconSize]=\"18\"\n    (click)=\"handleClose()\"\n  ></button>\n}\n\n<ng-template #heading>\n  @if (titleElement() === \"h1\") {\n    <h1 class=\"tedi-alert__title\">{{ title() }}</h1>\n  } @else if (titleElement() === \"h2\") {\n    <h2 class=\"tedi-alert__title\">{{ title() }}</h2>\n  } @else if (titleElement() === \"h3\") {\n    <h3 class=\"tedi-alert__title\">{{ title() }}</h3>\n  } @else if (titleElement() === \"h4\") {\n    <h4 class=\"tedi-alert__title\">{{ title() }}</h4>\n  } @else if (titleElement() === \"h5\") {\n    <h5 class=\"tedi-alert__title\">{{ title() }}</h5>\n  } @else if (titleElement() === \"h6\") {\n    <h6 class=\"tedi-alert__title\">{{ title() }}</h6>\n  } @else {\n    <div class=\"tedi-alert__title\">{{ title() }}</div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <div>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".tedi-alert{--_close-button-size: 18px;--_padding-y: var(--alert-default-padding-y);--_padding-x: var(--alert-default-padding-x);position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--_padding-y) var(--_padding-x);border:1px solid;border-radius:var(--alert-radius);color:var(--alert-default-text-info);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert__body{display:contents}.tedi-alert__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-alert:has(.tedi-alert__close):not(:has(.tedi-alert__action>*)){padding-right:calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--_padding-x))}.tedi-alert__close{position:absolute;top:var(--_padding-y);right:var(--_padding-x)}.tedi-alert__action{display:none}.tedi-alert__action:has(>*){display:flex;flex-shrink:0;align-items:center}.tedi-alert:has(.tedi-alert__action>*){flex-direction:row;gap:var(--layout-grid-gutters-12);align-items:center}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__body{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-04)}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__close{display:none}@media(max-width:35.98rem){.tedi-alert:has(.tedi-alert__action>*){flex-direction:column;align-items:flex-start}}.tedi-alert__content{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start}.tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-regular-line-height)}.tedi-alert__title{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-alert--size-default{font-size:var(--body-regular-size)}.tedi-alert--size-small{--_padding-y: var(--alert-default-padding-y-sm);--_padding-x: var(--alert-default-padding-x-sm);gap:var(--layout-grid-gutters-02);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height)}.tedi-alert--size-small .tedi-alert__content{gap:var(--layout-grid-gutters-04)}.tedi-alert--size-small .tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-small-regular-line-height)}.tedi-alert--info{color:var(--alert-default-text-info);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert--success{color:var(--alert-default-text-success);background-color:var(--alert-default-background-success);border-color:var(--alert-default-border-success)}.tedi-alert--warning{color:var(--alert-default-text-warning);background-color:var(--alert-default-background-warning);border-color:var(--alert-default-border-warning)}.tedi-alert--danger{color:var(--alert-default-text-danger);background-color:var(--alert-default-background-danger);border-color:var(--alert-default-border-danger)}.tedi-alert--global{width:100%;border:0;border-radius:0}.tedi-alert--no-side-borders{border-right:none;border-left:none;border-radius:0}@media print{.tedi-alert{color:var(--general-text-primary);background-color:var(--tedi-neutral-100);border-color:var(--tedi-neutral-350)}}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], titleElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleElement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], closeClick: [{ type: i0.Output, args: ["closeClick"] }] } });
+                    }, template: "<div class=\"tedi-alert__body\">\n  @if (title()) {\n    <div class=\"tedi-alert__head\">\n      @if (icon()) {\n        <tedi-icon [name]=\"icon()\" [size]=\"18\" />\n      }\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  } @else {\n    <div class=\"tedi-alert__content\">\n      @if (icon()) {\n        <tedi-icon\n          [name]=\"icon()\"\n          [size]=\"18\"\n          class=\"tedi-alert__content-icon\"\n        />\n      }\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  }\n</div>\n\n<div class=\"tedi-alert__action\">\n  <ng-content select=\"[tedi-alert-action]\"></ng-content>\n</div>\n\n@if (showClose()) {\n  <button\n    tedi-closing-button\n    class=\"tedi-alert__close\"\n    size=\"small\"\n    [iconSize]=\"18\"\n    [ariaLabel]=\"closeAriaLabel()\"\n    (click)=\"handleClose()\"\n  ></button>\n}\n\n<ng-template #heading>\n  @if (titleElement() === \"h1\") {\n    <h1 class=\"tedi-alert__title\">{{ title() }}</h1>\n  } @else if (titleElement() === \"h2\") {\n    <h2 class=\"tedi-alert__title\">{{ title() }}</h2>\n  } @else if (titleElement() === \"h3\") {\n    <h3 class=\"tedi-alert__title\">{{ title() }}</h3>\n  } @else if (titleElement() === \"h4\") {\n    <h4 class=\"tedi-alert__title\">{{ title() }}</h4>\n  } @else if (titleElement() === \"h5\") {\n    <h5 class=\"tedi-alert__title\">{{ title() }}</h5>\n  } @else if (titleElement() === \"h6\") {\n    <h6 class=\"tedi-alert__title\">{{ title() }}</h6>\n  } @else {\n    <div class=\"tedi-alert__title\">{{ title() }}</div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <div>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".tedi-alert{--_close-button-size: 18px;--_padding-y: var(--alert-default-padding-y);--_padding-x: var(--alert-default-padding-x);position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--_padding-y) var(--_padding-x);border:1px solid;border-radius:var(--alert-radius);color:var(--alert-default-text-info);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert__body{display:contents}.tedi-alert__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-alert:has(.tedi-alert__close):not(:has(.tedi-alert__action>*)){padding-right:calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--_padding-x))}.tedi-alert__close{position:absolute;top:var(--_padding-y);right:var(--_padding-x)}.tedi-alert__action{display:none}.tedi-alert__action:has(>*){display:flex;flex-shrink:0;align-items:center}.tedi-alert:has(.tedi-alert__action>*){flex-direction:row;gap:var(--layout-grid-gutters-12);align-items:center}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__body{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-04)}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__close{display:none}@media(max-width:35.98rem){.tedi-alert:has(.tedi-alert__action>*){flex-direction:column;align-items:flex-start}}.tedi-alert__content{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start}.tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-regular-line-height)}.tedi-alert__title{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-alert--size-default{font-size:var(--body-regular-size)}.tedi-alert--size-small{--_padding-y: var(--alert-default-padding-y-sm);--_padding-x: var(--alert-default-padding-x-sm);gap:var(--layout-grid-gutters-02);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height)}.tedi-alert--size-small .tedi-alert__content{gap:var(--layout-grid-gutters-04)}.tedi-alert--size-small .tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-small-regular-line-height)}.tedi-alert--info{color:var(--alert-default-text-info);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert--success{color:var(--alert-default-text-success);background-color:var(--alert-default-background-success);border-color:var(--alert-default-border-success)}.tedi-alert--warning{color:var(--alert-default-text-warning);background-color:var(--alert-default-background-warning);border-color:var(--alert-default-border-warning)}.tedi-alert--danger{color:var(--alert-default-text-danger);background-color:var(--alert-default-background-danger);border-color:var(--alert-default-border-danger)}.tedi-alert--global{width:100%;border:0;border-radius:0}.tedi-alert--no-side-borders{border-right:none;border-left:none;border-radius:0}@media print{.tedi-alert{color:var(--general-text-primary);background-color:var(--tedi-neutral-100);border-color:var(--tedi-neutral-350)}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], titleElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleElement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], closeClick: [{ type: i0.Output, args: ["closeClick"] }] } });
 
 const TOAST_DEFAULT_DURATION = 6000;
 class ToastComponent {
@@ -3640,10 +3918,12 @@ class ToastComponent {
      */
     icon = input("", ...(ngDevMode ? [{ debugName: "icon" }] : []));
     /**
-     * The ARIA role of the toast, informing screen readers about the notification's priority.
-     * - 'status': For non-critical notifications (screen readers announce politely).
-     * - 'alert': For critical errors (screen readers announce immediately).
-     * - 'none': Used when no ARIA role is needed.
+     * Politeness of the screen reader announcement made by `ToastService`.
+     * The visible toast itself is never a live region — announcing from both it
+     * and the announcer made screen readers read every toast two or three times.
+     * - 'status': For non-critical notifications (announced politely).
+     * - 'alert': For critical errors (announced immediately).
+     * - 'none': No announcement.
      * @default status
      */
     role = input("status", ...(ngDevMode ? [{ debugName: "role" }] : []));
@@ -3666,8 +3946,23 @@ class ToastComponent {
      * Emits when the toast is closed by the user.
      */
     closed = output();
+    translationService = inject(TediTranslationService);
+    closeLabel = computed(() => {
+        const title = this.title();
+        return title
+            ? this.translationService.translate("toast.close", title)
+            : this.translationService.translate("close");
+    }, ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
     mouseEnter = output();
     mouseLeave = output();
+    /**
+     * Emits when focus enters the toast, so the auto-close timer can be paused.
+     */
+    focusIn = output();
+    /**
+     * Emits when focus leaves the toast entirely.
+     */
+    focusOut = output();
     handleClose() {
         this.closed.emit();
     }
@@ -3677,13 +3972,24 @@ class ToastComponent {
     onMouseLeave() {
         this.mouseLeave.emit();
     }
+    onFocusIn() {
+        this.focusIn.emit();
+    }
+    onFocusOut(event) {
+        const wrapper = event.currentTarget;
+        const nextTarget = event.relatedTarget;
+        if (wrapper && nextTarget && wrapper.contains(nextTarget)) {
+            return;
+        }
+        this.focusOut.emit();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToastComponent, isStandalone: true, selector: "tedi-toast", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, showProgressBar: { classPropertyName: "showProgressBar", publicName: "showProgressBar", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave" }, ngImport: i0, template: "<div\n  class=\"tedi-toast__wrapper\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n>\n  <tedi-alert\n    [title]=\"title()\"\n    [type]=\"type()\"\n    [icon]=\"icon()\"\n    [showClose]=\"true\"\n    [closeDelay]=\"300\"\n    [role]=\"role()\"\n    (closeClick)=\"handleClose()\"\n  >\n    <ng-content></ng-content>\n  </tedi-alert>\n  @if (showProgressBar() && duration() > 0) {\n    <div\n      class=\"tedi-toast__progress tedi-toast__progress--{{ type() }}\"\n      [class.tedi-toast__progress--paused]=\"paused()\"\n      [style.animation-duration.ms]=\"duration()\"\n    ></div>\n  }\n</div>\n", styles: ["tedi-toast{display:block;width:var(--toast-width);max-width:100%}.tedi-toast__wrapper{position:relative;padding:var(--toast-outer-spacing, 4px)}.tedi-toast__wrapper tedi-alert{box-shadow:0 4px 10px 0 var(--tedi-alpha-14, rgba(0, 0, 0, .14))}.tedi-toast__progress{position:absolute;bottom:var(--toast-outer-spacing);left:var(--toast-outer-spacing);width:calc(100% - var(--toast-outer-spacing) * 2);height:4px;background:var(--toast-progress-color);border-radius:0 var(--alert-radius) 0 var(--alert-radius);transform-origin:left;animation:toast-progress linear forwards}.tedi-toast__progress--success{--toast-progress-color: var(--alert-default-border-success)}.tedi-toast__progress--info{--toast-progress-color: var(--alert-default-border-info)}.tedi-toast__progress--danger{--toast-progress-color: var(--alert-default-border-danger)}.tedi-toast__progress--warning{--toast-progress-color: var(--alert-default-border-warning)}.tedi-toast__progress--paused{animation-play-state:paused}.tedi-toast-container{position:fixed;inset:0;z-index:var(--z-index-toast, 1050);pointer-events:none}.tedi-toast-container__position{position:absolute;display:flex;flex-direction:column;gap:var(--tedi-dimensions-05);max-height:calc(100vh - var(--toast-margin-bottom) * 2);overflow:visible}.tedi-toast-container__position>*{pointer-events:auto}.tedi-toast-container__position--top-left{top:var(--toast-margin-bottom);left:var(--toast-margin-right);align-items:flex-start}.tedi-toast-container__position--top-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--top-right{top:var(--toast-margin-bottom);right:var(--toast-margin-right);align-items:flex-end}.tedi-toast-container__position--top-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}.tedi-toast-container__position--bottom-left{bottom:var(--toast-margin-bottom);left:var(--toast-margin-right);flex-direction:column-reverse;align-items:flex-start}.tedi-toast-container__position--bottom-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);bottom:var(--toast-margin-bottom);flex-direction:column-reverse;align-items:flex-end}.tedi-toast-container__position--bottom-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}@media(max-width:35.98rem){.tedi-toast-container__position--top-left,.tedi-toast-container__position--top-right,.tedi-toast-container__position--bottom-left,.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);left:var(--toast-margin-left);align-items:stretch;transform:none}.tedi-toast-container__position--top-left tedi-toast,.tedi-toast-container__position--top-right tedi-toast,.tedi-toast-container__position--bottom-left tedi-toast,.tedi-toast-container__position--bottom-right tedi-toast{width:100%;animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes toast-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes toast-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes toast-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes toast-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes toast-slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes toast-slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes toast-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes toast-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "tedi-alert", inputs: ["title", "type", "icon", "showClose", "role", "variant", "size", "titleElement", "open", "closeDelay"], outputs: ["openChange", "closeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToastComponent, isStandalone: true, selector: "tedi-toast", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, showProgressBar: { classPropertyName: "showProgressBar", publicName: "showProgressBar", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", focusIn: "focusIn", focusOut: "focusOut" }, ngImport: i0, template: "<div\n  class=\"tedi-toast__wrapper\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  <tedi-alert\n    [title]=\"title()\"\n    [type]=\"type()\"\n    [icon]=\"icon()\"\n    [showClose]=\"true\"\n    [closeAriaLabel]=\"closeLabel()\"\n    [closeDelay]=\"300\"\n    role=\"none\"\n    (closeClick)=\"handleClose()\"\n  >\n    <ng-content></ng-content>\n  </tedi-alert>\n  @if (showProgressBar() && duration() > 0) {\n    <div\n      class=\"tedi-toast__progress tedi-toast__progress--{{ type() }}\"\n      [class.tedi-toast__progress--paused]=\"paused()\"\n      [style.animation-duration.ms]=\"duration()\"\n    ></div>\n  }\n</div>\n", styles: ["tedi-toast{display:block;width:var(--toast-width);max-width:100%}.tedi-toast__wrapper{position:relative;padding:var(--toast-outer-spacing)}.tedi-toast__wrapper tedi-alert{box-shadow:0 4px 10px 0 var(--tedi-alpha-14, rgba(0, 0, 0, .14))}.tedi-toast__progress{position:absolute;right:var(--toast-outer-spacing);bottom:var(--toast-outer-spacing);left:var(--toast-outer-spacing);height:var(--progress-bar-height-sm);background:var(--toast-progress-color);border-radius:0 var(--alert-radius) 0 var(--alert-radius);transform-origin:left;animation:toast-progress linear forwards}.tedi-toast__progress--success{--toast-progress-color: var(--alert-default-border-success)}.tedi-toast__progress--info{--toast-progress-color: var(--alert-default-border-info)}.tedi-toast__progress--danger{--toast-progress-color: var(--alert-default-border-danger)}.tedi-toast__progress--warning{--toast-progress-color: var(--alert-default-border-warning)}.tedi-toast__progress--paused{animation-play-state:paused}.tedi-toast-container{position:fixed;inset:0;z-index:var(--z-index-toast);pointer-events:none}.tedi-toast-container__position{position:absolute;display:flex;flex-direction:column;gap:var(--tedi-dimensions-05);max-height:calc(100vh - var(--toast-margin-bottom) * 2);overflow:visible}.tedi-toast-container__position>*{pointer-events:auto}.tedi-toast-container__position--top-left{top:var(--toast-margin-bottom);left:var(--toast-margin-right);align-items:flex-start}.tedi-toast-container__position--top-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--top-right{top:var(--toast-margin-bottom);right:var(--toast-margin-right);align-items:flex-end}.tedi-toast-container__position--top-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}.tedi-toast-container__position--bottom-left{bottom:var(--toast-margin-bottom);left:var(--toast-margin-right);flex-direction:column-reverse;align-items:flex-start}.tedi-toast-container__position--bottom-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);bottom:var(--toast-margin-bottom);flex-direction:column-reverse;align-items:flex-end}.tedi-toast-container__position--bottom-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}@media(max-width:35.98rem){.tedi-toast-container__position--top-left,.tedi-toast-container__position--top-right,.tedi-toast-container__position--bottom-left,.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);left:var(--toast-margin-left);align-items:stretch;transform:none}.tedi-toast-container__position--top-left tedi-toast,.tedi-toast-container__position--top-right tedi-toast,.tedi-toast-container__position--bottom-left tedi-toast,.tedi-toast-container__position--bottom-right tedi-toast{width:100%;animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}}@media(prefers-reduced-motion:reduce){.tedi-toast-container__position tedi-toast,.tedi-toast-container__position tedi-toast.tedi-toast--exiting{animation:none}}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes toast-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes toast-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes toast-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes toast-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes toast-slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes toast-slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes toast-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes toast-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "tedi-alert", inputs: ["title", "type", "icon", "showClose", "closeAriaLabel", "role", "variant", "size", "titleElement", "open", "closeDelay"], outputs: ["openChange", "closeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tedi-toast", standalone: true, imports: [AlertComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"tedi-toast__wrapper\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n>\n  <tedi-alert\n    [title]=\"title()\"\n    [type]=\"type()\"\n    [icon]=\"icon()\"\n    [showClose]=\"true\"\n    [closeDelay]=\"300\"\n    [role]=\"role()\"\n    (closeClick)=\"handleClose()\"\n  >\n    <ng-content></ng-content>\n  </tedi-alert>\n  @if (showProgressBar() && duration() > 0) {\n    <div\n      class=\"tedi-toast__progress tedi-toast__progress--{{ type() }}\"\n      [class.tedi-toast__progress--paused]=\"paused()\"\n      [style.animation-duration.ms]=\"duration()\"\n    ></div>\n  }\n</div>\n", styles: ["tedi-toast{display:block;width:var(--toast-width);max-width:100%}.tedi-toast__wrapper{position:relative;padding:var(--toast-outer-spacing, 4px)}.tedi-toast__wrapper tedi-alert{box-shadow:0 4px 10px 0 var(--tedi-alpha-14, rgba(0, 0, 0, .14))}.tedi-toast__progress{position:absolute;bottom:var(--toast-outer-spacing);left:var(--toast-outer-spacing);width:calc(100% - var(--toast-outer-spacing) * 2);height:4px;background:var(--toast-progress-color);border-radius:0 var(--alert-radius) 0 var(--alert-radius);transform-origin:left;animation:toast-progress linear forwards}.tedi-toast__progress--success{--toast-progress-color: var(--alert-default-border-success)}.tedi-toast__progress--info{--toast-progress-color: var(--alert-default-border-info)}.tedi-toast__progress--danger{--toast-progress-color: var(--alert-default-border-danger)}.tedi-toast__progress--warning{--toast-progress-color: var(--alert-default-border-warning)}.tedi-toast__progress--paused{animation-play-state:paused}.tedi-toast-container{position:fixed;inset:0;z-index:var(--z-index-toast, 1050);pointer-events:none}.tedi-toast-container__position{position:absolute;display:flex;flex-direction:column;gap:var(--tedi-dimensions-05);max-height:calc(100vh - var(--toast-margin-bottom) * 2);overflow:visible}.tedi-toast-container__position>*{pointer-events:auto}.tedi-toast-container__position--top-left{top:var(--toast-margin-bottom);left:var(--toast-margin-right);align-items:flex-start}.tedi-toast-container__position--top-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--top-right{top:var(--toast-margin-bottom);right:var(--toast-margin-right);align-items:flex-end}.tedi-toast-container__position--top-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}.tedi-toast-container__position--bottom-left{bottom:var(--toast-margin-bottom);left:var(--toast-margin-right);flex-direction:column-reverse;align-items:flex-start}.tedi-toast-container__position--bottom-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);bottom:var(--toast-margin-bottom);flex-direction:column-reverse;align-items:flex-end}.tedi-toast-container__position--bottom-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}@media(max-width:35.98rem){.tedi-toast-container__position--top-left,.tedi-toast-container__position--top-right,.tedi-toast-container__position--bottom-left,.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);left:var(--toast-margin-left);align-items:stretch;transform:none}.tedi-toast-container__position--top-left tedi-toast,.tedi-toast-container__position--top-right tedi-toast,.tedi-toast-container__position--bottom-left tedi-toast,.tedi-toast-container__position--bottom-right tedi-toast{width:100%;animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes toast-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes toast-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes toast-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes toast-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes toast-slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes toast-slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes toast-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes toast-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], showProgressBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgressBar", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], mouseEnter: [{ type: i0.Output, args: ["mouseEnter"] }], mouseLeave: [{ type: i0.Output, args: ["mouseLeave"] }] } });
+            args: [{ selector: "tedi-toast", standalone: true, imports: [AlertComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"tedi-toast__wrapper\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  <tedi-alert\n    [title]=\"title()\"\n    [type]=\"type()\"\n    [icon]=\"icon()\"\n    [showClose]=\"true\"\n    [closeAriaLabel]=\"closeLabel()\"\n    [closeDelay]=\"300\"\n    role=\"none\"\n    (closeClick)=\"handleClose()\"\n  >\n    <ng-content></ng-content>\n  </tedi-alert>\n  @if (showProgressBar() && duration() > 0) {\n    <div\n      class=\"tedi-toast__progress tedi-toast__progress--{{ type() }}\"\n      [class.tedi-toast__progress--paused]=\"paused()\"\n      [style.animation-duration.ms]=\"duration()\"\n    ></div>\n  }\n</div>\n", styles: ["tedi-toast{display:block;width:var(--toast-width);max-width:100%}.tedi-toast__wrapper{position:relative;padding:var(--toast-outer-spacing)}.tedi-toast__wrapper tedi-alert{box-shadow:0 4px 10px 0 var(--tedi-alpha-14, rgba(0, 0, 0, .14))}.tedi-toast__progress{position:absolute;right:var(--toast-outer-spacing);bottom:var(--toast-outer-spacing);left:var(--toast-outer-spacing);height:var(--progress-bar-height-sm);background:var(--toast-progress-color);border-radius:0 var(--alert-radius) 0 var(--alert-radius);transform-origin:left;animation:toast-progress linear forwards}.tedi-toast__progress--success{--toast-progress-color: var(--alert-default-border-success)}.tedi-toast__progress--info{--toast-progress-color: var(--alert-default-border-info)}.tedi-toast__progress--danger{--toast-progress-color: var(--alert-default-border-danger)}.tedi-toast__progress--warning{--toast-progress-color: var(--alert-default-border-warning)}.tedi-toast__progress--paused{animation-play-state:paused}.tedi-toast-container{position:fixed;inset:0;z-index:var(--z-index-toast);pointer-events:none}.tedi-toast-container__position{position:absolute;display:flex;flex-direction:column;gap:var(--tedi-dimensions-05);max-height:calc(100vh - var(--toast-margin-bottom) * 2);overflow:visible}.tedi-toast-container__position>*{pointer-events:auto}.tedi-toast-container__position--top-left{top:var(--toast-margin-bottom);left:var(--toast-margin-right);align-items:flex-start}.tedi-toast-container__position--top-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--top-right{top:var(--toast-margin-bottom);right:var(--toast-margin-right);align-items:flex-end}.tedi-toast-container__position--top-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}.tedi-toast-container__position--bottom-left{bottom:var(--toast-margin-bottom);left:var(--toast-margin-right);flex-direction:column-reverse;align-items:flex-start}.tedi-toast-container__position--bottom-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);bottom:var(--toast-margin-bottom);flex-direction:column-reverse;align-items:flex-end}.tedi-toast-container__position--bottom-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}@media(max-width:35.98rem){.tedi-toast-container__position--top-left,.tedi-toast-container__position--top-right,.tedi-toast-container__position--bottom-left,.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);left:var(--toast-margin-left);align-items:stretch;transform:none}.tedi-toast-container__position--top-left tedi-toast,.tedi-toast-container__position--top-right tedi-toast,.tedi-toast-container__position--bottom-left tedi-toast,.tedi-toast-container__position--bottom-right tedi-toast{width:100%;animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}}@media(prefers-reduced-motion:reduce){.tedi-toast-container__position tedi-toast,.tedi-toast-container__position tedi-toast.tedi-toast--exiting{animation:none}}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes toast-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes toast-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes toast-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes toast-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes toast-slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes toast-slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes toast-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes toast-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], showProgressBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgressBar", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], mouseEnter: [{ type: i0.Output, args: ["mouseEnter"] }], mouseLeave: [{ type: i0.Output, args: ["mouseLeave"] }], focusIn: [{ type: i0.Output, args: ["focusIn"] }], focusOut: [{ type: i0.Output, args: ["focusOut"] }] } });
 
 const POSITIONS = [
     "top-left",
@@ -3713,19 +4019,13 @@ class ToastContainerComponent {
         }
         return grouped;
     }, ...(ngDevMode ? [{ debugName: "toastsByPosition" }] : []));
-    hasToastsForPosition(position) {
-        return this.toastService.getToasts().some((t) => t.position === position);
-    }
-    getToastsForPosition(position) {
-        return this.toastService.getToasts().filter((t) => t.position === position);
-    }
     onClosed(id) {
         this.toastService.close(id);
     }
-    onMouseEnter(id) {
+    onPause(id) {
         this.toastService.pause(id);
     }
-    onMouseLeave(id) {
+    onResume(id) {
         this.toastService.resume(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -3748,8 +4048,10 @@ class ToastContainerComponent {
               [paused]="toast.paused ?? false"
               [class.tedi-toast--exiting]="toast.exiting"
               (closed)="onClosed(toast.id)"
-              (mouseEnter)="onMouseEnter(toast.id)"
-              (mouseLeave)="onMouseLeave(toast.id)"
+              (mouseEnter)="onPause(toast.id)"
+              (mouseLeave)="onResume(toast.id)"
+              (focusIn)="onPause(toast.id)"
+              (focusOut)="onResume(toast.id)"
             >
               @if (toast.content) {
                 {{ toast.content }}
@@ -3759,7 +4061,7 @@ class ToastContainerComponent {
         </div>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: ToastComponent, selector: "tedi-toast", inputs: ["title", "type", "icon", "role", "duration", "showProgressBar", "paused"], outputs: ["closed", "mouseEnter", "mouseLeave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: ToastComponent, selector: "tedi-toast", inputs: ["title", "type", "icon", "role", "duration", "showProgressBar", "paused"], outputs: ["closed", "mouseEnter", "mouseLeave", "focusIn", "focusOut"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastContainerComponent, decorators: [{
             type: Component,
@@ -3786,8 +4088,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
               [paused]="toast.paused ?? false"
               [class.tedi-toast--exiting]="toast.exiting"
               (closed)="onClosed(toast.id)"
-              (mouseEnter)="onMouseEnter(toast.id)"
-              (mouseLeave)="onMouseLeave(toast.id)"
+              (mouseEnter)="onPause(toast.id)"
+              (mouseLeave)="onResume(toast.id)"
+              (focusIn)="onPause(toast.id)"
+              (focusOut)="onResume(toast.id)"
             >
               @if (toast.content) {
                 {{ toast.content }}
@@ -3806,79 +4110,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 }]
         }] });
 
+const ANNOUNCE_DELAY = 100;
+const DEFAULT_CLEAR_DELAY = 1000;
 /**
- * Custom announcer service for toast notifications that uses the `sr-only` class
- * instead of CDK's LiveAnnouncer which requires CDK styles.
+ * Announcer for toast notifications. Deliberately not CDK's `LiveAnnouncer`:
+ * that one needs `cdk-visually-hidden` from CDK's prebuilt stylesheet, which
+ * this library does not ship, and it reuses a single element whose `aria-live`
+ * is rewritten per announcement — TalkBack ignores regions mutated that way.
  *
- * Creates a visually hidden element that screen readers can access to announce
- * toast messages with appropriate politeness levels.
+ * Instead, one region per politeness level is created up front and kept for the
+ * application's lifetime, and each message is appended as its own child so that
+ * rapid successive toasts queue instead of overwriting each other.
  *
  * @internal
  */
 class ToastAnnouncerService {
     document = inject(DOCUMENT);
-    politeElement = null;
-    assertiveElement = null;
+    regions = new Map();
+    timeouts = new Set();
+    constructor() {
+        this.getRegion("polite");
+        this.getRegion("assertive");
+    }
     /**
      * Announce a message to screen readers.
      * @param message The message to announce
      * @param politeness The politeness level: 'polite' (default) or 'assertive'
-     * @param clearAfterMs Time in ms after which to clear the message (default: 1000ms)
+     * @param clearAfterMs Time in ms after which to remove the message (default: 1000ms)
      */
-    announce(message, politeness = "polite", clearAfterMs = 1000) {
-        const element = this.getOrCreateElement(politeness);
-        element.textContent = "";
-        // Use a small timeout to ensure screen readers detect the change
-        setTimeout(() => {
-            element.textContent = message;
-            setTimeout(() => {
-                element.textContent = "";
-            }, clearAfterMs);
-        }, 100);
+    announce(message, politeness = "polite", clearAfterMs = DEFAULT_CLEAR_DELAY) {
+        const region = this.getRegion(politeness);
+        const entry = this.document.createElement("div");
+        entry.textContent = message;
+        this.schedule(() => {
+            region.appendChild(entry);
+            this.schedule(() => entry.remove(), clearAfterMs);
+        }, ANNOUNCE_DELAY);
     }
     /**
-     * Clear all announcements text content.
+     * Remove all pending and announced messages, keeping the live regions in place.
      */
     clear() {
-        if (this.politeElement) {
-            this.politeElement.textContent = "";
-        }
-        if (this.assertiveElement) {
-            this.assertiveElement.textContent = "";
-        }
+        this.cancelPending();
+        this.regions.forEach((region) => {
+            region.textContent = "";
+        });
     }
     destroy() {
-        this.politeElement?.remove();
-        this.assertiveElement?.remove();
-        this.politeElement = null;
-        this.assertiveElement = null;
+        this.cancelPending();
+        this.regions.forEach((region) => region.remove());
+        this.regions.clear();
     }
     ngOnDestroy() {
         this.destroy();
     }
-    getOrCreateElement(politeness) {
-        if (politeness === "assertive") {
-            if (!this.assertiveElement) {
-                this.assertiveElement = this.createAnnouncerElement("assertive");
-            }
-            return this.assertiveElement;
-        }
-        else {
-            if (!this.politeElement) {
-                this.politeElement = this.createAnnouncerElement("polite");
-            }
-            return this.politeElement;
-        }
+    schedule(callback, delay) {
+        const timeout = setTimeout(() => {
+            this.timeouts.delete(timeout);
+            callback();
+        }, delay);
+        this.timeouts.add(timeout);
+    }
+    cancelPending() {
+        this.timeouts.forEach((timeout) => clearTimeout(timeout));
+        this.timeouts.clear();
     }
-    createAnnouncerElement(politeness) {
-        const element = this.document.createElement("span");
-        element.setAttribute("aria-live", politeness);
-        element.setAttribute("aria-atomic", "true");
-        element.setAttribute("role", politeness === "assertive" ? "alert" : "status");
-        element.classList.add("sr-only");
-        element.id = `tedi-toast-announcer-${politeness}`;
-        this.document.body.appendChild(element);
-        return element;
+    getRegion(politeness) {
+        const existing = this.regions.get(politeness);
+        if (existing) {
+            return existing;
+        }
+        const region = this.document.createElement("div");
+        region.setAttribute("aria-live", politeness);
+        // Messages are appended as children, so the region must not be atomic —
+        // otherwise every append re-announces the messages already present.
+        region.setAttribute("aria-atomic", "false");
+        region.classList.add("sr-only");
+        region.id = `tedi-toast-announcer-${politeness}`;
+        this.document.body.appendChild(region);
+        this.regions.set(politeness, region);
+        return region;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastAnnouncerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastAnnouncerService, providedIn: "root" });
@@ -3886,7 +4197,7 @@ class ToastAnnouncerService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastAnnouncerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const ANIMATION_DURATION = 300;
 let toastId = 0;
@@ -4096,7 +4407,6 @@ class ToastService {
         if (!this.toasts().length && this.overlayRef) {
             this.overlayRef.dispose();
             this.overlayRef = null;
-            this.announcer.destroy();
         }
     }
     announceToScreenReader(toast, role) {
@@ -4337,6 +4647,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
             args: [{ standalone: true, selector: "tedi-collapse", imports: [CollapseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"tedi-collapse\"\n  [class.tedi-collapse--open]=\"isOpen() === true\"\n  [class.tedi-collapse--inverted]=\"isInvertedActive()\"\n>\n  <button\n    tedi-collapse-button\n    [open]=\"isOpen()\"\n    [openText]=\"openText()\"\n    [closeText]=\"closeText()\"\n    [hideText]=\"hideCollapseText()\"\n    [arrowType]=\"arrowType()\"\n    [size]=\"size()\"\n    [inverted]=\"inverted()\"\n    [ariaControls]=\"collapseContentId\"\n    (openChange)=\"isOpen.set($event)\"\n  ></button>\n  <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n    <div class=\"tedi-collapse__extender\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse--inverted{color:var(--general-text-white)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}\n"] }]
         }], propDecorators: { openText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openText", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], hideCollapseText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCollapseText", required: false }] }], arrowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowType", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }] } });
 
+const edgeStyle = (isPinned, offset = 0) => {
+    if (!isPinned) {
+        return null;
+    }
+    return typeof offset === "number" ? `${offset}px` : offset;
+};
+class FloatingButtonComponent {
+    baseButton = inject(BaseButtonDirective);
+    /**
+     * The button's color variant.
+     * @default primary
+     */
+    variant = input("primary", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * The button's size.
+     * @default default
+     */
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * `vertical` rotates the button 90° counter-clockwise, with rounded left
+     * corners and square right corners. Intended for desktop side placement;
+     * on mobile prefer a horizontal button near the bottom, or an icon-only one.
+     *
+     * Rotation does not change the layout box. To align the visible button with
+     * an edge, center it in a container that reserves its rotated width and height,
+     * then position the container at that edge. See the Placement story.
+     * @default horizontal
+     */
+    axis = input("horizontal", ...(ngDevMode ? [{ debugName: "axis" }] : []));
+    /**
+     * CSS positioning mode. Defaults to `fixed`; use `static` to keep the button
+     * in normal document flow.
+     * @default fixed
+     */
+    position = input("fixed", ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /**
+     * Where to pin the button within its containing block. Applied as `top` / `bottom` /
+     * `left` / `right`; `center` pins the midpoint on that axis. Has no effect when
+     * `position` is `static`.
+     */
+    placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
+    /**
+     * Distance from the pinned edges, defaulting to `0`. Numbers are treated as pixels,
+     * strings accept CSS lengths such as `1rem`. Only the edges named by `placement` apply.
+     */
+    offset = input(...(ngDevMode ? [undefined, { debugName: "offset" }] : []));
+    /**
+     * Overrides the button's CSS `z-index`. Defaults to `--z-index-feedback` when omitted.
+     */
+    zIndex = input(...(ngDevMode ? [undefined, { debugName: "zIndex" }] : []));
+    classes = computed(() => [
+        "tedi-floating-button",
+        `tedi-floating-button--${this.variant()}`,
+        `tedi-floating-button--${this.size()}`,
+        `tedi-floating-button--${this.axis()}`,
+    ].join(" "), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    /**
+     * Uses the separate `translate` property for centering, while the vertical
+     * orientation is handled by `rotate`.
+     */
+    placementStyles = computed(() => {
+        const placement = this.position() === "static" ? undefined : this.placement();
+        const { vertical, horizontal } = placement ?? {};
+        const offset = this.offset();
+        const centered = horizontal === "center" || vertical === "center";
+        return {
+            top: vertical === "center"
+                ? "50%"
+                : edgeStyle(vertical === "top", offset?.top),
+            bottom: edgeStyle(vertical === "bottom", offset?.bottom),
+            left: horizontal === "center"
+                ? "50%"
+                : edgeStyle(horizontal === "left", offset?.left),
+            right: edgeStyle(horizontal === "right", offset?.right),
+            translate: centered
+                ? `${horizontal === "center" ? "-50%" : "0"} ${vertical === "center" ? "-50%" : "0"}`
+                : null,
+        };
+    }, ...(ngDevMode ? [{ debugName: "placementStyles" }] : []));
+    ngOnInit() {
+        this.baseButton.classNamePrefix.set("tedi-floating-button");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: FloatingButtonComponent, isStandalone: true, selector: "[tedi-floating-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.position": "position()", "style.z-index": "zIndex()", "style.top": "placementStyles().top", "style.bottom": "placementStyles().bottom", "style.left": "placementStyles().left", "style.right": "placementStyles().right", "style.translate": "placementStyles().translate" } }, hostDirectives: [{ directive: BaseButtonDirective }], ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-floating-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-floating-button{z-index:var(--z-index-feedback);box-sizing:border-box;text-wrap:wrap;box-shadow:0 4px 10px 0 var(--general-effect-colors-elevation-general-secondary)}.tedi-floating-button--vertical{flex-shrink:0;white-space:nowrap;border-radius:var(--button-radius-sm) var(--button-radius-sm) 0 0;box-shadow:-4px 0 10px 0 var(--general-effect-colors-elevation-general-secondary);transform-origin:center;rotate:-90deg}.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-floating-button--primary{--_btn-hover-bg: var(--button-floating-primary-background-hover, var(--button-floating-primary-background-default));--_btn-hover-border: var(--button-floating-primary-border-hover, var(--button-floating-primary-border-default));--_btn-hover-text: var(--button-floating-primary-text-hover, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-focus-bg: var(--button-floating-primary-background-focus, var(--button-floating-primary-background-default));--_btn-focus-border: var(--button-floating-primary-border-focus, var(--button-floating-primary-border-default));--_btn-focus-text: var(--button-floating-primary-text-focus, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-active-bg: var(--button-floating-primary-background-active, var(--button-floating-primary-background-default));--_btn-active-border: var(--button-floating-primary-border-active, var(--button-floating-primary-border-default));--_btn-active-text: var(--button-floating-primary-text-active, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-floating-button--secondary{--_btn-hover-bg: var(--button-floating-secondary-background-hover, var(--button-floating-secondary-background-default));--_btn-hover-border: var(--button-floating-secondary-border-hover, var(--button-floating-secondary-border-default));--_btn-hover-text: var(--button-floating-secondary-text-hover, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-focus-bg: var(--button-floating-secondary-background-focus, var(--button-floating-secondary-background-default));--_btn-focus-border: var(--button-floating-secondary-border-focus, var(--button-floating-secondary-border-default));--_btn-focus-text: var(--button-floating-secondary-text-focus, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-active-bg: var(--button-floating-secondary-background-active, var(--button-floating-secondary-background-default));--_btn-active-border: var(--button-floating-secondary-border-active, var(--button-floating-secondary-border-default));--_btn-active-text: var(--button-floating-secondary-text-active, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-floating-button--large{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-xl-inner-spacing);--_btn-padding-y: var(--button-xl-padding-y);--_btn-padding-x: var(--button-xl-padding-x)}.tedi-floating-button--large.tedi-floating-button--icon-only{width:var(--button-xl-icon-size);height:var(--button-xl-icon-size);padding:var(--button-xl-icon-padding)}.tedi-floating-button:not(.tedi-floating-button--icon-only){min-width:var(--button-width-min);max-width:var(--button-width-max)}.tedi-floating-button--vertical:not(.tedi-floating-button--icon-only){width:max-content}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FloatingButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "[tedi-floating-button]", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [BaseButtonDirective], host: {
+                        "[class]": "classes()",
+                        "[style.position]": "position()",
+                        "[style.z-index]": "zIndex()",
+                        "[style.top]": "placementStyles().top",
+                        "[style.bottom]": "placementStyles().bottom",
+                        "[style.left]": "placementStyles().left",
+                        "[style.right]": "placementStyles().right",
+                        "[style.translate]": "placementStyles().translate",
+                    }, styles: [".tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-floating-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-floating-button{z-index:var(--z-index-feedback);box-sizing:border-box;text-wrap:wrap;box-shadow:0 4px 10px 0 var(--general-effect-colors-elevation-general-secondary)}.tedi-floating-button--vertical{flex-shrink:0;white-space:nowrap;border-radius:var(--button-radius-sm) var(--button-radius-sm) 0 0;box-shadow:-4px 0 10px 0 var(--general-effect-colors-elevation-general-secondary);transform-origin:center;rotate:-90deg}.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-floating-button--primary{--_btn-hover-bg: var(--button-floating-primary-background-hover, var(--button-floating-primary-background-default));--_btn-hover-border: var(--button-floating-primary-border-hover, var(--button-floating-primary-border-default));--_btn-hover-text: var(--button-floating-primary-text-hover, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-focus-bg: var(--button-floating-primary-background-focus, var(--button-floating-primary-background-default));--_btn-focus-border: var(--button-floating-primary-border-focus, var(--button-floating-primary-border-default));--_btn-focus-text: var(--button-floating-primary-text-focus, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-active-bg: var(--button-floating-primary-background-active, var(--button-floating-primary-background-default));--_btn-active-border: var(--button-floating-primary-border-active, var(--button-floating-primary-border-default));--_btn-active-text: var(--button-floating-primary-text-active, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-floating-button--secondary{--_btn-hover-bg: var(--button-floating-secondary-background-hover, var(--button-floating-secondary-background-default));--_btn-hover-border: var(--button-floating-secondary-border-hover, var(--button-floating-secondary-border-default));--_btn-hover-text: var(--button-floating-secondary-text-hover, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-focus-bg: var(--button-floating-secondary-background-focus, var(--button-floating-secondary-background-default));--_btn-focus-border: var(--button-floating-secondary-border-focus, var(--button-floating-secondary-border-default));--_btn-focus-text: var(--button-floating-secondary-text-focus, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-active-bg: var(--button-floating-secondary-background-active, var(--button-floating-secondary-background-default));--_btn-active-border: var(--button-floating-secondary-border-active, var(--button-floating-secondary-border-default));--_btn-active-text: var(--button-floating-secondary-text-active, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-floating-button--large{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-xl-inner-spacing);--_btn-padding-y: var(--button-xl-padding-y);--_btn-padding-x: var(--button-xl-padding-x)}.tedi-floating-button--large.tedi-floating-button--icon-only{width:var(--button-xl-icon-size);height:var(--button-xl-icon-size);padding:var(--button-xl-icon-padding)}.tedi-floating-button:not(.tedi-floating-button--icon-only){min-width:var(--button-width-min);max-width:var(--button-width-max)}.tedi-floating-button--vertical:not(.tedi-floating-button--icon-only){width:max-content}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
+
 /**
  * A single item inside a `tedi-accordion`. Owns the item's state (expanded)
  * and the inputs shared by header and content (selected, showIconCard,
@@ -6340,6 +6749,13 @@ function calculateVisibleTagCount(tagWidths, availableWidth, { gap = TAG_GAP, co
 
 class DateInputComponent {
     inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /** `name` attribute of the text input; omitted from the DOM when not set. */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    /**
+     * `aria-describedby` ids for the input. Handed to the `tedi-text-field`
+     * directive, which owns the input's `aria-describedby` attribute.
+     */
+    ariaDescribedby = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : []));
     value = input("", ...(ngDevMode ? [{ debugName: "value" }] : []));
     tags = input([], ...(ngDevMode ? [{ debugName: "tags" }] : []));
     mode = input("single", ...(ngDevMode ? [{ debugName: "mode" }] : []));
@@ -6375,6 +6791,7 @@ class DateInputComponent {
     tagElements = viewChildren("tagElement", ...(ngDevMode ? [{ debugName: "tagElements", read: ElementRef }] : [{
             read: ElementRef,
         }]));
+    textField = viewChild(TextFieldComponent, ...(ngDevMode ? [{ debugName: "textField" }] : []));
     /** Number of tags that fit on a single row; `null` until measured. */
     visibleTagsCount = signal(null, ...(ngDevMode ? [{ debugName: "visibleTagsCount" }] : []));
     constructor() {
@@ -6383,6 +6800,10 @@ class DateInputComponent {
             this.tags();
             this.visibleTagsCount.set(null);
         });
+        effect(() => {
+            const ids = this.ariaDescribedby();
+            this.textField()?.setDescribedBy(ids ? ids.split(/\s+/).filter(Boolean) : []);
+        });
     }
     ngAfterViewChecked() {
         if (this.hasTags() && !this.multiRow()) {
@@ -6469,7 +6890,7 @@ class DateInputComponent {
         return width - inputMinWidth;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\"\n        >+{{ hiddenTagsCount() }}</tedi-tag\n      >\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [type]=\"inputType()\"\n    [value]=\"inputValue()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textField", first: true, predicate: TextFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\"\n        >+{{ hiddenTagsCount() }}</tedi-tag\n      >\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [attr.name]=\"name() || null\"\n    [type]=\"inputType()\"\n    [value]=\"inputValue()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -6488,12 +6909,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[class.tedi-date-input--tags-single-row]": "hasTags() && !multiRow()",
                         "[class.tedi-date-input--tags-measuring]": "hasTags() && !multiRow() && visibleTagsCount() === null",
                         "(window:resize)": "onResize()",
-                    }, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\"\n        >+{{ hiddenTagsCount() }}</tedi-tag\n      >\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [type]=\"inputType()\"\n    [value]=\"inputValue()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], iconActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconActive", required: false }] }], iconDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconDisabled", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], nativeIsoValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeIsoValue", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], iconClick: [{ type: i0.Output, args: ["iconClick"] }], tagRemove: [{ type: i0.Output, args: ["tagRemove"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { ...{
+                    }, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\"\n        >+{{ hiddenTagsCount() }}</tedi-tag\n      >\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [attr.name]=\"name() || null\"\n    [type]=\"inputType()\"\n    [value]=\"inputValue()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], iconActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconActive", required: false }] }], iconDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconDisabled", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], nativeIsoValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeIsoValue", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], iconClick: [{ type: i0.Output, args: ["iconClick"] }], tagRemove: [{ type: i0.Output, args: ["tagRemove"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { ...{
                             read: ElementRef,
                         }, isSignal: true }] }], fieldElement: [{ type: i0.ViewChild, args: ["fieldElement", { isSignal: true }] }], tagElements: [{ type: i0.ViewChildren, args: ["tagElement", { ...{
                             read: ElementRef,
-                        }, isSignal: true }] }] } });
+                        }, isSignal: true }] }], textField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TextFieldComponent), { isSignal: true }] }] } });
 
 /**
  * Formats a Date object to dd.MM.yyyy string format.
@@ -7637,7 +8058,7 @@ class CalendarHeaderComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarHeaderComponent, isStandalone: true, selector: "tedi-calendar-header", inputs: { currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, isMonthDisabled: { classPropertyName: "isMonthDisabled", publicName: "isMonthDisabled", isSignal: true, isRequired: false, transformFunction: null }, isYearDisabled: { classPropertyName: "isYearDisabled", publicName: "isYearDisabled", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, yearPageStart: { classPropertyName: "yearPageStart", publicName: "yearPageStart", isSignal: true, isRequired: false, transformFunction: null }, yearPageSize: { classPropertyName: "yearPageSize", publicName: "yearPageSize", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClick: "prevClick", nextClick: "nextClick", monthChange: "monthChange", yearChange: "yearChange", viewChange: "viewChange" }, ngImport: i0, template: "<div\n  class=\"tedi-calendar-header\"\n  role=\"group\"\n  [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n  [attr.aria-label]=\"navAriaLabel()\"\n>\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"prevAriaLabel()\"\n      [disabled]=\"prevDisabled()\"\n      (click)=\"handlePrev()\"\n    >\n      <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n    </button>\n  }\n\n  <div class=\"tedi-calendar-header__title\">\n    @switch (view()) {\n      @case (\"days\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentMonthIndex().toString()\"\n            (valueChange)=\"handleMonthSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectMonthLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentMonthLabel() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n            >\n              @for (option of monthOptions(); track option.index) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.index.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.label }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectMonthLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleMonthLabelClick()\"\n          >\n            {{ currentMonthLabel() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentMonthLabel() }}\n          </span>\n        }\n\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            position=\"bottom-end\"\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"months\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"years\") {\n        <span class=\"tedi-calendar-header__static-label\">\n          {{ yearRangeLabel() }}\n        </span>\n      }\n    }\n  </div>\n\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"nextAriaLabel()\"\n      [disabled]=\"nextDisabled()\"\n      (click)=\"handleNext()\"\n    >\n      <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n    </button>\n  }\n\n  <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n    {{ captionAnnouncement() }}\n  </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:space-between}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-left:var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarHeaderComponent, isStandalone: true, selector: "tedi-calendar-header", inputs: { currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, isMonthDisabled: { classPropertyName: "isMonthDisabled", publicName: "isMonthDisabled", isSignal: true, isRequired: false, transformFunction: null }, isYearDisabled: { classPropertyName: "isYearDisabled", publicName: "isYearDisabled", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, yearPageStart: { classPropertyName: "yearPageStart", publicName: "yearPageStart", isSignal: true, isRequired: false, transformFunction: null }, yearPageSize: { classPropertyName: "yearPageSize", publicName: "yearPageSize", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClick: "prevClick", nextClick: "nextClick", monthChange: "monthChange", yearChange: "yearChange", viewChange: "viewChange" }, ngImport: i0, template: "<div\n  class=\"tedi-calendar-header\"\n  role=\"group\"\n  [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n  [attr.aria-label]=\"navAriaLabel()\"\n>\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"prevAriaLabel()\"\n      [disabled]=\"prevDisabled()\"\n      (click)=\"handlePrev()\"\n    >\n      <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n    </button>\n  }\n\n  <div class=\"tedi-calendar-header__title\">\n    @switch (view()) {\n      @case (\"days\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentMonthIndex().toString()\"\n            (valueChange)=\"handleMonthSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectMonthLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentMonthLabel() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n            >\n              @for (option of monthOptions(); track option.index) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.index.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.label }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectMonthLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleMonthLabelClick()\"\n          >\n            {{ currentMonthLabel() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentMonthLabel() }}\n          </span>\n        }\n\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            position=\"bottom-end\"\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"months\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"years\") {\n        <span class=\"tedi-calendar-header__static-label\">\n          {{ yearRangeLabel() }}\n        </span>\n      }\n    }\n  </div>\n\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"nextAriaLabel()\"\n      [disabled]=\"nextDisabled()\"\n      (click)=\"handleNext()\"\n    >\n      <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n    </button>\n  }\n\n  <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n    {{ captionAnnouncement() }}\n  </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:space-between}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-left:var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
             type: Component,
@@ -8845,6 +9266,11 @@ class DateFieldComponent {
      * `<label tedi-label [for]>` to the same value.
      */
     inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /**
+     * `name` attribute of the underlying text input, used by native form
+     * submission. Omitted from the DOM when not set.
+     */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
     /**
      * The selected value (two-way / `ControlValueAccessor`). Shape follows `mode`:
      * `single` → `Date | null`, `multiple` → `Date[]`, `range` → `{ from, to }`.
@@ -9054,7 +9480,21 @@ class DateFieldComponent {
             { ...opposite, originY: "top", overlayY: "bottom", offsetY: -4 },
         ];
     }, ...(ngDevMode ? [{ debugName: "overlayPositions" }] : []));
+    /**
+     * `aria-describedby` ids for the inner input — the wrapping form-field's
+     * feedback text, plus any set on `<tedi-date-field>` itself.
+     */
+    describedBy = controlDescribedBy();
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    /**
+     * Uncommitted input text, tracked separately so resets clear it even when
+     * `value` is unchanged. Value changes discard it; `null` shows the formatted value.
+     */
+    typedText = linkedSignal(...(ngDevMode ? [{ debugName: "typedText", source: this.value,
+            computation: () => null }] : [{
+            source: this.value,
+            computation: () => null,
+        }]));
     modalRef = null;
     scrollListener;
     onChange = () => { };
@@ -9160,6 +9600,11 @@ class DateFieldComponent {
             return customFormat(v);
         return this.defaultFormat(v);
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    /**
+     * What the text input actually shows: uncommitted typed text when there is
+     * any, otherwise the formatted `value`.
+     */
+    inputText = computed(() => this.typedText() ?? this.displayValue(), ...(ngDevMode ? [{ debugName: "inputText" }] : []));
     tagsForMultipleMode = computed(() => {
         if (this.mode() !== "multiple")
             return [];
@@ -9210,6 +9655,7 @@ class DateFieldComponent {
         });
     }
     writeValue(value) {
+        this.typedText.set(null);
         this.value.set(value);
     }
     registerOnChange(fn) {
@@ -9221,6 +9667,9 @@ class DateFieldComponent {
     setDisabledState(isDisabled) {
         this.cvaDisabled.set(isDisabled);
     }
+    setDescribedBy(ids) {
+        this.describedBy.set(ids);
+    }
     focus() {
         if (this.fieldDisabled())
             return;
@@ -9270,6 +9719,7 @@ class DateFieldComponent {
             this.handleNativeInputChange(value);
             return;
         }
+        this.typedText.set(value);
         if (value === "") {
             this.commitValue(null);
             return;
@@ -9318,6 +9768,7 @@ class DateFieldComponent {
         if (!calendar)
             return;
         const newValue = calendar.value();
+        this.typedText.set(null);
         this.value.set(newValue);
         this.onChange(newValue);
         this.onTouched();
@@ -9518,6 +9969,7 @@ class DateFieldComponent {
         return false;
     }
     commitValue(next) {
+        this.typedText.set(null);
         this.value.set(next);
         this.onChange(next);
         this.onTouched();
@@ -9579,7 +10031,7 @@ class DateFieldComponent {
         return host.querySelector(".tedi-date-input__input");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateFieldComponent, isStandalone: true, selector: "tedi-date-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disablePast: { classPropertyName: "disablePast", publicName: "disablePast", isSignal: true, isRequired: false, transformFunction: null }, disableFuture: { classPropertyName: "disableFuture", publicName: "disableFuture", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, initialMonth: { classPropertyName: "initialMonth", publicName: "initialMonth", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, enableCalendar: { classPropertyName: "enableCalendar", publicName: "enableCalendar", isSignal: true, isRequired: false, transformFunction: null }, calendarTrigger: { classPropertyName: "calendarTrigger", publicName: "calendarTrigger", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", openChange: "openChange" }, host: { properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--invalid": "paintsSurface() && invalid()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-field-surface--disabled": "paintsSurface() && disabled()", "class.tedi-date-field--small": "resolvedSize() === 'small'", "class.tedi-date-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-date-field" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateFieldComponent, isStandalone: true, selector: "tedi-date-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disablePast: { classPropertyName: "disablePast", publicName: "disablePast", isSignal: true, isRequired: false, transformFunction: null }, disableFuture: { classPropertyName: "disableFuture", publicName: "disableFuture", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, initialMonth: { classPropertyName: "initialMonth", publicName: "initialMonth", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, enableCalendar: { classPropertyName: "enableCalendar", publicName: "enableCalendar", isSignal: true, isRequired: false, transformFunction: null }, calendarTrigger: { classPropertyName: "calendarTrigger", publicName: "calendarTrigger", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", openChange: "openChange" }, host: { properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--invalid": "paintsSurface() && invalid()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-field-surface--disabled": "paintsSurface() && disabled()", "class.tedi-date-field--small": "resolvedSize() === 'small'", "class.tedi-date-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-date-field" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateFieldComponent),
@@ -9594,7 +10046,7 @@ class DateFieldComponent {
                 useFactory: (field) => field.childContext,
                 deps: [forwardRef(() => DateFieldComponent)],
             },
-        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-date-input\n  #dateInput\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n  [inputId]=\"inputId()\"\n  [value]=\"displayValue()\"\n  [tags]=\"tagsForMultipleMode()\"\n  [mode]=\"mode()\"\n  [multiRow]=\"multiRow()\"\n  [ellipsis]=\"tagEllipsis()\"\n  [removable]=\"isTagRemovable()\"\n  [placeholder]=\"effectivePlaceholder()\"\n  [disabled]=\"fieldDisabled()\"\n  [readOnly]=\"readOnly() || inputIsTrigger()\"\n  [required]=\"required()\"\n  [iconActive]=\"overlayOpen()\"\n  [iconDisabled]=\"!enableCalendarResolved()\"\n  [useNativePicker]=\"useNativePickerEffective()\"\n  [nativeIsoValue]=\"nativeIsoValue()\"\n  [clearable]=\"canClear()\"\n  (click)=\"handleInputClick($event)\"\n  (inputChange)=\"handleInputChange($event)\"\n  (iconClick)=\"handleIconClick()\"\n  (tagRemove)=\"handleTagRemove($event)\"\n  (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n    [cdkConnectedOverlayHasBackdrop]=\"false\"\n    (attach)=\"handleOverlayAttached()\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n    (detach)=\"handleOverlayDetached()\"\n  >\n    <div\n      class=\"tedi-date-field__overlay\"\n      role=\"dialog\"\n      [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n      cdkTrapFocus\n      (keydown)=\"handleOverlayKeydown($event)\"\n    >\n      <tedi-calendar\n        #calendar\n        [bordered]=\"false\"\n        [value]=\"value()\"\n        [currentMonth]=\"currentMonth()\"\n        [mode]=\"mode()\"\n        [selectionLevel]=\"selectionLevel()\"\n        [localeCode]=\"localeCode()\"\n        [showOutsideDays]=\"showOutsideDays()\"\n        [showWeekNumbers]=\"showWeekNumbers()\"\n        [numberOfMonths]=\"numberOfMonthsResolved()\"\n        [monthYearSelectType]=\"monthYearSelectType()\"\n        [required]=\"required()\"\n        [disabledMatchers]=\"resolvedDisabledMatchers()\"\n        [availableDays]=\"availableDays()\"\n        [unavailableDays]=\"unavailableDays()\"\n        [shouldDisableMonth]=\"shouldDisableMonth()\"\n        [shouldDisableYear]=\"shouldDisableYear()\"\n        [minYear]=\"minYear()\"\n        [maxYear]=\"maxYear()\"\n        [inputDisabled]=\"fieldDisabled()\"\n        (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n        (select)=\"handleCalendarSelect()\"\n      >\n        <!--\n          Footer projection forwards into the overlay-mounted calendar.\n          Modal mode (modal-below-breakpoint) does NOT receive projected\n          footers \u2014 the modal opens via ModalService.open() with a data\n          hash, which has no projection mechanism. If footer-in-modal is\n          ever required, refactor to pass a TemplateRef through the modal's\n          data injection.\n        -->\n        <ng-content select=\"[tediCalendarFooter]\" />\n      </tedi-calendar>\n    </div>\n  </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: DateInputComponent, selector: "tedi-date-input", inputs: ["inputId", "value", "tags", "mode", "multiRow", "ellipsis", "removable", "placeholder", "disabled", "readOnly", "required", "iconActive", "iconDisabled", "useNativePicker", "nativeIsoValue", "clearable"], outputs: ["inputChange", "iconClick", "tagRemove", "clear"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-date-input\n  #dateInput\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n  [inputId]=\"inputId()\"\n  [name]=\"name()\"\n  [value]=\"inputText()\"\n  [ariaDescribedby]=\"describedBy.attribute()\"\n  [tags]=\"tagsForMultipleMode()\"\n  [mode]=\"mode()\"\n  [multiRow]=\"multiRow()\"\n  [ellipsis]=\"tagEllipsis()\"\n  [removable]=\"isTagRemovable()\"\n  [placeholder]=\"effectivePlaceholder()\"\n  [disabled]=\"fieldDisabled()\"\n  [readOnly]=\"readOnly() || inputIsTrigger()\"\n  [required]=\"required()\"\n  [iconActive]=\"overlayOpen()\"\n  [iconDisabled]=\"!enableCalendarResolved()\"\n  [useNativePicker]=\"useNativePickerEffective()\"\n  [nativeIsoValue]=\"nativeIsoValue()\"\n  [clearable]=\"canClear()\"\n  (click)=\"handleInputClick($event)\"\n  (inputChange)=\"handleInputChange($event)\"\n  (iconClick)=\"handleIconClick()\"\n  (tagRemove)=\"handleTagRemove($event)\"\n  (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n    [cdkConnectedOverlayHasBackdrop]=\"false\"\n    (attach)=\"handleOverlayAttached()\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n    (detach)=\"handleOverlayDetached()\"\n  >\n    <div\n      class=\"tedi-date-field__overlay\"\n      role=\"dialog\"\n      [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n      cdkTrapFocus\n      (keydown)=\"handleOverlayKeydown($event)\"\n    >\n      <tedi-calendar\n        #calendar\n        [bordered]=\"false\"\n        [value]=\"value()\"\n        [currentMonth]=\"currentMonth()\"\n        [mode]=\"mode()\"\n        [selectionLevel]=\"selectionLevel()\"\n        [localeCode]=\"localeCode()\"\n        [showOutsideDays]=\"showOutsideDays()\"\n        [showWeekNumbers]=\"showWeekNumbers()\"\n        [numberOfMonths]=\"numberOfMonthsResolved()\"\n        [monthYearSelectType]=\"monthYearSelectType()\"\n        [required]=\"required()\"\n        [disabledMatchers]=\"resolvedDisabledMatchers()\"\n        [availableDays]=\"availableDays()\"\n        [unavailableDays]=\"unavailableDays()\"\n        [shouldDisableMonth]=\"shouldDisableMonth()\"\n        [shouldDisableYear]=\"shouldDisableYear()\"\n        [minYear]=\"minYear()\"\n        [maxYear]=\"maxYear()\"\n        [inputDisabled]=\"fieldDisabled()\"\n        (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n        (select)=\"handleCalendarSelect()\"\n      >\n        <!--\n          Footer projection forwards into the overlay-mounted calendar.\n          Modal mode (modal-below-breakpoint) does NOT receive projected\n          footers \u2014 the modal opens via ModalService.open() with a data\n          hash, which has no projection mechanism. If footer-in-modal is\n          ever required, refactor to pass a TemplateRef through the modal's\n          data injection.\n        -->\n        <ng-content select=\"[tediCalendarFooter]\" />\n      </tedi-calendar>\n    </div>\n  </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: DateInputComponent, selector: "tedi-date-input", inputs: ["inputId", "name", "ariaDescribedby", "value", "tags", "mode", "multiRow", "ellipsis", "removable", "placeholder", "disabled", "readOnly", "required", "iconActive", "iconDisabled", "useNativePicker", "nativeIsoValue", "clearable"], outputs: ["inputChange", "iconClick", "tagRemove", "clear"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldComponent, decorators: [{
             type: Component,
@@ -9628,8 +10080,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[class.tedi-field-surface--disabled]": "paintsSurface() && disabled()",
                         "[class.tedi-date-field--small]": "resolvedSize() === 'small'",
                         "[class.tedi-date-field--large]": "resolvedSize() === 'large'",
-                    }, template: "<tedi-date-input\n  #dateInput\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n  [inputId]=\"inputId()\"\n  [value]=\"displayValue()\"\n  [tags]=\"tagsForMultipleMode()\"\n  [mode]=\"mode()\"\n  [multiRow]=\"multiRow()\"\n  [ellipsis]=\"tagEllipsis()\"\n  [removable]=\"isTagRemovable()\"\n  [placeholder]=\"effectivePlaceholder()\"\n  [disabled]=\"fieldDisabled()\"\n  [readOnly]=\"readOnly() || inputIsTrigger()\"\n  [required]=\"required()\"\n  [iconActive]=\"overlayOpen()\"\n  [iconDisabled]=\"!enableCalendarResolved()\"\n  [useNativePicker]=\"useNativePickerEffective()\"\n  [nativeIsoValue]=\"nativeIsoValue()\"\n  [clearable]=\"canClear()\"\n  (click)=\"handleInputClick($event)\"\n  (inputChange)=\"handleInputChange($event)\"\n  (iconClick)=\"handleIconClick()\"\n  (tagRemove)=\"handleTagRemove($event)\"\n  (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n    [cdkConnectedOverlayHasBackdrop]=\"false\"\n    (attach)=\"handleOverlayAttached()\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n    (detach)=\"handleOverlayDetached()\"\n  >\n    <div\n      class=\"tedi-date-field__overlay\"\n      role=\"dialog\"\n      [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n      cdkTrapFocus\n      (keydown)=\"handleOverlayKeydown($event)\"\n    >\n      <tedi-calendar\n        #calendar\n        [bordered]=\"false\"\n        [value]=\"value()\"\n        [currentMonth]=\"currentMonth()\"\n        [mode]=\"mode()\"\n        [selectionLevel]=\"selectionLevel()\"\n        [localeCode]=\"localeCode()\"\n        [showOutsideDays]=\"showOutsideDays()\"\n        [showWeekNumbers]=\"showWeekNumbers()\"\n        [numberOfMonths]=\"numberOfMonthsResolved()\"\n        [monthYearSelectType]=\"monthYearSelectType()\"\n        [required]=\"required()\"\n        [disabledMatchers]=\"resolvedDisabledMatchers()\"\n        [availableDays]=\"availableDays()\"\n        [unavailableDays]=\"unavailableDays()\"\n        [shouldDisableMonth]=\"shouldDisableMonth()\"\n        [shouldDisableYear]=\"shouldDisableYear()\"\n        [minYear]=\"minYear()\"\n        [maxYear]=\"maxYear()\"\n        [inputDisabled]=\"fieldDisabled()\"\n        (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n        (select)=\"handleCalendarSelect()\"\n      >\n        <!--\n          Footer projection forwards into the overlay-mounted calendar.\n          Modal mode (modal-below-breakpoint) does NOT receive projected\n          footers \u2014 the modal opens via ModalService.open() with a data\n          hash, which has no projection mechanism. If footer-in-modal is\n          ever required, refactor to pass a TemplateRef through the modal's\n          data injection.\n        -->\n        <ng-content select=\"[tediCalendarFooter]\" />\n      </tedi-calendar>\n    </div>\n  </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disablePast: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePast", required: false }] }], disableFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFuture", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], initialMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMonth", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], enableCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCalendar", required: false }] }], calendarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarTrigger", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], calendar: [{ type: i0.ViewChild, args: ["calendar", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["dateInput", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
+                    }, template: "<tedi-date-input\n  #dateInput\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n  [inputId]=\"inputId()\"\n  [name]=\"name()\"\n  [value]=\"inputText()\"\n  [ariaDescribedby]=\"describedBy.attribute()\"\n  [tags]=\"tagsForMultipleMode()\"\n  [mode]=\"mode()\"\n  [multiRow]=\"multiRow()\"\n  [ellipsis]=\"tagEllipsis()\"\n  [removable]=\"isTagRemovable()\"\n  [placeholder]=\"effectivePlaceholder()\"\n  [disabled]=\"fieldDisabled()\"\n  [readOnly]=\"readOnly() || inputIsTrigger()\"\n  [required]=\"required()\"\n  [iconActive]=\"overlayOpen()\"\n  [iconDisabled]=\"!enableCalendarResolved()\"\n  [useNativePicker]=\"useNativePickerEffective()\"\n  [nativeIsoValue]=\"nativeIsoValue()\"\n  [clearable]=\"canClear()\"\n  (click)=\"handleInputClick($event)\"\n  (inputChange)=\"handleInputChange($event)\"\n  (iconClick)=\"handleIconClick()\"\n  (tagRemove)=\"handleTagRemove($event)\"\n  (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n    [cdkConnectedOverlayHasBackdrop]=\"false\"\n    (attach)=\"handleOverlayAttached()\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n    (detach)=\"handleOverlayDetached()\"\n  >\n    <div\n      class=\"tedi-date-field__overlay\"\n      role=\"dialog\"\n      [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n      cdkTrapFocus\n      (keydown)=\"handleOverlayKeydown($event)\"\n    >\n      <tedi-calendar\n        #calendar\n        [bordered]=\"false\"\n        [value]=\"value()\"\n        [currentMonth]=\"currentMonth()\"\n        [mode]=\"mode()\"\n        [selectionLevel]=\"selectionLevel()\"\n        [localeCode]=\"localeCode()\"\n        [showOutsideDays]=\"showOutsideDays()\"\n        [showWeekNumbers]=\"showWeekNumbers()\"\n        [numberOfMonths]=\"numberOfMonthsResolved()\"\n        [monthYearSelectType]=\"monthYearSelectType()\"\n        [required]=\"required()\"\n        [disabledMatchers]=\"resolvedDisabledMatchers()\"\n        [availableDays]=\"availableDays()\"\n        [unavailableDays]=\"unavailableDays()\"\n        [shouldDisableMonth]=\"shouldDisableMonth()\"\n        [shouldDisableYear]=\"shouldDisableYear()\"\n        [minYear]=\"minYear()\"\n        [maxYear]=\"maxYear()\"\n        [inputDisabled]=\"fieldDisabled()\"\n        (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n        (select)=\"handleCalendarSelect()\"\n      >\n        <!--\n          Footer projection forwards into the overlay-mounted calendar.\n          Modal mode (modal-below-breakpoint) does NOT receive projected\n          footers \u2014 the modal opens via ModalService.open() with a data\n          hash, which has no projection mechanism. If footer-in-modal is\n          ever required, refactor to pass a TemplateRef through the modal's\n          data injection.\n        -->\n        <ng-content select=\"[tediCalendarFooter]\" />\n      </tedi-calendar>\n    </div>\n  </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disablePast: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePast", required: false }] }], disableFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFuture", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], initialMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMonth", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], enableCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCalendar", required: false }] }], calendarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarTrigger", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], calendar: [{ type: i0.ViewChild, args: ["calendar", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["dateInput", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
 
 class PopoverTriggerDirective {
     /**
@@ -10090,7 +10542,7 @@ class DatePickerHeaderComponent {
         this.nextYearPage.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DatePickerHeaderComponent, isStandalone: true, selector: "tedi-date-picker-header", inputs: { uniqueId: { classPropertyName: "uniqueId", publicName: "uniqueId", isSignal: true, isRequired: true, transformFunction: null }, currentView: { classPropertyName: "currentView", publicName: "currentView", isSignal: true, isRequired: true, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, monthMode: { classPropertyName: "monthMode", publicName: "monthMode", isSignal: true, isRequired: false, transformFunction: null }, yearMode: { classPropertyName: "yearMode", publicName: "yearMode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, canGoPrev: { classPropertyName: "canGoPrev", publicName: "canGoPrev", isSignal: true, isRequired: false, transformFunction: null }, canGoNext: { classPropertyName: "canGoNext", publicName: "canGoNext", isSignal: true, isRequired: false, transformFunction: null }, selectedYear: { classPropertyName: "selectedYear", publicName: "selectedYear", isSignal: true, isRequired: true, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: true, isRequired: true, transformFunction: null }, pagedYears: { classPropertyName: "pagedYears", publicName: "pagedYears", isSignal: true, isRequired: true, transformFunction: null }, hasPrevYearPage: { classPropertyName: "hasPrevYearPage", publicName: "hasPrevYearPage", isSignal: true, isRequired: false, transformFunction: null }, hasNextYearPage: { classPropertyName: "hasNextYearPage", publicName: "hasNextYearPage", isSignal: true, isRequired: false, transformFunction: null }, disabledMonths: { classPropertyName: "disabledMonths", publicName: "disabledMonths", isSignal: true, isRequired: false, transformFunction: null }, disabledYears: { classPropertyName: "disabledYears", publicName: "disabledYears", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevMonth: "prevMonth", nextMonth: "nextMonth", monthSelect: "monthSelect", yearSelect: "yearSelect", monthClick: "monthClick", yearClick: "yearClick", prevYearPage: "prevYearPage", nextYearPage: "nextYearPage" }, ngImport: i0, template: "<div class=\"tedi-date-picker__header\">\n  @if (currentView() === \"calendar-grid\") {\n    @if (showNavigation()) {\n      <button\n        tedi-button\n        variant=\"neutral\"\n        size=\"small\"\n        class=\"tedi-date-picker__nav\"\n        [attr.aria-label]=\"\n          translationService.track('date-picker.go-prev-month')()\n        \"\n        [attr.aria-controls]=\"uniqueId()\"\n        (click)=\"onPrevMonth()\"\n        [disabled]=\"!canGoPrev()\"\n      >\n        <tedi-icon name=\"arrow_back\" />\n      </button>\n    }\n\n    <div class=\"tedi-date-picker__controls\">\n      @if (monthMode() === \"dropdown\") {\n        <tedi-dropdown\n          [value]=\"month().getMonth().toString()\"\n          (valueChange)=\"onMonthSelect($event)\"\n        >\n          <button\n            tedi-dropdown-trigger\n            ariaHaspopup=\"listbox\"\n            class=\"tedi-date-picker__dropdown-trigger\"\n            [attr.aria-label]=\"\n              translationService.track('date-picker.select-month')()\n            \"\n          >\n            {{ monthNames[month().getMonth()]() }}\n            <tedi-icon\n              name=\"arrow_drop_down\"\n              class=\"tedi-date-picker__dropdown-arrow\"\n              size=\"inherit\"\n            />\n          </button>\n          <tedi-dropdown-content\n            dropdownRole=\"listbox\"\n            class=\"tedi-date-picker__dropdown-content tedi-date-picker__dropdown-content--month\"\n          >\n            @for (monthName of monthNames; track i; let i = $index) {\n              <li\n                tedi-dropdown-item\n                [value]=\"i.toString()\"\n                [disabled]=\"disabledMonths().has(i)\"\n              >\n                {{ monthName() }}\n              </li>\n            }\n          </tedi-dropdown-content>\n        </tedi-dropdown>\n      } @else if (monthMode() === \"grid\") {\n        <button\n          class=\"tedi-date-picker__dropdown-trigger\"\n          [attr.aria-label]=\"\n            translationService.track('date-picker.select-month')()\n          \"\n          (click)=\"onMonthClick()\"\n        >\n          {{ monthNames[month().getMonth()]() }}\n          <tedi-icon\n            name=\"arrow_drop_down\"\n            class=\"tedi-date-picker__dropdown-arrow\"\n            size=\"inherit\"\n          />\n        </button>\n      } @else if (monthMode() === \"label\") {\n        <div class=\"tedi-date-picker__label\">\n          {{ monthNames[month().getMonth()]() }}\n        </div>\n      }\n\n      @if (yearMode() === \"dropdown\") {\n        <tedi-dropdown\n          position=\"bottom-end\"\n          [value]=\"selectedYear().toString()\"\n          (valueChange)=\"onYearSelect($event)\"\n        >\n          <button\n            tedi-dropdown-trigger\n            ariaHaspopup=\"listbox\"\n            class=\"tedi-date-picker__dropdown-trigger\"\n            [attr.aria-label]=\"\n              translationService.track('date-picker.select-year')()\n            \"\n          >\n            {{ selectedYear() }}\n            <tedi-icon\n              name=\"arrow_drop_down\"\n              class=\"tedi-date-picker__dropdown-arrow\"\n              size=\"inherit\"\n            />\n          </button>\n          <tedi-dropdown-content\n            dropdownRole=\"listbox\"\n            class=\"tedi-date-picker__dropdown-content tedi-date-picker__dropdown-content--year\"\n          >\n            @for (year of years(); track year) {\n              <li\n                tedi-dropdown-item\n                [value]=\"year.toString()\"\n                [disabled]=\"disabledYears().has(year)\"\n              >\n                {{ year }}\n              </li>\n            }\n          </tedi-dropdown-content>\n        </tedi-dropdown>\n      } @else if (yearMode() === \"grid\") {\n        <button\n          class=\"tedi-date-picker__dropdown-trigger\"\n          [attr.aria-label]=\"\n            translationService.track('date-picker.select-year')()\n          \"\n          (click)=\"onYearClick()\"\n        >\n          {{ selectedYear() }}\n          <tedi-icon\n            name=\"arrow_drop_down\"\n            class=\"tedi-date-picker__dropdown-arrow\"\n            size=\"inherit\"\n          />\n        </button>\n      } @else if (yearMode() === \"label\") {\n        <div class=\"tedi-date-picker__label\">\n          {{ selectedYear() }}\n        </div>\n      }\n    </div>\n\n    @if (showNavigation()) {\n      <button\n        tedi-button\n        variant=\"neutral\"\n        size=\"small\"\n        class=\"tedi-date-picker__nav\"\n        [attr.aria-label]=\"\n          translationService.track('date-picker.go-next-month')()\n        \"\n        [attr.aria-controls]=\"uniqueId()\"\n        (click)=\"onNextMonth()\"\n        [disabled]=\"!canGoNext()\"\n      >\n        <tedi-icon name=\"arrow_forward\" />\n      </button>\n    }\n  } @else if (currentView() === \"month-grid\") {\n    <div class=\"tedi-date-picker__controls\">\n      {{ monthNames[month().getMonth()]() }}\n    </div>\n  } @else if (currentView() === \"year-grid\") {\n    <button\n      tedi-button\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__nav\"\n      [attr.aria-label]=\"\n        translationService.track('date-picker.previous-years')()\n      \"\n      (click)=\"onPrevYearPage()\"\n      [disabled]=\"!hasPrevYearPage()\"\n    >\n      <tedi-icon name=\"arrow_back\" />\n    </button>\n    <div class=\"tedi-date-picker__controls\">{{ selectedYear() }}</div>\n    <button\n      tedi-button\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__nav\"\n      [attr.aria-label]=\"translationService.track('date-picker.next-years')()\"\n      (click)=\"onNextYearPage()\"\n      [disabled]=\"!hasNextYearPage()\"\n    >\n      <tedi-icon name=\"arrow_forward\" />\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DatePickerHeaderComponent, isStandalone: true, selector: "tedi-date-picker-header", inputs: { uniqueId: { classPropertyName: "uniqueId", publicName: "uniqueId", isSignal: true, isRequired: true, transformFunction: null }, currentView: { classPropertyName: "currentView", publicName: "currentView", isSignal: true, isRequired: true, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, monthMode: { classPropertyName: "monthMode", publicName: "monthMode", isSignal: true, isRequired: false, transformFunction: null }, yearMode: { classPropertyName: "yearMode", publicName: "yearMode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, canGoPrev: { classPropertyName: "canGoPrev", publicName: "canGoPrev", isSignal: true, isRequired: false, transformFunction: null }, canGoNext: { classPropertyName: "canGoNext", publicName: "canGoNext", isSignal: true, isRequired: false, transformFunction: null }, selectedYear: { classPropertyName: "selectedYear", publicName: "selectedYear", isSignal: true, isRequired: true, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: true, isRequired: true, transformFunction: null }, pagedYears: { classPropertyName: "pagedYears", publicName: "pagedYears", isSignal: true, isRequired: true, transformFunction: null }, hasPrevYearPage: { classPropertyName: "hasPrevYearPage", publicName: "hasPrevYearPage", isSignal: true, isRequired: false, transformFunction: null }, hasNextYearPage: { classPropertyName: "hasNextYearPage", publicName: "hasNextYearPage", isSignal: true, isRequired: false, transformFunction: null }, disabledMonths: { classPropertyName: "disabledMonths", publicName: "disabledMonths", isSignal: true, isRequired: false, transformFunction: null }, disabledYears: { classPropertyName: "disabledYears", publicName: "disabledYears", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevMonth: "prevMonth", nextMonth: "nextMonth", monthSelect: "monthSelect", yearSelect: "yearSelect", monthClick: "monthClick", yearClick: "yearClick", prevYearPage: "prevYearPage", nextYearPage: "nextYearPage" }, ngImport: i0, template: "<div class=\"tedi-date-picker__header\">\n  @if (currentView() === \"calendar-grid\") {\n    @if (showNavigation()) {\n      <button\n        tedi-button\n        variant=\"neutral\"\n        size=\"small\"\n        class=\"tedi-date-picker__nav\"\n        [attr.aria-label]=\"\n          translationService.track('date-picker.go-prev-month')()\n        \"\n        [attr.aria-controls]=\"uniqueId()\"\n        (click)=\"onPrevMonth()\"\n        [disabled]=\"!canGoPrev()\"\n      >\n        <tedi-icon name=\"arrow_back\" />\n      </button>\n    }\n\n    <div class=\"tedi-date-picker__controls\">\n      @if (monthMode() === \"dropdown\") {\n        <tedi-dropdown\n          [value]=\"month().getMonth().toString()\"\n          (valueChange)=\"onMonthSelect($event)\"\n        >\n          <button\n            tedi-dropdown-trigger\n            ariaHaspopup=\"listbox\"\n            class=\"tedi-date-picker__dropdown-trigger\"\n            [attr.aria-label]=\"\n              translationService.track('date-picker.select-month')()\n            \"\n          >\n            {{ monthNames[month().getMonth()]() }}\n            <tedi-icon\n              name=\"arrow_drop_down\"\n              class=\"tedi-date-picker__dropdown-arrow\"\n              size=\"inherit\"\n            />\n          </button>\n          <tedi-dropdown-content\n            dropdownRole=\"listbox\"\n            class=\"tedi-date-picker__dropdown-content tedi-date-picker__dropdown-content--month\"\n          >\n            @for (monthName of monthNames; track i; let i = $index) {\n              <li\n                tedi-dropdown-item\n                [value]=\"i.toString()\"\n                [disabled]=\"disabledMonths().has(i)\"\n              >\n                {{ monthName() }}\n              </li>\n            }\n          </tedi-dropdown-content>\n        </tedi-dropdown>\n      } @else if (monthMode() === \"grid\") {\n        <button\n          class=\"tedi-date-picker__dropdown-trigger\"\n          [attr.aria-label]=\"\n            translationService.track('date-picker.select-month')()\n          \"\n          (click)=\"onMonthClick()\"\n        >\n          {{ monthNames[month().getMonth()]() }}\n          <tedi-icon\n            name=\"arrow_drop_down\"\n            class=\"tedi-date-picker__dropdown-arrow\"\n            size=\"inherit\"\n          />\n        </button>\n      } @else if (monthMode() === \"label\") {\n        <div class=\"tedi-date-picker__label\">\n          {{ monthNames[month().getMonth()]() }}\n        </div>\n      }\n\n      @if (yearMode() === \"dropdown\") {\n        <tedi-dropdown\n          position=\"bottom-end\"\n          [value]=\"selectedYear().toString()\"\n          (valueChange)=\"onYearSelect($event)\"\n        >\n          <button\n            tedi-dropdown-trigger\n            ariaHaspopup=\"listbox\"\n            class=\"tedi-date-picker__dropdown-trigger\"\n            [attr.aria-label]=\"\n              translationService.track('date-picker.select-year')()\n            \"\n          >\n            {{ selectedYear() }}\n            <tedi-icon\n              name=\"arrow_drop_down\"\n              class=\"tedi-date-picker__dropdown-arrow\"\n              size=\"inherit\"\n            />\n          </button>\n          <tedi-dropdown-content\n            dropdownRole=\"listbox\"\n            class=\"tedi-date-picker__dropdown-content tedi-date-picker__dropdown-content--year\"\n          >\n            @for (year of years(); track year) {\n              <li\n                tedi-dropdown-item\n                [value]=\"year.toString()\"\n                [disabled]=\"disabledYears().has(year)\"\n              >\n                {{ year }}\n              </li>\n            }\n          </tedi-dropdown-content>\n        </tedi-dropdown>\n      } @else if (yearMode() === \"grid\") {\n        <button\n          class=\"tedi-date-picker__dropdown-trigger\"\n          [attr.aria-label]=\"\n            translationService.track('date-picker.select-year')()\n          \"\n          (click)=\"onYearClick()\"\n        >\n          {{ selectedYear() }}\n          <tedi-icon\n            name=\"arrow_drop_down\"\n            class=\"tedi-date-picker__dropdown-arrow\"\n            size=\"inherit\"\n          />\n        </button>\n      } @else if (yearMode() === \"label\") {\n        <div class=\"tedi-date-picker__label\">\n          {{ selectedYear() }}\n        </div>\n      }\n    </div>\n\n    @if (showNavigation()) {\n      <button\n        tedi-button\n        variant=\"neutral\"\n        size=\"small\"\n        class=\"tedi-date-picker__nav\"\n        [attr.aria-label]=\"\n          translationService.track('date-picker.go-next-month')()\n        \"\n        [attr.aria-controls]=\"uniqueId()\"\n        (click)=\"onNextMonth()\"\n        [disabled]=\"!canGoNext()\"\n      >\n        <tedi-icon name=\"arrow_forward\" />\n      </button>\n    }\n  } @else if (currentView() === \"month-grid\") {\n    <div class=\"tedi-date-picker__controls\">\n      {{ monthNames[month().getMonth()]() }}\n    </div>\n  } @else if (currentView() === \"year-grid\") {\n    <button\n      tedi-button\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__nav\"\n      [attr.aria-label]=\"\n        translationService.track('date-picker.previous-years')()\n      \"\n      (click)=\"onPrevYearPage()\"\n      [disabled]=\"!hasPrevYearPage()\"\n    >\n      <tedi-icon name=\"arrow_back\" />\n    </button>\n    <div class=\"tedi-date-picker__controls\">{{ selectedYear() }}</div>\n    <button\n      tedi-button\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__nav\"\n      [attr.aria-label]=\"translationService.track('date-picker.next-years')()\"\n      (click)=\"onNextYearPage()\"\n      [disabled]=\"!hasNextYearPage()\"\n    >\n      <tedi-icon name=\"arrow_forward\" />\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerHeaderComponent, decorators: [{
             type: Component,
@@ -10219,7 +10671,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
             args: [{ standalone: true, selector: "tedi-date-picker-year-grid", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tedi-date-picker__month-year-grid\" role=\"group\">\n  @for (year of pagedYears(); track year) {\n    <button\n      type=\"button\"\n      class=\"tedi-date-picker__month-year-button\"\n      [class.tedi-date-picker__month-year-button--selected]=\"\n        selectedYear() === year\n      \"\n      (click)=\"onYearClick(year)\"\n    >\n      {{ year }}\n    </button>\n  }\n</div>\n" }]
         }], propDecorators: { pagedYears: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagedYears", required: true }] }], selectedYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedYear", required: true }] }], yearSelect: [{ type: i0.Output, args: ["yearSelect"] }] } });
 
+const warned = new Set();
+/**
+ * Logs a deprecation warning once per component, in dev mode only.
+ * @internal
+ */
+function warnDeprecated(name, message) {
+    if (!isDevMode() || warned.has(name))
+        return;
+    warned.add(name);
+    console.warn(`[TEDI] ${name} is deprecated. ${message}`);
+}
+
 let datePickerId = 0;
+/**
+ * @deprecated Use `tedi-date-field` from `@tedi-design-system/angular/tedi` instead.
+ */
 class DatePickerComponent {
     today = new Date();
     uniqueId = `tedi-date-picker-id-${datePickerId++}`;
@@ -10392,6 +10859,7 @@ class DatePickerComponent {
     calendarGrid = viewChild("gridElement", ...(ngDevMode ? [{ debugName: "calendarGrid" }] : []));
     popover = viewChild.required(PopoverComponent);
     constructor() {
+        warnDeprecated("tedi-date-picker", "Use `tedi-date-field` from `@tedi-design-system/angular/tedi` instead.");
         effect(() => {
             const selected = this.selected();
             this.inputValue.set(selected ? formatDate(selected) : "");
@@ -11096,7 +11564,7 @@ class NumberFieldComponent {
                 useExisting: forwardRef(() => NumberFieldComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-inline:var(--form-field-padding-x-sm);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding:var(--form-field-padding-y-md-default);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-y-md-default)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
@@ -11113,7 +11581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             useExisting: forwardRef(() => NumberFieldComponent),
                             multi: true,
                         },
-                    ], template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-inline:var(--form-field-padding-x-sm);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"] }]
+                    ], template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding:var(--form-field-padding-y-md-default);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-y-md-default)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputRef: [{
                 type: ViewChild,
                 args: ["inputElement"]
@@ -12116,6 +12584,11 @@ class SelectComponent {
      * Used for label association and accessibility.
      */
     inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /**
+     * Name the selection is submitted under in a native form, one entry per
+     * selected value. With object options, set `bindValue` to pick what is sent.
+     */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
     /**
      * Label text displayed above the select.
      */
@@ -12386,6 +12859,19 @@ class SelectComponent {
     measuredRowHeight = signal(null, ...(ngDevMode ? [{ debugName: "measuredRowHeight" }] : []));
     static DEFAULT_ROW_HEIGHT = 40;
     static SMALL_ROW_HEIGHT = 36;
+    /**
+     * Values written to the hidden form inputs — one entry per selected value,
+     * and a single empty entry when nothing is selected, so the field is still
+     * submitted.
+     */
+    formValues = computed(() => {
+        const values = this.selectedValues();
+        if (!values.length)
+            return [""];
+        return values.map((value) => (value == null ? "" : String(value)));
+    }, ...(ngDevMode ? [{ debugName: "formValues" }] : []));
+    isInvalid = computed(() => this.state() === "error", ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+    feedbackId = computed(() => this.feedbackText() ? `${this.inputId()}-feedback` : null, ...(ngDevMode ? [{ debugName: "feedbackId" }] : []));
     hiddenTagsCount = computed(() => {
         const visible = this.visibleTagsCount();
         const total = this.selectedValues().length;
@@ -13403,13 +13889,13 @@ class SelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, dropdownAlign: { classPropertyName: "dropdownAlign", publicName: "dropdownAlign", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, maxDropdownHeight: { classPropertyName: "maxDropdownHeight", publicName: "maxDropdownHeight", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, dropdownType: { classPropertyName: "dropdownType", publicName: "dropdownType", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualItemSize: { classPropertyName: "virtualItemSize", publicName: "virtualItemSize", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", searchChange: "searchChange", opened: "opened", closed: "closed", cleared: "cleared" }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, properties: { "class.tedi-select--multiselect": "allowMultiple()" }, classAttribute: "tedi-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, dropdownAlign: { classPropertyName: "dropdownAlign", publicName: "dropdownAlign", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, maxDropdownHeight: { classPropertyName: "maxDropdownHeight", publicName: "maxDropdownHeight", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, dropdownType: { classPropertyName: "dropdownType", publicName: "dropdownType", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualItemSize: { classPropertyName: "virtualItemSize", publicName: "virtualItemSize", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", searchChange: "searchChange", opened: "opened", closed: "closed", cleared: "cleared" }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, properties: { "class.tedi-select--multiselect": "allowMultiple()" }, classAttribute: "tedi-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "tooltipTemplate", first: true, predicate: SelectTooltipTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "virtualListboxRef", first: true, predicate: ["virtualListbox"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <tedi-label-row>\n    <label\n      [id]=\"labelId()\"\n      tedi-label\n      [for]=\"inputId()\"\n      [required]=\"required()\"\n      [size]=\"size()\"\n      (click)=\"onTriggerClick()\"\n    >\n      {{ label() }}\n    </label>\n    @if (tooltipTemplate()?.template; as tooltipTpl) {\n      <tedi-info-tooltip>\n        <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n      </tedi-info-tooltip>\n    } @else if (tooltip(); as tooltipText) {\n      <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n    }\n  </tedi-label-row>\n}\n<div\n  [id]=\"searchable() ? null : inputId()\"\n  class=\"tedi-select__trigger tedi-input\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  [class.tedi-input--small]=\"size() === 'small'\"\n  [class.tedi-input--error]=\"state() === 'error'\"\n  [class.tedi-input--valid]=\"state() === 'valid'\"\n  [class.tedi-select__trigger--searchable]=\"searchable()\"\n  [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [attr.role]=\"searchable() ? null : 'combobox'\"\n  [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n  [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n  [attr.aria-controls]=\"!searchable() && isOpen() ? listboxId() : null\"\n  [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n  [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n  (click)=\"onTriggerClick()\"\n  (keydown.enter)=\"onTriggerEnter()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  @if (searchable()) {\n    <div class=\"tedi-select__search-wrapper\">\n      @if (showSingleSelectedValue()) {\n        <span class=\"tedi-select__selected-value\">\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        </span>\n      }\n      @if (allowMultiple() && selectedValues().length) {\n        <ng-container\n          [ngTemplateOutlet]=\"multiselectTags\"\n          [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n        />\n      } @else {\n        <input\n          #searchInput\n          [id]=\"inputId()\"\n          type=\"text\"\n          class=\"tedi-select__search-input\"\n          [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n          [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n          [value]=\"searchTerm()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onSearchInput($event)\"\n          (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n          [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n          [attr.aria-label]=\"resolvedAriaLabel()\"\n        />\n      }\n    </div>\n  } @else {\n    <span class=\"tedi-select__label\">\n      @if (selectedValues().length) {\n        @if (allowMultiple()) {\n          <ng-container\n            [ngTemplateOutlet]=\"multiselectTags\"\n            [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n          />\n        } @else if (ellipsis(); as ellipsisPos) {\n          <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n            <ng-container [ngTemplateOutlet]=\"singleValue\" />\n          </tedi-ellipsis>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"singleValue\" />\n        }\n      } @else {\n        <span class=\"tedi-select__label--placeholder\">\n          {{ placeholder() }}\n        </span>\n      }\n    </span>\n  }\n\n  @if (clearable() && selectedValues().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'clear' | tediTranslate\"\n      (click)=\"clear($event)\"\n      (keydown.enter)=\"clear($event)\"\n      (keydown.space)=\"clear($event)\"\n      [attr.aria-describedby]=\"label() ? labelId() : null\"\n    ></button>\n  }\n\n  <span\n    class=\"tedi-select__arrow\"\n    aria-hidden=\"true\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </span>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template #singleValue>\n  @if (valueTemplate(); as tpl) {\n    @if (selectedOptions()[0]; as option) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl.template\"\n        [ngTemplateOutletContext]=\"getValueContext(option)\"\n      />\n    }\n  } @else {\n    {{ selectedLabels().join(\", \") }}\n  }\n</ng-template>\n\n<ng-template #multiselectTags>\n  <div\n    class=\"tedi-select__multiselect-container\"\n    [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n    [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n    #multiselectContainer\n  >\n    @if (multiRow()) {\n      @for (value of selectedValues(); track value) {\n        <tedi-tag\n          [ellipsis]=\"tagEllipsis()\"\n          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      <div class=\"tedi-select__multiselect-tags\">\n        @for (value of selectedValues(); track value; let i = $index) {\n          @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n            <tedi-tag\n              #tagElement\n              [ellipsis]=\"tagEllipsis()\"\n              [closable]=\"isTagRemovable()\"\n              (closed)=\"deselect($event, value)\"\n            >\n              {{ getLabel(value) }}\n            </tedi-tag>\n          }\n        }\n      </div>\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag class=\"tedi-select__multiselect-counter\"\n          >+{{ hiddenTagsCount() }}</tedi-tag\n        >\n      }\n    }\n    @if (searchable()) {\n      <input\n        #searchInput\n        [id]=\"inputId()\"\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [value]=\"searchTerm()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($event)\"\n        (focus)=\"onSearchFocus()\"\n        (blur)=\"onSearchBlur()\"\n        (keydown)=\"onSearchKeydown($event)\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n  (attach)=\"onOverlayAttached()\"\n  (detach)=\"toggleIsOpen(true)\"\n>\n  <div\n    class=\"tedi-select__dropdown\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n    [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n  >\n    @if (virtualize()) {\n      <div\n        #virtualListbox\n        [id]=\"listboxId()\"\n        class=\"tedi-select__options tedi-select__options--virtual\"\n        [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n        role=\"listbox\"\n        [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n        [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n        [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n        [attr.aria-activedescendant]=\"activeDescendantId()\"\n        [tabindex]=\"searchable() ? -1 : 0\"\n        (keydown)=\"onVirtualListboxKeydown($event)\"\n      >\n        @if (filteredOptions().length) {\n          @if (showSelectAllRow()) {\n            <div\n              class=\"tedi-dropdown-item\"\n              [id]=\"listboxId() + '-select-all'\"\n              role=\"option\"\n              [attr.aria-selected]=\"allOptionsSelected()\"\n              [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n              (click)=\"onVirtualSelectAllClick()\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allOptionsSelected()\"\n                [indeterminate]=\"someOptionsSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  \"select.select-all\" | tediTranslate\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n          }\n          <cdk-virtual-scroll-viewport\n            class=\"tedi-select__viewport\"\n            [itemSize]=\"virtualRowHeight()\"\n            [style.height.px]=\"virtualViewportHeight()\"\n            [minBufferPx]=\"virtualRowHeight() * 6\"\n            [maxBufferPx]=\"virtualRowHeight() * 12\"\n          >\n            <div\n              *cdkVirtualFor=\"\n                let option of filteredOptions();\n                let i = index;\n                trackBy: trackByOptionValue\n              \"\n              class=\"tedi-dropdown-item\"\n              [id]=\"virtualOptionId(i)\"\n              role=\"option\"\n              [attr.aria-selected]=\"isOptionSelected(option.value)\"\n              [attr.aria-disabled]=\"option.disabled ? true : null\"\n              [class.tedi-dropdown-item--selected]=\"\n                !allowMultiple() && isOptionSelected(option.value)\n              \"\n              [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n              [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n              [class.tedi-dropdown-item--active]=\"\n                activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n              \"\n              (click)=\"onVirtualOptionClick(option)\"\n            >\n              @if (optionTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl.template\"\n                  [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                />\n              } @else {\n                <tedi-dropdown-item-value\n                  [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              }\n            </div>\n          </cdk-virtual-scroll-viewport>\n        } @else {\n          <div\n            class=\"tedi-dropdown-item tedi-select__no-options\"\n            role=\"option\"\n            aria-disabled=\"true\"\n          >\n            {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n          </div>\n        }\n      </div>\n    } @else {\n      <ul\n        [id]=\"listboxId()\"\n        class=\"tedi-select__options\"\n        [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n        [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n        cdkListbox\n        [cdkListboxMultiple]=\"allowMultiple()\"\n        [cdkListboxValue]=\"visibleSelectedValues()\"\n        [cdkListboxNavigatesDisabledOptions]=\"false\"\n        [cdkListboxUseActiveDescendant]=\"true\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        (keydown.tab)=\"toggleIsOpen(true)\"\n        (keydown.escape)=\"toggleIsOpen(true)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (filteredOptions().length) {\n          @if (allowMultiple() && showSelectAll()) {\n            <li\n              class=\"tedi-dropdown-item\"\n              [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allOptionsSelected()\"\n                [indeterminate]=\"someOptionsSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  \"select.select-all\" | tediTranslate\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </li>\n          }\n\n          @for (group of optionGroups(); track group.label) {\n            @if (group.label.length > 0) {\n              @if (allowMultiple() && selectableGroups()) {\n                <li\n                  class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n                >\n                  <tedi-dropdown-item-value\n                    type=\"checkbox\"\n                    [selected]=\"isGroupSelected(group.label)\"\n                    [indeterminate]=\"isGroupIndeterminate(group.label)\"\n                  >\n                    <tedi-dropdown-item-value-label>{{\n                      group.label\n                    }}</tedi-dropdown-item-value-label>\n                  </tedi-dropdown-item-value>\n                </li>\n              } @else {\n                <li class=\"tedi-select__group-name\" role=\"presentation\">\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value; let i = $index) {\n              <li\n                class=\"tedi-dropdown-item\"\n                [class.tedi-dropdown-item--selected]=\"\n                  !allowMultiple() && isOptionSelected(option.value)\n                \"\n                [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n                [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n                [cdkOption]=\"option.value\"\n                [cdkOptionDisabled]=\"option.disabled\"\n              >\n                @if (optionTemplate(); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl.template\"\n                    [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                  />\n                } @else {\n                  <tedi-dropdown-item-value\n                    [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                    [selected]=\"isOptionSelected(option.value)\"\n                    [disabled]=\"!!option.disabled\"\n                  >\n                    <tedi-dropdown-item-value-label>{{\n                      option.label\n                    }}</tedi-dropdown-item-value-label>\n                  </tedi-dropdown-item-value>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li class=\"tedi-dropdown-item tedi-select__no-options\">\n            {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--body-regular-line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1 1 var(--_search-input-reserve);width:auto;min-width:0;height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: LabelRowComponent, selector: "tedi-label-row" }, { kind: "component", type: InfoTooltipComponent, selector: "tedi-info-tooltip", inputs: ["position", "openWith", "maxWidth", "color", "ariaLabel"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: EllipsisComponent, selector: "tedi-ellipsis", inputs: ["lineClamp", "tooltip", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "tooltipTemplate", first: true, predicate: SelectTooltipTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "virtualListboxRef", first: true, predicate: ["virtualListbox"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <tedi-label-row>\n    <label\n      [id]=\"labelId()\"\n      tedi-label\n      [for]=\"inputId()\"\n      [required]=\"required()\"\n      [size]=\"size()\"\n      (click)=\"onTriggerClick()\"\n    >\n      {{ label() }}\n    </label>\n    @if (tooltipTemplate()?.template; as tooltipTpl) {\n      <tedi-info-tooltip>\n        <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n      </tedi-info-tooltip>\n    } @else if (tooltip(); as tooltipText) {\n      <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n    }\n  </tedi-label-row>\n}\n<div\n  [id]=\"searchable() ? null : inputId()\"\n  class=\"tedi-select__trigger tedi-input\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  [class.tedi-input--small]=\"size() === 'small'\"\n  [class.tedi-input--error]=\"state() === 'error'\"\n  [class.tedi-input--valid]=\"state() === 'valid'\"\n  [class.tedi-select__trigger--searchable]=\"searchable()\"\n  [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [attr.role]=\"searchable() ? null : 'combobox'\"\n  [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n  [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n  [attr.aria-controls]=\"!searchable() && isOpen() ? listboxId() : null\"\n  [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n  [attr.aria-invalid]=\"!searchable() ? isInvalid() || null : null\"\n  [attr.aria-describedby]=\"!searchable() ? feedbackId() : null\"\n  [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n  (click)=\"onTriggerClick()\"\n  (keydown.enter)=\"onTriggerEnter()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  @if (searchable()) {\n    <div class=\"tedi-select__search-wrapper\">\n      @if (showSingleSelectedValue()) {\n        <span class=\"tedi-select__selected-value\">\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        </span>\n      }\n      @if (allowMultiple() && selectedValues().length) {\n        <ng-container\n          [ngTemplateOutlet]=\"multiselectTags\"\n          [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n        />\n      } @else {\n        <input\n          #searchInput\n          [id]=\"inputId()\"\n          type=\"text\"\n          class=\"tedi-select__search-input\"\n          [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n          [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n          [value]=\"searchTerm()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onSearchInput($event)\"\n          (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n          [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n          [attr.aria-label]=\"resolvedAriaLabel()\"\n          [attr.aria-invalid]=\"isInvalid() || null\"\n          [attr.aria-describedby]=\"feedbackId()\"\n        />\n      }\n    </div>\n  } @else {\n    <span class=\"tedi-select__label\">\n      @if (selectedValues().length) {\n        @if (allowMultiple()) {\n          <ng-container\n            [ngTemplateOutlet]=\"multiselectTags\"\n            [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n          />\n        } @else if (ellipsis(); as ellipsisPos) {\n          <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n            <ng-container [ngTemplateOutlet]=\"singleValue\" />\n          </tedi-ellipsis>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"singleValue\" />\n        }\n      } @else {\n        <span class=\"tedi-select__label--placeholder\">\n          {{ placeholder() }}\n        </span>\n      }\n    </span>\n  }\n\n  @if (clearable() && selectedValues().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'clear' | tediTranslate\"\n      (click)=\"clear($event)\"\n      (keydown.enter)=\"clear($event)\"\n      (keydown.space)=\"clear($event)\"\n      [attr.aria-describedby]=\"label() ? labelId() : null\"\n    ></button>\n  }\n\n  <span\n    class=\"tedi-select__arrow\"\n    aria-hidden=\"true\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </span>\n</div>\n@if (name(); as fieldName) {\n  @for (formValue of formValues(); track $index) {\n    <input\n      type=\"hidden\"\n      [name]=\"fieldName\"\n      [value]=\"formValue\"\n      [disabled]=\"disabled()\"\n    />\n  }\n}\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template #singleValue>\n  @if (valueTemplate(); as tpl) {\n    @if (selectedOptions()[0]; as option) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl.template\"\n        [ngTemplateOutletContext]=\"getValueContext(option)\"\n      />\n    }\n  } @else {\n    {{ selectedLabels().join(\", \") }}\n  }\n</ng-template>\n\n<ng-template #multiselectTags>\n  <div\n    class=\"tedi-select__multiselect-container\"\n    [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n    [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n    #multiselectContainer\n  >\n    @if (multiRow()) {\n      @for (value of selectedValues(); track value) {\n        <tedi-tag\n          [ellipsis]=\"tagEllipsis()\"\n          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      <div class=\"tedi-select__multiselect-tags\">\n        @for (value of selectedValues(); track value; let i = $index) {\n          @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n            <tedi-tag\n              #tagElement\n              [ellipsis]=\"tagEllipsis()\"\n              [closable]=\"isTagRemovable()\"\n              (closed)=\"deselect($event, value)\"\n            >\n              {{ getLabel(value) }}\n            </tedi-tag>\n          }\n        }\n      </div>\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag class=\"tedi-select__multiselect-counter\"\n          >+{{ hiddenTagsCount() }}</tedi-tag\n        >\n      }\n    }\n    @if (searchable()) {\n      <input\n        #searchInput\n        [id]=\"inputId()\"\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [value]=\"searchTerm()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($event)\"\n        (focus)=\"onSearchFocus()\"\n        (blur)=\"onSearchBlur()\"\n        (keydown)=\"onSearchKeydown($event)\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\n        [attr.aria-invalid]=\"isInvalid() || null\"\n        [attr.aria-describedby]=\"feedbackId()\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n  (attach)=\"onOverlayAttached()\"\n  (detach)=\"toggleIsOpen(true)\"\n>\n  <div\n    class=\"tedi-select__dropdown\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n    [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n  >\n    @if (virtualize()) {\n      <div\n        #virtualListbox\n        [id]=\"listboxId()\"\n        class=\"tedi-select__options tedi-select__options--virtual\"\n        [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n        role=\"listbox\"\n        [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n        [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n        [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n        [attr.aria-activedescendant]=\"activeDescendantId()\"\n        [tabindex]=\"searchable() ? -1 : 0\"\n        (keydown)=\"onVirtualListboxKeydown($event)\"\n      >\n        @if (filteredOptions().length) {\n          @if (showSelectAllRow()) {\n            <div\n              class=\"tedi-dropdown-item\"\n              [id]=\"listboxId() + '-select-all'\"\n              role=\"option\"\n              [attr.aria-selected]=\"allOptionsSelected()\"\n              [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n              (click)=\"onVirtualSelectAllClick()\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allOptionsSelected()\"\n                [indeterminate]=\"someOptionsSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  \"select.select-all\" | tediTranslate\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n          }\n          <cdk-virtual-scroll-viewport\n            class=\"tedi-select__viewport\"\n            [itemSize]=\"virtualRowHeight()\"\n            [style.height.px]=\"virtualViewportHeight()\"\n            [minBufferPx]=\"virtualRowHeight() * 6\"\n            [maxBufferPx]=\"virtualRowHeight() * 12\"\n          >\n            <div\n              *cdkVirtualFor=\"\n                let option of filteredOptions();\n                let i = index;\n                trackBy: trackByOptionValue\n              \"\n              class=\"tedi-dropdown-item\"\n              [id]=\"virtualOptionId(i)\"\n              role=\"option\"\n              [attr.aria-selected]=\"isOptionSelected(option.value)\"\n              [attr.aria-disabled]=\"option.disabled ? true : null\"\n              [class.tedi-dropdown-item--selected]=\"\n                !allowMultiple() && isOptionSelected(option.value)\n              \"\n              [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n              [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n              [class.tedi-dropdown-item--active]=\"\n                activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n              \"\n              (click)=\"onVirtualOptionClick(option)\"\n            >\n              @if (optionTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl.template\"\n                  [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                />\n              } @else {\n                <tedi-dropdown-item-value\n                  [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              }\n            </div>\n          </cdk-virtual-scroll-viewport>\n        } @else {\n          <div\n            class=\"tedi-dropdown-item tedi-select__no-options\"\n            role=\"option\"\n            aria-disabled=\"true\"\n          >\n            {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n          </div>\n        }\n      </div>\n    } @else {\n      <ul\n        [id]=\"listboxId()\"\n        class=\"tedi-select__options\"\n        [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n        [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n        cdkListbox\n        [cdkListboxMultiple]=\"allowMultiple()\"\n        [cdkListboxValue]=\"visibleSelectedValues()\"\n        [cdkListboxNavigatesDisabledOptions]=\"false\"\n        [cdkListboxUseActiveDescendant]=\"true\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        (keydown.tab)=\"toggleIsOpen(true)\"\n        (keydown.escape)=\"toggleIsOpen(true)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (filteredOptions().length) {\n          @if (allowMultiple() && showSelectAll()) {\n            <li\n              class=\"tedi-dropdown-item\"\n              [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allOptionsSelected()\"\n                [indeterminate]=\"someOptionsSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  \"select.select-all\" | tediTranslate\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </li>\n          }\n\n          @for (group of optionGroups(); track group.label) {\n            @if (group.label.length > 0) {\n              @if (allowMultiple() && selectableGroups()) {\n                <li\n                  class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n                >\n                  <tedi-dropdown-item-value\n                    type=\"checkbox\"\n                    [selected]=\"isGroupSelected(group.label)\"\n                    [indeterminate]=\"isGroupIndeterminate(group.label)\"\n                  >\n                    <tedi-dropdown-item-value-label>{{\n                      group.label\n                    }}</tedi-dropdown-item-value-label>\n                  </tedi-dropdown-item-value>\n                </li>\n              } @else {\n                <li class=\"tedi-select__group-name\" role=\"presentation\">\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value; let i = $index) {\n              <li\n                class=\"tedi-dropdown-item\"\n                [class.tedi-dropdown-item--selected]=\"\n                  !allowMultiple() && isOptionSelected(option.value)\n                \"\n                [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n                [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n                [cdkOption]=\"option.value\"\n                [cdkOptionDisabled]=\"option.disabled\"\n              >\n                @if (optionTemplate(); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl.template\"\n                    [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                  />\n                } @else {\n                  <tedi-dropdown-item-value\n                    [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                    [selected]=\"isOptionSelected(option.value)\"\n                    [disabled]=\"!!option.disabled\"\n                  >\n                    <tedi-dropdown-item-value-label>{{\n                      option.label\n                    }}</tedi-dropdown-item-value-label>\n                  </tedi-dropdown-item-value>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li class=\"tedi-dropdown-item tedi-select__no-options\">\n            {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}.tedi-input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--body-regular-line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1 1 var(--_search-input-reserve);width:auto;min-width:0;height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: LabelRowComponent, selector: "tedi-label-row" }, { kind: "component", type: InfoTooltipComponent, selector: "tedi-info-tooltip", inputs: ["position", "openWith", "maxWidth", "color", "ariaLabel"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: EllipsisComponent, selector: "tedi-ellipsis", inputs: ["lineClamp", "tooltip", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -13439,8 +13925,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "@if (label()) {\n  <tedi-label-row>\n    <label\n      [id]=\"labelId()\"\n      tedi-label\n      [for]=\"inputId()\"\n      [required]=\"required()\"\n      [size]=\"size()\"\n      (click)=\"onTriggerClick()\"\n    >\n      {{ label() }}\n    </label>\n    @if (tooltipTemplate()?.template; as tooltipTpl) {\n      <tedi-info-tooltip>\n        <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n      </tedi-info-tooltip>\n    } @else if (tooltip(); as tooltipText) {\n      <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n    }\n  </tedi-label-row>\n}\n<div\n  [id]=\"searchable() ? null : inputId()\"\n  class=\"tedi-select__trigger tedi-input\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  [class.tedi-input--small]=\"size() === 'small'\"\n  [class.tedi-input--error]=\"state() === 'error'\"\n  [class.tedi-input--valid]=\"state() === 'valid'\"\n  [class.tedi-select__trigger--searchable]=\"searchable()\"\n  [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [attr.role]=\"searchable() ? null : 'combobox'\"\n  [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n  [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n  [attr.aria-controls]=\"!searchable() && isOpen() ? listboxId() : null\"\n  [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n  [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n  (click)=\"onTriggerClick()\"\n  (keydown.enter)=\"onTriggerEnter()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  @if (searchable()) {\n    <div class=\"tedi-select__search-wrapper\">\n      @if (showSingleSelectedValue()) {\n        <span class=\"tedi-select__selected-value\">\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        </span>\n      }\n      @if (allowMultiple() && selectedValues().length) {\n        <ng-container\n          [ngTemplateOutlet]=\"multiselectTags\"\n          [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n        />\n      } @else {\n        <input\n          #searchInput\n          [id]=\"inputId()\"\n          type=\"text\"\n          class=\"tedi-select__search-input\"\n          [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n          [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n          [value]=\"searchTerm()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onSearchInput($event)\"\n          (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n          [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n          [attr.aria-label]=\"resolvedAriaLabel()\"\n        />\n      }\n    </div>\n  } @else {\n    <span class=\"tedi-select__label\">\n      @if (selectedValues().length) {\n        @if (allowMultiple()) {\n          <ng-container\n            [ngTemplateOutlet]=\"multiselectTags\"\n            [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n          />\n        } @else if (ellipsis(); as ellipsisPos) {\n          <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n            <ng-container [ngTemplateOutlet]=\"singleValue\" />\n          </tedi-ellipsis>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"singleValue\" />\n        }\n      } @else {\n        <span class=\"tedi-select__label--placeholder\">\n          {{ placeholder() }}\n        </span>\n      }\n    </span>\n  }\n\n  @if (clearable() && selectedValues().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'clear' | tediTranslate\"\n      (click)=\"clear($event)\"\n      (keydown.enter)=\"clear($event)\"\n      (keydown.space)=\"clear($event)\"\n      [attr.aria-describedby]=\"label() ? labelId() : null\"\n    ></button>\n  }\n\n  <span\n    class=\"tedi-select__arrow\"\n    aria-hidden=\"true\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </span>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template #singleValue>\n  @if (valueTemplate(); as tpl) {\n    @if (selectedOptions()[0]; as option) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl.template\"\n        [ngTemplateOutletContext]=\"getValueContext(option)\"\n      />\n    }\n  } @else {\n    {{ selectedLabels().join(\", \") }}\n  }\n</ng-template>\n\n<ng-template #multiselectTags>\n  <div\n    class=\"tedi-select__multiselect-container\"\n    [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n    [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n    #multiselectContainer\n  >\n    @if (multiRow()) {\n      @for (value of selectedValues(); track value) {\n        <tedi-tag\n          [ellipsis]=\"tagEllipsis()\"\n          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      <div class=\"tedi-select__multiselect-tags\">\n        @for (value of selectedValues(); track value; let i = $index) {\n          @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n            <tedi-tag\n              #tagElement\n              [ellipsis]=\"tagEllipsis()\"\n              [closable]=\"isTagRemovable()\"\n              (closed)=\"deselect($event, value)\"\n            >\n              {{ getLabel(value) }}\n            </tedi-tag>\n          }\n        }\n      </div>\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag class=\"tedi-select__multiselect-counter\"\n          >+{{ hiddenTagsCount() }}</tedi-tag\n        >\n      }\n    }\n    @if (searchable()) {\n      <input\n        #searchInput\n        [id]=\"inputId()\"\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [value]=\"searchTerm()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($event)\"\n        (focus)=\"onSearchFocus()\"\n        (blur)=\"onSearchBlur()\"\n        (keydown)=\"onSearchKeydown($event)\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n  (attach)=\"onOverlayAttached()\"\n  (detach)=\"toggleIsOpen(true)\"\n>\n  <div\n    class=\"tedi-select__dropdown\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n    [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n  >\n    @if (virtualize()) {\n      <div\n        #virtualListbox\n        [id]=\"listboxId()\"\n        class=\"tedi-select__options tedi-select__options--virtual\"\n        [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n        role=\"listbox\"\n        [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n        [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n        [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n        [attr.aria-activedescendant]=\"activeDescendantId()\"\n        [tabindex]=\"searchable() ? -1 : 0\"\n        (keydown)=\"onVirtualListboxKeydown($event)\"\n      >\n        @if (filteredOptions().length) {\n          @if (showSelectAllRow()) {\n            <div\n              class=\"tedi-dropdown-item\"\n              [id]=\"listboxId() + '-select-all'\"\n              role=\"option\"\n              [attr.aria-selected]=\"allOptionsSelected()\"\n              [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n              (click)=\"onVirtualSelectAllClick()\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allOptionsSelected()\"\n                [indeterminate]=\"someOptionsSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  \"select.select-all\" | tediTranslate\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n          }\n          <cdk-virtual-scroll-viewport\n            class=\"tedi-select__viewport\"\n            [itemSize]=\"virtualRowHeight()\"\n            [style.height.px]=\"virtualViewportHeight()\"\n            [minBufferPx]=\"virtualRowHeight() * 6\"\n            [maxBufferPx]=\"virtualRowHeight() * 12\"\n          >\n            <div\n              *cdkVirtualFor=\"\n                let option of filteredOptions();\n                let i = index;\n                trackBy: trackByOptionValue\n              \"\n              class=\"tedi-dropdown-item\"\n              [id]=\"virtualOptionId(i)\"\n              role=\"option\"\n              [attr.aria-selected]=\"isOptionSelected(option.value)\"\n              [attr.aria-disabled]=\"option.disabled ? true : null\"\n              [class.tedi-dropdown-item--selected]=\"\n                !allowMultiple() && isOptionSelected(option.value)\n              \"\n              [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n              [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n              [class.tedi-dropdown-item--active]=\"\n                activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n              \"\n              (click)=\"onVirtualOptionClick(option)\"\n            >\n              @if (optionTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl.template\"\n                  [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                />\n              } @else {\n                <tedi-dropdown-item-value\n                  [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              }\n            </div>\n          </cdk-virtual-scroll-viewport>\n        } @else {\n          <div\n            class=\"tedi-dropdown-item tedi-select__no-options\"\n            role=\"option\"\n            aria-disabled=\"true\"\n          >\n            {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n          </div>\n        }\n      </div>\n    } @else {\n      <ul\n        [id]=\"listboxId()\"\n        class=\"tedi-select__options\"\n        [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n        [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n        cdkListbox\n        [cdkListboxMultiple]=\"allowMultiple()\"\n        [cdkListboxValue]=\"visibleSelectedValues()\"\n        [cdkListboxNavigatesDisabledOptions]=\"false\"\n        [cdkListboxUseActiveDescendant]=\"true\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        (keydown.tab)=\"toggleIsOpen(true)\"\n        (keydown.escape)=\"toggleIsOpen(true)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (filteredOptions().length) {\n          @if (allowMultiple() && showSelectAll()) {\n            <li\n              class=\"tedi-dropdown-item\"\n              [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allOptionsSelected()\"\n                [indeterminate]=\"someOptionsSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  \"select.select-all\" | tediTranslate\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </li>\n          }\n\n          @for (group of optionGroups(); track group.label) {\n            @if (group.label.length > 0) {\n              @if (allowMultiple() && selectableGroups()) {\n                <li\n                  class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n                >\n                  <tedi-dropdown-item-value\n                    type=\"checkbox\"\n                    [selected]=\"isGroupSelected(group.label)\"\n                    [indeterminate]=\"isGroupIndeterminate(group.label)\"\n                  >\n                    <tedi-dropdown-item-value-label>{{\n                      group.label\n                    }}</tedi-dropdown-item-value-label>\n                  </tedi-dropdown-item-value>\n                </li>\n              } @else {\n                <li class=\"tedi-select__group-name\" role=\"presentation\">\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value; let i = $index) {\n              <li\n                class=\"tedi-dropdown-item\"\n                [class.tedi-dropdown-item--selected]=\"\n                  !allowMultiple() && isOptionSelected(option.value)\n                \"\n                [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n                [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n                [cdkOption]=\"option.value\"\n                [cdkOptionDisabled]=\"option.disabled\"\n              >\n                @if (optionTemplate(); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl.template\"\n                    [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                  />\n                } @else {\n                  <tedi-dropdown-item-value\n                    [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                    [selected]=\"isOptionSelected(option.value)\"\n                    [disabled]=\"!!option.disabled\"\n                  >\n                    <tedi-dropdown-item-value-label>{{\n                      option.label\n                    }}</tedi-dropdown-item-value-label>\n                  </tedi-dropdown-item-value>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li class=\"tedi-dropdown-item tedi-select__no-options\">\n            {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--body-regular-line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1 1 var(--_search-input-reserve);width:auto;min-width:0;height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dropdownWidthRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidthRef", required: false }] }], dropdownAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownAlign", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectableGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroups", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], disabledKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledKey", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], maxDropdownHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDropdownHeight", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], dropdownType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownType", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualItemSize", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{ read: ElementRef }, isSignal: true }] }], cdkListboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], virtualListboxRef: [{ type: i0.ViewChild, args: ["virtualListbox", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ["trigger", { ...{ read: ElementRef }, isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }], multiselectContainerRef: [{ type: i0.ViewChild, args: ["multiselectContainer", { isSignal: true }] }], tagRefs: [{ type: i0.ViewChildren, args: ["tagElement", { ...{ read: ElementRef }, isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectOptionTemplateDirective), { isSignal: true }] }], valueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectValueTemplateDirective), { isSignal: true }] }], tooltipTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectTooltipTemplateDirective), { isSignal: true }] }], onWindowResize: [{
+                    ], template: "@if (label()) {\n  <tedi-label-row>\n    <label\n      [id]=\"labelId()\"\n      tedi-label\n      [for]=\"inputId()\"\n      [required]=\"required()\"\n      [size]=\"size()\"\n      (click)=\"onTriggerClick()\"\n    >\n      {{ label() }}\n    </label>\n    @if (tooltipTemplate()?.template; as tooltipTpl) {\n      <tedi-info-tooltip>\n        <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n      </tedi-info-tooltip>\n    } @else if (tooltip(); as tooltipText) {\n      <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n    }\n  </tedi-label-row>\n}\n<div\n  [id]=\"searchable() ? null : inputId()\"\n  class=\"tedi-select__trigger tedi-input\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  [class.tedi-input--small]=\"size() === 'small'\"\n  [class.tedi-input--error]=\"state() === 'error'\"\n  [class.tedi-input--valid]=\"state() === 'valid'\"\n  [class.tedi-select__trigger--searchable]=\"searchable()\"\n  [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [attr.role]=\"searchable() ? null : 'combobox'\"\n  [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n  [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n  [attr.aria-controls]=\"!searchable() && isOpen() ? listboxId() : null\"\n  [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n  [attr.aria-invalid]=\"!searchable() ? isInvalid() || null : null\"\n  [attr.aria-describedby]=\"!searchable() ? feedbackId() : null\"\n  [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n  (click)=\"onTriggerClick()\"\n  (keydown.enter)=\"onTriggerEnter()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  @if (searchable()) {\n    <div class=\"tedi-select__search-wrapper\">\n      @if (showSingleSelectedValue()) {\n        <span class=\"tedi-select__selected-value\">\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        </span>\n      }\n      @if (allowMultiple() && selectedValues().length) {\n        <ng-container\n          [ngTemplateOutlet]=\"multiselectTags\"\n          [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n        />\n      } @else {\n        <input\n          #searchInput\n          [id]=\"inputId()\"\n          type=\"text\"\n          class=\"tedi-select__search-input\"\n          [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n          [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n          [value]=\"searchTerm()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onSearchInput($event)\"\n          (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n          [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n          [attr.aria-label]=\"resolvedAriaLabel()\"\n          [attr.aria-invalid]=\"isInvalid() || null\"\n          [attr.aria-describedby]=\"feedbackId()\"\n        />\n      }\n    </div>\n  } @else {\n    <span class=\"tedi-select__label\">\n      @if (selectedValues().length) {\n        @if (allowMultiple()) {\n          <ng-container\n            [ngTemplateOutlet]=\"multiselectTags\"\n            [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n          />\n        } @else if (ellipsis(); as ellipsisPos) {\n          <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n            <ng-container [ngTemplateOutlet]=\"singleValue\" />\n          </tedi-ellipsis>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"singleValue\" />\n        }\n      } @else {\n        <span class=\"tedi-select__label--placeholder\">\n          {{ placeholder() }}\n        </span>\n      }\n    </span>\n  }\n\n  @if (clearable() && selectedValues().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'clear' | tediTranslate\"\n      (click)=\"clear($event)\"\n      (keydown.enter)=\"clear($event)\"\n      (keydown.space)=\"clear($event)\"\n      [attr.aria-describedby]=\"label() ? labelId() : null\"\n    ></button>\n  }\n\n  <span\n    class=\"tedi-select__arrow\"\n    aria-hidden=\"true\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </span>\n</div>\n@if (name(); as fieldName) {\n  @for (formValue of formValues(); track $index) {\n    <input\n      type=\"hidden\"\n      [name]=\"fieldName\"\n      [value]=\"formValue\"\n      [disabled]=\"disabled()\"\n    />\n  }\n}\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template #singleValue>\n  @if (valueTemplate(); as tpl) {\n    @if (selectedOptions()[0]; as option) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl.template\"\n        [ngTemplateOutletContext]=\"getValueContext(option)\"\n      />\n    }\n  } @else {\n    {{ selectedLabels().join(\", \") }}\n  }\n</ng-template>\n\n<ng-template #multiselectTags>\n  <div\n    class=\"tedi-select__multiselect-container\"\n    [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n    [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n    #multiselectContainer\n  >\n    @if (multiRow()) {\n      @for (value of selectedValues(); track value) {\n        <tedi-tag\n          [ellipsis]=\"tagEllipsis()\"\n          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      <div class=\"tedi-select__multiselect-tags\">\n        @for (value of selectedValues(); track value; let i = $index) {\n          @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n            <tedi-tag\n              #tagElement\n              [ellipsis]=\"tagEllipsis()\"\n              [closable]=\"isTagRemovable()\"\n              (closed)=\"deselect($event, value)\"\n            >\n              {{ getLabel(value) }}\n            </tedi-tag>\n          }\n        }\n      </div>\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag class=\"tedi-select__multiselect-counter\"\n          >+{{ hiddenTagsCount() }}</tedi-tag\n        >\n      }\n    }\n    @if (searchable()) {\n      <input\n        #searchInput\n        [id]=\"inputId()\"\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [value]=\"searchTerm()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($event)\"\n        (focus)=\"onSearchFocus()\"\n        (blur)=\"onSearchBlur()\"\n        (keydown)=\"onSearchKeydown($event)\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\n        [attr.aria-invalid]=\"isInvalid() || null\"\n        [attr.aria-describedby]=\"feedbackId()\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n  (attach)=\"onOverlayAttached()\"\n  (detach)=\"toggleIsOpen(true)\"\n>\n  <div\n    class=\"tedi-select__dropdown\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n    [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n  >\n    @if (virtualize()) {\n      <div\n        #virtualListbox\n        [id]=\"listboxId()\"\n        class=\"tedi-select__options tedi-select__options--virtual\"\n        [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n        role=\"listbox\"\n        [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n        [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n        [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n        [attr.aria-activedescendant]=\"activeDescendantId()\"\n        [tabindex]=\"searchable() ? -1 : 0\"\n        (keydown)=\"onVirtualListboxKeydown($event)\"\n      >\n        @if (filteredOptions().length) {\n          @if (showSelectAllRow()) {\n            <div\n              class=\"tedi-dropdown-item\"\n              [id]=\"listboxId() + '-select-all'\"\n              role=\"option\"\n              [attr.aria-selected]=\"allOptionsSelected()\"\n              [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n              (click)=\"onVirtualSelectAllClick()\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allOptionsSelected()\"\n                [indeterminate]=\"someOptionsSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  \"select.select-all\" | tediTranslate\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n          }\n          <cdk-virtual-scroll-viewport\n            class=\"tedi-select__viewport\"\n            [itemSize]=\"virtualRowHeight()\"\n            [style.height.px]=\"virtualViewportHeight()\"\n            [minBufferPx]=\"virtualRowHeight() * 6\"\n            [maxBufferPx]=\"virtualRowHeight() * 12\"\n          >\n            <div\n              *cdkVirtualFor=\"\n                let option of filteredOptions();\n                let i = index;\n                trackBy: trackByOptionValue\n              \"\n              class=\"tedi-dropdown-item\"\n              [id]=\"virtualOptionId(i)\"\n              role=\"option\"\n              [attr.aria-selected]=\"isOptionSelected(option.value)\"\n              [attr.aria-disabled]=\"option.disabled ? true : null\"\n              [class.tedi-dropdown-item--selected]=\"\n                !allowMultiple() && isOptionSelected(option.value)\n              \"\n              [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n              [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n              [class.tedi-dropdown-item--active]=\"\n                activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n              \"\n              (click)=\"onVirtualOptionClick(option)\"\n            >\n              @if (optionTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl.template\"\n                  [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                />\n              } @else {\n                <tedi-dropdown-item-value\n                  [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              }\n            </div>\n          </cdk-virtual-scroll-viewport>\n        } @else {\n          <div\n            class=\"tedi-dropdown-item tedi-select__no-options\"\n            role=\"option\"\n            aria-disabled=\"true\"\n          >\n            {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n          </div>\n        }\n      </div>\n    } @else {\n      <ul\n        [id]=\"listboxId()\"\n        class=\"tedi-select__options\"\n        [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n        [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n        cdkListbox\n        [cdkListboxMultiple]=\"allowMultiple()\"\n        [cdkListboxValue]=\"visibleSelectedValues()\"\n        [cdkListboxNavigatesDisabledOptions]=\"false\"\n        [cdkListboxUseActiveDescendant]=\"true\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        (keydown.tab)=\"toggleIsOpen(true)\"\n        (keydown.escape)=\"toggleIsOpen(true)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (filteredOptions().length) {\n          @if (allowMultiple() && showSelectAll()) {\n            <li\n              class=\"tedi-dropdown-item\"\n              [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allOptionsSelected()\"\n                [indeterminate]=\"someOptionsSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  \"select.select-all\" | tediTranslate\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </li>\n          }\n\n          @for (group of optionGroups(); track group.label) {\n            @if (group.label.length > 0) {\n              @if (allowMultiple() && selectableGroups()) {\n                <li\n                  class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n                >\n                  <tedi-dropdown-item-value\n                    type=\"checkbox\"\n                    [selected]=\"isGroupSelected(group.label)\"\n                    [indeterminate]=\"isGroupIndeterminate(group.label)\"\n                  >\n                    <tedi-dropdown-item-value-label>{{\n                      group.label\n                    }}</tedi-dropdown-item-value-label>\n                  </tedi-dropdown-item-value>\n                </li>\n              } @else {\n                <li class=\"tedi-select__group-name\" role=\"presentation\">\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value; let i = $index) {\n              <li\n                class=\"tedi-dropdown-item\"\n                [class.tedi-dropdown-item--selected]=\"\n                  !allowMultiple() && isOptionSelected(option.value)\n                \"\n                [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n                [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n                [cdkOption]=\"option.value\"\n                [cdkOptionDisabled]=\"option.disabled\"\n              >\n                @if (optionTemplate(); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl.template\"\n                    [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                  />\n                } @else {\n                  <tedi-dropdown-item-value\n                    [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                    [selected]=\"isOptionSelected(option.value)\"\n                    [disabled]=\"!!option.disabled\"\n                  >\n                    <tedi-dropdown-item-value-label>{{\n                      option.label\n                    }}</tedi-dropdown-item-value-label>\n                  </tedi-dropdown-item-value>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li class=\"tedi-dropdown-item tedi-select__no-options\">\n            {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}.tedi-input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--body-regular-line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1 1 var(--_search-input-reserve);width:auto;min-width:0;height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dropdownWidthRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidthRef", required: false }] }], dropdownAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownAlign", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectableGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroups", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], disabledKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledKey", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], maxDropdownHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDropdownHeight", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], dropdownType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownType", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualItemSize", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{ read: ElementRef }, isSignal: true }] }], cdkListboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], virtualListboxRef: [{ type: i0.ViewChild, args: ["virtualListbox", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ["trigger", { ...{ read: ElementRef }, isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }], multiselectContainerRef: [{ type: i0.ViewChild, args: ["multiselectContainer", { isSignal: true }] }], tagRefs: [{ type: i0.ViewChildren, args: ["tagElement", { ...{ read: ElementRef }, isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectOptionTemplateDirective), { isSignal: true }] }], valueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectValueTemplateDirective), { isSignal: true }] }], tooltipTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectTooltipTemplateDirective), { isSignal: true }] }], onWindowResize: [{
                 type: HostListener,
                 args: ["window:resize"]
             }], onDocumentClick: [{
@@ -16133,7 +16619,7 @@ class PaginationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PaginationComponent, isStandalone: true, selector: "tedi-pagination", inputs: { pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, dividerPosition: { classPropertyName: "dividerPosition", publicName: "dividerPosition", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, hideResults: { classPropertyName: "hideResults", publicName: "hideResults", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, hideArrows: { classPropertyName: "hideArrows", publicName: "hideArrows", isSignal: true, isRequired: false, transformFunction: null }, disableArrowsAtBoundary: { classPropertyName: "disableArrowsAtBoundary", publicName: "disableArrowsAtBoundary", isSignal: true, isRequired: false, transformFunction: null }, arrowVariant: { classPropertyName: "arrowVariant", publicName: "arrowVariant", isSignal: true, isRequired: false, transformFunction: null }, showArrowLabels: { classPropertyName: "showArrowLabels", publicName: "showArrowLabels", isSignal: true, isRequired: false, transformFunction: null }, previousIcon: { classPropertyName: "previousIcon", publicName: "previousIcon", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, showModalTitle: { classPropertyName: "showModalTitle", publicName: "showModalTitle", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "data-name": "tedi-pagination" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "customResults", first: true, predicate: TediPaginationResultsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  class=\"tedi-pagination__status\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n  @if (showResults()) {\n    @if (customResults()) {\n      <ng-content select=\"[tediPaginationResults]\" />\n    } @else {\n      <span class=\"tedi-pagination__results\">\n        {{ mergedLabels().results(totalItems()!) }}\n      </span>\n    }\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n  @if (showPager()) {\n    <nav\n      class=\"tedi-pagination__nav\"\n      [attr.aria-label]=\"mergedLabels().ariaLabel\"\n    >\n      @if (showPrevious()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"resolvedArrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n          [attr.aria-label]=\"\n            resolvedShowArrowLabels() ? null : mergedLabels().previous\n          \"\n          [disabled]=\"previousItem().disabled\"\n          (click)=\"handlePageChange(previousItem().page)\"\n        >\n          <tedi-icon [name]=\"previousIcon()\" />\n          @if (resolvedShowArrowLabels()) {\n            <span>{{ mergedLabels().previous }}</span>\n          }\n        </button>\n      }\n\n      @if (!useCompactPicker()) {\n        <ul class=\"tedi-pagination__list\">\n          @for (item of pageItems(); track $index) {\n            @if (item.type === \"ellipsis\") {\n              <li\n                class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n                aria-hidden=\"true\"\n              >\n                \u2026\n              </li>\n            } @else {\n              <li class=\"tedi-pagination__item\">\n                <button\n                  type=\"button\"\n                  class=\"tedi-pagination__page\"\n                  [class.tedi-pagination__page--selected]=\"item.selected\"\n                  [attr.aria-label]=\"\n                    item.selected\n                      ? mergedLabels().currentPageAriaLabel(item.page!)\n                      : mergedLabels().pageAriaLabel(item.page!)\n                  \"\n                  [attr.aria-current]=\"item.selected ? 'page' : null\"\n                  (click)=\"handlePageChange(item.page)\"\n                >\n                  {{ item.page }}\n                </button>\n              </li>\n            }\n          }\n        </ul>\n      }\n      @if (useCompactPicker()) {\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__mobile-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isMobileModalOpen()\"\n          [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n          (click)=\"openMobilePicker()\"\n        >\n          <span\n            class=\"tedi-pagination__mobile-trigger-label\"\n            aria-hidden=\"true\"\n          >\n            <strong>{{ currentPage() }}</strong>\n            <span>/</span>\n            <span>{{ pageCount() }}</span>\n          </span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      }\n\n      @if (showNext()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"resolvedArrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n          [attr.aria-label]=\"\n            resolvedShowArrowLabels() ? null : mergedLabels().next\n          \"\n          [disabled]=\"nextItem().disabled\"\n          (click)=\"handlePageChange(nextItem().page)\"\n        >\n          @if (resolvedShowArrowLabels()) {\n            <span>{{ mergedLabels().next }}</span>\n          }\n          <tedi-icon [name]=\"nextIcon()\" />\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n  @if (showPageSizeSelect()) {\n    <div class=\"tedi-pagination__page-size\">\n      @if (useCompactPicker()) {\n        <span class=\"tedi-pagination__page-size-label\">\n          {{ mergedLabels().pageSize }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__page-size-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n          [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n          (click)=\"openPageSizePicker()\"\n        >\n          <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      } @else {\n        <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n          {{ mergedLabels().pageSize }}\n        </span>\n        <tedi-select\n          class=\"tedi-pagination__page-size-select\"\n          [inputId]=\"pageSizeInputId\"\n          [ariaLabelledby]=\"pageSizeLabelId\"\n          size=\"small\"\n          [options]=\"pageSizeSelectOptions()\"\n          bindLabel=\"label\"\n          bindValue=\"value\"\n          dropdownAlign=\"end\"\n          [value]=\"pageSize()\"\n          (selectionChange)=\"handlePageSizeChange($event)\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SelectComponent, selector: "tedi-select", inputs: ["inputId", "label", "tooltip", "ariaLabelledby", "ariaLabel", "required", "placeholder", "state", "size", "clearable", "dropdownWidthRef", "dropdownAlign", "feedbackText", "options", "bindLabel", "bindValue", "value", "allowMultiple", "groupBy", "showSelectAll", "selectableGroups", "isTagRemovable", "multiRow", "tagEllipsis", "ellipsis", "compareWith", "disabledKey", "noOptionsMessage", "maxDropdownHeight", "hideOnScroll", "dropdownType", "virtualScroll", "virtualItemSize", "searchable", "searchFn", "clearSearchOnSelect"], outputs: ["selectionChange", "searchChange", "opened", "closed", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PaginationComponent, isStandalone: true, selector: "tedi-pagination", inputs: { pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, dividerPosition: { classPropertyName: "dividerPosition", publicName: "dividerPosition", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, hideResults: { classPropertyName: "hideResults", publicName: "hideResults", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, hideArrows: { classPropertyName: "hideArrows", publicName: "hideArrows", isSignal: true, isRequired: false, transformFunction: null }, disableArrowsAtBoundary: { classPropertyName: "disableArrowsAtBoundary", publicName: "disableArrowsAtBoundary", isSignal: true, isRequired: false, transformFunction: null }, arrowVariant: { classPropertyName: "arrowVariant", publicName: "arrowVariant", isSignal: true, isRequired: false, transformFunction: null }, showArrowLabels: { classPropertyName: "showArrowLabels", publicName: "showArrowLabels", isSignal: true, isRequired: false, transformFunction: null }, previousIcon: { classPropertyName: "previousIcon", publicName: "previousIcon", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, showModalTitle: { classPropertyName: "showModalTitle", publicName: "showModalTitle", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "data-name": "tedi-pagination" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "customResults", first: true, predicate: TediPaginationResultsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  class=\"tedi-pagination__status\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n  @if (showResults()) {\n    @if (customResults()) {\n      <ng-content select=\"[tediPaginationResults]\" />\n    } @else {\n      <span class=\"tedi-pagination__results\">\n        {{ mergedLabels().results(totalItems()!) }}\n      </span>\n    }\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n  @if (showPager()) {\n    <nav\n      class=\"tedi-pagination__nav\"\n      [attr.aria-label]=\"mergedLabels().ariaLabel\"\n    >\n      @if (showPrevious()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"resolvedArrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n          [attr.aria-label]=\"\n            resolvedShowArrowLabels() ? null : mergedLabels().previous\n          \"\n          [disabled]=\"previousItem().disabled\"\n          (click)=\"handlePageChange(previousItem().page)\"\n        >\n          <tedi-icon [name]=\"previousIcon()\" />\n          @if (resolvedShowArrowLabels()) {\n            <span>{{ mergedLabels().previous }}</span>\n          }\n        </button>\n      }\n\n      @if (!useCompactPicker()) {\n        <ul class=\"tedi-pagination__list\">\n          @for (item of pageItems(); track $index) {\n            @if (item.type === \"ellipsis\") {\n              <li\n                class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n                aria-hidden=\"true\"\n              >\n                \u2026\n              </li>\n            } @else {\n              <li class=\"tedi-pagination__item\">\n                <button\n                  type=\"button\"\n                  class=\"tedi-pagination__page\"\n                  [class.tedi-pagination__page--selected]=\"item.selected\"\n                  [attr.aria-label]=\"\n                    item.selected\n                      ? mergedLabels().currentPageAriaLabel(item.page!)\n                      : mergedLabels().pageAriaLabel(item.page!)\n                  \"\n                  [attr.aria-current]=\"item.selected ? 'page' : null\"\n                  (click)=\"handlePageChange(item.page)\"\n                >\n                  {{ item.page }}\n                </button>\n              </li>\n            }\n          }\n        </ul>\n      }\n      @if (useCompactPicker()) {\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__mobile-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isMobileModalOpen()\"\n          [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n          (click)=\"openMobilePicker()\"\n        >\n          <span\n            class=\"tedi-pagination__mobile-trigger-label\"\n            aria-hidden=\"true\"\n          >\n            <strong>{{ currentPage() }}</strong>\n            <span>/</span>\n            <span>{{ pageCount() }}</span>\n          </span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      }\n\n      @if (showNext()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"resolvedArrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n          [attr.aria-label]=\"\n            resolvedShowArrowLabels() ? null : mergedLabels().next\n          \"\n          [disabled]=\"nextItem().disabled\"\n          (click)=\"handlePageChange(nextItem().page)\"\n        >\n          @if (resolvedShowArrowLabels()) {\n            <span>{{ mergedLabels().next }}</span>\n          }\n          <tedi-icon [name]=\"nextIcon()\" />\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n  @if (showPageSizeSelect()) {\n    <div class=\"tedi-pagination__page-size\">\n      @if (useCompactPicker()) {\n        <span class=\"tedi-pagination__page-size-label\">\n          {{ mergedLabels().pageSize }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__page-size-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n          [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n          (click)=\"openPageSizePicker()\"\n        >\n          <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      } @else {\n        <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n          {{ mergedLabels().pageSize }}\n        </span>\n        <tedi-select\n          class=\"tedi-pagination__page-size-select\"\n          [inputId]=\"pageSizeInputId\"\n          [ariaLabelledby]=\"pageSizeLabelId\"\n          size=\"small\"\n          [options]=\"pageSizeSelectOptions()\"\n          bindLabel=\"label\"\n          bindValue=\"value\"\n          dropdownAlign=\"end\"\n          [value]=\"pageSize()\"\n          (selectionChange)=\"handlePageSizeChange($event)\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SelectComponent, selector: "tedi-select", inputs: ["inputId", "name", "label", "tooltip", "ariaLabelledby", "ariaLabel", "required", "placeholder", "state", "size", "clearable", "dropdownWidthRef", "dropdownAlign", "feedbackText", "options", "bindLabel", "bindValue", "value", "allowMultiple", "groupBy", "showSelectAll", "selectableGroups", "isTagRemovable", "multiRow", "tagEllipsis", "ellipsis", "compareWith", "disabledKey", "noOptionsMessage", "maxDropdownHeight", "hideOnScroll", "dropdownType", "virtualScroll", "virtualItemSize", "searchable", "searchFn", "clearSearchOnSelect"], outputs: ["selectionChange", "searchChange", "opened", "closed", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
@@ -18490,7 +18976,7 @@ class TediTableColumnsMenuComponent {
         column.toggleVisibility();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableColumnsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TediTableColumnsMenuComponent, isStandalone: true, selector: "tedi-table-columns-menu", inputs: { triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-name": "tedi-table-columns-menu" }, classAttribute: "tedi-table-columns-menu" }, ngImport: i0, template: "<tedi-dropdown position=\"bottom-end\">\n  <button tedi-button tedi-dropdown-trigger variant=\"neutral\" type=\"button\">\n    <tedi-icon name=\"tune\" [size]=\"18\" color=\"inherit\" />\n    {{ triggerLabel() ?? defaultLabel() }}\n  </button>\n  <tedi-dropdown-content>\n    @for (column of hideableColumns(); track column.id) {\n      @let isVisible = column.getIsVisible();\n      @let isLastVisible = isVisible && visibleCount() === 1;\n      <li\n        tedi-dropdown-item\n        [value]=\"column.id\"\n        [disabled]=\"isLastVisible\"\n        [closeOnSelect]=\"false\"\n        (itemSelect)=\"handleToggle(column)\"\n      >\n        <tedi-dropdown-item-value\n          type=\"checkbox\"\n          [selected]=\"isVisible\"\n          [disabled]=\"isLastVisible\"\n        >\n          <tedi-dropdown-item-value-label>\n            {{ resolveHeader(column) }}\n          </tedi-dropdown-item-value-label>\n        </tedi-dropdown-item-value>\n      </li>\n    }\n  </tedi-dropdown-content>\n</tedi-dropdown>\n", styles: [".tedi-table-columns-menu{display:inline-flex}.tedi-table-columns-menu__option{display:flex;width:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TediTableColumnsMenuComponent, isStandalone: true, selector: "tedi-table-columns-menu", inputs: { triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-name": "tedi-table-columns-menu" }, classAttribute: "tedi-table-columns-menu" }, ngImport: i0, template: "<tedi-dropdown position=\"bottom-end\">\n  <button tedi-button tedi-dropdown-trigger variant=\"neutral\" type=\"button\">\n    <tedi-icon name=\"tune\" [size]=\"18\" color=\"inherit\" />\n    {{ triggerLabel() ?? defaultLabel() }}\n  </button>\n  <tedi-dropdown-content>\n    @for (column of hideableColumns(); track column.id) {\n      @let isVisible = column.getIsVisible();\n      @let isLastVisible = isVisible && visibleCount() === 1;\n      <li\n        tedi-dropdown-item\n        [value]=\"column.id\"\n        [disabled]=\"isLastVisible\"\n        [closeOnSelect]=\"false\"\n        (itemSelect)=\"handleToggle(column)\"\n      >\n        <tedi-dropdown-item-value\n          type=\"checkbox\"\n          [selected]=\"isVisible\"\n          [disabled]=\"isLastVisible\"\n        >\n          <tedi-dropdown-item-value-label>\n            {{ resolveHeader(column) }}\n          </tedi-dropdown-item-value-label>\n        </tedi-dropdown-item-value>\n      </li>\n    }\n  </tedi-dropdown-content>\n</tedi-dropdown>\n", styles: [".tedi-table-columns-menu{display:inline-flex}.tedi-table-columns-menu__option{display:flex;width:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableColumnsMenuComponent, decorators: [{
             type: Component,
@@ -18744,7 +19230,7 @@ class FilterGroupComponent {
                 useExisting: forwardRef(() => FilterGroupComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".tedi-filter-group{display:inline-flex}.tedi-filter-group .tedi-filter{--_filter-radius: 0}.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary{margin-left:calc(-1 * var(--tedi-borders-01))}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button{border-right:var(--tedi-borders-01) solid var(--filter-secondary-default-border)}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button:hover{border-right-color:transparent}.tedi-filter-group .tedi-filter--primary.tedi-filter--selected:not(:last-child) .tedi-filter__button{border-right-color:var(--filter-primary-selected-border)}.tedi-filter-group .tedi-filter--selected,.tedi-filter-group .tedi-filter:focus-within{z-index:1}.tedi-filter-group .tedi-filter--secondary.tedi-filter--selected+.tedi-filter--secondary,.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary.tedi-filter--selected{margin-left:calc(-1 * var(--general-selected-border-width))}.tedi-filter-group .tedi-filter:first-child{--_filter-radius: var(--form-checkbox-radio-card-radius) 0 0 var(--form-checkbox-radio-card-radius)}.tedi-filter-group .tedi-filter:last-child{--_filter-radius: 0 var(--form-checkbox-radio-card-radius) var(--form-checkbox-radio-card-radius) 0}.tedi-filter-group .tedi-filter:only-child{--_filter-radius: var(--form-checkbox-radio-card-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".tedi-filter-group{display:inline-flex}.tedi-filter-group .tedi-filter{--_filter-radius: 0}.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary{margin-left:calc(-1 * var(--tedi-borders-01))}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button{border-right:var(--tedi-borders-01) solid var(--filter-secondary-default-border)}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button:hover{border-right-color:transparent}.tedi-filter-group .tedi-filter--primary.tedi-filter--selected:not(:last-child) .tedi-filter__button{border-right-color:var(--filter-primary-selected-border)}.tedi-filter-group .tedi-filter--selected,.tedi-filter-group .tedi-filter:focus-within{z-index:1}.tedi-filter-group .tedi-filter--secondary.tedi-filter--selected+.tedi-filter--secondary,.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary.tedi-filter--selected{margin-left:calc(-1 * var(--general-border-width-selected))}.tedi-filter-group .tedi-filter:first-child{--_filter-radius: var(--form-checkbox-radio-card-radius) 0 0 var(--form-checkbox-radio-card-radius)}.tedi-filter-group .tedi-filter:last-child{--_filter-radius: 0 var(--form-checkbox-radio-card-radius) var(--form-checkbox-radio-card-radius) 0}.tedi-filter-group .tedi-filter:only-child{--_filter-radius: var(--form-checkbox-radio-card-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FilterGroupComponent, decorators: [{
             type: Component,
@@ -18758,7 +19244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         class: "tedi-filter-group",
                         "[attr.role]": "isManaged() ? (allowMultiple() ? 'group' : 'radiogroup') : null",
                         "[attr.aria-label]": "label()",
-                    }, styles: [".tedi-filter-group{display:inline-flex}.tedi-filter-group .tedi-filter{--_filter-radius: 0}.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary{margin-left:calc(-1 * var(--tedi-borders-01))}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button{border-right:var(--tedi-borders-01) solid var(--filter-secondary-default-border)}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button:hover{border-right-color:transparent}.tedi-filter-group .tedi-filter--primary.tedi-filter--selected:not(:last-child) .tedi-filter__button{border-right-color:var(--filter-primary-selected-border)}.tedi-filter-group .tedi-filter--selected,.tedi-filter-group .tedi-filter:focus-within{z-index:1}.tedi-filter-group .tedi-filter--secondary.tedi-filter--selected+.tedi-filter--secondary,.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary.tedi-filter--selected{margin-left:calc(-1 * var(--general-selected-border-width))}.tedi-filter-group .tedi-filter:first-child{--_filter-radius: var(--form-checkbox-radio-card-radius) 0 0 var(--form-checkbox-radio-card-radius)}.tedi-filter-group .tedi-filter:last-child{--_filter-radius: 0 var(--form-checkbox-radio-card-radius) var(--form-checkbox-radio-card-radius) 0}.tedi-filter-group .tedi-filter:only-child{--_filter-radius: var(--form-checkbox-radio-card-radius)}\n"] }]
+                    }, styles: [".tedi-filter-group{display:inline-flex}.tedi-filter-group .tedi-filter{--_filter-radius: 0}.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary{margin-left:calc(-1 * var(--tedi-borders-01))}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button{border-right:var(--tedi-borders-01) solid var(--filter-secondary-default-border)}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button:hover{border-right-color:transparent}.tedi-filter-group .tedi-filter--primary.tedi-filter--selected:not(:last-child) .tedi-filter__button{border-right-color:var(--filter-primary-selected-border)}.tedi-filter-group .tedi-filter--selected,.tedi-filter-group .tedi-filter:focus-within{z-index:1}.tedi-filter-group .tedi-filter--secondary.tedi-filter--selected+.tedi-filter--secondary,.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary.tedi-filter--selected{margin-left:calc(-1 * var(--general-border-width-selected))}.tedi-filter-group .tedi-filter:first-child{--_filter-radius: var(--form-checkbox-radio-card-radius) 0 0 var(--form-checkbox-radio-card-radius)}.tedi-filter-group .tedi-filter:last-child{--_filter-radius: 0 var(--form-checkbox-radio-card-radius) var(--form-checkbox-radio-card-radius) 0}.tedi-filter-group .tedi-filter:only-child{--_filter-radius: var(--form-checkbox-radio-card-radius)}\n"] }]
         }], propDecorators: { allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 class StatusBadgeComponent {
@@ -19281,7 +19767,7 @@ class FilterComponent {
                 useExisting: forwardRef(() => FilterComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n  <tedi-dropdown #dropdown position=\"bottom-start\">\n    <button\n      #triggerBtn\n      tedi-dropdown-trigger\n      ariaHaspopup=\"dialog\"\n      class=\"tedi-filter__button\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"focusDropdownContent()\"\n      (keydown.arrowDown)=\"focusDropdownContent(true)\"\n      (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-dropdown-content>\n      <div\n        #dropdownPanel\n        class=\"tedi-filter-dropdown\"\n        [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n        role=\"dialog\"\n        [attr.aria-label]=\"text()\"\n        (keydown)=\"handleDropdownKeydown($event)\"\n      >\n        @if (hasCustomContent()) {\n          <div class=\"tedi-filter-dropdown__custom-content\">\n            <ng-content select=\"[tediFilterContent]\" />\n          </div>\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"onCustomClear()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else if (isSingleSelect()) {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                [class.tedi-filter-dropdown__item--selected]=\"\n                  isOptionSelected(option.value)\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && selectOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSingleSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          @if (showSelectAll() && filteredOptions().length > 0) {\n            <div\n              class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                allFilteredSelected()\n                  ? 'true'\n                  : someFilteredSelected()\n                    ? 'mixed'\n                    : 'false'\n              \"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n              tabindex=\"0\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allFilteredSelected()\"\n                [indeterminate]=\"someFilteredSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  resolvedSelectAllLabel()\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n            <tedi-separator />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && toggleOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  type=\"checkbox\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        }\n      </div>\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n} @else {\n  <button\n    class=\"tedi-filter__button\"\n    type=\"button\"\n    [disabled]=\"isDisabled()\"\n    [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n    [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n    [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (!hasDropdown() && isSelected()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"check\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n\n  <div\n    class=\"tedi-filter__prepend\"\n    [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n  >\n    <ng-content select=\"[tediFilterPrepend]\" />\n  </div>\n\n  <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n  <div class=\"tedi-filter__append\">\n    <ng-content select=\"[tediFilterAppend]\" />\n  </div>\n\n  @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n    <tedi-status-badge\n      class=\"tedi-filter__count\"\n      [text]=\"'' + selectedCount()\"\n      color=\"brand\"\n    />\n  }\n\n  @if (hasDropdown()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"arrow_drop_down\"\n      variant=\"filled\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n</ng-template>\n\n<ng-template #searchField>\n  <div class=\"tedi-filter-dropdown__search\">\n    <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n      <input\n        tedi-text-field\n        type=\"text\"\n        role=\"searchbox\"\n        [attr.aria-label]=\"text()\"\n        [(value)]=\"searchTerm\"\n        (clear)=\"onSearchClear()\"\n      />\n    </tedi-form-field>\n  </div>\n  <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-selected-border-width)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n  <tedi-dropdown #dropdown position=\"bottom-start\">\n    <button\n      #triggerBtn\n      tedi-dropdown-trigger\n      ariaHaspopup=\"dialog\"\n      class=\"tedi-filter__button\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"focusDropdownContent()\"\n      (keydown.arrowDown)=\"focusDropdownContent(true)\"\n      (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-dropdown-content>\n      <div\n        #dropdownPanel\n        class=\"tedi-filter-dropdown\"\n        [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n        role=\"dialog\"\n        [attr.aria-label]=\"text()\"\n        (keydown)=\"handleDropdownKeydown($event)\"\n      >\n        @if (hasCustomContent()) {\n          <div class=\"tedi-filter-dropdown__custom-content\">\n            <ng-content select=\"[tediFilterContent]\" />\n          </div>\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"onCustomClear()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else if (isSingleSelect()) {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                [class.tedi-filter-dropdown__item--selected]=\"\n                  isOptionSelected(option.value)\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && selectOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSingleSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          @if (showSelectAll() && filteredOptions().length > 0) {\n            <div\n              class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                allFilteredSelected()\n                  ? 'true'\n                  : someFilteredSelected()\n                    ? 'mixed'\n                    : 'false'\n              \"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n              tabindex=\"0\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allFilteredSelected()\"\n                [indeterminate]=\"someFilteredSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  resolvedSelectAllLabel()\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n            <tedi-separator />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && toggleOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  type=\"checkbox\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        }\n      </div>\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n} @else {\n  <button\n    class=\"tedi-filter__button\"\n    type=\"button\"\n    [disabled]=\"isDisabled()\"\n    [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n    [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n    [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (!hasDropdown() && isSelected()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"check\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n\n  <div\n    class=\"tedi-filter__prepend\"\n    [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n  >\n    <ng-content select=\"[tediFilterPrepend]\" />\n  </div>\n\n  <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n  <div class=\"tedi-filter__append\">\n    <ng-content select=\"[tediFilterAppend]\" />\n  </div>\n\n  @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n    <tedi-status-badge\n      class=\"tedi-filter__count\"\n      [text]=\"'' + selectedCount()\"\n      color=\"brand\"\n    />\n  }\n\n  @if (hasDropdown()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"arrow_drop_down\"\n      variant=\"filled\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n</ng-template>\n\n<ng-template #searchField>\n  <div class=\"tedi-filter-dropdown__search\">\n    <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n      <input\n        tedi-text-field\n        type=\"text\"\n        role=\"searchbox\"\n        [attr.aria-label]=\"text()\"\n        [(value)]=\"searchTerm\"\n        (clear)=\"onSearchClear()\"\n      />\n    </tedi-form-field>\n  </div>\n  <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -19312,7 +19798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[class.tedi-filter--large]": "size() === 'large'",
                         "[class.tedi-filter--selected]": "isSelected()",
                         "[class.tedi-filter--disabled]": "isDisabled()",
-                    }, template: "@if (hasDropdown()) {\n  <tedi-dropdown #dropdown position=\"bottom-start\">\n    <button\n      #triggerBtn\n      tedi-dropdown-trigger\n      ariaHaspopup=\"dialog\"\n      class=\"tedi-filter__button\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"focusDropdownContent()\"\n      (keydown.arrowDown)=\"focusDropdownContent(true)\"\n      (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-dropdown-content>\n      <div\n        #dropdownPanel\n        class=\"tedi-filter-dropdown\"\n        [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n        role=\"dialog\"\n        [attr.aria-label]=\"text()\"\n        (keydown)=\"handleDropdownKeydown($event)\"\n      >\n        @if (hasCustomContent()) {\n          <div class=\"tedi-filter-dropdown__custom-content\">\n            <ng-content select=\"[tediFilterContent]\" />\n          </div>\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"onCustomClear()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else if (isSingleSelect()) {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                [class.tedi-filter-dropdown__item--selected]=\"\n                  isOptionSelected(option.value)\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && selectOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSingleSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          @if (showSelectAll() && filteredOptions().length > 0) {\n            <div\n              class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                allFilteredSelected()\n                  ? 'true'\n                  : someFilteredSelected()\n                    ? 'mixed'\n                    : 'false'\n              \"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n              tabindex=\"0\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allFilteredSelected()\"\n                [indeterminate]=\"someFilteredSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  resolvedSelectAllLabel()\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n            <tedi-separator />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && toggleOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  type=\"checkbox\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        }\n      </div>\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n} @else {\n  <button\n    class=\"tedi-filter__button\"\n    type=\"button\"\n    [disabled]=\"isDisabled()\"\n    [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n    [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n    [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (!hasDropdown() && isSelected()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"check\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n\n  <div\n    class=\"tedi-filter__prepend\"\n    [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n  >\n    <ng-content select=\"[tediFilterPrepend]\" />\n  </div>\n\n  <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n  <div class=\"tedi-filter__append\">\n    <ng-content select=\"[tediFilterAppend]\" />\n  </div>\n\n  @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n    <tedi-status-badge\n      class=\"tedi-filter__count\"\n      [text]=\"'' + selectedCount()\"\n      color=\"brand\"\n    />\n  }\n\n  @if (hasDropdown()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"arrow_drop_down\"\n      variant=\"filled\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n</ng-template>\n\n<ng-template #searchField>\n  <div class=\"tedi-filter-dropdown__search\">\n    <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n      <input\n        tedi-text-field\n        type=\"text\"\n        role=\"searchbox\"\n        [attr.aria-label]=\"text()\"\n        [(value)]=\"searchTerm\"\n        (clear)=\"onSearchClear()\"\n      />\n    </tedi-form-field>\n  </div>\n  <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-selected-border-width)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"] }]
+                    }, template: "@if (hasDropdown()) {\n  <tedi-dropdown #dropdown position=\"bottom-start\">\n    <button\n      #triggerBtn\n      tedi-dropdown-trigger\n      ariaHaspopup=\"dialog\"\n      class=\"tedi-filter__button\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"focusDropdownContent()\"\n      (keydown.arrowDown)=\"focusDropdownContent(true)\"\n      (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-dropdown-content>\n      <div\n        #dropdownPanel\n        class=\"tedi-filter-dropdown\"\n        [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n        role=\"dialog\"\n        [attr.aria-label]=\"text()\"\n        (keydown)=\"handleDropdownKeydown($event)\"\n      >\n        @if (hasCustomContent()) {\n          <div class=\"tedi-filter-dropdown__custom-content\">\n            <ng-content select=\"[tediFilterContent]\" />\n          </div>\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"onCustomClear()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else if (isSingleSelect()) {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                [class.tedi-filter-dropdown__item--selected]=\"\n                  isOptionSelected(option.value)\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && selectOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSingleSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          @if (showSelectAll() && filteredOptions().length > 0) {\n            <div\n              class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                allFilteredSelected()\n                  ? 'true'\n                  : someFilteredSelected()\n                    ? 'mixed'\n                    : 'false'\n              \"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n              tabindex=\"0\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allFilteredSelected()\"\n                [indeterminate]=\"someFilteredSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  resolvedSelectAllLabel()\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n            <tedi-separator />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && toggleOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  type=\"checkbox\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        }\n      </div>\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n} @else {\n  <button\n    class=\"tedi-filter__button\"\n    type=\"button\"\n    [disabled]=\"isDisabled()\"\n    [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n    [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n    [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (!hasDropdown() && isSelected()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"check\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n\n  <div\n    class=\"tedi-filter__prepend\"\n    [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n  >\n    <ng-content select=\"[tediFilterPrepend]\" />\n  </div>\n\n  <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n  <div class=\"tedi-filter__append\">\n    <ng-content select=\"[tediFilterAppend]\" />\n  </div>\n\n  @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n    <tedi-status-badge\n      class=\"tedi-filter__count\"\n      [text]=\"'' + selectedCount()\"\n      color=\"brand\"\n    />\n  }\n\n  @if (hasDropdown()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"arrow_drop_down\"\n      variant=\"filled\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n</ng-template>\n\n<ng-template #searchField>\n  <div class=\"tedi-filter-dropdown__search\">\n    <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n      <input\n        tedi-text-field\n        type=\"text\"\n        role=\"searchbox\"\n        [attr.aria-label]=\"text()\"\n        [(value)]=\"searchTerm\"\n        (clear)=\"onSearchClear()\"\n      />\n    </tedi-form-field>\n  </div>\n  <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchClearable", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], preserveLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropdown: [{ type: i0.ViewChild, args: ["dropdown", { isSignal: true }] }], dropdownPanel: [{ type: i0.ViewChild, args: ["dropdownPanel", { isSignal: true }] }], optionsList: [{ type: i0.ViewChild, args: ["optionsList", { isSignal: true }] }], triggerBtn: [{ type: i0.ViewChild, args: ["triggerBtn", { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FilterContentDirective), { isSignal: true }] }], filterPrepend: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FilterPrependDirective), { isSignal: true }] }] } });
 
 class ProgressBarComponent {
@@ -21886,9 +22372,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
  * the current page — add `aria-current="page"` to it yourself.
  *
  * Crumb links are underlined by default. Set `[underline]="false"` on the
- * `tedi-link` for non-underlined crumbs — recommended for the `short` back-link.
- * Crumbs collapsed into the ellipsis dropdown are always rendered without an
- * underline, regardless of their `[underline]` setting.
+ * `tedi-link` for non-underlined crumbs, which is recommended for the `short`
+ * back-link. A collapsed crumb keeps its own `[underline]` setting, so it looks
+ * the same in the ellipsis dropdown as it does in the trail. To restyle the
+ * collapsed rows, target `.tedi-breadcrumbs__dropdown-item`, which travels with
+ * them into the overlay.
+ *
+ * The ellipsis dropdown is a plain list (`dropdownRole="list"`), not a menu, so
+ * the collapsed crumbs stay links: screen readers announce them as links and
+ * each one is its own tab stop. Its panel renders inside the crumb it belongs
+ * to, so the collapsed crumbs come between the ellipsis button and the next
+ * crumb both in the tab order and for a screen reader that swipes through the
+ * DOM. Opening it moves focus to the first collapsed crumb; Escape closes it
+ * and returns focus to the button.
  */
 class BreadcrumbsComponent {
     breakpointService = inject(BreakpointService);
@@ -21974,7 +22470,7 @@ class BreadcrumbsComponent {
         ];
     }, ...(ngDevMode ? [{ debugName: "tokens" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BreadcrumbsComponent, isStandalone: true, selector: "tedi-breadcrumbs", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showMoreLabel: { classPropertyName: "showMoreLabel", publicName: "showMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, itemsBeforeCollapse: { classPropertyName: "itemsBeforeCollapse", publicName: "itemsBeforeCollapse", isSignal: true, isRequired: false, transformFunction: null }, itemsAfterCollapse: { classPropertyName: "itemsAfterCollapse", publicName: "itemsAfterCollapse", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-breadcrumbs" }, queries: [{ propertyName: "items", predicate: BreadcrumbItemDirective, isSignal: true }, { propertyName: "separatorTemplate", first: true, predicate: BreadcrumbSeparatorDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  <nav [attr.aria-label]=\"ariaLabel() || ('breadcrumbs' | tediTranslate)\">\n    <ol class=\"tedi-breadcrumbs__list\">\n      @if (currentVariant() === \"short\") {\n        @if (parentItem(); as parent) {\n          <li class=\"tedi-breadcrumbs__item\">\n            <tedi-icon name=\"arrow_back\" [size]=\"16\" color=\"brand\" />\n            <ng-container [ngTemplateOutlet]=\"parent.templateRef\" />\n          </li>\n        }\n      } @else {\n        @for (token of tokens(); track $index; let last = $last) {\n          @if (token.kind === \"item\") {\n            <li\n              class=\"tedi-breadcrumbs__item\"\n              [class.tedi-breadcrumbs__item--current]=\"token.current\"\n            >\n              <ng-container [ngTemplateOutlet]=\"token.item.templateRef\" />\n            </li>\n          } @else {\n            <li class=\"tedi-breadcrumbs__item\">\n              <tedi-dropdown position=\"bottom-start\">\n                <button\n                  type=\"button\"\n                  tedi-link\n                  [underline]=\"false\"\n                  tedi-dropdown-trigger\n                  class=\"tedi-breadcrumbs__ellipsis\"\n                  [attr.aria-label]=\"\n                    showMoreLabel() || ('breadcrumbs.show-more' | tediTranslate)\n                  \"\n                >\n                  <span aria-hidden=\"true\">\u2026</span>\n                </button>\n                <tedi-dropdown-content dropdownRole=\"menu\">\n                  @for (hidden of token.hidden; track $index) {\n                    <li\n                      tedi-dropdown-item\n                      [clipContent]=\"false\"\n                      class=\"tedi-breadcrumbs__dropdown-item\"\n                    >\n                      <ng-container [ngTemplateOutlet]=\"hidden.templateRef\" />\n                    </li>\n                  }\n                </tedi-dropdown-content>\n              </tedi-dropdown>\n            </li>\n          }\n          @if (!last) {\n            <li class=\"tedi-breadcrumbs__separator\" aria-hidden=\"true\">\n              @if (separatorTemplate(); as sep) {\n                <ng-container [ngTemplateOutlet]=\"sep.templateRef\" />\n              } @else if (separator()) {\n                <span tedi-text color=\"brand\">{{ separator() }}</span>\n              } @else {\n                <tedi-icon name=\"chevron_right\" [size]=\"16\" color=\"brand\" />\n              }\n            </li>\n          }\n        }\n      }\n    </ol>\n  </nav>\n}\n", styles: [":host{display:block}.tedi-breadcrumbs__list{display:flex;flex-wrap:wrap;gap:var(--breadcrumb-inner-spacing);align-items:center;padding:0;margin:0;list-style:none}.tedi-breadcrumbs__item{display:inline-flex;gap:var(--breadcrumb-inner-spacing);align-items:center}.tedi-breadcrumbs__item--current{color:var(--general-text-secondary)}.tedi-breadcrumbs__separator{display:inline-flex;align-items:center}.tedi-breadcrumbs__ellipsis{justify-content:center;min-width:1.5rem;min-height:1.5rem;margin-inline:-.25rem}.tedi-breadcrumbs__dropdown-item .tedi-link:not(.tedi-link--no-underline) :not(tedi-icon),.tedi-breadcrumbs__dropdown-item .tedi-link:hover :not(tedi-icon){text-decoration:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "target", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BreadcrumbsComponent, isStandalone: true, selector: "tedi-breadcrumbs", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showMoreLabel: { classPropertyName: "showMoreLabel", publicName: "showMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, itemsBeforeCollapse: { classPropertyName: "itemsBeforeCollapse", publicName: "itemsBeforeCollapse", isSignal: true, isRequired: false, transformFunction: null }, itemsAfterCollapse: { classPropertyName: "itemsAfterCollapse", publicName: "itemsAfterCollapse", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-breadcrumbs" }, queries: [{ propertyName: "items", predicate: BreadcrumbItemDirective, isSignal: true }, { propertyName: "separatorTemplate", first: true, predicate: BreadcrumbSeparatorDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  <nav [attr.aria-label]=\"ariaLabel() || ('breadcrumbs' | tediTranslate)\">\n    <ol class=\"tedi-breadcrumbs__list\">\n      @if (currentVariant() === \"short\") {\n        @if (parentItem(); as parent) {\n          <li class=\"tedi-breadcrumbs__item\">\n            <tedi-icon name=\"arrow_back\" [size]=\"16\" color=\"brand\" />\n            <ng-container [ngTemplateOutlet]=\"parent.templateRef\" />\n          </li>\n        }\n      } @else {\n        @for (token of tokens(); track $index; let last = $last) {\n          @if (token.kind === \"item\") {\n            <li\n              class=\"tedi-breadcrumbs__item\"\n              [class.tedi-breadcrumbs__item--current]=\"token.current\"\n            >\n              <ng-container [ngTemplateOutlet]=\"token.item.templateRef\" />\n            </li>\n          } @else {\n            <li class=\"tedi-breadcrumbs__item\">\n              <tedi-dropdown position=\"bottom-start\">\n                <button\n                  type=\"button\"\n                  tedi-link\n                  [underline]=\"false\"\n                  tedi-dropdown-trigger\n                  class=\"tedi-breadcrumbs__ellipsis\"\n                  [attr.aria-label]=\"\n                    showMoreLabel() || ('breadcrumbs.show-more' | tediTranslate)\n                  \"\n                >\n                  <span aria-hidden=\"true\">\u2026</span>\n                </button>\n                <tedi-dropdown-content dropdownRole=\"list\">\n                  @for (hidden of token.hidden; track $index) {\n                    <li\n                      tedi-dropdown-item\n                      [clipContent]=\"false\"\n                      class=\"tedi-breadcrumbs__dropdown-item\"\n                    >\n                      <ng-container [ngTemplateOutlet]=\"hidden.templateRef\" />\n                    </li>\n                  }\n                </tedi-dropdown-content>\n              </tedi-dropdown>\n            </li>\n          }\n          @if (!last) {\n            <li class=\"tedi-breadcrumbs__separator\" aria-hidden=\"true\">\n              @if (separatorTemplate(); as sep) {\n                <ng-container [ngTemplateOutlet]=\"sep.templateRef\" />\n              } @else if (separator()) {\n                <span tedi-text color=\"brand\">{{ separator() }}</span>\n              } @else {\n                <tedi-icon name=\"chevron_right\" [size]=\"16\" color=\"brand\" />\n              }\n            </li>\n          }\n        }\n      }\n    </ol>\n  </nav>\n}\n", styles: [":host{display:block}.tedi-breadcrumbs__list{display:flex;flex-wrap:wrap;gap:var(--breadcrumb-inner-spacing);align-items:center;padding:0;margin:0;list-style:none}.tedi-breadcrumbs__item{display:inline-flex;gap:var(--breadcrumb-inner-spacing);align-items:center}.tedi-breadcrumbs__item--current{color:var(--general-text-secondary)}.tedi-breadcrumbs__separator{display:inline-flex;align-items:center}.tedi-breadcrumbs__ellipsis{justify-content:center;min-width:1.5rem;min-height:1.5rem;margin-inline:-.25rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "target", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
             type: Component,
@@ -21990,7 +22486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         TediTranslationPipe,
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "tedi-breadcrumbs",
-                    }, template: "@if (visible()) {\n  <nav [attr.aria-label]=\"ariaLabel() || ('breadcrumbs' | tediTranslate)\">\n    <ol class=\"tedi-breadcrumbs__list\">\n      @if (currentVariant() === \"short\") {\n        @if (parentItem(); as parent) {\n          <li class=\"tedi-breadcrumbs__item\">\n            <tedi-icon name=\"arrow_back\" [size]=\"16\" color=\"brand\" />\n            <ng-container [ngTemplateOutlet]=\"parent.templateRef\" />\n          </li>\n        }\n      } @else {\n        @for (token of tokens(); track $index; let last = $last) {\n          @if (token.kind === \"item\") {\n            <li\n              class=\"tedi-breadcrumbs__item\"\n              [class.tedi-breadcrumbs__item--current]=\"token.current\"\n            >\n              <ng-container [ngTemplateOutlet]=\"token.item.templateRef\" />\n            </li>\n          } @else {\n            <li class=\"tedi-breadcrumbs__item\">\n              <tedi-dropdown position=\"bottom-start\">\n                <button\n                  type=\"button\"\n                  tedi-link\n                  [underline]=\"false\"\n                  tedi-dropdown-trigger\n                  class=\"tedi-breadcrumbs__ellipsis\"\n                  [attr.aria-label]=\"\n                    showMoreLabel() || ('breadcrumbs.show-more' | tediTranslate)\n                  \"\n                >\n                  <span aria-hidden=\"true\">\u2026</span>\n                </button>\n                <tedi-dropdown-content dropdownRole=\"menu\">\n                  @for (hidden of token.hidden; track $index) {\n                    <li\n                      tedi-dropdown-item\n                      [clipContent]=\"false\"\n                      class=\"tedi-breadcrumbs__dropdown-item\"\n                    >\n                      <ng-container [ngTemplateOutlet]=\"hidden.templateRef\" />\n                    </li>\n                  }\n                </tedi-dropdown-content>\n              </tedi-dropdown>\n            </li>\n          }\n          @if (!last) {\n            <li class=\"tedi-breadcrumbs__separator\" aria-hidden=\"true\">\n              @if (separatorTemplate(); as sep) {\n                <ng-container [ngTemplateOutlet]=\"sep.templateRef\" />\n              } @else if (separator()) {\n                <span tedi-text color=\"brand\">{{ separator() }}</span>\n              } @else {\n                <tedi-icon name=\"chevron_right\" [size]=\"16\" color=\"brand\" />\n              }\n            </li>\n          }\n        }\n      }\n    </ol>\n  </nav>\n}\n", styles: [":host{display:block}.tedi-breadcrumbs__list{display:flex;flex-wrap:wrap;gap:var(--breadcrumb-inner-spacing);align-items:center;padding:0;margin:0;list-style:none}.tedi-breadcrumbs__item{display:inline-flex;gap:var(--breadcrumb-inner-spacing);align-items:center}.tedi-breadcrumbs__item--current{color:var(--general-text-secondary)}.tedi-breadcrumbs__separator{display:inline-flex;align-items:center}.tedi-breadcrumbs__ellipsis{justify-content:center;min-width:1.5rem;min-height:1.5rem;margin-inline:-.25rem}.tedi-breadcrumbs__dropdown-item .tedi-link:not(.tedi-link--no-underline) :not(tedi-icon),.tedi-breadcrumbs__dropdown-item .tedi-link:hover :not(tedi-icon){text-decoration:none}\n"] }]
+                    }, template: "@if (visible()) {\n  <nav [attr.aria-label]=\"ariaLabel() || ('breadcrumbs' | tediTranslate)\">\n    <ol class=\"tedi-breadcrumbs__list\">\n      @if (currentVariant() === \"short\") {\n        @if (parentItem(); as parent) {\n          <li class=\"tedi-breadcrumbs__item\">\n            <tedi-icon name=\"arrow_back\" [size]=\"16\" color=\"brand\" />\n            <ng-container [ngTemplateOutlet]=\"parent.templateRef\" />\n          </li>\n        }\n      } @else {\n        @for (token of tokens(); track $index; let last = $last) {\n          @if (token.kind === \"item\") {\n            <li\n              class=\"tedi-breadcrumbs__item\"\n              [class.tedi-breadcrumbs__item--current]=\"token.current\"\n            >\n              <ng-container [ngTemplateOutlet]=\"token.item.templateRef\" />\n            </li>\n          } @else {\n            <li class=\"tedi-breadcrumbs__item\">\n              <tedi-dropdown position=\"bottom-start\">\n                <button\n                  type=\"button\"\n                  tedi-link\n                  [underline]=\"false\"\n                  tedi-dropdown-trigger\n                  class=\"tedi-breadcrumbs__ellipsis\"\n                  [attr.aria-label]=\"\n                    showMoreLabel() || ('breadcrumbs.show-more' | tediTranslate)\n                  \"\n                >\n                  <span aria-hidden=\"true\">\u2026</span>\n                </button>\n                <tedi-dropdown-content dropdownRole=\"list\">\n                  @for (hidden of token.hidden; track $index) {\n                    <li\n                      tedi-dropdown-item\n                      [clipContent]=\"false\"\n                      class=\"tedi-breadcrumbs__dropdown-item\"\n                    >\n                      <ng-container [ngTemplateOutlet]=\"hidden.templateRef\" />\n                    </li>\n                  }\n                </tedi-dropdown-content>\n              </tedi-dropdown>\n            </li>\n          }\n          @if (!last) {\n            <li class=\"tedi-breadcrumbs__separator\" aria-hidden=\"true\">\n              @if (separatorTemplate(); as sep) {\n                <ng-container [ngTemplateOutlet]=\"sep.templateRef\" />\n              } @else if (separator()) {\n                <span tedi-text color=\"brand\">{{ separator() }}</span>\n              } @else {\n                <tedi-icon name=\"chevron_right\" [size]=\"16\" color=\"brand\" />\n              }\n            </li>\n          }\n        }\n      }\n    </ol>\n  </nav>\n}\n", styles: [":host{display:block}.tedi-breadcrumbs__list{display:flex;flex-wrap:wrap;gap:var(--breadcrumb-inner-spacing);align-items:center;padding:0;margin:0;list-style:none}.tedi-breadcrumbs__item{display:inline-flex;gap:var(--breadcrumb-inner-spacing);align-items:center}.tedi-breadcrumbs__item--current{color:var(--general-text-secondary)}.tedi-breadcrumbs__separator{display:inline-flex;align-items:center}.tedi-breadcrumbs__ellipsis{justify-content:center;min-width:1.5rem;min-height:1.5rem;margin-inline:-.25rem}\n"] }]
         }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BreadcrumbItemDirective), { isSignal: true }] }], separatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbSeparatorDirective), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreLabel", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], itemsBeforeCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsBeforeCollapse", required: false }] }], itemsAfterCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsAfterCollapse", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
 
 class HorizontalStepperItemComponent {
@@ -22064,6 +22560,450 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     }, template: "<ng-content />\n", styles: [".tedi-horizontal-stepper{display:flex;background-color:var(--stepper-background)}.tedi-horizontal-stepper--transparent{background-color:transparent}.tedi-horizontal-stepper--compact .tedi-horizontal-stepper-item{flex:1 0 0}.tedi-horizontal-stepper--compact .tedi-horizontal-stepper-item--selected{flex:0 0 auto}.tedi-horizontal-stepper--compact .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__step{align-items:center;justify-content:center;width:100%}.tedi-horizontal-stepper--compact .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__content{display:none}.tedi-horizontal-stepper--compact .tedi-horizontal-stepper-item--selected .tedi-horizontal-stepper-item__content{display:flex}@media(max-width:35.98rem){.tedi-horizontal-stepper--compact-sm .tedi-horizontal-stepper-item{flex:1 0 0}.tedi-horizontal-stepper--compact-sm .tedi-horizontal-stepper-item--selected{flex:0 0 auto}.tedi-horizontal-stepper--compact-sm .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__step{align-items:center;justify-content:center;width:100%}.tedi-horizontal-stepper--compact-sm .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__content{display:none}.tedi-horizontal-stepper--compact-sm .tedi-horizontal-stepper-item--selected .tedi-horizontal-stepper-item__content{display:flex}}@media(max-width:47.98rem){.tedi-horizontal-stepper--compact-md .tedi-horizontal-stepper-item{flex:1 0 0}.tedi-horizontal-stepper--compact-md .tedi-horizontal-stepper-item--selected{flex:0 0 auto}.tedi-horizontal-stepper--compact-md .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__step{align-items:center;justify-content:center;width:100%}.tedi-horizontal-stepper--compact-md .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__content{display:none}.tedi-horizontal-stepper--compact-md .tedi-horizontal-stepper-item--selected .tedi-horizontal-stepper-item__content{display:flex}}@media(max-width:61.98rem){.tedi-horizontal-stepper--compact-lg .tedi-horizontal-stepper-item{flex:1 0 0}.tedi-horizontal-stepper--compact-lg .tedi-horizontal-stepper-item--selected{flex:0 0 auto}.tedi-horizontal-stepper--compact-lg .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__step{align-items:center;justify-content:center;width:100%}.tedi-horizontal-stepper--compact-lg .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__content{display:none}.tedi-horizontal-stepper--compact-lg .tedi-horizontal-stepper-item--selected .tedi-horizontal-stepper-item__content{display:flex}}@media(max-width:74.98rem){.tedi-horizontal-stepper--compact-xl .tedi-horizontal-stepper-item{flex:1 0 0}.tedi-horizontal-stepper--compact-xl .tedi-horizontal-stepper-item--selected{flex:0 0 auto}.tedi-horizontal-stepper--compact-xl .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__step{align-items:center;justify-content:center;width:100%}.tedi-horizontal-stepper--compact-xl .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__content{display:none}.tedi-horizontal-stepper--compact-xl .tedi-horizontal-stepper-item--selected .tedi-horizontal-stepper-item__content{display:flex}}@media(max-width:87.48rem){.tedi-horizontal-stepper--compact-xxl .tedi-horizontal-stepper-item{flex:1 0 0}.tedi-horizontal-stepper--compact-xxl .tedi-horizontal-stepper-item--selected{flex:0 0 auto}.tedi-horizontal-stepper--compact-xxl .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__step{align-items:center;justify-content:center;width:100%}.tedi-horizontal-stepper--compact-xxl .tedi-horizontal-stepper-item .tedi-horizontal-stepper-item__content{display:none}.tedi-horizontal-stepper--compact-xxl .tedi-horizontal-stepper-item--selected .tedi-horizontal-stepper-item__content{display:flex}}\n"] }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HorizontalStepperItemComponent), { isSignal: true }] }] } });
 
+/**
+ * A single entry in a `tedi-table-of-contents`. Its non-item content (a
+ * `tedi-link`, anchor or button) is the clickable label; nested
+ * `tedi-table-of-contents-item` children become this item's sub-items and are
+ * only revealed when the item is on the active branch.
+ */
+class TableOfContentsItemComponent {
+    /**
+     * Unique id. Required to mark the item active (via the parent's `activeId`)
+     * and to be the parent of nested items. Named `itemId` to avoid
+     * shadowing the native `id` attribute.
+     */
+    itemId = input(...(ngDevMode ? [undefined, { debugName: "itemId" }] : []));
+    /** Render a separator below the item. */
+    separator = input(false, ...(ngDevMode ? [{ debugName: "separator" }] : []));
+    root = inject(TableOfContentsComponent);
+    parent = inject(TableOfContentsItemComponent, {
+        optional: true,
+        skipSelf: true,
+    });
+    /** Direct nested items (a single level down). */
+    childItems = contentChildren(TableOfContentsItemComponent, ...(ngDevMode ? [{ debugName: "childItems" }] : []));
+    numbered = computed(() => this.root.numbered(), ...(ngDevMode ? [{ debugName: "numbered" }] : []));
+    depth = computed(() => this.parent ? this.parent.depth() + 1 : 1, ...(ngDevMode ? [{ debugName: "depth" }] : []));
+    /** CSS indent level — capped at 2, matching the design's two-level hierarchy. */
+    level = computed(() => Math.min(this.depth(), 2), ...(ngDevMode ? [{ debugName: "level" }] : []));
+    hasChildren = computed(() => this.childItems().length > 0, ...(ngDevMode ? [{ debugName: "hasChildren" }] : []));
+    isSelected = computed(() => !!this.itemId() && this.itemId() === this.root.activeId(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    /** Whether the active item is this item or somewhere in its subtree. */
+    containsActive = computed(() => this.isSelected() ||
+        this.childItems().some((child) => child.containsActive()), ...(ngDevMode ? [{ debugName: "containsActive" }] : []));
+    /**
+     * Whether this item's nested group is expanded: always when the TOC is
+     * `defaultOpen`, otherwise only along the branch leading to the active item.
+     */
+    isOpen = computed(() => this.hasChildren() && (this.root.defaultOpen() || this.containsActive()), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    siblings = computed(() => this.parent ? this.parent.childItems() : this.root.items(), ...(ngDevMode ? [{ debugName: "siblings" }] : []));
+    index = computed(() => this.siblings().indexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : []));
+    numberPrefix = computed(() => this.parent ? this.parent.numberBase() : undefined, ...(ngDevMode ? [{ debugName: "numberPrefix" }] : []));
+    /** Hierarchical number base without trailing dot, e.g. `2` or `2.1`. */
+    numberBase = computed(() => {
+        const position = this.index() + 1;
+        const prefix = this.numberPrefix();
+        return prefix ? `${prefix}.${position}` : `${position}`;
+    }, ...(ngDevMode ? [{ debugName: "numberBase" }] : []));
+    /** Rendered number — `1.` at the top level, `1.1` when nested. */
+    numberLabel = computed(() => this.numberPrefix() ? this.numberBase() : `${this.numberBase()}.`, ...(ngDevMode ? [{ debugName: "numberLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableOfContentsItemComponent, isStandalone: true, selector: "tedi-table-of-contents-item", inputs: { itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.tedi-table-of-contents__item--selected": "isSelected()", "attr.aria-current": "isSelected() ? 'location' : null", "attr.data-name": "'table-of-contents-item'" }, classAttribute: "tedi-table-of-contents__item" }, queries: [{ propertyName: "childItems", predicate: TableOfContentsItemComponent, isSignal: true }], ngImport: i0, template: "<span\n  class=\"tedi-table-of-contents__row\"\n  [class]=\"'tedi-table-of-contents__row--level-' + level()\"\n>\n  @if (numbered()) {\n    <span class=\"tedi-table-of-contents__number\" aria-hidden=\"true\">{{\n      numberLabel()\n    }}</span>\n  }\n  <span class=\"tedi-table-of-contents__content\">\n    <ng-content />\n  </span>\n  <ng-content select=\"[tediTocItemSuffix]\" />\n</span>\n\n@if (separator()) {\n  <div class=\"tedi-table-of-contents__separator\">\n    <tedi-separator />\n  </div>\n}\n\n@if (isOpen()) {\n  <ul class=\"tedi-table-of-contents__group\" role=\"list\">\n    <ng-content select=\"tedi-table-of-contents-item\" />\n  </ul>\n}\n", dependencies: [{ kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-table-of-contents-item", standalone: true, imports: [SeparatorComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-table-of-contents__item",
+                        role: "listitem",
+                        "[class.tedi-table-of-contents__item--selected]": "isSelected()",
+                        "[attr.aria-current]": "isSelected() ? 'location' : null",
+                        "[attr.data-name]": "'table-of-contents-item'",
+                    }, template: "<span\n  class=\"tedi-table-of-contents__row\"\n  [class]=\"'tedi-table-of-contents__row--level-' + level()\"\n>\n  @if (numbered()) {\n    <span class=\"tedi-table-of-contents__number\" aria-hidden=\"true\">{{\n      numberLabel()\n    }}</span>\n  }\n  <span class=\"tedi-table-of-contents__content\">\n    <ng-content />\n  </span>\n  <ng-content select=\"[tediTocItemSuffix]\" />\n</span>\n\n@if (separator()) {\n  <div class=\"tedi-table-of-contents__separator\">\n    <tedi-separator />\n  </div>\n}\n\n@if (isOpen()) {\n  <ul class=\"tedi-table-of-contents__group\" role=\"list\">\n    <ng-content select=\"tedi-table-of-contents-item\" />\n  </ul>\n}\n" }]
+        }], propDecorators: { itemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemId", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], childItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableOfContentsItemComponent), { isSignal: true }] }] } });
+
+let nextUniqueId = 0;
+/**
+ * A navigation aid that lists the sections of a page and highlights the one the
+ * reader is on. Compose it from `tedi-table-of-contents-item` elements; nest
+ * items to build a two-level hierarchy.
+ *
+ * The active item is controlled via `activeId`: it gets the accent bar and active link colour.
+ *
+ * When `sticky` is enabled the container pins while the page scrolls. Two knobs
+ * adapt it to the surrounding layout: `stickyOffset` moves where it pins (raise
+ * it to clear a fixed header), and `stickyMaxHeight` overrides the height cap
+ * for when the TOC scrolls inside a fixed-height container rather than the window.
+ *
+ * The gap the sticky TOC leaves above the viewport bottom has no input — override
+ * the `--tedi-table-of-contents-sticky-bottom` CSS custom property (default
+ * `1.5rem`) from any ancestor when you need to clear a fixed footer.
+ */
+class TableOfContentsComponent {
+    /**
+     * Heading rendered above the list. Defaults to the localised "Table of
+     * contents" label; pass `null` (or an empty string) to render it headless —
+     * the navigation keeps an accessible name via `aria-label`.
+     */
+    heading = input(undefined, ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    /**
+     * Semantic level of the heading element (`h1`–`h6`). The visual style stays
+     * h4 regardless; set this to match the surrounding page's heading outline
+     * (e.g. `h2` when the TOC follows only a page `h1`).
+     */
+    headingLevel = input("h3", ...(ngDevMode ? [{ debugName: "headingLevel" }] : []));
+    /**
+     * Visual variant:
+     * - `default` — rendered inside a bordered card.
+     * - `transparent` — no card chrome; the list sits on the page with a
+     *   continuous grey left rail.
+     */
+    variant = input("default", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Draws a divider under each item except the last — sub-items included — so the
+     * list reads as a set of separated rows.
+     * @default false
+     */
+    bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : []));
+    /** Id of the currently active item. */
+    activeId = input(...(ngDevMode ? [undefined, { debugName: "activeId" }] : []));
+    /**
+     * Keep the active item visible inside the TOC's own scroll area. When the list
+     * is taller than a bounded or sticky container and `activeId` changes, the TOC
+     * scrolls its internal scroll region just enough to reveal the active item.
+     * No-op when the list isn't scrollable (short lists, unbounded layouts).
+     * @default false
+     */
+    scrollActiveIntoView = input(false, ...(ngDevMode ? [{ debugName: "scrollActiveIntoView" }] : []));
+    /**
+     * Whether nested items are expanded by default. When `true` (default) the full
+     * outline is always visible. When `false`, a branch reveals its sub-items only
+     * while it is on the active trail (the active item or one of its ancestors).
+     * @default true
+     */
+    defaultOpen = input(true, ...(ngDevMode ? [{ debugName: "defaultOpen" }] : []));
+    /** Show auto-generated hierarchical numbers (`1.`, `2.`, `2.1`, …). */
+    numbered = input(false, ...(ngDevMode ? [{ debugName: "numbered" }] : []));
+    /** Stick the container to the viewport while scrolling. */
+    sticky = input(true, ...(ngDevMode ? [{ debugName: "sticky" }] : []));
+    /**
+     * Distance from the top of the scroll container at which the sticky TOC pins,
+     * as any CSS length or expression. Raise it to clear a fixed header — e.g.
+     * `"calc(var(--layout-header-height) + 1.5rem)"`. Drives both `top` and the
+     * default `max-height`. Only applies while `sticky` is `true`.
+     * @default "1.5rem"
+     */
+    stickyOffset = input(...(ngDevMode ? [undefined, { debugName: "stickyOffset" }] : []));
+    /**
+     * Overrides the sticky height cap. The default keeps the TOC within the
+     * viewport (`calc(100dvh - offset - 1.5rem)`); set this when the TOC scrolls
+     * inside a fixed-height container rather than the window — e.g.
+     * `"calc(30rem - 3rem)"` for a 30rem scroll region. Only applies while
+     * `sticky` is `true`.
+     */
+    stickyMaxHeight = input(...(ngDevMode ? [undefined, { debugName: "stickyMaxHeight" }] : []));
+    /**
+     * Accessible name for the navigation landmark. Overrides the default, which is
+     * the heading (via `aria-labelledby`) or the localised title when headless.
+     * Useful to disambiguate multiple tables of contents on one page.
+     */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    translations = inject(TediTranslationService);
+    host = inject(ElementRef);
+    platformId = inject(PLATFORM_ID);
+    constructor() {
+        // Reveal the active item within the TOC's own scroll region whenever it
+        // changes. Runs after render so nested items have finished expanding.
+        afterRenderEffect(() => {
+            const activeId = this.activeId();
+            if (!this.scrollActiveIntoView() || !activeId)
+                return;
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            this.revealActiveItem();
+        });
+    }
+    /** Top-level items, used by items to compute their hierarchical numbers. */
+    items = contentChildren(forwardRef(() => TableOfContentsItemComponent), ...(ngDevMode ? [{ debugName: "items" }] : []));
+    titleLabel = this.translations.track("table-of-contents.title");
+    resolvedHeading = computed(() => {
+        const heading = this.heading();
+        return heading === undefined ? this.titleLabel() : heading;
+    }, ...(ngDevMode ? [{ debugName: "resolvedHeading" }] : []));
+    navLabel = computed(() => this.ariaLabel() || this.titleLabel(), ...(ngDevMode ? [{ debugName: "navLabel" }] : []));
+    headingId = `tedi-table-of-contents-heading-${(nextUniqueId += 1)}`;
+    /** Scroll the TOC's own scroll region so the active item's row is visible. */
+    revealActiveItem() {
+        const hostEl = this.host.nativeElement;
+        const activeItem = hostEl.querySelector('[aria-current="location"]');
+        if (!activeItem)
+            return;
+        // Position by the item's own row, not the whole subtree (which may include
+        // expanded children).
+        const target = activeItem.querySelector(":scope > .tedi-table-of-contents__row") ?? activeItem;
+        const scroller = this.findScrollParent(target);
+        if (!scroller)
+            return;
+        const scrollerRect = scroller.getBoundingClientRect();
+        const targetRect = target.getBoundingClientRect();
+        const margin = 8;
+        const behavior = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+            ? "auto"
+            : "smooth";
+        if (targetRect.top < scrollerRect.top + margin) {
+            scroller.scrollBy({
+                top: targetRect.top - scrollerRect.top - margin,
+                behavior,
+            });
+        }
+        else if (targetRect.bottom > scrollerRect.bottom - margin) {
+            scroller.scrollBy({
+                top: targetRect.bottom - scrollerRect.bottom + margin,
+                behavior,
+            });
+        }
+    }
+    /** Nearest scrollable ancestor within this component (e.g. the sticky `nav`). */
+    findScrollParent(el) {
+        const hostEl = this.host.nativeElement;
+        let node = el.parentElement;
+        while (node && hostEl.contains(node)) {
+            const overflowY = getComputedStyle(node).overflowY;
+            if ((overflowY === "auto" || overflowY === "scroll") &&
+                node.scrollHeight > node.clientHeight) {
+                return node;
+            }
+            node = node.parentElement;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableOfContentsComponent, isStandalone: true, selector: "tedi-table-of-contents", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, scrollActiveIntoView: { classPropertyName: "scrollActiveIntoView", publicName: "scrollActiveIntoView", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, stickyOffset: { classPropertyName: "stickyOffset", publicName: "stickyOffset", isSignal: true, isRequired: false, transformFunction: null }, stickyMaxHeight: { classPropertyName: "stickyMaxHeight", publicName: "stickyMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-table-of-contents--bordered": "bordered()", "attr.data-name": "'table-of-contents'", "style.--tedi-table-of-contents-sticky-top": "stickyOffset()", "style.--tedi-table-of-contents-sticky-max-height": "stickyMaxHeight()" }, classAttribute: "tedi-table-of-contents" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => TableOfContentsItemComponent), isSignal: true }], ngImport: i0, template: "<ng-template #inner>\n  @if (resolvedHeading()) {\n    @switch (headingLevel()) {\n      @case (\"h1\") {\n        <h1\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h1>\n      }\n      @case (\"h2\") {\n        <h2\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h2>\n      }\n      @case (\"h4\") {\n        <h4\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h4>\n      }\n      @case (\"h5\") {\n        <h5\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h5>\n      }\n      @case (\"h6\") {\n        <h6\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h6>\n      }\n      @default {\n        <h3\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h3>\n      }\n    }\n  }\n  <nav\n    [attr.aria-labelledby]=\"\n      !ariaLabel() && resolvedHeading() ? headingId : null\n    \"\n    [attr.aria-label]=\"ariaLabel() || (resolvedHeading() ? null : navLabel())\"\n  >\n    <ul\n      class=\"tedi-table-of-contents__list\"\n      role=\"list\"\n      [class.tedi-table-of-contents__list--headless]=\"!resolvedHeading()\"\n    >\n      <ng-content select=\"tedi-table-of-contents-item\" />\n    </ul>\n  </nav>\n</ng-template>\n\n@if (variant() === \"transparent\") {\n  <div\n    class=\"tedi-table-of-contents__container tedi-table-of-contents--transparent\"\n    [class.tedi-table-of-contents--sticky]=\"sticky()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </div>\n} @else {\n  <tedi-card\n    class=\"tedi-table-of-contents__container\"\n    [class.tedi-table-of-contents--sticky]=\"sticky()\"\n  >\n    <tedi-card-content [padding]=\"0\">\n      <ng-container [ngTemplateOutlet]=\"inner\" />\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".tedi-table-of-contents{--tedi-table-of-contents-padding: var(--card-padding-md-default);--tedi-table-of-contents-sticky-top: 1.5rem;--tedi-table-of-contents-sticky-bottom: 1.5rem;--tedi-table-of-contents-sticky-max-height: calc( 100dvh - var(--tedi-table-of-contents-sticky-top) - var(--tedi-table-of-contents-sticky-bottom) );display:block}.tedi-table-of-contents__container{display:block}.tedi-table-of-contents__container.tedi-table-of-contents--sticky{position:sticky;top:var(--tedi-table-of-contents-sticky-top);display:flex;flex-direction:column;max-height:var(--tedi-table-of-contents-sticky-max-height)}.tedi-table-of-contents--sticky>.tedi-card-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.tedi-table-of-contents--sticky .tedi-table-of-contents__heading{flex:none}.tedi-table-of-contents--sticky nav{flex:1 1 auto;min-height:0;margin-block:var(--card-padding-md-default);overflow-y:auto}.tedi-table-of-contents--sticky .tedi-table-of-contents__list{padding-block:0}.tedi-table-of-contents--transparent .tedi-table-of-contents__list{position:relative;padding-bottom:0;isolation:isolate}.tedi-table-of-contents--transparent .tedi-table-of-contents__list:before{position:absolute;inset-block:0;inset-inline-start:0;z-index:-1;width:var(--tedi-borders-01);content:\"\";background:var(--card-border-primary)}.tedi-table-of-contents__heading{padding:var(--card-padding-md-default) var(--card-padding-md-default) 0 var(--card-padding-md-default)}.tedi-table-of-contents__list,.tedi-table-of-contents__group{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}.tedi-table-of-contents__list{padding:var(--card-padding-md-default) 0}.tedi-table-of-contents--bordered .tedi-table-of-contents__list{padding:var(--card-padding-xs) 0}.tedi-table-of-contents__list--headless{padding-top:var(--tedi-table-of-contents-padding)}.tedi-table-of-contents__item{display:flex;flex-direction:column}.tedi-table-of-contents__row{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-block:var(--table-of-contents-padding-y);padding-inline:var(--table-of-contents-padding-left-level-1);border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__row--level-2{padding-right:var(--list-padding-left-level-1);padding-left:var(--list-padding-left-level-2)}.tedi-table-of-contents__number{flex-shrink:0;min-width:1.5rem;color:var(--link-primary-default);text-align:right}.tedi-table-of-contents__separator{padding-block:var(--layout-grid-gutters-04);padding-right:var(--table-of-contents-padding-left-level-1);padding-left:calc(var(--table-of-contents-padding-left-level-1) - var(--table-of-contents-active-item-border-width));border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__content{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.tedi-table-of-contents__suffix{flex:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__number{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button){color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover :not(tedi-icon){text-decoration:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__separator{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents--bordered .tedi-table-of-contents__row{border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents--bordered .tedi-table-of-contents__list>.tedi-table-of-contents__item:last-child>.tedi-table-of-contents__row{border-bottom:0}.tedi-table-of-contents__bar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-index-header);display:flex;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);background:var(--card-background-primary);border-top:var(--tedi-borders-01) solid var(--card-border-primary);border-top-left-radius:var(--card-radius-rounded);border-top-right-radius:var(--card-radius-rounded);transition:transform .3s ease}.tedi-table-of-contents__bar--static{position:static}.tedi-table-of-contents__bar--hidden{display:none}.tedi-table-of-contents__bar--tucked{transform:translateY(100%)}@media(prefers-reduced-motion:reduce){.tedi-table-of-contents__bar{transition:none}}.tedi-table-of-contents__bar-title{margin:0}.tedi-table-of-contents__sheet{--tedi-table-of-contents-padding: var(--card-padding-md-default);display:flex;flex-direction:column;max-height:80dvh}.tedi-table-of-contents__sheet-header{display:flex;flex:none;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents__sheet-nav{flex:1 1 auto;min-height:0;overflow-y:auto}.tedi-table-of-contents__sheet-panel{width:100%;overflow-y:auto;background:var(--card-background-primary);border-top-left-radius:var(--modal-radius);border-top-right-radius:var(--modal-radius)}.tedi-table-of-contents__backdrop{background:var(--general-surface-overlay)}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-table-of-contents", standalone: true, imports: [
+                        CardComponent,
+                        CardContentComponent,
+                        TextComponent,
+                        NgTemplateOutlet,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-table-of-contents",
+                        "[class.tedi-table-of-contents--bordered]": "bordered()",
+                        "[attr.data-name]": "'table-of-contents'",
+                        "[style.--tedi-table-of-contents-sticky-top]": "stickyOffset()",
+                        "[style.--tedi-table-of-contents-sticky-max-height]": "stickyMaxHeight()",
+                    }, template: "<ng-template #inner>\n  @if (resolvedHeading()) {\n    @switch (headingLevel()) {\n      @case (\"h1\") {\n        <h1\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h1>\n      }\n      @case (\"h2\") {\n        <h2\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h2>\n      }\n      @case (\"h4\") {\n        <h4\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h4>\n      }\n      @case (\"h5\") {\n        <h5\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h5>\n      }\n      @case (\"h6\") {\n        <h6\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h6>\n      }\n      @default {\n        <h3\n          tedi-text\n          modifiers=\"h4\"\n          class=\"tedi-table-of-contents__heading\"\n          [id]=\"headingId\"\n        >\n          {{ resolvedHeading() }}\n        </h3>\n      }\n    }\n  }\n  <nav\n    [attr.aria-labelledby]=\"\n      !ariaLabel() && resolvedHeading() ? headingId : null\n    \"\n    [attr.aria-label]=\"ariaLabel() || (resolvedHeading() ? null : navLabel())\"\n  >\n    <ul\n      class=\"tedi-table-of-contents__list\"\n      role=\"list\"\n      [class.tedi-table-of-contents__list--headless]=\"!resolvedHeading()\"\n    >\n      <ng-content select=\"tedi-table-of-contents-item\" />\n    </ul>\n  </nav>\n</ng-template>\n\n@if (variant() === \"transparent\") {\n  <div\n    class=\"tedi-table-of-contents__container tedi-table-of-contents--transparent\"\n    [class.tedi-table-of-contents--sticky]=\"sticky()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </div>\n} @else {\n  <tedi-card\n    class=\"tedi-table-of-contents__container\"\n    [class.tedi-table-of-contents--sticky]=\"sticky()\"\n  >\n    <tedi-card-content [padding]=\"0\">\n      <ng-container [ngTemplateOutlet]=\"inner\" />\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".tedi-table-of-contents{--tedi-table-of-contents-padding: var(--card-padding-md-default);--tedi-table-of-contents-sticky-top: 1.5rem;--tedi-table-of-contents-sticky-bottom: 1.5rem;--tedi-table-of-contents-sticky-max-height: calc( 100dvh - var(--tedi-table-of-contents-sticky-top) - var(--tedi-table-of-contents-sticky-bottom) );display:block}.tedi-table-of-contents__container{display:block}.tedi-table-of-contents__container.tedi-table-of-contents--sticky{position:sticky;top:var(--tedi-table-of-contents-sticky-top);display:flex;flex-direction:column;max-height:var(--tedi-table-of-contents-sticky-max-height)}.tedi-table-of-contents--sticky>.tedi-card-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.tedi-table-of-contents--sticky .tedi-table-of-contents__heading{flex:none}.tedi-table-of-contents--sticky nav{flex:1 1 auto;min-height:0;margin-block:var(--card-padding-md-default);overflow-y:auto}.tedi-table-of-contents--sticky .tedi-table-of-contents__list{padding-block:0}.tedi-table-of-contents--transparent .tedi-table-of-contents__list{position:relative;padding-bottom:0;isolation:isolate}.tedi-table-of-contents--transparent .tedi-table-of-contents__list:before{position:absolute;inset-block:0;inset-inline-start:0;z-index:-1;width:var(--tedi-borders-01);content:\"\";background:var(--card-border-primary)}.tedi-table-of-contents__heading{padding:var(--card-padding-md-default) var(--card-padding-md-default) 0 var(--card-padding-md-default)}.tedi-table-of-contents__list,.tedi-table-of-contents__group{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}.tedi-table-of-contents__list{padding:var(--card-padding-md-default) 0}.tedi-table-of-contents--bordered .tedi-table-of-contents__list{padding:var(--card-padding-xs) 0}.tedi-table-of-contents__list--headless{padding-top:var(--tedi-table-of-contents-padding)}.tedi-table-of-contents__item{display:flex;flex-direction:column}.tedi-table-of-contents__row{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-block:var(--table-of-contents-padding-y);padding-inline:var(--table-of-contents-padding-left-level-1);border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__row--level-2{padding-right:var(--list-padding-left-level-1);padding-left:var(--list-padding-left-level-2)}.tedi-table-of-contents__number{flex-shrink:0;min-width:1.5rem;color:var(--link-primary-default);text-align:right}.tedi-table-of-contents__separator{padding-block:var(--layout-grid-gutters-04);padding-right:var(--table-of-contents-padding-left-level-1);padding-left:calc(var(--table-of-contents-padding-left-level-1) - var(--table-of-contents-active-item-border-width));border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__content{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.tedi-table-of-contents__suffix{flex:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__number{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button){color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover :not(tedi-icon){text-decoration:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__separator{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents--bordered .tedi-table-of-contents__row{border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents--bordered .tedi-table-of-contents__list>.tedi-table-of-contents__item:last-child>.tedi-table-of-contents__row{border-bottom:0}.tedi-table-of-contents__bar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-index-header);display:flex;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);background:var(--card-background-primary);border-top:var(--tedi-borders-01) solid var(--card-border-primary);border-top-left-radius:var(--card-radius-rounded);border-top-right-radius:var(--card-radius-rounded);transition:transform .3s ease}.tedi-table-of-contents__bar--static{position:static}.tedi-table-of-contents__bar--hidden{display:none}.tedi-table-of-contents__bar--tucked{transform:translateY(100%)}@media(prefers-reduced-motion:reduce){.tedi-table-of-contents__bar{transition:none}}.tedi-table-of-contents__bar-title{margin:0}.tedi-table-of-contents__sheet{--tedi-table-of-contents-padding: var(--card-padding-md-default);display:flex;flex-direction:column;max-height:80dvh}.tedi-table-of-contents__sheet-header{display:flex;flex:none;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents__sheet-nav{flex:1 1 auto;min-height:0;overflow-y:auto}.tedi-table-of-contents__sheet-panel{width:100%;overflow-y:auto;background:var(--card-background-primary);border-top-left-radius:var(--modal-radius);border-top-right-radius:var(--modal-radius)}.tedi-table-of-contents__backdrop{background:var(--general-surface-overlay)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], scrollActiveIntoView: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollActiveIntoView", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], numbered: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbered", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], stickyOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyOffset", required: false }] }], stickyMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyMaxHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], items: [{ type: i0.ContentChildren, args: [forwardRef(() => TableOfContentsItemComponent), { isSignal: true }] }] } });
+
+/**
+ * Marks projected content as the trailing suffix of a
+ * `tedi-table-of-contents-item`. The item renders it right-aligned at the end of
+ * the row — e.g. a `tedi-tag`.
+ */
+class TableOfContentsItemSuffixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsItemSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: TableOfContentsItemSuffixDirective, isStandalone: true, selector: "[tediTocItemSuffix]", host: { classAttribute: "tedi-table-of-contents__suffix" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsItemSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediTocItemSuffix]",
+                    standalone: true,
+                    host: {
+                        class: "tedi-table-of-contents__suffix",
+                    },
+                }]
+        }] });
+
+/**
+ * Mobile variant of `tedi-table-of-contents`: a bottom bar that opens the list
+ * in a bottom-sheet overlay. Takes the same `tedi-table-of-contents-item`
+ * children as the desktop card; render it on small viewports.
+ *
+ * It provides itself as `TableOfContentsComponent` so the projected items
+ * resolve their context (`activeId`, `numbered`, `items`) exactly as they do
+ * inside the desktop component.
+ */
+class TableOfContentsCollapsibleComponent {
+    /**
+     * Heading shown on the bar and sheet. Defaults to the localised "Table of
+     * contents" label.
+     */
+    heading = input(undefined, ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    /** Id of the currently active item. */
+    activeId = input(...(ngDevMode ? [undefined, { debugName: "activeId" }] : []));
+    /**
+     * Whether nested items are expanded by default. When `false`, a branch reveals
+     * its sub-items only while it is on the active trail. Mirrors
+     * `tedi-table-of-contents` so projected items resolve it via the shared root.
+     * @default true
+     */
+    defaultOpen = input(true, ...(ngDevMode ? [{ debugName: "defaultOpen" }] : []));
+    /** Show auto-generated hierarchical numbers (`1.`, `2.`, `2.1`, …). */
+    numbered = input(false, ...(ngDevMode ? [{ debugName: "numbered" }] : []));
+    /**
+     * Draws a divider under each item except the last — sub-items included — so the
+     * sheet's list reads as a set of separated rows. Mirrors `tedi-table-of-contents`.
+     * @default false
+     */
+    bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : []));
+    /**
+     * Pin the bar to the bottom of the viewport. Set `false` to render it inline.
+     */
+    sticky = input(true, ...(ngDevMode ? [{ debugName: "sticky" }] : []));
+    /**
+     * Hide the bar while the user scrolls down and reveal it when they scroll up,
+     * keeping the reading area clear. Watches window scroll by default; set
+     * `scrollContainer` to watch a scrollable element instead.
+     * @default false
+     */
+    hideOnScroll = input(false, ...(ngDevMode ? [{ debugName: "hideOnScroll" }] : []));
+    /**
+     * Element whose scroll drives `hideOnScroll`. Defaults to the window; set it to
+     * the scrollable container when the content scrolls inside a region rather than
+     * the whole page.
+     */
+    scrollContainer = input(...(ngDevMode ? [undefined, { debugName: "scrollContainer" }] : []));
+    /**
+     * Accessible name for the sheet's navigation landmark and dialog. Defaults to
+     * the visible title.
+     */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /** Top-level items, read by items to compute their hierarchical numbers. */
+    items = contentChildren(forwardRef(() => TableOfContentsItemComponent), ...(ngDevMode ? [{ debugName: "items" }] : []));
+    dialog = inject(Dialog);
+    overlay = inject(Overlay);
+    translations = inject(TediTranslationService);
+    platformId = inject(PLATFORM_ID);
+    zone = inject(NgZone);
+    sheet = viewChild.required("sheet");
+    dialogRef;
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /** True while the sticky bar is hidden by a scroll-down gesture. */
+    barHidden = signal(false, ...(ngDevMode ? [{ debugName: "barHidden" }] : []));
+    lastScrollY = 0;
+    ticking = false;
+    scrollTarget;
+    onScroll = () => this.handleScroll();
+    constructor() {
+        // Runs client-side only; drives the scroll-away behaviour for `hideOnScroll`.
+        afterNextRender(() => {
+            const target = this.scrollContainer() ?? window;
+            this.scrollTarget = target;
+            this.lastScrollY = this.currentScrollY();
+            // Outside Angular so scroll events don't trigger change detection; the
+            // `barHidden` signal updates the view on its own when it actually changes.
+            this.zone.runOutsideAngular(() => {
+                target.addEventListener("scroll", this.onScroll, {
+                    passive: true,
+                });
+            });
+        });
+    }
+    currentScrollY() {
+        const el = this.scrollContainer();
+        return el ? el.scrollTop : window.scrollY;
+    }
+    titleLabel = this.translations.track("table-of-contents.title");
+    openLabel = this.translations.track("open");
+    closeLabel = this.translations.track("close");
+    title = computed(() => this.heading() || this.titleLabel(), ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /** Accessible name for the nav/dialog — the `ariaLabel` override or the title. */
+    navLabel = computed(() => this.ariaLabel() || this.title(), ...(ngDevMode ? [{ debugName: "navLabel" }] : []));
+    toggle(open) {
+        if (open) {
+            this.openSheet();
+        }
+        else {
+            this.close();
+        }
+    }
+    close() {
+        this.dialogRef?.close();
+    }
+    ngOnDestroy() {
+        this.close();
+        if (isPlatformBrowser(this.platformId)) {
+            this.scrollTarget?.removeEventListener("scroll", this.onScroll);
+        }
+    }
+    // Reveal on scroll up, hide on scroll down; always show near the top. Throttled
+    // to one update per frame and ignores sub-pixel jitter.
+    handleScroll() {
+        if (this.ticking)
+            return;
+        this.ticking = true;
+        requestAnimationFrame(() => {
+            this.ticking = false;
+            const currentY = this.currentScrollY();
+            if (!this.hideOnScroll()) {
+                this.barHidden.set(false);
+                this.lastScrollY = currentY;
+                return;
+            }
+            const delta = currentY - this.lastScrollY;
+            if (Math.abs(delta) < 4)
+                return;
+            this.barHidden.set(currentY > 8 && delta > 0);
+            this.lastScrollY = currentY;
+        });
+    }
+    onListClick(event) {
+        if (event.target.closest("a, button")) {
+            this.close();
+        }
+    }
+    openSheet() {
+        if (this.dialogRef)
+            return;
+        this.open.set(true);
+        this.dialogRef = this.dialog.open(this.sheet(), {
+            panelClass: "tedi-table-of-contents__sheet-panel",
+            backdropClass: "tedi-table-of-contents__backdrop",
+            hasBackdrop: true,
+            ariaModal: true,
+            ariaLabel: this.navLabel(),
+            autoFocus: "first-tabbable",
+            restoreFocus: true,
+            disableClose: true,
+            positionStrategy: this.overlay
+                .position()
+                .global()
+                .centerHorizontally()
+                .bottom("0"),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        this.dialogRef.backdropClick?.subscribe(() => this.close());
+        this.dialogRef.keydownEvents?.subscribe((event) => {
+            if (event.key === "Escape")
+                this.close();
+        });
+        this.dialogRef.closed.subscribe(() => {
+            this.dialogRef = undefined;
+            this.open.set(false);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsCollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: TableOfContentsCollapsibleComponent, isStandalone: true, selector: "tedi-table-of-contents-collapsible", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, scrollContainer: { classPropertyName: "scrollContainer", publicName: "scrollContainer", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-name": "'table-of-contents-collapsible'" }, classAttribute: "tedi-table-of-contents-collapsible" }, providers: [
+            {
+                provide: TableOfContentsComponent,
+                useExisting: forwardRef(() => TableOfContentsCollapsibleComponent),
+            },
+        ], queries: [{ propertyName: "items", predicate: i0.forwardRef(() => TableOfContentsItemComponent), isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tedi-table-of-contents__bar\"\n  [class.tedi-table-of-contents__bar--static]=\"!sticky()\"\n  [class.tedi-table-of-contents__bar--hidden]=\"open()\"\n  [class.tedi-table-of-contents__bar--tucked]=\"barHidden()\"\n>\n  <span tedi-text modifiers=\"bold\" class=\"tedi-table-of-contents__bar-title\">\n    {{ title() }}\n  </span>\n  <button\n    tedi-collapse-button\n    aria-haspopup=\"dialog\"\n    [open]=\"open()\"\n    [openText]=\"openLabel()\"\n    [closeText]=\"closeLabel()\"\n    [underline]=\"false\"\n    (openChange)=\"toggle($event)\"\n  ></button>\n</div>\n\n<ng-template #sheet>\n  <div\n    class=\"tedi-table-of-contents tedi-table-of-contents__sheet\"\n    [class.tedi-table-of-contents--bordered]=\"bordered()\"\n  >\n    <div class=\"tedi-table-of-contents__sheet-header\">\n      <span\n        tedi-text\n        modifiers=\"bold\"\n        class=\"tedi-table-of-contents__bar-title\"\n      >\n        {{ title() }}\n      </span>\n      <button\n        tedi-collapse-button\n        [open]=\"true\"\n        [openText]=\"openLabel()\"\n        [closeText]=\"closeLabel()\"\n        [underline]=\"false\"\n        (openChange)=\"close()\"\n      ></button>\n    </div>\n    <nav\n      class=\"tedi-table-of-contents__sheet-nav\"\n      [attr.aria-label]=\"navLabel()\"\n      (click)=\"onListClick($event)\"\n    >\n      <ul\n        class=\"tedi-table-of-contents__list tedi-table-of-contents__list--headless\"\n        role=\"list\"\n      >\n        <ng-content select=\"tedi-table-of-contents-item\" />\n      </ul>\n    </nav>\n  </div>\n</ng-template>\n", styles: [".tedi-table-of-contents{--tedi-table-of-contents-padding: var(--card-padding-md-default);--tedi-table-of-contents-sticky-top: 1.5rem;--tedi-table-of-contents-sticky-bottom: 1.5rem;--tedi-table-of-contents-sticky-max-height: calc( 100dvh - var(--tedi-table-of-contents-sticky-top) - var(--tedi-table-of-contents-sticky-bottom) );display:block}.tedi-table-of-contents__container{display:block}.tedi-table-of-contents__container.tedi-table-of-contents--sticky{position:sticky;top:var(--tedi-table-of-contents-sticky-top);display:flex;flex-direction:column;max-height:var(--tedi-table-of-contents-sticky-max-height)}.tedi-table-of-contents--sticky>.tedi-card-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.tedi-table-of-contents--sticky .tedi-table-of-contents__heading{flex:none}.tedi-table-of-contents--sticky nav{flex:1 1 auto;min-height:0;margin-block:var(--card-padding-md-default);overflow-y:auto}.tedi-table-of-contents--sticky .tedi-table-of-contents__list{padding-block:0}.tedi-table-of-contents--transparent .tedi-table-of-contents__list{position:relative;padding-bottom:0;isolation:isolate}.tedi-table-of-contents--transparent .tedi-table-of-contents__list:before{position:absolute;inset-block:0;inset-inline-start:0;z-index:-1;width:var(--tedi-borders-01);content:\"\";background:var(--card-border-primary)}.tedi-table-of-contents__heading{padding:var(--card-padding-md-default) var(--card-padding-md-default) 0 var(--card-padding-md-default)}.tedi-table-of-contents__list,.tedi-table-of-contents__group{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}.tedi-table-of-contents__list{padding:var(--card-padding-md-default) 0}.tedi-table-of-contents--bordered .tedi-table-of-contents__list{padding:var(--card-padding-xs) 0}.tedi-table-of-contents__list--headless{padding-top:var(--tedi-table-of-contents-padding)}.tedi-table-of-contents__item{display:flex;flex-direction:column}.tedi-table-of-contents__row{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-block:var(--table-of-contents-padding-y);padding-inline:var(--table-of-contents-padding-left-level-1);border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__row--level-2{padding-right:var(--list-padding-left-level-1);padding-left:var(--list-padding-left-level-2)}.tedi-table-of-contents__number{flex-shrink:0;min-width:1.5rem;color:var(--link-primary-default);text-align:right}.tedi-table-of-contents__separator{padding-block:var(--layout-grid-gutters-04);padding-right:var(--table-of-contents-padding-left-level-1);padding-left:calc(var(--table-of-contents-padding-left-level-1) - var(--table-of-contents-active-item-border-width));border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__content{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.tedi-table-of-contents__suffix{flex:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__number{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button){color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover :not(tedi-icon){text-decoration:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__separator{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents--bordered .tedi-table-of-contents__row{border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents--bordered .tedi-table-of-contents__list>.tedi-table-of-contents__item:last-child>.tedi-table-of-contents__row{border-bottom:0}.tedi-table-of-contents__bar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-index-header);display:flex;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);background:var(--card-background-primary);border-top:var(--tedi-borders-01) solid var(--card-border-primary);border-top-left-radius:var(--card-radius-rounded);border-top-right-radius:var(--card-radius-rounded);transition:transform .3s ease}.tedi-table-of-contents__bar--static{position:static}.tedi-table-of-contents__bar--hidden{display:none}.tedi-table-of-contents__bar--tucked{transform:translateY(100%)}@media(prefers-reduced-motion:reduce){.tedi-table-of-contents__bar{transition:none}}.tedi-table-of-contents__bar-title{margin:0}.tedi-table-of-contents__sheet{--tedi-table-of-contents-padding: var(--card-padding-md-default);display:flex;flex-direction:column;max-height:80dvh}.tedi-table-of-contents__sheet-header{display:flex;flex:none;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents__sheet-nav{flex:1 1 auto;min-height:0;overflow-y:auto}.tedi-table-of-contents__sheet-panel{width:100%;overflow-y:auto;background:var(--card-background-primary);border-top-left-radius:var(--modal-radius);border-top-right-radius:var(--modal-radius)}.tedi-table-of-contents__backdrop{background:var(--general-surface-overlay)}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsCollapsibleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-table-of-contents-collapsible", standalone: true, imports: [TextComponent, CollapseButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-table-of-contents-collapsible",
+                        "[attr.data-name]": "'table-of-contents-collapsible'",
+                    }, providers: [
+                        {
+                            provide: TableOfContentsComponent,
+                            useExisting: forwardRef(() => TableOfContentsCollapsibleComponent),
+                        },
+                    ], template: "<div\n  class=\"tedi-table-of-contents__bar\"\n  [class.tedi-table-of-contents__bar--static]=\"!sticky()\"\n  [class.tedi-table-of-contents__bar--hidden]=\"open()\"\n  [class.tedi-table-of-contents__bar--tucked]=\"barHidden()\"\n>\n  <span tedi-text modifiers=\"bold\" class=\"tedi-table-of-contents__bar-title\">\n    {{ title() }}\n  </span>\n  <button\n    tedi-collapse-button\n    aria-haspopup=\"dialog\"\n    [open]=\"open()\"\n    [openText]=\"openLabel()\"\n    [closeText]=\"closeLabel()\"\n    [underline]=\"false\"\n    (openChange)=\"toggle($event)\"\n  ></button>\n</div>\n\n<ng-template #sheet>\n  <div\n    class=\"tedi-table-of-contents tedi-table-of-contents__sheet\"\n    [class.tedi-table-of-contents--bordered]=\"bordered()\"\n  >\n    <div class=\"tedi-table-of-contents__sheet-header\">\n      <span\n        tedi-text\n        modifiers=\"bold\"\n        class=\"tedi-table-of-contents__bar-title\"\n      >\n        {{ title() }}\n      </span>\n      <button\n        tedi-collapse-button\n        [open]=\"true\"\n        [openText]=\"openLabel()\"\n        [closeText]=\"closeLabel()\"\n        [underline]=\"false\"\n        (openChange)=\"close()\"\n      ></button>\n    </div>\n    <nav\n      class=\"tedi-table-of-contents__sheet-nav\"\n      [attr.aria-label]=\"navLabel()\"\n      (click)=\"onListClick($event)\"\n    >\n      <ul\n        class=\"tedi-table-of-contents__list tedi-table-of-contents__list--headless\"\n        role=\"list\"\n      >\n        <ng-content select=\"tedi-table-of-contents-item\" />\n      </ul>\n    </nav>\n  </div>\n</ng-template>\n", styles: [".tedi-table-of-contents{--tedi-table-of-contents-padding: var(--card-padding-md-default);--tedi-table-of-contents-sticky-top: 1.5rem;--tedi-table-of-contents-sticky-bottom: 1.5rem;--tedi-table-of-contents-sticky-max-height: calc( 100dvh - var(--tedi-table-of-contents-sticky-top) - var(--tedi-table-of-contents-sticky-bottom) );display:block}.tedi-table-of-contents__container{display:block}.tedi-table-of-contents__container.tedi-table-of-contents--sticky{position:sticky;top:var(--tedi-table-of-contents-sticky-top);display:flex;flex-direction:column;max-height:var(--tedi-table-of-contents-sticky-max-height)}.tedi-table-of-contents--sticky>.tedi-card-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.tedi-table-of-contents--sticky .tedi-table-of-contents__heading{flex:none}.tedi-table-of-contents--sticky nav{flex:1 1 auto;min-height:0;margin-block:var(--card-padding-md-default);overflow-y:auto}.tedi-table-of-contents--sticky .tedi-table-of-contents__list{padding-block:0}.tedi-table-of-contents--transparent .tedi-table-of-contents__list{position:relative;padding-bottom:0;isolation:isolate}.tedi-table-of-contents--transparent .tedi-table-of-contents__list:before{position:absolute;inset-block:0;inset-inline-start:0;z-index:-1;width:var(--tedi-borders-01);content:\"\";background:var(--card-border-primary)}.tedi-table-of-contents__heading{padding:var(--card-padding-md-default) var(--card-padding-md-default) 0 var(--card-padding-md-default)}.tedi-table-of-contents__list,.tedi-table-of-contents__group{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}.tedi-table-of-contents__list{padding:var(--card-padding-md-default) 0}.tedi-table-of-contents--bordered .tedi-table-of-contents__list{padding:var(--card-padding-xs) 0}.tedi-table-of-contents__list--headless{padding-top:var(--tedi-table-of-contents-padding)}.tedi-table-of-contents__item{display:flex;flex-direction:column}.tedi-table-of-contents__row{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-block:var(--table-of-contents-padding-y);padding-inline:var(--table-of-contents-padding-left-level-1);border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__row--level-2{padding-right:var(--list-padding-left-level-1);padding-left:var(--list-padding-left-level-2)}.tedi-table-of-contents__number{flex-shrink:0;min-width:1.5rem;color:var(--link-primary-default);text-align:right}.tedi-table-of-contents__separator{padding-block:var(--layout-grid-gutters-04);padding-right:var(--table-of-contents-padding-left-level-1);padding-left:calc(var(--table-of-contents-padding-left-level-1) - var(--table-of-contents-active-item-border-width));border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__content{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.tedi-table-of-contents__suffix{flex:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__number{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button){color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover :not(tedi-icon){text-decoration:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__separator{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents--bordered .tedi-table-of-contents__row{border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents--bordered .tedi-table-of-contents__list>.tedi-table-of-contents__item:last-child>.tedi-table-of-contents__row{border-bottom:0}.tedi-table-of-contents__bar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-index-header);display:flex;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);background:var(--card-background-primary);border-top:var(--tedi-borders-01) solid var(--card-border-primary);border-top-left-radius:var(--card-radius-rounded);border-top-right-radius:var(--card-radius-rounded);transition:transform .3s ease}.tedi-table-of-contents__bar--static{position:static}.tedi-table-of-contents__bar--hidden{display:none}.tedi-table-of-contents__bar--tucked{transform:translateY(100%)}@media(prefers-reduced-motion:reduce){.tedi-table-of-contents__bar{transition:none}}.tedi-table-of-contents__bar-title{margin:0}.tedi-table-of-contents__sheet{--tedi-table-of-contents-padding: var(--card-padding-md-default);display:flex;flex-direction:column;max-height:80dvh}.tedi-table-of-contents__sheet-header{display:flex;flex:none;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents__sheet-nav{flex:1 1 auto;min-height:0;overflow-y:auto}.tedi-table-of-contents__sheet-panel{width:100%;overflow-y:auto;background:var(--card-background-primary);border-top-left-radius:var(--modal-radius);border-top-right-radius:var(--modal-radius)}.tedi-table-of-contents__backdrop{background:var(--general-surface-overlay)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], numbered: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbered", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], scrollContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainer", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], items: [{ type: i0.ContentChildren, args: [forwardRef(() => TableOfContentsItemComponent), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: ["sheet", { isSignal: true }] }] } });
+
 /**
  * Root of the Tabs compound component. Wraps `tedi-tabs-list` and
  * `tedi-tabs-content` elements and owns the active-tab state, which the list,
@@ -22413,7 +23353,7 @@ class TabsListComponent {
         this.isOverflowing.set(naturalWidth > wrapper.clientWidth);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TabsListComponent, isStandalone: true, selector: "tedi-tabs-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, overflowMode: { classPropertyName: "overflowMode", publicName: "overflowMode", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabel: { classPropertyName: "dropdownLabel", publicName: "dropdownLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-tabs-list--fade-start": "overflowMode() === 'scroll' && canScrollStart()", "class.tedi-tabs-list--fade-end": "overflowMode() === 'scroll' && canScrollEnd()" }, classAttribute: "tedi-tabs-list" }, queries: [{ propertyName: "triggers", predicate: TabsTriggerComponent, isSignal: true }], viewQueries: [{ propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #list\n  role=\"tablist\"\n  data-name=\"tabs-list\"\n  class=\"tedi-tabs-list__items\"\n  [class.tedi-tabs-list__items--overflow]=\"showMore()\"\n  [class.tedi-tabs-list__items--scroll]=\"overflowMode() === 'scroll'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  (scroll)=\"updateScrollFade()\"\n>\n  <ng-content />\n</div>\n\n@if (showMore()) {\n  <div class=\"tedi-tabs-list__more\">\n    <tedi-dropdown position=\"bottom-end\">\n      <button\n        type=\"button\"\n        tedi-dropdown-trigger\n        class=\"tedi-tabs-list__more-btn\"\n      >\n        {{ dropdownLabel() || (\"more\" | tediTranslate) }}\n        <tedi-icon name=\"expand_more\" [size]=\"18\" color=\"inherit\" />\n      </button>\n      <tedi-dropdown-content dropdownRole=\"menu\">\n        @for (item of dropdownItems(); track item.id) {\n          <li\n            tedi-dropdown-item\n            [value]=\"item.id\"\n            [disabled]=\"item.disabled\"\n            [clipContent]=\"false\"\n            [attr.aria-label]=\"item.trigger.label\"\n            (itemSelect)=\"selectTab(item.id)\"\n          >\n            <span [tediTabsOverflowContent]=\"item.trigger\"></span>\n          </li>\n        }\n      </tedi-dropdown-content>\n    </tedi-dropdown>\n  </div>\n}\n", styles: [".tedi-tabs-list{position:relative;display:flex;overflow:hidden;background:var(--tab-background);border-top-left-radius:var(--tab-top-radius);border-top-right-radius:var(--tab-top-radius)}.tedi-tabs-list--fade-start:before,.tedi-tabs-list--fade-end:after{position:absolute;top:0;bottom:0;z-index:1;width:3rem;pointer-events:none;content:\"\"}.tedi-tabs-list--fade-start:before{left:0;background:linear-gradient(to right,var(--tab-background) 10%,transparent 80%)}.tedi-tabs-list--fade-end:after{right:0;background:linear-gradient(to left,var(--tab-background) 10%,transparent 80%)}.tedi-tabs-list__items{display:flex;flex:1;min-width:0;overflow:hidden}.tedi-tabs-list__items--overflow .tedi-tabs-trigger:not(.tedi-tabs-trigger--selected){display:none}.tedi-tabs-list__items--overflow .tedi-tabs-trigger--selected{flex-grow:1;min-width:0}.tedi-tabs-list__items--scroll{overflow-x:auto}.tedi-tabs-list__more{display:flex;flex-shrink:0}.tedi-tabs-list__more-btn{--_tab-background: var(--tab-item-default-background);--_tab-color: var(--tab-item-default-text);display:inline-flex;gap:var(--tab-inner-spacing);align-items:center;justify-content:center;padding:var(--tab-spacing-y) var(--tab-spacing-x);font-size:var(--body-regular-size);color:var(--_tab-color);white-space:nowrap;cursor:pointer;background:var(--_tab-background);border:none}.tedi-tabs-list__more-btn:hover{--_tab-background: var(--tab-item-hover-background);--_tab-color: var(--tab-item-hover-text)}.tedi-tabs-list__more-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--tedi-borders-02) var(--general-border-brand)}.tedi-tabs-list__more-btn:active{--_tab-background: var(--tab-item-active-background);--_tab-color: var(--tab-item-active-text)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "directive", type: TabsOverflowContentDirective, selector: "[tediTabsOverflowContent]", inputs: ["tediTabsOverflowContent"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TabsListComponent, isStandalone: true, selector: "tedi-tabs-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, overflowMode: { classPropertyName: "overflowMode", publicName: "overflowMode", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabel: { classPropertyName: "dropdownLabel", publicName: "dropdownLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-tabs-list--fade-start": "overflowMode() === 'scroll' && canScrollStart()", "class.tedi-tabs-list--fade-end": "overflowMode() === 'scroll' && canScrollEnd()" }, classAttribute: "tedi-tabs-list" }, queries: [{ propertyName: "triggers", predicate: TabsTriggerComponent, isSignal: true }], viewQueries: [{ propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #list\n  role=\"tablist\"\n  data-name=\"tabs-list\"\n  class=\"tedi-tabs-list__items\"\n  [class.tedi-tabs-list__items--overflow]=\"showMore()\"\n  [class.tedi-tabs-list__items--scroll]=\"overflowMode() === 'scroll'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  (scroll)=\"updateScrollFade()\"\n>\n  <ng-content />\n</div>\n\n@if (showMore()) {\n  <div class=\"tedi-tabs-list__more\">\n    <tedi-dropdown position=\"bottom-end\">\n      <button\n        type=\"button\"\n        tedi-dropdown-trigger\n        class=\"tedi-tabs-list__more-btn\"\n      >\n        {{ dropdownLabel() || (\"more\" | tediTranslate) }}\n        <tedi-icon name=\"expand_more\" [size]=\"18\" color=\"inherit\" />\n      </button>\n      <tedi-dropdown-content dropdownRole=\"menu\">\n        @for (item of dropdownItems(); track item.id) {\n          <li\n            tedi-dropdown-item\n            [value]=\"item.id\"\n            [disabled]=\"item.disabled\"\n            [clipContent]=\"false\"\n            [attr.aria-label]=\"item.trigger.label\"\n            (itemSelect)=\"selectTab(item.id)\"\n          >\n            <span [tediTabsOverflowContent]=\"item.trigger\"></span>\n          </li>\n        }\n      </tedi-dropdown-content>\n    </tedi-dropdown>\n  </div>\n}\n", styles: [".tedi-tabs-list{position:relative;display:flex;overflow:hidden;background:var(--tab-background);border-top-left-radius:var(--tab-top-radius);border-top-right-radius:var(--tab-top-radius)}.tedi-tabs-list--fade-start:before,.tedi-tabs-list--fade-end:after{position:absolute;top:0;bottom:0;z-index:1;width:3rem;pointer-events:none;content:\"\"}.tedi-tabs-list--fade-start:before{left:0;background:linear-gradient(to right,var(--tab-background) 10%,transparent 80%)}.tedi-tabs-list--fade-end:after{right:0;background:linear-gradient(to left,var(--tab-background) 10%,transparent 80%)}.tedi-tabs-list__items{display:flex;flex:1;min-width:0;overflow:hidden}.tedi-tabs-list__items--overflow .tedi-tabs-trigger:not(.tedi-tabs-trigger--selected){display:none}.tedi-tabs-list__items--overflow .tedi-tabs-trigger--selected{flex-grow:1;min-width:0}.tedi-tabs-list__items--scroll{overflow-x:auto}.tedi-tabs-list__more{display:flex;flex-shrink:0}.tedi-tabs-list__more-btn{--_tab-background: var(--tab-item-default-background);--_tab-color: var(--tab-item-default-text);display:inline-flex;gap:var(--tab-inner-spacing);align-items:center;justify-content:center;padding:var(--tab-spacing-y) var(--tab-spacing-x);font-size:var(--body-regular-size);color:var(--_tab-color);white-space:nowrap;cursor:pointer;background:var(--_tab-background);border:none}.tedi-tabs-list__more-btn:hover{--_tab-background: var(--tab-item-hover-background);--_tab-color: var(--tab-item-hover-text)}.tedi-tabs-list__more-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--tedi-borders-02) var(--general-border-brand)}.tedi-tabs-list__more-btn:active{--_tab-background: var(--tab-item-active-background);--_tab-color: var(--tab-item-active-text)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "directive", type: TabsOverflowContentDirective, selector: "[tediTabsOverflowContent]", inputs: ["tediTabsOverflowContent"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsListComponent, decorators: [{
             type: Component,
@@ -22535,5 +23475,5 @@ function provideTedi(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, 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, FormFieldExtraDirective, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HeadingWithIconComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, InfoTooltipComponent, InputGroupComponent, InputGroupPrefixDirective, InputGroupSuffixDirective, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LabelRowComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SearchComponent, SearchFooterActionsComponent, SearchFooterTemplateDirective, SearchSuggestionComponent, SearchSuggestionTemplateDirective, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SkeletonBlockComponent, SkeletonComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FIELD_CONTEXT, TEDI_FORM_FIELD_CONTROL, TEDI_INPUT_GROUP, 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, TextareaComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, TruncateComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, controlDescribedBy, cookieSignal, createTablePersistence, deriveControlState, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, highlightParts, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, 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, FloatingButtonComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, FormFieldExtraDirective, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HeadingWithIconComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, InfoTooltipComponent, InputGroupComponent, InputGroupPrefixDirective, InputGroupSuffixDirective, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LabelRowComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SearchComponent, SearchFooterActionsComponent, SearchFooterTemplateDirective, SearchSuggestionComponent, SearchSuggestionTemplateDirective, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SkeletonBlockComponent, SkeletonComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FIELD_CONTEXT, TEDI_FORM_FIELD_CONTROL, TEDI_INPUT_GROUP, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TableOfContentsCollapsibleComponent, TableOfContentsComponent, TableOfContentsItemComponent, TableOfContentsItemSuffixDirective, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, TextareaComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, TruncateComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, controlDescribedBy, cookieSignal, createTablePersistence, deriveControlState, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, highlightParts, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination, warnDeprecated };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map