@tedi-design-system/angular 6.3.1 → 6.4.0-rc.1

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

@@ -8446,70 +8446,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             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"] }]
         }] });
 
+/**
+ * A single item inside a `tedi-accordion`. Owns the item's state (expanded)
+ * and the inputs shared by header and content (selected, showIconCard,
+ * defaultExpanded).
+ *
+ * Header-related configuration lives on `tedi-accordion-item-header`; body
+ * styling lives on `tedi-accordion-item-content`.
+ *
+ * Use together with the header and content children:
+ *
+ * ```html
+ * <tedi-accordion-item>
+ *   <tedi-accordion-item-header>
+ *     <span tedi-accordion-title>Title</span>
+ *   </tedi-accordion-item-header>
+ *   <tedi-accordion-item-content>Content</tedi-accordion-item-content>
+ * </tedi-accordion-item>
+ * ```
+ *
+ * The optional `[tedi-accordion-icon-card]` slot is projected as a direct
+ * child of the item (not inside the header), because it occupies its own
+ * column in the item's grid layout.
+ */
 class AccordionItemComponent {
     idGenerator = inject(_IdGenerator);
-    bodyId = this.idGenerator.getId("tedi-accordion-body");
+    contentId = this.idGenerator.getId("tedi-accordion-content");
     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.
+     * Enables the icon-card layout variant. Affects both header and content
+     * styling, so it lives on the item.
      */
     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() {
@@ -8517,48 +8494,17 @@ class AccordionItemComponent {
     }
     toggle() {
         this.setExpanded(!this.expanded());
-        this.accordion?.onItemToggled(this);
     }
     setExpanded(value) {
         this.expanded.set(value);
+        this.accordion?.onItemToggled(this);
     }
-    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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", 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 }, 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  <ng-content select=\"tedi-accordion-item-header\"></ng-content>\n\n  <ng-content select=\"tedi-accordion-item-content\"></ng-content>\n</div>\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-item-header,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion-item-content,.tedi-accordion__item--selected [tedi-accordion-icon-card]{border:transparent}.tedi-accordion__item--selected .tedi-accordion-item-header--with-icon-card,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion-item-content--with-icon-card{border-left:1px solid var(--card-border-primary)}.tedi-accordion__item--selected .tedi-accordion-item-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-item-content{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-item-content--with-icon-card{border-radius:0 0 var(--card-radius-rounded) 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)}\n"], 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"] }]
+            args: [{ selector: "tedi-accordion-item", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], 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  <ng-content select=\"tedi-accordion-item-header\"></ng-content>\n\n  <ng-content select=\"tedi-accordion-item-content\"></ng-content>\n</div>\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-item-header,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion-item-content,.tedi-accordion__item--selected [tedi-accordion-icon-card]{border:transparent}.tedi-accordion__item--selected .tedi-accordion-item-header--with-icon-card,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion-item-content--with-icon-card{border-left:1px solid var(--card-border-primary)}.tedi-accordion__item--selected .tedi-accordion-item-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-item-content{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-item-content--with-icon-card{border-radius:0 0 var(--card-radius-rounded) 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)}\n"] }]
         }] });
 
 class AccordionComponent {
@@ -8587,6 +8533,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             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 AccordionItemHeaderComponent {
+    item = inject(AccordionItemComponent);
+    /**
+     * If false, disables header toggling and enables using interactive elements in the accordion header.
+     */
+    headerClickable = input(true);
+    /**
+     * 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");
+    /** 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");
+    /**
+     * Custom CSS classes for the accordion header.
+     */
+    headerClass = input(null);
+    headerId = this.item.headerId;
+    contentId = this.item.contentId;
+    expanded = this.item.expanded;
+    expandLabel = computed(() => this.expanded() ? this.closeLabel() : this.openLabel());
+    showStartExpandAction = computed(() => this.showDefaultExpandAction() && this.expandActionPosition() === "start");
+    showEndExpandAction = computed(() => this.showDefaultExpandAction() && this.expandActionPosition() === "end");
+    toggle() {
+        this.item.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AccordionItemHeaderComponent, isStandalone: true, selector: "tedi-accordion-item-header", inputs: { headerClickable: { classPropertyName: "headerClickable", publicName: "headerClickable", isSignal: true, isRequired: false, transformFunction: null }, titleLayout: { classPropertyName: "titleLayout", publicName: "titleLayout", 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 }, headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-header": "true", "class.tedi-accordion-item-header--hoverable": "headerClickable()", "class.tedi-accordion-item-header--expanded": "expanded()", "class.tedi-accordion-item-header--with-icon-card": "item.showIconCard()", "class": "headerClass() ?? ''" } }, ngImport: i0, template: "@if (headerClickable()) {\n  <button\n    [id]=\"headerId\"\n    type=\"button\"\n    class=\"tedi-accordion-item-header__trigger\"\n    (click)=\"toggle()\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"contentId\"\n  >\n    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n  </button>\n} @else {\n  <div [id]=\"headerId\" class=\"tedi-accordion-item-header__trigger\">\n    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n  </div>\n}\n\n<ng-template #headerContent>\n  <div class=\"tedi-accordion-item-header__start\">\n    <ng-content select=\"[tedi-accordion-start-action]\"></ng-content>\n\n    <ng-content select=\"[tedi-accordion-before-title]\"></ng-content>\n\n    <span\n      class=\"tedi-accordion-item-header__title\"\n      [class.tedi-accordion-item-header__title--grow]=\"titleLayout() === 'fill'\"\n    >\n      <span class=\"tedi-accordion-item-header__title-main\">\n        @if (showStartExpandAction()) {\n          <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n        }\n\n        <span tedi-text color=\"secondary\" modifiers=\"normal\">\n          <ng-content select=\"[tedi-accordion-title]\"></ng-content>\n        </span>\n      </span>\n\n      <ng-content select=\"[tedi-accordion-start-description]\"></ng-content>\n    </span>\n\n    <ng-content select=\"[tedi-accordion-after-title]\"></ng-content>\n  </div>\n\n  <ng-content select=\"[tedi-accordion-end-description]\"></ng-content>\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-item-header__expand-indicator\"\n      [class.tedi-accordion-item-header__expand-indicator--with-label]=\"\n        showExpandLabel()\n      \"\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-item-header__toggle-button\"\n      tedi-link\n      [underline]=\"false\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"expanded()\"\n      [attr.aria-controls]=\"contentId\"\n      [attr.aria-label]=\"\n        !showExpandLabel() ? (expandLabel() | tediTranslate) : null\n      \"\n    >\n      @if (showExpandLabel()) {\n        {{ expandLabel() | 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-item-header__icon\"\n    [class.tedi-accordion-item-header__icon--expanded]=\"expanded()\"\n    [class.tedi-accordion-item-header__icon--no-label]=\"!showExpandLabel()\"\n  />\n</ng-template>\n", styles: [".tedi-accordion-item-header{position:relative;display:flex;grid-row:1;grid-column:2;align-items:stretch;background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-accordion-item-header--expanded{border-radius:var(--card-radius-rounded) var(--card-radius-rounded) 0 0}.tedi-accordion-item-header--expanded.tedi-accordion-item-header--with-icon-card{border-radius:0 var(--card-radius-rounded) 0 0}.tedi-accordion-item-header--with-icon-card{border-radius:var(--card-radius-sharp) var(--card-radius-rounded) var(--card-radius-rounded) var(--card-radius-sharp)}.tedi-accordion-item-header--hoverable{cursor:pointer}.tedi-accordion-item-header--hoverable:hover{background:var(--general-surface-hover)}.tedi-accordion-item-header--hoverable:active{background:var(--general-surface-brand-tertiary)}.tedi-accordion-item-header--hoverable:has(.tedi-accordion-item-header__trigger: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-item-header__trigger{display:flex;flex:1;gap:var(--layout-grid-gutters-16);align-items:center;padding:var(--card-padding-md-default);font:inherit;color:inherit;text-align:inherit;cursor:inherit;outline:none;background:transparent;border:0}.tedi-accordion-item-header__start{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}.tedi-accordion-item-header__title{display:flex;gap:var(--layout-grid-gutters-08)}.tedi-accordion-item-header__title-main{display:flex;gap:inherit;align-items:center}.tedi-accordion-item-header__title:has([tedi-accordion-start-description]){flex-direction:column;gap:0;align-items:flex-start}.tedi-accordion-item-header__title--grow{flex:1}.tedi-accordion-item-header__toggle-button{display:flex;padding:0;font-size:var(--body-regular-size);background:transparent;border:transparent}.tedi-accordion-item-header__expand-indicator{display:flex;align-items:center;color:var(--accordion-action-color)}.tedi-accordion-item-header__expand-indicator .tedi-accordion-item-header__icon{color:inherit}.tedi-accordion-item-header__expand-indicator--with-label .tedi-accordion-item-header__icon{margin-left:var(--button-sm-inner-spacing);font-size:var(--tedi-size-02);line-height:inherit}.tedi-accordion-item-header__icon{transition:transform .2s ease-in-out}.tedi-accordion-item-header__icon--expanded{transform:rotate(-180deg)}.tedi-link .tedi-accordion-item-header__icon--no-label{font-size:var(--icon-05)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "target", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "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: AccordionItemHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-accordion-item-header", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        IconComponent,
+                        TextComponent,
+                        LinkComponent,
+                        TediTranslationPipe,
+                    ], host: {
+                        "[class.tedi-accordion-item-header]": "true",
+                        "[class.tedi-accordion-item-header--hoverable]": "headerClickable()",
+                        "[class.tedi-accordion-item-header--expanded]": "expanded()",
+                        "[class.tedi-accordion-item-header--with-icon-card]": "item.showIconCard()",
+                        "[class]": "headerClass() ?? ''",
+                    }, template: "@if (headerClickable()) {\n  <button\n    [id]=\"headerId\"\n    type=\"button\"\n    class=\"tedi-accordion-item-header__trigger\"\n    (click)=\"toggle()\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"contentId\"\n  >\n    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n  </button>\n} @else {\n  <div [id]=\"headerId\" class=\"tedi-accordion-item-header__trigger\">\n    <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n  </div>\n}\n\n<ng-template #headerContent>\n  <div class=\"tedi-accordion-item-header__start\">\n    <ng-content select=\"[tedi-accordion-start-action]\"></ng-content>\n\n    <ng-content select=\"[tedi-accordion-before-title]\"></ng-content>\n\n    <span\n      class=\"tedi-accordion-item-header__title\"\n      [class.tedi-accordion-item-header__title--grow]=\"titleLayout() === 'fill'\"\n    >\n      <span class=\"tedi-accordion-item-header__title-main\">\n        @if (showStartExpandAction()) {\n          <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n        }\n\n        <span tedi-text color=\"secondary\" modifiers=\"normal\">\n          <ng-content select=\"[tedi-accordion-title]\"></ng-content>\n        </span>\n      </span>\n\n      <ng-content select=\"[tedi-accordion-start-description]\"></ng-content>\n    </span>\n\n    <ng-content select=\"[tedi-accordion-after-title]\"></ng-content>\n  </div>\n\n  <ng-content select=\"[tedi-accordion-end-description]\"></ng-content>\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-item-header__expand-indicator\"\n      [class.tedi-accordion-item-header__expand-indicator--with-label]=\"\n        showExpandLabel()\n      \"\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-item-header__toggle-button\"\n      tedi-link\n      [underline]=\"false\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"expanded()\"\n      [attr.aria-controls]=\"contentId\"\n      [attr.aria-label]=\"\n        !showExpandLabel() ? (expandLabel() | tediTranslate) : null\n      \"\n    >\n      @if (showExpandLabel()) {\n        {{ expandLabel() | 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-item-header__icon\"\n    [class.tedi-accordion-item-header__icon--expanded]=\"expanded()\"\n    [class.tedi-accordion-item-header__icon--no-label]=\"!showExpandLabel()\"\n  />\n</ng-template>\n", styles: [".tedi-accordion-item-header{position:relative;display:flex;grid-row:1;grid-column:2;align-items:stretch;background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-accordion-item-header--expanded{border-radius:var(--card-radius-rounded) var(--card-radius-rounded) 0 0}.tedi-accordion-item-header--expanded.tedi-accordion-item-header--with-icon-card{border-radius:0 var(--card-radius-rounded) 0 0}.tedi-accordion-item-header--with-icon-card{border-radius:var(--card-radius-sharp) var(--card-radius-rounded) var(--card-radius-rounded) var(--card-radius-sharp)}.tedi-accordion-item-header--hoverable{cursor:pointer}.tedi-accordion-item-header--hoverable:hover{background:var(--general-surface-hover)}.tedi-accordion-item-header--hoverable:active{background:var(--general-surface-brand-tertiary)}.tedi-accordion-item-header--hoverable:has(.tedi-accordion-item-header__trigger: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-item-header__trigger{display:flex;flex:1;gap:var(--layout-grid-gutters-16);align-items:center;padding:var(--card-padding-md-default);font:inherit;color:inherit;text-align:inherit;cursor:inherit;outline:none;background:transparent;border:0}.tedi-accordion-item-header__start{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}.tedi-accordion-item-header__title{display:flex;gap:var(--layout-grid-gutters-08)}.tedi-accordion-item-header__title-main{display:flex;gap:inherit;align-items:center}.tedi-accordion-item-header__title:has([tedi-accordion-start-description]){flex-direction:column;gap:0;align-items:flex-start}.tedi-accordion-item-header__title--grow{flex:1}.tedi-accordion-item-header__toggle-button{display:flex;padding:0;font-size:var(--body-regular-size);background:transparent;border:transparent}.tedi-accordion-item-header__expand-indicator{display:flex;align-items:center;color:var(--accordion-action-color)}.tedi-accordion-item-header__expand-indicator .tedi-accordion-item-header__icon{color:inherit}.tedi-accordion-item-header__expand-indicator--with-label .tedi-accordion-item-header__icon{margin-left:var(--button-sm-inner-spacing);font-size:var(--tedi-size-02);line-height:inherit}.tedi-accordion-item-header__icon{transition:transform .2s ease-in-out}.tedi-accordion-item-header__icon--expanded{transform:rotate(-180deg)}.tedi-link .tedi-accordion-item-header__icon--no-label{font-size:var(--icon-05)}\n"] }]
+        }] });
+
+class AccordionItemContentComponent {
+    item = inject(AccordionItemComponent);
+    /**
+     * Custom CSS classes for the accordion content.
+     */
+    contentClass = input(null);
+    headerId = this.item.headerId;
+    contentId = this.item.contentId;
+    expanded = this.item.expanded;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true", "class.tedi-accordion-item-content--with-icon-card": "item.showIconCard()", "class": "contentClass() ?? ''", "id": "contentId", "attr.role": "expanded() ? 'region' : null", "attr.aria-labelledby": "headerId", "attr.aria-hidden": "!expanded()", "attr.inert": "!expanded() ? '' : null" } }, ngImport: i0, template: "<div class=\"tedi-accordion-item-content__inner\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tedi-accordion-item-content{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion-item-content__inner{padding:var(--card-padding-md-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-accordion-item-content", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], host: {
+                        "[class.tedi-accordion-item-content]": "true",
+                        "[class.tedi-accordion-item-content--with-icon-card]": "item.showIconCard()",
+                        "[class]": "contentClass() ?? ''",
+                        "[id]": "contentId",
+                        "[attr.role]": "expanded() ? 'region' : null",
+                        "[attr.aria-labelledby]": "headerId",
+                        "[attr.aria-hidden]": "!expanded()",
+                        "[attr.inert]": "!expanded() ? '' : null",
+                    }, template: "<div class=\"tedi-accordion-item-content__inner\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tedi-accordion-item-content{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion-item-content__inner{padding:var(--card-padding-md-default)}\n"] }]
+        }] });
+
 class VerticalSpacingItemDirective {
     el;
     renderer;
@@ -8652,5 +8685,5 @@ function provideTedi(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AlertComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, generateUUID, provideTedi };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, 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