@tedi-design-system/angular 6.2.0-rc.11 → 6.2.0-rc.12

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

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
 import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, HostListener, viewChild, contentChild, contentChildren, forwardRef, ViewChild, TemplateRef, viewChildren, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, ContentChild, makeEnvironmentProviders } from '@angular/core';
 import * as i1 from '@angular/cdk/layout';
-import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, NgClass, NgFor, NgIf } from '@angular/common';
+import * as i1$2 from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, NgClass, NgFor, NgIf, CommonModule } from '@angular/common';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -1615,11 +1616,11 @@ class ToastComponent {
         this.mouseLeave.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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);transform-origin:left;animation:toast-progress linear forwards;border-radius:0 var(--alert-radius) 0 var(--alert-radius)}.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;pointer-events:none;z-index:var(--z-index-toast, 1050)}.tedi-toast-container__position{position:absolute;display:flex;flex-direction:column;gap:var(--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);align-items:flex-start;flex-direction:column-reverse}.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{bottom:var(--toast-margin-bottom);right:var(--toast-margin-right);align-items:flex-end;flex-direction:column-reverse}.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: 575.98px){.tedi-toast-container__position--top-left,.tedi-toast-container__position--top-right,.tedi-toast-container__position--bottom-left,.tedi-toast-container__position--bottom-right{left:var(--toast-margin-left);right:var(--toast-margin-right);transform:none;align-items:stretch}.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", "titleElement", "open", "closeDelay"], outputs: ["openChange", "closeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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(--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: 575.98px){.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", "titleElement", "open", "closeDelay"], outputs: ["openChange", "closeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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);transform-origin:left;animation:toast-progress linear forwards;border-radius:0 var(--alert-radius) 0 var(--alert-radius)}.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;pointer-events:none;z-index:var(--z-index-toast, 1050)}.tedi-toast-container__position{position:absolute;display:flex;flex-direction:column;gap:var(--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);align-items:flex-start;flex-direction:column-reverse}.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{bottom:var(--toast-margin-bottom);right:var(--toast-margin-right);align-items:flex-end;flex-direction:column-reverse}.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: 575.98px){.tedi-toast-container__position--top-left,.tedi-toast-container__position--top-right,.tedi-toast-container__position--bottom-left,.tedi-toast-container__position--bottom-right{left:var(--toast-margin-left);right:var(--toast-margin-right);transform:none;align-items:stretch}.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"] }]
+            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(--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: 575.98px){.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"] }]
         }] });
 
 const POSITIONS = [
@@ -6392,6 +6393,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     }, template: "@if (type() === \"danger\") {\n  <span class=\"tedi-tag__icon-wrapper\">\n    <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n  </span>\n}\n\n<span class=\"tedi-tag__content\" [attr.id]=\"uniqueId\">\n  <ng-content />\n</span>\n\n@if (loading()) {\n  <span class=\"tedi-tag__spinner-wrapper\">\n    <tedi-spinner [size]=\"48\" />\n  </span>\n} @else if (closable()) {\n  <button\n    type=\"button\"\n    tedi-closing-button\n    size=\"small\"\n    [iconSize]=\"18\"\n    (click)=\"handleClose($event)\"\n    [attr.aria-describedby]=\"uniqueId\"\n    [ariaLabel]=\"'remove' | tediTranslate\"\n  >\n  </button>\n}\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_line-height: var(--body-small-regular-line-height);display:inline-flex;gap:var(--tag-default-padding-x);align-items:flex-start;padding:0 var(--tag-default-padding-x);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--_line-height);color:var(--general-text-primary);background-color:var(--_background-color);border-radius:var(--tag-default-radius);box-shadow:inset 0 0 0 1px var(--_border-color)}.tedi-tag__content{padding:var(--tag-default-padding-y) 0}.tedi-tag__icon-wrapper{line-height:var(--_line-height)}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--tag-default-padding-y))}.tedi-tag__spinner-wrapper tedi-spinner{--tedi-spinner-size: 12;--tedi-spinner-stroke: 2}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--closable:not(.tedi-tag--loading) .tedi-closing-button{border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"] }]
         }] });
 
+class StatusBadgeComponent {
+    idGenerator = inject(_IdGenerator);
+    uniqueId = this.idGenerator.getId("tedi-status-badge");
+    /**
+     * The text to be displayed inside the StatusBadge.
+     */
+    text = input("");
+    /**
+     * Additional classes to apply custom styles to the StatusBadge.
+     */
+    class = input();
+    /**
+     * Provides the full text or description when the Badge represents an abbreviation.
+     * This is typically shown as a tooltip on hover.
+     */
+    title = input();
+    /**
+     * ARIA role attribute for accessibility.
+     */
+    role = input();
+    /**
+     * Specifies the color scheme of the StatusBadge.
+     * @default neutral
+     */
+    color = input("neutral");
+    /**
+     * Determines the style or visual type of the StatusBadge.
+     * @default filled
+     */
+    variant = input("filled");
+    /**
+     * Specifies the size of the StatusBadge.
+     * @default default
+     */
+    size = input("default");
+    /**
+     * StatusBadge status indicator.
+     */
+    status = input();
+    /**
+     * The name of the icon to be displayed inside the StatusBadge. The icon is rendered using the `Icon` component.
+     */
+    icon = input("");
+    classes = computed(() => {
+        const classList = ["tedi-status-badge"];
+        if (this.color()) {
+            classList.push(`tedi-status-badge--color-${this.color()}`);
+        }
+        if (this.variant()) {
+            classList.push(`tedi-status-badge--variant-${this.variant()}`);
+        }
+        if (this.status()) {
+            classList.push("tedi-status-badge--status", `tedi-status-badge--status-${this.status()}`);
+        }
+        if (this.size() === "large") {
+            classList.push("tedi-status-badge--large");
+        }
+        const hasText = !!this.text()?.trim();
+        const hasIcon = !!this.icon()?.trim();
+        if (hasIcon && !hasText) {
+            classList.push("tedi-status-badge__icon-only");
+        }
+        const customClass = this.class();
+        if (customClass) {
+            classList.push(customClass);
+        }
+        return classList;
+    });
+    ariaLive = computed(() => {
+        if (this.role() === "alert") {
+            return "assertive";
+        }
+        if (this.role() === "status") {
+            return "polite";
+        }
+        return null;
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: StatusBadgeComponent, isStandalone: true, selector: "tedi-status-badge", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\n  <abbr\n    [ngClass]=\"classes()\"\n    [attr.id]=\"uniqueId\"\n    [attr.title]=\"title()\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\"\n  >\n    <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n  </abbr>\n} @else {\n  <div\n    [ngClass]=\"classes()\"\n    [attr.id]=\"uniqueId\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\"\n  >\n    <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n  </div>\n}\n\n<ng-template #statusBadgeContent>\n  @if (icon()) {\n    <tedi-icon class=\"tedi-status-badge__icon\" [name]=\"icon()\" [size]=\"16\" />\n  }\n\n  @if (text()) {\n    <span class=\"tedi-status-badge__text\">{{ text() }}</span>\n  }\n</ng-template>\n", styles: [".tedi-status-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--tag-default-padding-y) var(--tag-default-padding-x);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--_status-badge-text);text-decoration:none;background:var(--_status-badge-background);border-radius:var(--tag-default-radius);box-shadow:var(--_status-badge-box-shadow)}.tedi-status-badge__text{min-width:fit-content;padding:0 var(--tag-default-padding-x)}.tedi-status-badge--large{min-width:var(--tag-status-large-min-width);padding:var(--tag-status-large-padding-y) var(--tag-status-large-padding-x)}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent )}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: transparent}.tedi-status-badge--status:before{position:absolute;top:-.125rem;right:-.125rem;z-index:1;width:var(--status-indicator-sm);height:var(--status-indicator-sm);content:\"\";background-color:var(--_status-badge--indicator-background);border:1px solid var(--status-badge-indicator-border);border-radius:50%}.tedi-status-badge--status.tedi-status-badge--large:before{width:var(--status-indicator-lg);height:var(--status-indicator-lg)}.tedi-status-badge--status-inactive:before{--_status-badge--indicator-background: var( --status-badge-indicator-inactive )}.tedi-status-badge--status-success:before{--_status-badge--indicator-background: var( --status-badge-indicator-success )}.tedi-status-badge--status-danger:before{--_status-badge--indicator-background: var( --status-badge-indicator-danger )}.tedi-status-badge--status-warning:before{--_status-badge--indicator-background: var( --status-badge-indicator-warning )}.tedi-status-badge .tedi-status-badge__icon{color:inherit}.tedi-status-badge__icon-only{display:inline-flex;align-items:center;padding:var(--tag-status-icon-padding-y) var(--tag-status-icon-padding-x);line-height:var(--body-small-regular-line-height)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-status-badge", standalone: true, imports: [IconComponent, CommonModule, NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title()) {\n  <abbr\n    [ngClass]=\"classes()\"\n    [attr.id]=\"uniqueId\"\n    [attr.title]=\"title()\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\"\n  >\n    <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n  </abbr>\n} @else {\n  <div\n    [ngClass]=\"classes()\"\n    [attr.id]=\"uniqueId\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\"\n  >\n    <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n  </div>\n}\n\n<ng-template #statusBadgeContent>\n  @if (icon()) {\n    <tedi-icon class=\"tedi-status-badge__icon\" [name]=\"icon()\" [size]=\"16\" />\n  }\n\n  @if (text()) {\n    <span class=\"tedi-status-badge__text\">{{ text() }}</span>\n  }\n</ng-template>\n", styles: [".tedi-status-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--tag-default-padding-y) var(--tag-default-padding-x);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--_status-badge-text);text-decoration:none;background:var(--_status-badge-background);border-radius:var(--tag-default-radius);box-shadow:var(--_status-badge-box-shadow)}.tedi-status-badge__text{min-width:fit-content;padding:0 var(--tag-default-padding-x)}.tedi-status-badge--large{min-width:var(--tag-status-large-min-width);padding:var(--tag-status-large-padding-y) var(--tag-status-large-padding-x)}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent )}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: transparent}.tedi-status-badge--status:before{position:absolute;top:-.125rem;right:-.125rem;z-index:1;width:var(--status-indicator-sm);height:var(--status-indicator-sm);content:\"\";background-color:var(--_status-badge--indicator-background);border:1px solid var(--status-badge-indicator-border);border-radius:50%}.tedi-status-badge--status.tedi-status-badge--large:before{width:var(--status-indicator-lg);height:var(--status-indicator-lg)}.tedi-status-badge--status-inactive:before{--_status-badge--indicator-background: var( --status-badge-indicator-inactive )}.tedi-status-badge--status-success:before{--_status-badge--indicator-background: var( --status-badge-indicator-success )}.tedi-status-badge--status-danger:before{--_status-badge--indicator-background: var( --status-badge-indicator-danger )}.tedi-status-badge--status-warning:before{--_status-badge--indicator-background: var( --status-badge-indicator-warning )}.tedi-status-badge .tedi-status-badge__icon{color:inherit}.tedi-status-badge__icon-only{display:inline-flex;align-items:center;padding:var(--tag-status-icon-padding-y) var(--tag-status-icon-padding-x);line-height:var(--body-small-regular-line-height)}\n"] }]
+        }] });
+
+class AccordionItemComponent {
+    idGenerator = inject(_IdGenerator);
+    bodyId = this.idGenerator.getId("tedi-accordion-body");
+    headerId = this.idGenerator.getId("tedi-accordion-header");
+    /**
+     * If false, disables header toggling and enables using interactive elements in the accordion header.
+     */
+    headerClickable = input(true);
+    /** The title of the accordion item. */
+    title = input("");
+    /**
+     * Sets how the accordion title stretches horizontally.
+     * `hug` - container sizes to its content.
+     * `fill` - container expands to available space, moving any trailing elements to the end.
+     */
+    titleLayout = input("hug");
+    /**
+     * Whether the title is rendered as separate text in the accordion header.
+     * If false and `showExpandLabel` is true, the title is used as the expand button label.
+     */
+    showSeparateTitle = input(true);
+    /** Label shown when accordion is collapsed */
+    openLabel = input("open");
+    /** Label shown when accordion is expanded */
+    closeLabel = input("close");
+    /**
+     * Controls whether the expand/collapse label is shown.
+     */
+    showExpandLabel = input(true);
+    /**
+     * Controls whether the default expand/collapse action is shown.
+     */
+    showDefaultExpandAction = input(true);
+    /**
+     * Position of the expand action relative to the header content.
+     */
+    expandActionPosition = input("end");
+    /**
+     * Whether the accordion item is expanded initially.
+     * Does not control the expanded state after initialization.
+     */
+    defaultExpanded = input(false);
+    /** Optional description text shown in the header */
+    description = input(undefined);
+    /**
+     * Position of the description relative to the title.
+     */
+    descriptionPosition = input("start");
+    /**
+     * Enables the icon-card layout variant.
+     */
+    showIconCard = input(false);
+    /**
+     * Marks the accordion item as selected.
+     */
+    selected = input(false);
+    /**
+     * Custom CSS classes for the accordion header.
+     */
+    headerClass = input(null);
+    /**
+     * Custom CSS classes for the accordion body.
+     */
+    bodyClass = input(null);
+    expanded = model(false);
+    accordion = inject(AccordionComponent, { optional: true });
+    ngOnInit() {
+        this.setExpanded(this.defaultExpanded());
+    }
+    toggle() {
+        this.setExpanded(!this.expanded());
+        this.accordion?.onItemToggled(this);
+    }
+    setExpanded(value) {
+        this.expanded.set(value);
+    }
+    expandLabel = computed(() => this.expanded() ? this.closeLabel() : this.openLabel());
+    showStartExpandAction = computed(() => this.showDefaultExpandAction() && this.expandActionPosition() === "start");
+    showEndExpandAction = computed(() => this.showDefaultExpandAction() && this.expandActionPosition() === "end");
+    headerClasses = computed(() => {
+        const customClass = this.headerClass();
+        return {
+            "tedi-accordion__header": true,
+            ...(customClass ? { [customClass]: true } : {}),
+            "tedi-accordion__header--hoverable": this.headerClickable(),
+            "tedi-accordion__header--expanded": this.expanded(),
+            "tedi-accordion__header--with-icon-card": this.showIconCard(),
+        };
+    });
+    bodyClasses = computed(() => {
+        const customClass = this.bodyClass();
+        return {
+            "tedi-accordion__body": true,
+            ...(customClass ? { [customClass]: true } : {}),
+            "tedi-accordion__body--with-icon-card": this.showIconCard(),
+        };
+    });
+    hideTitleFromSR = computed(() => {
+        return !this.headerClickable() && !this.showExpandLabel();
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { headerClickable: { classPropertyName: "headerClickable", publicName: "headerClickable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleLayout: { classPropertyName: "titleLayout", publicName: "titleLayout", isSignal: true, isRequired: false, transformFunction: null }, showSeparateTitle: { classPropertyName: "showSeparateTitle", publicName: "showSeparateTitle", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, showExpandLabel: { classPropertyName: "showExpandLabel", publicName: "showExpandLabel", isSignal: true, isRequired: false, transformFunction: null }, showDefaultExpandAction: { classPropertyName: "showDefaultExpandAction", publicName: "showDefaultExpandAction", isSignal: true, isRequired: false, transformFunction: null }, expandActionPosition: { classPropertyName: "expandActionPosition", publicName: "expandActionPosition", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionPosition: { classPropertyName: "descriptionPosition", publicName: "descriptionPosition", isSignal: true, isRequired: false, transformFunction: null }, showIconCard: { classPropertyName: "showIconCard", publicName: "showIconCard", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<div\n  class=\"tedi-accordion__item\"\n  [class.tedi-accordion__item--selected]=\"selected()\"\n  [class.tedi-accordion__item--expanded]=\"expanded()\"\n>\n  @if (showIconCard()) {\n    <ng-content select=\"[tedi-accordion-icon-card]\"></ng-content>\n  }\n\n  <div class=\"tedi-accordion__header-row\">\n    @if (headerClickable()) {\n      <button\n        [id]=\"headerId\"\n        type=\"button\"\n        [ngClass]=\"headerClasses()\"\n        (click)=\"toggle()\"\n        [attr.aria-expanded]=\"expanded()\"\n        [attr.aria-controls]=\"bodyId\"\n      >\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      </button>\n    } @else {\n      <div [id]=\"headerId\" [ngClass]=\"headerClasses()\">\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      </div>\n    }\n  </div>\n\n  <div\n    [ngClass]=\"bodyClasses()\"\n    [id]=\"bodyId\"\n    [attr.role]=\"expanded() ? 'region' : null\"\n    [attr.aria-labelledby]=\"headerId\"\n    [attr.aria-hidden]=\"!expanded()\"\n    [attr.inert]=\"!expanded() ? '' : null\"\n  >\n    <div class=\"tedi-accordion__body--inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #headerContent>\n  <div class=\"tedi-accordion__start\">\n    <ng-content select=\"[tedi-accordion-start-action]\"></ng-content>\n\n    <ng-content select=\"[tedi-accordion-start-before-title]\"></ng-content>\n\n    <span\n      class=\"tedi-accordion__title\"\n      [class.tedi-accordion__title--with-description]=\"description()\"\n      [class.tedi-accordion__title--grow]=\"titleLayout() === 'fill'\"\n    >\n      <span class=\"tedi-accordion__title--main\">\n        @if (showStartExpandAction()) {\n          <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n        }\n\n        @if (showSeparateTitle()) {\n          <span\n            tedi-text\n            color=\"secondary\"\n            modifiers=\"normal\"\n            [id]=\"headerId + '-title'\"\n            [attr.aria-hidden]=\"hideTitleFromSR() ? 'true' : null\"\n          >\n            {{ title() | tediTranslate }}\n          </span>\n        }\n      </span>\n\n      @if (descriptionPosition() !== \"end\") {\n        <ng-content select=\"[tedi-accordion-start-description]\"></ng-content>\n\n        @if (description(); as desc) {\n          <span tedi-text color=\"tertiary\" modifiers=\"normal\">\n            {{ desc | tediTranslate }}\n          </span>\n        }\n      }\n    </span>\n\n    <ng-content select=\"[tedi-accordion-start-after-title]\"></ng-content>\n  </div>\n\n  @if (descriptionPosition() !== \"start\") {\n    <ng-content select=\"[tedi-accordion-end-description]\"></ng-content>\n\n    @if (description(); as desc) {\n      <span tedi-text color=\"tertiary\" modifiers=\"small\">\n        {{ desc | tediTranslate }}\n      </span>\n    }\n  }\n\n  @if (showEndExpandAction()) {\n    <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n  }\n\n  <ng-content select=\"[tedi-accordion-end-action]\"></ng-content>\n</ng-template>\n\n<ng-template #collapseButton>\n  @if (headerClickable()) {\n    <div\n      tedi-text\n      modifiers=\"normal\"\n      class=\"tedi-accordion__expand-indicator\"\n      [class.tedi-accordion__expand-indicator--with-label]=\"showExpandLabel()\"\n    >\n      {{ (showExpandLabel() ? expandLabel() : \"\") | tediTranslate }}\n      <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n    </div>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"tedi-accordion__toggle-button\"\n      tedi-link\n      [underline]=\"false\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"expanded()\"\n      [attr.aria-controls]=\"bodyId\"\n      [attr.aria-label]=\"\n        !showExpandLabel() ? (expandLabel() | tediTranslate) : null\n      \"\n      [attr.aria-labelledby]=\"headerId + '-title'\"\n    >\n      @if (showExpandLabel()) {\n        {{ (showSeparateTitle() ? expandLabel() : title()) | tediTranslate }}\n      }\n      <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #expandIcon>\n  <tedi-icon\n    aria-hidden=\"true\"\n    name=\"expand_more\"\n    class=\"tedi-accordion__icon\"\n    [class.tedi-accordion__icon--expanded]=\"expanded()\"\n    [class.tedi-accordion__icon--no-label]=\"!showExpandLabel()\"\n  />\n</ng-template>\n", styles: [".tedi-accordion__item{display:grid;grid-template-rows:max-content minmax(0,0fr);grid-template-columns:auto 1fr;transition:grid-template-rows .3s ease}.tedi-accordion__item--selected{border:1px solid var(--card-border-selected);border-radius:var(--card-radius-rounded)}.tedi-accordion__item--selected .tedi-accordion__header,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body,.tedi-accordion__item--selected [tedi-accordion-icon-card]{border:transparent}.tedi-accordion__item--selected .tedi-accordion__header--with-icon-card,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-left:1px solid var(--card-border-primary)}.tedi-accordion__item--selected .tedi-accordion__header--expanded{border-bottom:1px solid var(--card-border-primary)}.tedi-accordion__item--expanded{grid-template-rows:max-content minmax(0,1fr)}.tedi-accordion__item--expanded .tedi-accordion__body{border:1px solid var(--card-border-primary);border-top:none;border-radius:0 0 var(--card-radius-rounded) var(--card-radius-rounded)}.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-radius:0 0 var(--card-radius-rounded) 0}.tedi-accordion__header-row{display:flex;grid-row:1;grid-column:2;align-items:stretch}.tedi-accordion__header{position:relative;display:flex;flex:1;gap:var(--layout-grid-gutters-16);align-items:center;padding:var(--card-padding-md-default);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-accordion__header--expanded{border-radius:var(--card-radius-rounded) var(--card-radius-rounded) 0 0}.tedi-accordion__header--expanded.tedi-accordion__header--with-icon-card{border-radius:0 var(--card-radius-rounded) 0 0}.tedi-accordion__header--with-icon-card{border-radius:var(--card-radius-sharp) var(--card-radius-rounded) var(--card-radius-rounded) var(--card-radius-sharp)}.tedi-accordion__header--hoverable{cursor:pointer}.tedi-accordion__header--hoverable:hover{background:var(--general-surface-hover)}.tedi-accordion__header--hoverable:active{background:var(--general-surface-brand-tertiary)}.tedi-accordion__header--hoverable:focus-visible{z-index:1;outline:none;background:var(--card-background-primary);border:1px solid var(--card-border-primary);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--tedi-primary-500)}.tedi-accordion__body{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion__body--inner{padding:var(--card-padding-md-default)}.tedi-accordion__icon{transition:transform .2s ease-in-out}.tedi-accordion__icon--expanded{transform:rotate(-180deg)}.tedi-accordion__start{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}[tedi-accordion-icon-card]{display:inline-flex;grid-row:1/span 2;grid-column:1;gap:var(--layout-grid-gutters-08);align-items:flex-start;align-self:stretch;justify-content:flex-end;padding:var(--card-padding-md-default);background:var(--card-background-secondary);border:1px solid var(--card-border-primary);border-right:none;border-radius:var(--card-radius-rounded) var(--card-radius-sharp) var(--card-radius-sharp) var(--card-radius-rounded)}.tedi-accordion__title{display:flex;gap:var(--layout-grid-gutters-08)}.tedi-accordion__title--main{display:flex;gap:inherit;align-items:center}.tedi-accordion__title--with-description,.tedi-accordion__title:has([tedi-accordion-start-description]){flex-direction:column;gap:0;align-items:flex-start}.tedi-accordion__title--grow{flex:1;justify-content:space-between}.tedi-accordion__toggle-button{display:flex;padding:0;font-size:var(--body-regular-size);background:transparent;border:transparent}.tedi-accordion__expand-indicator{display:flex;align-items:center;color:var(--accordion-action-color)}.tedi-accordion__expand-indicator tedi-icon{color:inherit}.tedi-accordion__expand-indicator--with-label tedi-icon{margin-left:var(--button-sm-inner-spacing);font-size:var(--tedi-size-02);line-height:inherit}.tedi-link tedi-icon.tedi-accordion__icon--no-label{font-size:var(--icon-05)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-accordion-item", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        IconComponent,
+                        CommonModule,
+                        TextComponent,
+                        LinkComponent,
+                        TediTranslationPipe,
+                        NgClass,
+                    ], template: "<div\n  class=\"tedi-accordion__item\"\n  [class.tedi-accordion__item--selected]=\"selected()\"\n  [class.tedi-accordion__item--expanded]=\"expanded()\"\n>\n  @if (showIconCard()) {\n    <ng-content select=\"[tedi-accordion-icon-card]\"></ng-content>\n  }\n\n  <div class=\"tedi-accordion__header-row\">\n    @if (headerClickable()) {\n      <button\n        [id]=\"headerId\"\n        type=\"button\"\n        [ngClass]=\"headerClasses()\"\n        (click)=\"toggle()\"\n        [attr.aria-expanded]=\"expanded()\"\n        [attr.aria-controls]=\"bodyId\"\n      >\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      </button>\n    } @else {\n      <div [id]=\"headerId\" [ngClass]=\"headerClasses()\">\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      </div>\n    }\n  </div>\n\n  <div\n    [ngClass]=\"bodyClasses()\"\n    [id]=\"bodyId\"\n    [attr.role]=\"expanded() ? 'region' : null\"\n    [attr.aria-labelledby]=\"headerId\"\n    [attr.aria-hidden]=\"!expanded()\"\n    [attr.inert]=\"!expanded() ? '' : null\"\n  >\n    <div class=\"tedi-accordion__body--inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #headerContent>\n  <div class=\"tedi-accordion__start\">\n    <ng-content select=\"[tedi-accordion-start-action]\"></ng-content>\n\n    <ng-content select=\"[tedi-accordion-start-before-title]\"></ng-content>\n\n    <span\n      class=\"tedi-accordion__title\"\n      [class.tedi-accordion__title--with-description]=\"description()\"\n      [class.tedi-accordion__title--grow]=\"titleLayout() === 'fill'\"\n    >\n      <span class=\"tedi-accordion__title--main\">\n        @if (showStartExpandAction()) {\n          <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n        }\n\n        @if (showSeparateTitle()) {\n          <span\n            tedi-text\n            color=\"secondary\"\n            modifiers=\"normal\"\n            [id]=\"headerId + '-title'\"\n            [attr.aria-hidden]=\"hideTitleFromSR() ? 'true' : null\"\n          >\n            {{ title() | tediTranslate }}\n          </span>\n        }\n      </span>\n\n      @if (descriptionPosition() !== \"end\") {\n        <ng-content select=\"[tedi-accordion-start-description]\"></ng-content>\n\n        @if (description(); as desc) {\n          <span tedi-text color=\"tertiary\" modifiers=\"normal\">\n            {{ desc | tediTranslate }}\n          </span>\n        }\n      }\n    </span>\n\n    <ng-content select=\"[tedi-accordion-start-after-title]\"></ng-content>\n  </div>\n\n  @if (descriptionPosition() !== \"start\") {\n    <ng-content select=\"[tedi-accordion-end-description]\"></ng-content>\n\n    @if (description(); as desc) {\n      <span tedi-text color=\"tertiary\" modifiers=\"small\">\n        {{ desc | tediTranslate }}\n      </span>\n    }\n  }\n\n  @if (showEndExpandAction()) {\n    <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n  }\n\n  <ng-content select=\"[tedi-accordion-end-action]\"></ng-content>\n</ng-template>\n\n<ng-template #collapseButton>\n  @if (headerClickable()) {\n    <div\n      tedi-text\n      modifiers=\"normal\"\n      class=\"tedi-accordion__expand-indicator\"\n      [class.tedi-accordion__expand-indicator--with-label]=\"showExpandLabel()\"\n    >\n      {{ (showExpandLabel() ? expandLabel() : \"\") | tediTranslate }}\n      <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n    </div>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"tedi-accordion__toggle-button\"\n      tedi-link\n      [underline]=\"false\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"expanded()\"\n      [attr.aria-controls]=\"bodyId\"\n      [attr.aria-label]=\"\n        !showExpandLabel() ? (expandLabel() | tediTranslate) : null\n      \"\n      [attr.aria-labelledby]=\"headerId + '-title'\"\n    >\n      @if (showExpandLabel()) {\n        {{ (showSeparateTitle() ? expandLabel() : title()) | tediTranslate }}\n      }\n      <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #expandIcon>\n  <tedi-icon\n    aria-hidden=\"true\"\n    name=\"expand_more\"\n    class=\"tedi-accordion__icon\"\n    [class.tedi-accordion__icon--expanded]=\"expanded()\"\n    [class.tedi-accordion__icon--no-label]=\"!showExpandLabel()\"\n  />\n</ng-template>\n", styles: [".tedi-accordion__item{display:grid;grid-template-rows:max-content minmax(0,0fr);grid-template-columns:auto 1fr;transition:grid-template-rows .3s ease}.tedi-accordion__item--selected{border:1px solid var(--card-border-selected);border-radius:var(--card-radius-rounded)}.tedi-accordion__item--selected .tedi-accordion__header,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body,.tedi-accordion__item--selected [tedi-accordion-icon-card]{border:transparent}.tedi-accordion__item--selected .tedi-accordion__header--with-icon-card,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-left:1px solid var(--card-border-primary)}.tedi-accordion__item--selected .tedi-accordion__header--expanded{border-bottom:1px solid var(--card-border-primary)}.tedi-accordion__item--expanded{grid-template-rows:max-content minmax(0,1fr)}.tedi-accordion__item--expanded .tedi-accordion__body{border:1px solid var(--card-border-primary);border-top:none;border-radius:0 0 var(--card-radius-rounded) var(--card-radius-rounded)}.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-radius:0 0 var(--card-radius-rounded) 0}.tedi-accordion__header-row{display:flex;grid-row:1;grid-column:2;align-items:stretch}.tedi-accordion__header{position:relative;display:flex;flex:1;gap:var(--layout-grid-gutters-16);align-items:center;padding:var(--card-padding-md-default);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-accordion__header--expanded{border-radius:var(--card-radius-rounded) var(--card-radius-rounded) 0 0}.tedi-accordion__header--expanded.tedi-accordion__header--with-icon-card{border-radius:0 var(--card-radius-rounded) 0 0}.tedi-accordion__header--with-icon-card{border-radius:var(--card-radius-sharp) var(--card-radius-rounded) var(--card-radius-rounded) var(--card-radius-sharp)}.tedi-accordion__header--hoverable{cursor:pointer}.tedi-accordion__header--hoverable:hover{background:var(--general-surface-hover)}.tedi-accordion__header--hoverable:active{background:var(--general-surface-brand-tertiary)}.tedi-accordion__header--hoverable:focus-visible{z-index:1;outline:none;background:var(--card-background-primary);border:1px solid var(--card-border-primary);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--tedi-primary-500)}.tedi-accordion__body{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion__body--inner{padding:var(--card-padding-md-default)}.tedi-accordion__icon{transition:transform .2s ease-in-out}.tedi-accordion__icon--expanded{transform:rotate(-180deg)}.tedi-accordion__start{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}[tedi-accordion-icon-card]{display:inline-flex;grid-row:1/span 2;grid-column:1;gap:var(--layout-grid-gutters-08);align-items:flex-start;align-self:stretch;justify-content:flex-end;padding:var(--card-padding-md-default);background:var(--card-background-secondary);border:1px solid var(--card-border-primary);border-right:none;border-radius:var(--card-radius-rounded) var(--card-radius-sharp) var(--card-radius-sharp) var(--card-radius-rounded)}.tedi-accordion__title{display:flex;gap:var(--layout-grid-gutters-08)}.tedi-accordion__title--main{display:flex;gap:inherit;align-items:center}.tedi-accordion__title--with-description,.tedi-accordion__title:has([tedi-accordion-start-description]){flex-direction:column;gap:0;align-items:flex-start}.tedi-accordion__title--grow{flex:1;justify-content:space-between}.tedi-accordion__toggle-button{display:flex;padding:0;font-size:var(--body-regular-size);background:transparent;border:transparent}.tedi-accordion__expand-indicator{display:flex;align-items:center;color:var(--accordion-action-color)}.tedi-accordion__expand-indicator tedi-icon{color:inherit}.tedi-accordion__expand-indicator--with-label tedi-icon{margin-left:var(--button-sm-inner-spacing);font-size:var(--tedi-size-02);line-height:inherit}.tedi-link tedi-icon.tedi-accordion__icon--no-label{font-size:var(--icon-05)}\n"] }]
+        }] });
+
+class AccordionComponent {
+    /**
+     * Whether the accordion allows multiple items to be expanded at the same time.
+     * If false, opening one item will collapse the others automatically.
+     */
+    allowMultiple = input(false);
+    items = contentChildren(AccordionItemComponent);
+    onItemToggled(activeItem) {
+        if (this.allowMultiple())
+            return;
+        if (activeItem.expanded()) {
+            this.items().forEach((item) => {
+                if (item !== activeItem) {
+                    item.setExpanded(false);
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: AccordionComponent, isStandalone: true, selector: "tedi-accordion", inputs: { allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: AccordionItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-accordion{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-accordion", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tedi-accordion{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}\n"] }]
+        }] });
+
 class VerticalSpacingItemDirective {
     el;
     renderer;
@@ -6457,5 +6684,5 @@ function provideTedi(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, AlertComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxComponent, ClosingButtonComponent, ColComponent, CollapseComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownTriggerDirective, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, RowComponent, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpinnerComponent, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, generateUUID, provideTedi };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AlertComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxComponent, ClosingButtonComponent, ColComponent, CollapseComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownTriggerDirective, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, RowComponent, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpinnerComponent, StatusBadgeComponent, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, generateUUID, provideTedi };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map