@tedi-design-system/angular 9.0.0-rc.5 → 9.0.0-rc.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TEDI Design System
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE.md

@@ -0,0 +1,25 @@
+# Notice
+
+TEDI Angular is released under the [MIT License](LICENSE). The MIT License does not cover the fonts and logos listed below, which keep their own terms.
+
+## Fonts
+
+The npm package includes the fonts from `@tedi-design-system/core` in `fonts/`. They keep their own licenses:
+
+| Font | Files | Copyright | License |
+| --- | --- | --- | --- |
+| [Roboto](https://github.com/googlefonts/roboto-2) 2.137 | `roboto-v30-*.woff2` | Copyright 2011 Google Inc. | [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) |
+| [Material Symbols](https://github.com/google/material-design-icons) (Outlined, Rounded, Sharp) | `material-symbols-*.woff2` | Copyright Google LLC | [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) |
+
+A copy of the Apache License 2.0 is next to the font files, in `fonts/LICENSE-Apache-2.0.txt`.
+
+## Logos and emblems
+
+The logos and emblems in `public/` are used in Storybook and examples only and are not part of the npm package.
+
+| What | Files | Belongs to | Terms |
+| --- | --- | --- | --- |
+| TEDI logo | `TEDI-logo-sinine.svg`, `favicon.svg` | TEHIK | Use it only to refer to TEDI. |
+| TEHIK logo | `TEHIK_logo.svg`, `TEHIK_logo2.svg`, `tehik_logo.png` | TEHIK | Use it only to refer to TEHIK. |
+| Estonian state coat of arms | `header-logo.svg`, `header-logo-white.svg`, `logo.svg` | Republic of Estonia | Its use is regulated by the State Coat of Arms Act (Riigivapi seadus). The examples show what a state agency header looks like; use it in your own product only if you are entitled to use the coat of arms. |
+| EU and Estonian structural funds logos | `sf_logod.jpg`, `sf_logod_vertikaalne.jpg`, `SF-horizontal.png`, `SF-vertical.png` | European Union, Republic of Estonia | Use them only to mark projects co-funded by these funds, following the funds' visibility rules. |

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

@@ -200,7 +200,7 @@ class BaseButtonDirective {
         this.iconLast.set(iconIndexes.includes(nodes.length - 1));
     }
     classes = computed(() => {
-        const classList = [this.classNamePrefix()];
+        const classList = [this.classNamePrefix(), "no-print"];
         if (this.iconOnly()) {
             classList.push(`${this.classNamePrefix()}--icon-only`);
         }
@@ -299,6 +299,7 @@ class ButtonGroupButtonDirective {
     hostClasses = computed(() => [
         "tedi-button",
         "tedi-button-group-button",
+        "no-print",
         `tedi-button--${this.effectiveVariant()}`,
         `tedi-button--${this.effectiveSize()}`,
     ].join(" "), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
@@ -486,7 +487,11 @@ function breakpointInput(input) {
     return { xs: input };
 }
 
-const FOCUSABLE_SELECTOR$1 = "button, a[href], [tabindex]";
+/** Native controls keep their own semantics and keyboard behavior. */
+const NATIVE_INTERACTIVE_SELECTOR = 'button, a[href], input:not([type="hidden"]), select, textarea';
+const FOCUSABLE_SELECTOR$1 = `${NATIVE_INTERACTIVE_SELECTOR}, [tabindex]`;
+/** Native controls that fire `click` on Space but not on Enter. */
+const SPACE_ACTIVATED_SELECTOR = 'input[type="checkbox"], input[type="radio"]';
 class DropdownTriggerDirective {
     /**
      * The `aria-haspopup` value for the trigger, telling assistive technology
@@ -509,6 +514,8 @@ class DropdownTriggerDirective {
      * would both be tab stops, and the ARIA state would land on the wrong element.
      */
     triggerElement = signal(null, ...(ngDevMode ? [{ debugName: "triggerElement" }] : []));
+    /** Only a Space press that starts on the trigger may activate it on keyup. */
+    spacePressed = false;
     hasPopup = computed(() => {
         const explicit = this.ariaHaspopup();
         if (explicit)
@@ -544,14 +551,21 @@ class DropdownTriggerDirective {
                 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");
-                this.renderer.setAttribute(el, "tabindex", "0");
-            }
         });
     }
     ngAfterViewInit() {
-        this.triggerElement.set(this.resolveTriggerElement());
+        const el = this.resolveTriggerElement();
+        // Non-native triggers need button semantics, but a role or tabindex the
+        // consumer set (e.g. `role="checkbox"`) is theirs to keep.
+        if (!this.isNativelyInteractive(el)) {
+            if (!el.hasAttribute("role")) {
+                this.renderer.setAttribute(el, "role", "button");
+            }
+            if (!el.hasAttribute("tabindex")) {
+                this.renderer.setAttribute(el, "tabindex", "0");
+            }
+        }
+        this.triggerElement.set(el);
     }
     focus() {
         this.triggerElement()?.focus();
@@ -567,6 +581,20 @@ class DropdownTriggerDirective {
     onKeydown(event) {
         const key = event.key;
         switch (key) {
+            case "Enter":
+                if (!this.handlesKey(event, key))
+                    break;
+                // Also keeps Enter on a checkbox from submitting its form.
+                event.preventDefault();
+                this.dropdown.toggleDropdown();
+                break;
+            case " ":
+                if (!this.handlesKey(event, key))
+                    break;
+                // Match button timing and prevent page scrolling.
+                event.preventDefault();
+                this.spacePressed = true;
+                break;
             case "ArrowDown":
                 if (!this.isWidgetContent())
                     break;
@@ -586,17 +614,43 @@ class DropdownTriggerDirective {
                 break;
         }
     }
+    onKeyup(event) {
+        if (event.key !== " " || !this.spacePressed)
+            return;
+        this.spacePressed = false;
+        if (event.target !== this.focusableElement)
+            return;
+        this.dropdown.toggleDropdown();
+    }
+    onFocusout(event) {
+        if (event.target === this.focusableElement)
+            this.spacePressed = false;
+    }
+    /**
+     * Whether the directive must activate the trigger on `key` itself, because the
+     * element does not turn that key into a native click: both keys for a generic
+     * trigger, Enter for a checkbox or radio. Other native controls handle both.
+     */
+    handlesKey(event, key) {
+        const el = this.focusableElement;
+        // Keys from other controls inside the host are theirs.
+        if (event.target !== el)
+            return false;
+        if (!this.isNativelyInteractive(el))
+            return true;
+        return key === "Enter" && el.matches(SPACE_ACTIVATED_SELECTOR);
+    }
     isWidgetContent() {
         return this.dropdown.dropdownContent().isWidget();
     }
     resolveTriggerElement() {
         const el = this.host.nativeElement;
-        if (this.isNativelyFocusable(el))
+        if (this.isNativelyInteractive(el))
             return el;
         return el.querySelector(FOCUSABLE_SELECTOR$1) ?? el;
     }
-    isNativelyFocusable(el) {
-        return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
+    isNativelyInteractive(el) {
+        return el.matches(NATIVE_INTERACTIVE_SELECTOR);
     }
     openAndFocusFirst() {
         if (this.dropdown.isOpen()) {
@@ -615,7 +669,7 @@ class DropdownTriggerDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: DropdownTriggerDirective, isStandalone: true, selector: "[tedi-dropdown-trigger]", inputs: { ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: DropdownTriggerDirective, isStandalone: true, selector: "[tedi-dropdown-trigger]", inputs: { ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)", "keyup": "onKeyup($event)", "focusout": "onFocusout($event)" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
             type: Directive,
@@ -630,6 +684,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
             }], onKeydown: [{
                 type: HostListener,
                 args: ["keydown", ["$event"]]
+            }], onKeyup: [{
+                type: HostListener,
+                args: ["keyup", ["$event"]]
+            }], onFocusout: [{
+                type: HostListener,
+                args: ["focusout", ["$event"]]
             }] } });
 
 const DROPDOWN_API = new InjectionToken("DropdownApi");
@@ -3789,13 +3849,14 @@ class ClosingButtonComponent {
     translationService = inject(TediTranslationService);
     _defaultLabel = this.translationService.track("close");
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ClosingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: ClosingButtonComponent, isStandalone: true, selector: "button[tedi-closing-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "showTitle() ? ariaLabel() || _defaultLabel() : null", "attr.aria-label": "ariaLabel() || _defaultLabel()", "class.tedi-closing-button": "true", "class.tedi-closing-button--small": "size() === 'small'" } }, ngImport: i0, template: "<tedi-icon [name]=\"icon()\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n", styles: [".tedi-closing-button{--general-icon-primary: var(--button-close-text-default);display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:0;cursor:pointer;background-color:var(--button-close-background-default);border:1px solid var(--button-close-background-default);border-radius:var(--button-radius-default);transition:background .5s ease}.tedi-closing-button:hover{--general-icon-primary: var(--button-close-text-hover);background-color:var(--button-close-background-hover)}.tedi-closing-button:active{--general-icon-primary: var(--button-close-text-active);background-color:var(--button-close-background-active)}.tedi-closing-button:focus-visible{outline:2px solid var(--button-main-primary-border-focus);outline-offset:-2px}.tedi-closing-button--small{width:var(--button-xs-icon-size);height:var(--button-xs-icon-size)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: ClosingButtonComponent, isStandalone: true, selector: "button[tedi-closing-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "showTitle() ? ariaLabel() || _defaultLabel() : null", "attr.aria-label": "ariaLabel() || _defaultLabel()", "class.tedi-closing-button": "true", "class.tedi-closing-button--small": "size() === 'small'" }, classAttribute: "no-print" }, ngImport: i0, template: "<tedi-icon [name]=\"icon()\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n", styles: [".tedi-closing-button{--general-icon-primary: var(--button-close-text-default);display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:0;cursor:pointer;background-color:var(--button-close-background-default);border:1px solid var(--button-close-background-default);border-radius:var(--button-radius-default);transition:background .5s ease}.tedi-closing-button:hover{--general-icon-primary: var(--button-close-text-hover);background-color:var(--button-close-background-hover)}.tedi-closing-button:active{--general-icon-primary: var(--button-close-text-active);background-color:var(--button-close-background-active)}.tedi-closing-button:focus-visible{outline:2px solid var(--button-main-primary-border-focus);outline-offset:-2px}.tedi-closing-button--small{width:var(--button-xs-icon-size);height:var(--button-xs-icon-size)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ClosingButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: "button[tedi-closing-button]", imports: [IconComponent], standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[attr.title]": "showTitle() ? ariaLabel() || _defaultLabel() : null",
                         "[attr.aria-label]": "ariaLabel() || _defaultLabel()",
+                        class: "no-print",
                         "[class.tedi-closing-button]": "true",
                         "[class.tedi-closing-button--small]": "size() === 'small'",
                     }, template: "<tedi-icon [name]=\"icon()\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n", styles: [".tedi-closing-button{--general-icon-primary: var(--button-close-text-default);display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:0;cursor:pointer;background-color:var(--button-close-background-default);border:1px solid var(--button-close-background-default);border-radius:var(--button-radius-default);transition:background .5s ease}.tedi-closing-button:hover{--general-icon-primary: var(--button-close-text-hover);background-color:var(--button-close-background-hover)}.tedi-closing-button:active{--general-icon-primary: var(--button-close-text-active);background-color:var(--button-close-background-active)}.tedi-closing-button:focus-visible{outline:2px solid var(--button-main-primary-border-focus);outline-offset:-2px}.tedi-closing-button--small{width:var(--button-xs-icon-size);height:var(--button-xs-icon-size)}\n"] }]
@@ -4444,13 +4505,13 @@ class InfoButtonComponent {
     color = input("primary", ...(ngDevMode ? [{ debugName: "color" }] : []));
     _defaultLabel = this.translationService.track("info-button.label");
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InfoButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: InfoButtonComponent, isStandalone: true, selector: "button[tedi-info-button]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "class.tedi-info-button--inverted": "color() === 'inverted'", "attr.aria-label": "ariaLabel() || _defaultLabel()" }, classAttribute: "tedi-info-button" }, ngImport: i0, template: `<tedi-icon name="info" [size]="18" />`, isInline: true, styles: [".tedi-info-button{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--button-xs-icon-size);vertical-align:bottom;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-info-button:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-info-button:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-info-button:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--button-main-primary-border-focus);outline-offset:calc(-1 * var(--tedi-borders-02));background-color:var(--button-main-neutral-background-focus);border-color:var(--button-main-neutral-border-default)}.tedi-info-button tedi-icon{color:inherit}.tedi-info-button--inverted{color:var(--button-main-neutral-inverted-text-default)}.tedi-info-button--inverted:hover{color:var(--button-main-neutral-inverted-text-hover);background:var(--button-main-neutral-inverted-icon-only-background-hover)}.tedi-info-button--inverted:active{color:var(--button-main-neutral-inverted-text-active);background:var(--button-main-neutral-inverted-icon-only-background-active)}.tedi-info-button--inverted:focus-visible{color:var(--button-main-neutral-inverted-text-focus);outline:none;background-color:var(--button-main-neutral-inverted-background-focus);box-shadow:0 0 0 var(--tedi-borders-02) var(--tedi-neutral-100)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: InfoButtonComponent, isStandalone: true, selector: "button[tedi-info-button]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "class.tedi-info-button--inverted": "color() === 'inverted'", "attr.aria-label": "ariaLabel() || _defaultLabel()" }, classAttribute: "tedi-info-button no-print" }, ngImport: i0, template: `<tedi-icon name="info" [size]="18" />`, isInline: true, styles: [".tedi-info-button{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--button-xs-icon-size);vertical-align:bottom;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-info-button:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-info-button:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-info-button:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--button-main-primary-border-focus);outline-offset:calc(-1 * var(--tedi-borders-02));background-color:var(--button-main-neutral-background-focus);border-color:var(--button-main-neutral-border-default)}.tedi-info-button tedi-icon{color:inherit}.tedi-info-button--inverted{color:var(--button-main-neutral-inverted-text-default)}.tedi-info-button--inverted:hover{color:var(--button-main-neutral-inverted-text-hover);background:var(--button-main-neutral-inverted-icon-only-background-hover)}.tedi-info-button--inverted:active{color:var(--button-main-neutral-inverted-text-active);background:var(--button-main-neutral-inverted-icon-only-background-active)}.tedi-info-button--inverted:focus-visible{color:var(--button-main-neutral-inverted-text-focus);outline:none;background-color:var(--button-main-neutral-inverted-background-focus);box-shadow:0 0 0 var(--tedi-borders-02) var(--tedi-neutral-100)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InfoButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "button[tedi-info-button]", imports: [IconComponent], template: `<tedi-icon name="info" [size]="18" />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         type: "button",
-                        class: "tedi-info-button",
+                        class: "tedi-info-button no-print",
                         "[class.tedi-info-button--inverted]": "color() === 'inverted'",
                         "[attr.aria-label]": "ariaLabel() || _defaultLabel()",
                     }, styles: [".tedi-info-button{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--button-xs-icon-size);vertical-align:bottom;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-info-button:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-info-button:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-info-button:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--button-main-primary-border-focus);outline-offset:calc(-1 * var(--tedi-borders-02));background-color:var(--button-main-neutral-background-focus);border-color:var(--button-main-neutral-border-default)}.tedi-info-button tedi-icon{color:inherit}.tedi-info-button--inverted{color:var(--button-main-neutral-inverted-text-default)}.tedi-info-button--inverted:hover{color:var(--button-main-neutral-inverted-text-hover);background:var(--button-main-neutral-inverted-icon-only-background-hover)}.tedi-info-button--inverted:active{color:var(--button-main-neutral-inverted-text-active);background:var(--button-main-neutral-inverted-icon-only-background-active)}.tedi-info-button--inverted:focus-visible{color:var(--button-main-neutral-inverted-text-focus);outline:none;background-color:var(--button-main-neutral-inverted-background-focus);box-shadow:0 0 0 var(--tedi-borders-02) var(--tedi-neutral-100)}\n"] }]
@@ -4535,7 +4596,7 @@ class CollapseButtonComponent {
         return this.ariaLabel() ?? this.label();
     }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : []));
     hostClasses = computed(() => {
-        const classes = ["tedi-collapse-button"];
+        const classes = ["tedi-collapse-button", "no-print"];
         if (this.open())
             classes.push("tedi-collapse-button--open");
         if (this.size() === "small")
@@ -5413,11 +5474,11 @@ class CollapseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CollapseComponent, isStandalone: true, selector: "tedi-collapse", inputs: { openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, hideCollapseText: { classPropertyName: "hideCollapseText", publicName: "hideCollapseText", isSignal: true, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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"], dependencies: [{ 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CollapseComponent, isStandalone: true, selector: "tedi-collapse", inputs: { openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, hideCollapseText: { classPropertyName: "hideCollapseText", publicName: "hideCollapseText", isSignal: true, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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}@media print{.tedi-collapse__content,.tedi-collapse__extender{transition:none}.tedi-collapse__content{grid-template-rows:1fr;overflow:visible}.tedi-collapse__extender{visibility:visible}}\n"], dependencies: [{ 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: CollapseComponent, decorators: [{
             type: Component,
-            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"] }]
+            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}@media print{.tedi-collapse__content,.tedi-collapse__extender{transition:none}.tedi-collapse__content{grid-template-rows:1fr;overflow:visible}.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 }] }] } });
 
 /**
@@ -21002,11 +21063,13 @@ class FooterComponent {
     breakpointService = inject(BreakpointService);
     mobileLayout = this.breakpointService.isBelowBreakpoint("sm");
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: FooterComponent, isStandalone: true, selector: "tedi-footer", ngImport: i0, template: "<footer class=\"tedi-footer\">\n  <div\n    class=\"tedi-footer__container\"\n    [class.tedi-footer--mobile]=\"mobileLayout()\"\n  >\n    <ng-content select=\"[tedi-footer-start]\" />\n    <div class=\"tedi-footer__center\">\n      <ng-content select=\"tedi-footer-body\" />\n    </div>\n    <ng-content select=\"[tedi-footer-end]\" />\n  </div>\n  <ng-content select=\"tedi-footer-bottom\" />\n</footer>\n", styles: [".tedi-footer{background-color:var(--footer-background)}.tedi-footer__container{display:flex}.tedi-footer__center{width:100%}.tedi-footer--mobile{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: FooterComponent, isStandalone: true, selector: "tedi-footer", host: { classAttribute: "no-print" }, ngImport: i0, template: "<footer class=\"tedi-footer\">\n  <div\n    class=\"tedi-footer__container\"\n    [class.tedi-footer--mobile]=\"mobileLayout()\"\n  >\n    <ng-content select=\"[tedi-footer-start]\" />\n    <div class=\"tedi-footer__center\">\n      <ng-content select=\"tedi-footer-body\" />\n    </div>\n    <ng-content select=\"[tedi-footer-end]\" />\n  </div>\n  <ng-content select=\"tedi-footer-bottom\" />\n</footer>\n", styles: [".tedi-footer{background-color:var(--footer-background)}.tedi-footer__container{display:flex}.tedi-footer__center{width:100%}.tedi-footer--mobile{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: "tedi-footer", template: "<footer class=\"tedi-footer\">\n  <div\n    class=\"tedi-footer__container\"\n    [class.tedi-footer--mobile]=\"mobileLayout()\"\n  >\n    <ng-content select=\"[tedi-footer-start]\" />\n    <div class=\"tedi-footer__center\">\n      <ng-content select=\"tedi-footer-body\" />\n    </div>\n    <ng-content select=\"[tedi-footer-end]\" />\n  </div>\n  <ng-content select=\"tedi-footer-bottom\" />\n</footer>\n", styles: [".tedi-footer{background-color:var(--footer-background)}.tedi-footer__container{display:flex}.tedi-footer__center{width:100%}.tedi-footer--mobile{display:flex;flex-direction:column}\n"] }]
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: "tedi-footer", host: {
+                        class: "no-print",
+                    }, template: "<footer class=\"tedi-footer\">\n  <div\n    class=\"tedi-footer__container\"\n    [class.tedi-footer--mobile]=\"mobileLayout()\"\n  >\n    <ng-content select=\"[tedi-footer-start]\" />\n    <div class=\"tedi-footer__center\">\n      <ng-content select=\"tedi-footer-body\" />\n    </div>\n    <ng-content select=\"[tedi-footer-end]\" />\n  </div>\n  <ng-content select=\"tedi-footer-bottom\" />\n</footer>\n", styles: [".tedi-footer{background-color:var(--footer-background)}.tedi-footer__container{display:flex}.tedi-footer__center{width:100%}.tedi-footer--mobile{display:flex;flex-direction:column}\n"] }]
         }] });
 
 class FooterBodyComponent {
@@ -21172,12 +21235,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 
 class HeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header" }, ngImport: i0, template: "<ng-content select=\"tedi-header-top\"></ng-content>\n<div class=\"tedi-header__main\">\n  <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n  <div class=\"tedi-header__main--content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header no-print" }, ngImport: i0, template: "<ng-content select=\"tedi-header-top\"></ng-content>\n<div class=\"tedi-header__main\">\n  <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n  <div class=\"tedi-header__main--content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: "header[tedi-header]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: "tedi-header",
+                        class: "tedi-header no-print",
                     }, template: "<ng-content select=\"tedi-header-top\"></ng-content>\n<div class=\"tedi-header__main\">\n  <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n  <div class=\"tedi-header__main--content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"] }]
         }] });
 
@@ -22348,7 +22411,11 @@ class SideNavComponent {
         }, { injector: this.injector });
     }
     classes = computed(() => {
-        const classList = ["tedi-sidenav", `tedi-sidenav--${this.size()}`];
+        const classList = [
+            "tedi-sidenav",
+            "no-print",
+            `tedi-sidenav--${this.size()}`,
+        ];
         if (this.dividers()) {
             classList.push("tedi-sidenav--dividers");
         }
@@ -23754,6 +23821,15 @@ class TabsListComponent {
     overflowMode = input("dropdown", ...(ngDevMode ? [{ debugName: "overflowMode" }] : []));
     /** Label for the overflow dropdown trigger. Defaults to the `more` translation. */
     dropdownLabel = input(...(ngDevMode ? [undefined, { debugName: "dropdownLabel" }] : []));
+    /**
+     * Controls the visibility of the tablist when printing.
+     * - `show`: the tablist is printed (default), no print class is applied
+     * - `hide`: the tablist is left out of the printed output
+     *
+     * `tediPrint` on the same element composes with this: `tediPrint="show"`
+     * wins over `printVisibility="hide"`, matching the core `show-print` rule.
+     */
+    printVisibility = input("show", ...(ngDevMode ? [{ debugName: "printVisibility" }] : []));
     listRef = viewChild.required("list");
     triggers = contentChildren(TabsTriggerComponent, ...(ngDevMode ? [{ debugName: "triggers" }] : []));
     isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "isOverflowing" }] : []));
@@ -23849,7 +23925,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", "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 });
+    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 }, printVisibility: { classPropertyName: "printVisibility", publicName: "printVisibility", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.no-print": "printVisibility() === 'hide'", "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,
@@ -23863,10 +23939,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         TabsOverflowContentDirective,
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "tedi-tabs-list",
+                        "[class.no-print]": "printVisibility() === 'hide'",
                         "[class.tedi-tabs-list--fade-start]": "overflowMode() === 'scroll' && canScrollStart()",
                         "[class.tedi-tabs-list--fade-end]": "overflowMode() === 'scroll' && canScrollEnd()",
                     }, 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"] }]
-        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], overflowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowMode", required: false }] }], dropdownLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownLabel", required: false }] }], listRef: [{ type: i0.ViewChild, args: ["list", { isSignal: true }] }], triggers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabsTriggerComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], overflowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowMode", required: false }] }], dropdownLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownLabel", required: false }] }], printVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "printVisibility", required: false }] }], listRef: [{ type: i0.ViewChild, args: ["list", { isSignal: true }] }], triggers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabsTriggerComponent), { isSignal: true }] }] } });
 
 /**
  * A tab panel. When `id` matches a trigger, the panel is only shown while that
@@ -23914,6 +23991,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 }]
         }] });
 
+/**
+ * Applies the print helper classes from `@tedi-design-system/core` to the host element.
+ */
+class PrintDirective {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    /**
+     * Controls the visibility of the element when printing.
+     * - `'hide'` — the element is not printed.
+     * - `'show'` — the element opts out of a `no-print` applied to the same
+     *   element. It cannot reveal an element that an ancestor hid.
+     *
+     * Leave empty when only the break inputs are needed — the `tediPrint`
+     * attribute still has to be present for the directive to apply.
+     */
+    tediPrint = input("", ...(ngDevMode ? [{ debugName: "tediPrint" }] : []));
+    /**
+     * Determines how page, column, or region breaks behave before the element.
+     * Uses the CSS `break-before` property values.
+     */
+    breakBefore = input(...(ngDevMode ? [undefined, { debugName: "breakBefore" }] : []));
+    /**
+     * Determines how page, column, or region breaks behave after the element.
+     * Uses the CSS `break-after` property values.
+     */
+    breakAfter = input(...(ngDevMode ? [undefined, { debugName: "breakAfter" }] : []));
+    /**
+     * Determines how page, column, or region breaks behave inside the element.
+     * Uses the CSS `break-inside` property values.
+     */
+    breakInside = input(...(ngDevMode ? [undefined, { debugName: "breakInside" }] : []));
+    classes = computed(() => {
+        const visibility = this.tediPrint();
+        const breakBefore = this.breakBefore();
+        const breakAfter = this.breakAfter();
+        const breakInside = this.breakInside();
+        return [
+            visibility === "hide" && "no-print",
+            visibility === "show" && "show-print",
+            breakBefore && `break-before-${breakBefore}`,
+            breakAfter && `break-after-${breakAfter}`,
+            breakInside && `break-inside-${breakInside}`,
+        ].filter((className) => !!className);
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    constructor() {
+        /** Classes this directive added itself and is therefore allowed to remove. */
+        let owned = [];
+        /**
+         * Classes are synced through Renderer2 rather than host bindings so the
+         * directive never fights the element's own classes. A host binding takes
+         * precedence over a component's `[class]` binding and would strip classes
+         * that component set — e.g. the `no-print` that buttons apply to
+         * themselves. Here a class that is already on the element is left alone:
+         * the directive only removes what it added.
+         */
+        afterRenderEffect(() => {
+            const next = this.classes();
+            const element = this.elementRef.nativeElement;
+            for (const className of owned) {
+                if (!next.includes(className)) {
+                    this.renderer.removeClass(element, className);
+                }
+            }
+            owned = next.filter((className) => {
+                if (element.classList.contains(className)) {
+                    return owned.includes(className);
+                }
+                this.renderer.addClass(element, className);
+                return true;
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PrintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: PrintDirective, isStandalone: true, selector: "[tediPrint]", inputs: { tediPrint: { classPropertyName: "tediPrint", publicName: "tediPrint", isSignal: true, isRequired: false, transformFunction: null }, breakBefore: { classPropertyName: "breakBefore", publicName: "breakBefore", isSignal: true, isRequired: false, transformFunction: null }, breakAfter: { classPropertyName: "breakAfter", publicName: "breakAfter", isSignal: true, isRequired: false, transformFunction: null }, breakInside: { classPropertyName: "breakInside", publicName: "breakInside", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PrintDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediPrint]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { tediPrint: [{ type: i0.Input, args: [{ isSignal: true, alias: "tediPrint", required: false }] }], breakBefore: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakBefore", required: false }] }], breakAfter: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakAfter", required: false }] }], breakInside: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakInside", required: false }] }] } });
+
 class VerticalSpacingItemDirective {
     el = inject(ElementRef);
     renderer = inject(Renderer2);
@@ -23971,5 +24131,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, 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 };
+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, PrintDirective, 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