@koobiq/components 19.8.1 → 20.0.0

package/fesm2022/koobiq-components-accordion.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, ChangeDetectorRef, HostAttributeToken, EventEmitter, booleanAttribute, Output, Input, forwardRef, ContentChildren, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, afterNextRender, ViewChild, ContentChild, Renderer2, signal, NgModule } from '@angular/core';
+import { inject, ElementRef, ChangeDetectorRef, contentChildren, forwardRef, HostAttributeToken, input, booleanAttribute, output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, viewChild, afterNextRender, contentChild, EventEmitter, Renderer2, signal, NgModule } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
 import { KBQ_WINDOW, kbqInjectNativeElement } from '@koobiq/components/core';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
@@ -8,6 +8,7 @@ import { KbqIcon } from '@koobiq/components/icon';
 import { FocusMonitor, FocusKeyManager } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { ENTER, SPACE, TAB } from '@angular/cdk/keycodes';
+import { outputToObservable } from '@angular/core/rxjs-interop';
 
 var KbqAccordionVariant;
 (function (KbqAccordionVariant) {
@@ -20,6 +21,8 @@ class KbqAccordion {
     /**
      * The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state of the items.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get defaultValue() {
         return this.isMultiple ? this._defaultValue : this._defaultValue[0];
     }
@@ -29,6 +32,8 @@ class KbqAccordion {
         }
     }
     /** The controlled value of the item to expand */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get value() {
         if (this._value === undefined) {
             return this.defaultValue;
@@ -45,7 +50,7 @@ class KbqAccordion {
         return this._id;
     }
     get isMultiple() {
-        return this.type === 'multiple';
+        return this.type() === 'multiple';
     }
     get hasSavedState() {
         return typeof this.state === 'object' && this.state !== null;
@@ -65,15 +70,19 @@ class KbqAccordion {
         this.dir = inject(Directionality, { optional: true });
         /** @docs-private */
         this.openCloseAllActions = new Subject();
+        /**  @docs-private */
+        this.items = contentChildren(forwardRef(() => KbqAccordionItem), ...(ngDevMode ? [{ debugName: "items", descendants: true }] : [{ descendants: true }]));
         /** Specifies whether the accordion saves its states. Default is false */
         this.useStateSaving = inject(new HostAttributeToken('useStateSaving'), { optional: true }) !== null;
-        this.variant = KbqAccordionVariant.fill;
+        this.variant = input(KbqAccordionVariant.fill, ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        /** Whether the Accordion is disabled. */
+        this.disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** The orientation of the accordion. */
-        this.orientation = 'vertical';
+        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
         /** Determines whether one or multiple items can be opened at the same time. */
-        this.type = 'single';
-        this.collapsible = true;
-        this.onValueChange = new EventEmitter();
+        this.type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+        this.onValueChange = output();
         this._defaultValue = [];
         this._id = `kbq-accordion-${uniqueIdCounter$1++}`;
         if (this.useStateSaving) {
@@ -94,14 +103,14 @@ class KbqAccordion {
         else {
             this.selectionDispatcher.notify(this._defaultValue, this.id);
         }
-        this.keyManager = new FocusKeyManager(this.items).withHomeAndEnd();
-        if (this.orientation === 'horizontal') {
+        this.keyManager = new FocusKeyManager(this.items()).withHomeAndEnd();
+        if (this.orientation() === 'horizontal') {
             this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');
         }
         else {
             this.keyManager.withVerticalOrientation();
         }
-        this.onValueChangeSubscription = merge(...this.items.map((item) => item.expandedChange)).subscribe(() => this.onValueChange.emit());
+        this.onValueChangeSubscription = merge(...this.items().map((item) => outputToObservable(item.expandedChange))).subscribe(() => this.onValueChange.emit());
     }
     ngAfterViewInit() {
         this.focusMonitor.monitor(this.elementRef, true);
@@ -131,7 +140,7 @@ class KbqAccordion {
             event.preventDefault();
         }
         else if (event.keyCode === TAB) {
-            if (this.keyManager.activeItemIndex === this.items.length - 1)
+            if (this.keyManager.activeItemIndex === this.items().length - 1)
                 return;
             this.keyManager.setNextItemActive();
             event.preventDefault();
@@ -167,41 +176,25 @@ class KbqAccordion {
             return;
         this.state = JSON.parse(this.localStorage.getItem(this.id));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: KbqAccordion, isStandalone: true, selector: "kbq-accordion, [kbq-accordion]", inputs: { variant: "variant", disabled: ["disabled", "disabled", booleanAttribute], orientation: "orientation", defaultValue: "defaultValue", type: "type", collapsible: "collapsible", value: "value" }, outputs: { onValueChange: "onValueChange" }, host: { listeners: { "keydown": "keydownHandler($event)" }, properties: { "attr.data-orientation": "orientation" }, classAttribute: "kbq-accordion" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqAccordion, isStandalone: true, selector: "kbq-accordion, [kbq-accordion]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, host: { listeners: { "keydown": "keydownHandler($event)" }, properties: { "attr.data-orientation": "orientation()" }, classAttribute: "kbq-accordion" }, providers: [
             { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
-        ], queries: [{ propertyName: "items", predicate: i0.forwardRef(() => KbqAccordionItem), descendants: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:2px;border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>p{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:.3s ease-out;height:var(--radix-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:.3s ease-out;height:0}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:focus-within{border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "items", predicate: i0.forwardRef(() => KbqAccordionItem), descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:2px;border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>p{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:.3s ease-out;height:var(--radix-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:.3s ease-out;height:0}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:focus-within{border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordion, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-accordion, [kbq-accordion]', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'kbq-accordion, [kbq-accordion]', template: '<ng-content />', providers: [
+                        { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-accordion',
-                        '[attr.data-orientation]': 'orientation',
+                        '[attr.data-orientation]': 'orientation()',
                         '(keydown)': 'keydownHandler($event)'
-                    }, providers: [
-                        { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
-                    ], styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:2px;border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>p{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:.3s ease-out;height:var(--radix-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:.3s ease-out;height:0}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:focus-within{border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{
-                type: ContentChildren,
-                args: [forwardRef(() => KbqAccordionItem), { descendants: true }]
-            }], variant: [{
+                    }, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:2px;border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>p{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:.3s ease-out;height:var(--radix-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:.3s ease-out;height:0}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:focus-within{border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqAccordionItem), { ...{ descendants: true }, isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], defaultValue: [{
                 type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], orientation: [{
+            }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], value: [{
                 type: Input
-            }], defaultValue: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], collapsible: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], onValueChange: [{
-                type: Output
-            }] } });
+            }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 
 class KbqAccordionTriggerDirective {
     constructor() {
@@ -222,7 +215,7 @@ class KbqAccordionTriggerDirective {
     }
     /** Fires when trigger clicked */
     onClick() {
-        if (!this.accordion.collapsible && this.item.expanded)
+        if (!this.accordion.collapsible() && this.item.expanded)
             return;
         this.item.toggle();
         this.accordion.setActiveItem(this.item);
@@ -231,10 +224,10 @@ class KbqAccordionTriggerDirective {
     focus() {
         this.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqAccordionTriggerDirective, isStandalone: true, selector: "[kbqAccordionTrigger]", host: { listeners: { "click": "onClick()" }, properties: { "attr.id": "triggerId", "attr.role": "\"button\"", "attr.aria-expanded": "item.expanded", "attr.aria-controls": "contentId", "attr.aria-disabled": "item.disabled", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAccordionTriggerDirective, isStandalone: true, selector: "[kbqAccordionTrigger]", host: { listeners: { "click": "onClick()" }, properties: { "attr.id": "triggerId", "attr.role": "\"button\"", "attr.aria-expanded": "item.expanded", "attr.aria-controls": "contentId", "attr.aria-disabled": "item.disabled", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionTrigger]',
@@ -254,19 +247,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 
 class KbqAccordionTrigger {
     get isFill() {
-        return this.accordion.variant === KbqAccordionVariant.fill;
+        return this.accordion.variant() === KbqAccordionVariant.fill;
     }
     get isHug() {
-        return this.accordion.variant === KbqAccordionVariant.hug;
+        return this.accordion.variant() === KbqAccordionVariant.hug;
     }
     get isHugSpaceBetween() {
-        return this.accordion.variant === KbqAccordionVariant.hugSpaceBetween;
+        return this.accordion.variant() === KbqAccordionVariant.hugSpaceBetween;
     }
     constructor() {
         /** @docs-private */
         this.nativeElement = kbqInjectNativeElement();
         /** @docs-private */
         this.accordion = inject(KbqAccordion);
+        /** @docs-private */
+        this.icon = viewChild.required(KbqIcon);
         this.afterRenderRef = afterNextRender(() => {
             setTimeout(() => this.enableAnimation());
             this.afterRenderRef?.destroy();
@@ -276,14 +271,14 @@ class KbqAccordionTrigger {
         this.disableAnimation();
     }
     disableAnimation() {
-        this.savedTransition = this.icon.elementRef.nativeElement.style.transition;
-        this.icon.getHostElement().style.transition = 'none';
+        this.savedTransition = this.icon().elementRef.nativeElement.style.transition;
+        this.icon().getHostElement().style.transition = 'none';
     }
     enableAnimation() {
-        this.icon.getHostElement().style.transition = this.savedTransition;
+        this.icon().getHostElement().style.transition = this.savedTransition;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqAccordionTrigger, isStandalone: true, selector: "kbq-accordion-trigger, [kbq-accordion-trigger]", host: { properties: { "class.kbq-accordion-trigger_fill": "isFill", "class.kbq-accordion-trigger_hug": "isHug", "class.kbq-accordion-trigger_hug-space-between": "isHugSpaceBetween" }, classAttribute: "kbq-accordion-trigger" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], hostDirectives: [{ directive: KbqAccordionTriggerDirective }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqAccordionTrigger, isStandalone: true, selector: "kbq-accordion-trigger, [kbq-accordion-trigger]", host: { properties: { "class.kbq-accordion-trigger_fill": "isFill", "class.kbq-accordion-trigger_hug": "isHug", "class.kbq-accordion-trigger_hug-space-between": "isHugSpaceBetween" }, classAttribute: "kbq-accordion-trigger" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true, isSignal: true }], hostDirectives: [{ directive: KbqAccordionTriggerDirective }], ngImport: i0, template: `
         <i
             kbq-icon="{{ isHugSpaceBetween ? 'kbq-chevron-down-s_16' : 'kbq-chevron-right-s_16' }}"
             class="kbq-accordion-trigger__icon"
@@ -292,7 +287,7 @@ class KbqAccordionTrigger {
         <ng-content />
     `, isInline: true, styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center;background:transparent;border:none;outline:none}.kbq-accordion-trigger .kbq-accordion-trigger__icon{box-sizing:initial;align-self:flex-start;padding:var(--kbq-size-xxs);transition:transform .3s ease-out}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionTrigger, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-accordion-trigger, [kbq-accordion-trigger]', imports: [KbqIcon], template: `
         <i
@@ -301,16 +296,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         ></i>
 
         <ng-content />
-    `, encapsulation: ViewEncapsulation.None, hostDirectives: [KbqAccordionTriggerDirective], host: {
+    `, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-accordion-trigger',
                         '[class.kbq-accordion-trigger_fill]': 'isFill',
                         '[class.kbq-accordion-trigger_hug]': 'isHug',
                         '[class.kbq-accordion-trigger_hug-space-between]': 'isHugSpaceBetween'
-                    }, styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center;background:transparent;border:none;outline:none}.kbq-accordion-trigger .kbq-accordion-trigger__icon{box-sizing:initial;align-self:flex-start;padding:var(--kbq-size-xxs);transition:transform .3s ease-out}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { icon: [{
-                type: ViewChild,
-                args: [KbqIcon]
-            }] } });
+                    }, hostDirectives: [KbqAccordionTriggerDirective], styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center;background:transparent;border:none;outline:none}.kbq-accordion-trigger .kbq-accordion-trigger__icon{box-sizing:initial;align-self:flex-start;padding:var(--kbq-size-xxs);transition:transform .3s ease-out}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqIcon), { isSignal: true }] }] } });
 
 let uniqueIdCounter = 0;
 class KbqAccordionItem {
@@ -322,9 +314,11 @@ class KbqAccordionItem {
         return this.expanded ? 'open' : 'closed';
     }
     get orientation() {
-        return this.accordion.orientation;
+        return this.accordion.orientation();
     }
     /** Whether the AccordionItem is expanded. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get expanded() {
         return this._expanded;
     }
@@ -334,6 +328,7 @@ class KbqAccordionItem {
             this._expanded = expanded;
             this.expandedChange.emit(expanded);
             if (expanded) {
+                // TODO: The 'emit' function requires a mandatory void argument
                 this.opened.emit();
                 /**
                  * In the unique selection dispatcher, the id parameter is the id of the KbqAccordionItem,
@@ -343,15 +338,18 @@ class KbqAccordionItem {
                 this.expansionDispatcher.notify(this.value, accordionId);
             }
             else {
+                // TODO: The 'emit' function requires a mandatory void argument
                 this.closed.emit();
             }
-            this.content.toggle();
+            this.content().toggle();
             this.accordion.saveItemState(this);
             // Ensures that the animation will run when the value is set outside of an `@Input`.
             // This includes cases like the open, close and toggle methods.
             this.changeDetectorRef.markForCheck();
         }
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     set value(value) {
         this._value = value;
     }
@@ -359,8 +357,10 @@ class KbqAccordionItem {
         return this._value || this.id;
     }
     /** Whether the AccordionItem is disabled. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
-        return this.accordion.disabled ?? this._disabled;
+        return this.accordion.disabled() ?? this._disabled;
     }
     set disabled(value) {
         this._disabled = value;
@@ -372,13 +372,19 @@ class KbqAccordionItem {
         this.changeDetectorRef = inject(ChangeDetectorRef);
         /** @docs-private */
         this.expansionDispatcher = inject(UniqueSelectionDispatcher);
+        /** @docs-private */
+        this.trigger = contentChild(KbqAccordionTriggerDirective, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+        /** @docs-private */
+        this.triggerComponent = contentChild(KbqAccordionTrigger, ...(ngDevMode ? [{ debugName: "triggerComponent" }] : []));
+        /** @docs-private */
+        this.content = contentChild(forwardRef(() => KbqAccordionContentDirective), ...(ngDevMode ? [{ debugName: "content" }] : []));
         this._id = `kbq-accordion-item-${uniqueIdCounter++}`;
         this._expanded = false;
         this._disabled = false;
         /** Event emitted every time the AccordionItem is closed. */
-        this.closed = new EventEmitter();
+        this.closed = output();
         /** Event emitted every time the AccordionItem is opened. */
-        this.opened = new EventEmitter();
+        this.opened = output();
         /**
          * Event emitted when the AccordionItem is destroyed.
          * @docs-private
@@ -389,7 +395,7 @@ class KbqAccordionItem {
          * Primarily used to facilitate two-way binding.
          * @docs-private
          */
-        this.expandedChange = new EventEmitter();
+        this.expandedChange = output();
         /** Subscription to openAll/closeAll events. */
         this.openCloseAllSubscription = Subscription.EMPTY;
         this.removeUniqueSelectionListener = this.expansionDispatcher.listen((id, accordionId) => {
@@ -410,15 +416,13 @@ class KbqAccordionItem {
     }
     /** Emits an event for the accordion item being destroyed. */
     ngOnDestroy() {
-        this.opened.complete();
-        this.closed.complete();
         this.destroyed.emit();
         this.destroyed.complete();
         this.removeUniqueSelectionListener();
         this.openCloseAllSubscription.unsubscribe();
     }
     focus() {
-        this.trigger.focus();
+        this.trigger()?.focus();
     }
     /** Toggles the expanded state of the accordion item. */
     toggle() {
@@ -445,12 +449,12 @@ class KbqAccordionItem {
         };
     }
     disableAnimation() {
-        this.content.disableAnimation();
-        this.triggerComponent.disableAnimation();
+        this.content()?.disableAnimation();
+        this.triggerComponent()?.disableAnimation();
     }
     enableAnimation() {
-        this.content.enableAnimation();
-        this.triggerComponent.enableAnimation();
+        this.content()?.enableAnimation();
+        this.triggerComponent()?.enableAnimation();
     }
     subscribeToOpenCloseAllActions() {
         return this.accordion.openCloseAllActions.subscribe((expanded) => {
@@ -460,10 +464,10 @@ class KbqAccordionItem {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: KbqAccordionItem, isStandalone: true, selector: "kbq-accordion-item, [kbq-accordion-item]", inputs: { expanded: ["expanded", "expanded", booleanAttribute], value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { closed: "closed", opened: "opened", expandedChange: "expandedChange" }, host: { properties: { "attr.data-state": "dataState", "attr.data-disabled": "disabled", "attr.data-orientation": "orientation" }, classAttribute: "kbq-accordion-item" }, queries: [{ propertyName: "trigger", first: true, predicate: KbqAccordionTriggerDirective, descendants: true }, { propertyName: "triggerComponent", first: true, predicate: KbqAccordionTrigger, descendants: true }, { propertyName: "content", first: true, predicate: i0.forwardRef(() => KbqAccordionContentDirective), descendants: true }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: KbqAccordionItem, isStandalone: true, selector: "kbq-accordion-item, [kbq-accordion-item]", inputs: { expanded: ["expanded", "expanded", booleanAttribute], value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { closed: "closed", opened: "opened", expandedChange: "expandedChange" }, host: { properties: { "attr.data-state": "dataState", "attr.data-disabled": "disabled", "attr.data-orientation": "orientation" }, classAttribute: "kbq-accordion-item" }, queries: [{ propertyName: "trigger", first: true, predicate: KbqAccordionTriggerDirective, descendants: true, isSignal: true }, { propertyName: "triggerComponent", first: true, predicate: KbqAccordionTrigger, descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: i0.forwardRef(() => KbqAccordionContentDirective), descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-item, [kbq-accordion-item]',
@@ -474,16 +478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[attr.data-orientation]': 'orientation'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { trigger: [{
-                type: ContentChild,
-                args: [KbqAccordionTriggerDirective, { descendants: true }]
-            }], triggerComponent: [{
-                type: ContentChild,
-                args: [KbqAccordionTrigger, { descendants: true }]
-            }], content: [{
-                type: ContentChild,
-                args: [forwardRef(() => KbqAccordionContentDirective), { descendants: true }]
-            }], expanded: [{
+        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqAccordionTriggerDirective), { isSignal: true }] }], triggerComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqAccordionTrigger), { isSignal: true }] }], content: [{ type: i0.ContentChild, args: [forwardRef(() => KbqAccordionContentDirective), { isSignal: true }] }], expanded: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], value: [{
@@ -491,13 +486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], closed: [{
-                type: Output
-            }], opened: [{
-                type: Output
-            }], expandedChange: [{
-                type: Output
-            }] } });
+            }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 class KbqAccordionContentDirective {
     /** @docs-private */
@@ -516,7 +505,7 @@ class KbqAccordionContentDirective {
         /** @docs-private */
         this.item = inject(KbqAccordionItem);
         /** @docs-private */
-        this.hidden = signal(true);
+        this.hidden = signal(true, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
         this.afterRenderRef = afterNextRender(() => {
             this.enableAnimation();
             this.afterRenderRef?.destroy();
@@ -544,14 +533,13 @@ class KbqAccordionContentDirective {
     enableAnimation() {
         this.nativeElement.style.transition = this.savedTransition;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqAccordionContentDirective, isStandalone: true, selector: "[kbqAccordionContent]", host: { listeners: { "transitionend": "toggle()" }, properties: { "attr.id": "contentId", "attr.role": "\"region\"", "attr.hidden": "hidden() ? \"\" : null", "attr.aria-labelledby": "triggerId", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["kbqAccordionContent"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAccordionContentDirective, isStandalone: true, selector: "[kbqAccordionContent]", host: { listeners: { "transitionend": "toggle()" }, properties: { "attr.id": "contentId", "attr.role": "\"region\"", "attr.hidden": "hidden() ? \"\" : null", "attr.aria-labelledby": "triggerId", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["kbqAccordionContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionContent]',
-                    exportAs: 'kbqAccordionContent',
                     host: {
                         '[attr.id]': 'contentId',
                         '[attr.role]': '"region"',
@@ -561,27 +549,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation',
                         '(transitionend)': 'toggle()'
-                    }
+                    },
+                    exportAs: 'kbqAccordionContent'
                 }]
         }], ctorParameters: () => [] });
 
 class KbqAccordionContent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqAccordionContent, isStandalone: true, selector: "kbq-accordion-content, [kbq-accordion-content]", host: { classAttribute: "kbq-accordion-content" }, hostDirectives: [{ directive: KbqAccordionContentDirective }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: KbqAccordionContent, isStandalone: true, selector: "kbq-accordion-content, [kbq-accordion-content]", host: { classAttribute: "kbq-accordion-content" }, hostDirectives: [{ directive: KbqAccordionContentDirective }], ngImport: i0, template: `
         <p><ng-content /></p>
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-accordion-content, [kbq-accordion-content]',
-                    hostDirectives: [KbqAccordionContentDirective],
                     template: `
         <p><ng-content /></p>
     `,
                     host: {
                         class: 'kbq-accordion-content'
-                    }
+                    },
+                    hostDirectives: [KbqAccordionContentDirective]
                 }]
         }] });
 
@@ -589,10 +578,10 @@ class KbqAccordionHeaderDirective {
     constructor() {
         this.item = inject(KbqAccordionItem);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqAccordionHeaderDirective, isStandalone: true, selector: "[kbqAccordionHeader]", host: { properties: { "attr.role": "\"heading\"", "attr.aria-level": "2", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAccordionHeaderDirective, isStandalone: true, selector: "[kbqAccordionHeader]", host: { properties: { "attr.role": "\"heading\"", "attr.aria-level": "2", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionHeader]',
@@ -607,23 +596,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }] });
 
 class KbqAccordionHeader {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqAccordionHeader, isStandalone: true, selector: "kbq-accordion-header, [kbq-accordion-header]", host: { classAttribute: "kbq-accordion-header" }, hostDirectives: [{ directive: KbqAccordionHeaderDirective }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAccordionHeader, isStandalone: true, selector: "kbq-accordion-header, [kbq-accordion-header]", host: { classAttribute: "kbq-accordion-header" }, hostDirectives: [{ directive: KbqAccordionHeaderDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-header, [kbq-accordion-header]',
-                    hostDirectives: [KbqAccordionHeaderDirective],
                     host: {
                         class: 'kbq-accordion-header'
-                    }
+                    },
+                    hostDirectives: [KbqAccordionHeaderDirective]
                 }]
         }] });
 
 class KbqAccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
             KbqAccordion,
             KbqAccordionContent,
             KbqAccordionHeader,
@@ -633,10 +622,10 @@ class KbqAccordionModule {
             KbqAccordionHeader,
             KbqAccordionItem,
             KbqAccordionTrigger] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
             KbqAccordionTrigger] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [