@koobiq/components 19.4.1 → 19.6.0

package/fesm2022/koobiq-components-accordion.mjs

@@ -1,64 +1,99 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, EventEmitter, booleanAttribute, Output, Input, forwardRef, ContentChildren, Directive, ElementRef, ChangeDetectorRef, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } 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 { KBQ_WINDOW, kbqInjectNativeElement } from '@koobiq/components/core';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import { Subject, merge, Subscription } from 'rxjs';
-import { FocusKeyManager, FocusMonitor } from '@angular/cdk/a11y';
+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 { KbqIcon } from '@koobiq/components/icon';
+import { Platform } from '@angular/cdk/platform';
 
-const KbqAccordionRootToken = new InjectionToken('KbqAccordionRootDirective');
-let nextId$1 = 0;
-class KbqAccordionRootDirective {
-    constructor() {
-        /** @docs-private */
-        this.selectionDispatcher = inject(UniqueSelectionDispatcher);
-        /** @docs-private */
-        this.dir = inject(Directionality, { optional: true });
-        /** @docs-private */
-        this.id = `kbq-accordion-${nextId$1++}`;
-        /** @docs-private */
-        this.openCloseAllActions = new Subject();
-        /** The orientation of the accordion. */
-        this.orientation = 'vertical';
-        /**
-         * Determines whether one or multiple items can be opened at the same time.
-         */
-        this.type = 'single';
-        /** @docs-private */
-        this.collapsible = true;
-        this.onValueChange = new EventEmitter();
-        this._defaultValue = [];
-    }
-    get isMultiple() {
-        return this.type === 'multiple';
-    }
+var KbqAccordionVariant;
+(function (KbqAccordionVariant) {
+    KbqAccordionVariant["fill"] = "fill";
+    KbqAccordionVariant["hug"] = "hug";
+    KbqAccordionVariant["hugSpaceBetween"] = "hugSpaceBetween";
+})(KbqAccordionVariant || (KbqAccordionVariant = {}));
+let uniqueIdCounter$1 = 0;
+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.
      */
+    get defaultValue() {
+        return this.isMultiple ? this._defaultValue : this._defaultValue[0];
+    }
     set defaultValue(value) {
         if (value !== this._defaultValue) {
             this._defaultValue = Array.isArray(value) ? value : [value];
         }
     }
-    get defaultValue() {
-        return this.isMultiple ? this._defaultValue : this._defaultValue[0];
-    }
     /** The controlled value of the item to expand */
+    get value() {
+        if (this._value === undefined) {
+            return this.defaultValue;
+        }
+        return this.isMultiple ? this._value : this._value[0];
+    }
     set value(value) {
         if (value !== this._value) {
             this._value = Array.isArray(value) ? value : [value];
             this.selectionDispatcher.notify(this.value, this.id);
         }
     }
-    get value() {
-        if (this._value === undefined) {
-            return this.defaultValue;
+    get id() {
+        return this._id;
+    }
+    get isMultiple() {
+        return this.type === 'multiple';
+    }
+    get hasSavedState() {
+        return typeof this.state === 'object' && this.state !== null;
+    }
+    constructor() {
+        this.isBrowser = inject(Platform).isBrowser;
+        this.localStorage = inject(KBQ_WINDOW)?.localStorage;
+        /** @docs-private */
+        this.focusMonitor = inject(FocusMonitor);
+        /** @docs-private */
+        this.elementRef = inject(ElementRef);
+        /** @docs-private */
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        /** @docs-private */
+        this.selectionDispatcher = inject(UniqueSelectionDispatcher);
+        /** @docs-private */
+        this.dir = inject(Directionality, { optional: true });
+        /** @docs-private */
+        this.openCloseAllActions = new Subject();
+        /** Specifies whether the accordion saves its states. Default is false */
+        this.useStateSaving = inject(new HostAttributeToken('useStateSaving'), { optional: true }) !== null;
+        this.variant = KbqAccordionVariant.fill;
+        /** The orientation of the accordion. */
+        this.orientation = 'vertical';
+        /** Determines whether one or multiple items can be opened at the same time. */
+        this.type = 'single';
+        this.collapsible = true;
+        this.onValueChange = new EventEmitter();
+        this._defaultValue = [];
+        this._id = `kbq-accordion-${uniqueIdCounter$1++}`;
+        if (this.useStateSaving) {
+            this.getSavedState();
         }
-        return this.isMultiple ? this._value : this._value[0];
     }
     ngAfterContentInit() {
-        this.selectionDispatcher.notify((this._value ?? this._defaultValue), this.id);
+        if (this._value) {
+            this.selectionDispatcher.notify(this._value, this.id);
+        }
+        else if (this.useStateSaving && this.hasSavedState) {
+            Object.keys(this.state).forEach((key) => {
+                if (this.state && this.state[key].expanded) {
+                    this.selectionDispatcher.notify(this.state[key].value, this.id);
+                }
+            });
+        }
+        else {
+            this.selectionDispatcher.notify(this._defaultValue, this.id);
+        }
         this.keyManager = new FocusKeyManager(this.items).withHomeAndEnd();
         if (this.orientation === 'horizontal') {
             this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');
@@ -68,12 +103,16 @@ class KbqAccordionRootDirective {
         }
         this.onValueChangeSubscription = merge(...this.items.map((item) => item.expandedChange)).subscribe(() => this.onValueChange.emit());
     }
+    ngAfterViewInit() {
+        this.focusMonitor.monitor(this.elementRef, true);
+    }
     ngOnDestroy() {
+        this.focusMonitor.stopMonitoring(this.elementRef);
         this.openCloseAllActions.complete();
         this.onValueChangeSubscription.unsubscribe();
     }
     /** @docs-private */
-    handleKeydown(event) {
+    keydownHandler(event) {
         if (!this.keyManager.activeItem) {
             this.keyManager.setFirstItemActive();
         }
@@ -101,17 +140,13 @@ class KbqAccordionRootDirective {
             this.keyManager.onKeydown(event);
         }
     }
-    /** Opens all enabled accordion items in an accordion where multi is enabled.
-     * @docs-private
-     */
+    /** Opens all enabled accordion items in an accordion where multi is enabled. */
     openAll() {
         if (this.isMultiple) {
             this.openCloseAllActions.next(true);
         }
     }
-    /** Closes all enabled accordion items.
-     * @docs-private
-     */
+    /** Closes all enabled accordion items. */
     closeAll() {
         this.openCloseAllActions.next(false);
     }
@@ -119,33 +154,43 @@ class KbqAccordionRootDirective {
     setActiveItem(item) {
         this.keyManager.setActiveItem(item);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.18", type: KbqAccordionRootDirective, isStandalone: true, selector: "[kbqAccordionRoot]", inputs: { disabled: ["disabled", "disabled", booleanAttribute], orientation: "orientation", defaultValue: "defaultValue", type: "type", collapsible: "collapsible", value: "value" }, outputs: { onValueChange: "onValueChange" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
-            { provide: KbqAccordionRootToken, useExisting: KbqAccordionRootDirective },
+    /** @docs-private */
+    saveItemState(item, force = true) {
+        if (!this.isBrowser || (!force && !!this.state && !!this.state[item.id]))
+            return;
+        this.state = this.state || {};
+        this.state[item.id] = item.getState();
+        this.localStorage.setItem(this.id, JSON.stringify(this.state));
+    }
+    getSavedState() {
+        if (!this.isBrowser)
+            return;
+        this.state = JSON.parse(this.localStorage.getItem(this.id));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.20", 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: [
             { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
-        ], queries: [{ propertyName: "items", predicate: i0.forwardRef(() => KbqAccordionItemDirective), descendants: true }], ngImport: i0 }); }
+        ], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionRootDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbqAccordionRoot]',
-                    providers: [
-                        { provide: KbqAccordionRootToken, useExisting: KbqAccordionRootDirective },
-                        { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
-                    ],
-                    host: {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordion, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-accordion, [kbq-accordion]', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'kbq-accordion',
                         '[attr.data-orientation]': 'orientation',
-                        '(keydown)': 'handleKeydown($event)'
-                    }
-                }]
-        }], propDecorators: { disabled: [{
+                        '(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: [{
+                type: Input
+            }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], orientation: [{
                 type: Input
-            }], items: [{
-                type: ContentChildren,
-                args: [forwardRef(() => KbqAccordionItemDirective), { descendants: true }]
             }], defaultValue: [{
                 type: Input
             }], type: [{
@@ -160,41 +205,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 class KbqAccordionTriggerDirective {
     constructor() {
-        this.nativeElement = inject(ElementRef).nativeElement;
-        this.accordionRoot = inject(KbqAccordionRootDirective);
-        this.item = inject(KbqAccordionItemDirective);
+        /** @docs-private */
+        this.nativeElement = kbqInjectNativeElement();
+        /** @docs-private */
+        this.accordion = inject(KbqAccordion);
+        /** @docs-private */
+        this.item = inject(KbqAccordionItem);
+    }
+    /** @docs-private */
+    get triggerId() {
+        return `${this.item.id}-trigger`;
+    }
+    /** @docs-private */
+    get contentId() {
+        return `${this.item.id}-content`;
     }
     /** Fires when trigger clicked */
     onClick() {
-        if (!this.accordionRoot.collapsible && this.item.expanded)
+        if (!this.accordion.collapsible && this.item.expanded)
             return;
         this.item.toggle();
-        this.accordionRoot.setActiveItem(this.item);
+        this.accordion.setActiveItem(this.item);
     }
+    /** @docs-private */
     focus() {
         this.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqAccordionTriggerDirective, isStandalone: true, selector: "[kbqAccordionTrigger]", host: { listeners: { "click": "onClick()" }, properties: { "attr.role": "\"button\"", "attr.aria-expanded": "item.expanded", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.disabled": "item.disabled ? \"\" : null", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", 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.18", ngImport: i0, type: KbqAccordionTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionTrigger]',
                     host: {
+                        '[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.disabled]': 'item.disabled ? "" : null',
                         '[attr.data-orientation]': 'item.orientation',
                         '(click)': 'onClick()'
                     }
                 }]
         }] });
 
-let nextId = 0;
-class KbqAccordionItemDirective {
+class KbqAccordionTrigger {
+    get isFill() {
+        return this.accordion.variant === KbqAccordionVariant.fill;
+    }
+    get isHug() {
+        return this.accordion.variant === KbqAccordionVariant.hug;
+    }
+    get isHugSpaceBetween() {
+        return this.accordion.variant === KbqAccordionVariant.hugSpaceBetween;
+    }
+    constructor() {
+        /** @docs-private */
+        this.nativeElement = kbqInjectNativeElement();
+        /** @docs-private */
+        this.accordion = inject(KbqAccordion);
+        this.afterRenderRef = afterNextRender(() => {
+            setTimeout(() => this.enableAnimation());
+            this.afterRenderRef?.destroy();
+        });
+    }
+    ngAfterViewInit() {
+        this.disableAnimation();
+    }
+    disableAnimation() {
+        this.savedTransition = this.icon.elementRef.nativeElement.style.transition;
+        this.icon.getHostElement().style.transition = 'none';
+    }
+    enableAnimation() {
+        this.icon.getHostElement().style.transition = this.savedTransition;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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: `
+        <i
+            kbq-icon="{{ isHugSpaceBetween ? 'kbq-chevron-down-s_16' : 'kbq-chevron-right-s_16' }}"
+            class="kbq-accordion-trigger__icon"
+        ></i>
+
+        <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.20", ngImport: i0, type: KbqAccordionTrigger, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-accordion-trigger, [kbq-accordion-trigger]', imports: [KbqIcon], template: `
+        <i
+            kbq-icon="{{ isHugSpaceBetween ? 'kbq-chevron-down-s_16' : 'kbq-chevron-right-s_16' }}"
+            class="kbq-accordion-trigger__icon"
+        ></i>
+
+        <ng-content />
+    `, encapsulation: ViewEncapsulation.None, hostDirectives: [KbqAccordionTriggerDirective], 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]
+            }] } });
+
+let uniqueIdCounter = 0;
+class KbqAccordionItem {
+    /** The unique AccordionItem id. */
+    get id() {
+        return this._id;
+    }
     get dataState() {
         return this.expanded ? 'open' : 'closed';
     }
@@ -202,6 +325,9 @@ class KbqAccordionItemDirective {
         return this.accordion.orientation;
     }
     /** Whether the AccordionItem is expanded. */
+    get expanded() {
+        return this._expanded;
+    }
     set expanded(expanded) {
         // Only emit events and update the internal value if the value changes.
         if (this._expanded !== expanded) {
@@ -210,7 +336,7 @@ class KbqAccordionItemDirective {
             if (expanded) {
                 this.opened.emit();
                 /**
-                 * In the unique selection dispatcher, the id parameter is the id of the CdkAccordionItem,
+                 * In the unique selection dispatcher, the id parameter is the id of the KbqAccordionItem,
                  * the name value is the id of the accordion.
                  */
                 const accordionId = this.accordion ? this.accordion.id : this.value;
@@ -219,14 +345,13 @@ class KbqAccordionItemDirective {
             else {
                 this.closed.emit();
             }
+            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();
         }
     }
-    get expanded() {
-        return this._expanded;
-    }
     set value(value) {
         this._value = value;
     }
@@ -234,24 +359,20 @@ class KbqAccordionItemDirective {
         return this._value || this.id;
     }
     /** Whether the AccordionItem is disabled. */
-    set disabled(value) {
-        this._disabled = value;
-    }
     get disabled() {
         return this.accordion.disabled ?? this._disabled;
     }
+    set disabled(value) {
+        this._disabled = value;
+    }
     constructor() {
         /** @docs-private */
-        this.accordion = inject(KbqAccordionRootToken, { skipSelf: true });
+        this.accordion = inject(KbqAccordion);
         /** @docs-private */
         this.changeDetectorRef = inject(ChangeDetectorRef);
         /** @docs-private */
         this.expansionDispatcher = inject(UniqueSelectionDispatcher);
-        /**
-         * The unique AccordionItem id.
-         * @docs-private
-         */
-        this.id = `kbq-accordion-item-${nextId++}`;
+        this._id = `kbq-accordion-item-${uniqueIdCounter++}`;
         this._expanded = false;
         this._disabled = false;
         /** Event emitted every time the AccordionItem is closed. */
@@ -285,6 +406,7 @@ class KbqAccordionItemDirective {
         if (this.accordion) {
             this.openCloseAllSubscription = this.subscribeToOpenCloseAllActions();
         }
+        this.accordion.saveItemState(this, false);
     }
     /** Emits an event for the accordion item being destroyed. */
     ngOnDestroy() {
@@ -301,7 +423,6 @@ class KbqAccordionItemDirective {
     /** Toggles the expanded state of the accordion item. */
     toggle() {
         if (!this.disabled) {
-            this.content.onToggle();
             this.expanded = !this.expanded;
         }
     }
@@ -317,6 +438,20 @@ class KbqAccordionItemDirective {
             this.expanded = true;
         }
     }
+    getState() {
+        return {
+            expanded: this.expanded,
+            value: this.value
+        };
+    }
+    disableAnimation() {
+        this.content.disableAnimation();
+        this.triggerComponent.disableAnimation();
+    }
+    enableAnimation() {
+        this.content.enableAnimation();
+        this.triggerComponent.enableAnimation();
+    }
     subscribeToOpenCloseAllActions() {
         return this.accordion.openCloseAllActions.subscribe((expanded) => {
             // Only change expanded state if item is enabled
@@ -325,28 +460,26 @@ class KbqAccordionItemDirective {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.18", type: KbqAccordionItemDirective, isStandalone: true, selector: "[kbqAccordionItem]", 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" } }, providers: [
-            { provide: KbqAccordionRootToken, useValue: undefined }
-        ], queries: [{ propertyName: "trigger", first: true, predicate: KbqAccordionTriggerDirective, descendants: true }, { propertyName: "content", first: true, predicate: i0.forwardRef(() => KbqAccordionContentDirective), descendants: true }], exportAs: ["kbqAccordionItem"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.20", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionItem, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kbqAccordionItem]',
-                    exportAs: 'kbqAccordionItem',
+                    selector: 'kbq-accordion-item, [kbq-accordion-item]',
                     host: {
+                        class: 'kbq-accordion-item',
                         '[attr.data-state]': 'dataState',
                         '[attr.data-disabled]': 'disabled',
                         '[attr.data-orientation]': 'orientation'
-                    },
-                    providers: [
-                        { provide: KbqAccordionRootToken, useValue: undefined }
-                    ]
+                    }
                 }]
         }], ctorParameters: () => [], propDecorators: { trigger: [{
                 type: ContentChild,
                 args: [KbqAccordionTriggerDirective, { descendants: true }]
+            }], triggerComponent: [{
+                type: ContentChild,
+                args: [KbqAccordionTrigger, { descendants: true }]
             }], content: [{
                 type: ContentChild,
                 args: [forwardRef(() => KbqAccordionContentDirective), { descendants: true }]
@@ -367,52 +500,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 class KbqAccordionContentDirective {
+    /** @docs-private */
+    get contentId() {
+        return `${this.item.id}-content`;
+    }
+    /** @docs-private */
+    get triggerId() {
+        return `${this.item.id}-trigger`;
+    }
     constructor() {
-        this.item = inject(KbqAccordionItemDirective);
-        this.nativeElement = inject(ElementRef).nativeElement;
-        this.hidden = false;
+        this.renderer = inject(Renderer2);
+        /** @docs-private */
+        this.nativeElement = kbqInjectNativeElement();
+        /** @docs-private */
+        this.item = inject(KbqAccordionItem);
+        /** @docs-private */
+        this.hidden = signal(true);
+        this.afterRenderRef = afterNextRender(() => {
+            this.enableAnimation();
+            this.afterRenderRef?.destroy();
+        });
+    }
+    ngAfterViewInit() {
+        this.disableAnimation();
     }
-    onAnimationEnd() {
-        this.hidden = !this.item.expanded;
+    ngAfterContentInit() {
         const { height, width } = this.nativeElement.getBoundingClientRect();
-        this.nativeElement.style.setProperty('--radix-collapsible-content-height', `${height}px`);
-        this.nativeElement.style.setProperty('--radix-collapsible-content-width', `${width}px`);
-        this.nativeElement.style.setProperty('--radix-accordion-content-height', 'var(--radix-collapsible-content-height)');
-        this.nativeElement.style.setProperty('--radix-accordion-content-width', 'var(--radix-collapsible-content-width)');
-    }
-    onToggle() {
-        if (!this.item.expanded) {
-            this.hidden = false;
-        }
+        this.renderer.setProperty(this.nativeElement, 'style', `
+            --radix-accordion-content-height: ${height}px;
+            --radix-accordion-content-width: ${width}px;
+        `);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqAccordionContentDirective, isStandalone: true, selector: "[kbqAccordionContent]", host: { listeners: { "animationend": "onAnimationEnd()" }, properties: { "attr.role": "\"region\"", "style.display": "hidden ? \"none\" : \"\"", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["kbqAccordionContent"], ngImport: i0 }); }
+    toggle() {
+        this.hidden.set(!this.item.expanded);
+    }
+    disableAnimation() {
+        this.savedTransition = this.nativeElement.style.transition;
+        this.nativeElement.style.transition = 'none';
+    }
+    enableAnimation() {
+        this.nativeElement.style.transition = this.savedTransition;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", 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.18", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionContent]',
                     exportAs: 'kbqAccordionContent',
                     host: {
+                        '[attr.id]': 'contentId',
                         '[attr.role]': '"region"',
-                        '[style.display]': 'hidden ? "none" : ""',
+                        '[attr.hidden]': 'hidden() ? "" : null',
+                        '[attr.aria-labelledby]': 'triggerId',
                         '[attr.data-state]': 'item.dataState',
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation',
-                        '(animationend)': 'onAnimationEnd()'
+                        '(transitionend)': 'toggle()'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class KbqAccordionContent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqAccordionContent, isStandalone: true, selector: "kbq-accordion-content, [kbq-accordion-content]", host: { classAttribute: "kbq-accordion-content" }, hostDirectives: [{ directive: KbqAccordionContentDirective }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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.18", ngImport: i0, type: KbqAccordionContent, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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'
                     }
@@ -421,16 +584,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 class KbqAccordionHeaderDirective {
     constructor() {
-        this.item = inject(KbqAccordionItemDirective);
+        this.item = inject(KbqAccordionItem);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqAccordionHeaderDirective, isStandalone: true, selector: "[kbqAccordionHeader]", host: { properties: { "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: "19.2.20", ngImport: i0, type: KbqAccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", 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.18", ngImport: i0, type: KbqAccordionHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionHeader]',
                     host: {
+                        '[attr.role]': '"heading"',
+                        '[attr.aria-level]': '2',
                         '[attr.data-state]': 'item.dataState',
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation'
@@ -439,10 +604,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }] });
 
 class KbqAccordionHeader {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", 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: "19.2.20", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", 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.18", ngImport: i0, type: KbqAccordionHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-header, [kbq-accordion-header]',
@@ -453,110 +618,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }] });
 
-class KbqAccordionItem {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqAccordionItem, isStandalone: true, selector: "kbq-accordion-item, [kbq-accordion-item]", host: { classAttribute: "kbq-accordion-item" }, hostDirectives: [{ directive: KbqAccordionItemDirective, inputs: ["expanded", "expanded", "disabled", "disabled", "value", "value"], outputs: ["closed", "closed", "opened", "opened", "expandedChange", "expandedChange"] }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionItem, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-accordion-item, [kbq-accordion-item]',
-                    hostDirectives: [
-                        {
-                            directive: KbqAccordionItemDirective,
-                            inputs: ['expanded', 'disabled', 'value'],
-                            outputs: ['closed', 'opened', 'expandedChange']
-                        }
-                    ],
-                    host: {
-                        class: 'kbq-accordion-item'
-                    }
-                }]
-        }] });
-
-var KbqAccordionVariant;
-(function (KbqAccordionVariant) {
-    KbqAccordionVariant["fill"] = "fill";
-    KbqAccordionVariant["hug"] = "hug";
-    KbqAccordionVariant["hugSpaceBetween"] = "hugSpaceBetween";
-})(KbqAccordionVariant || (KbqAccordionVariant = {}));
-class KbqAccordion {
-    constructor() {
-        this.focusMonitor = inject(FocusMonitor);
-        this.elementRef = inject(ElementRef);
-        this.variant = KbqAccordionVariant.fill;
-    }
-    ngAfterViewInit() {
-        this.focusMonitor.monitor(this.elementRef, true);
-    }
-    ngOnDestroy() {
-        this.focusMonitor.stopMonitoring(this.elementRef);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KbqAccordion, isStandalone: true, selector: "kbq-accordion, [kbq-accordion]", inputs: { variant: "variant" }, host: { classAttribute: "kbq-accordion" }, hostDirectives: [{ directive: KbqAccordionRootDirective, inputs: ["type", "type", "collapsible", "collapsible", "disabled", "disabled", "defaultValue", "defaultValue", "value", "value"], outputs: ["onValueChange", "onValueChange"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@keyframes slideDown{0%{height:0;padding-bottom:0}to{height:var(--radix-accordion-content-height);padding-bottom:0}}@keyframes slideUp{0%{height:var(--radix-accordion-content-height);padding-bottom:0}to{height:0;padding-bottom:0}}.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;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{animation:slideDown .3s ease-out}.kbq-accordion-content[data-state=closed]{animation:slideUp .3s ease-out}.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.18", ngImport: i0, type: KbqAccordion, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-accordion, [kbq-accordion]', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
-                        {
-                            directive: KbqAccordionRootDirective,
-                            inputs: ['type', 'collapsible', 'disabled', 'defaultValue', 'value'],
-                            outputs: ['onValueChange']
-                        }
-                    ], host: {
-                        class: 'kbq-accordion'
-                    }, styles: ["@keyframes slideDown{0%{height:0;padding-bottom:0}to{height:var(--radix-accordion-content-height);padding-bottom:0}}@keyframes slideUp{0%{height:var(--radix-accordion-content-height);padding-bottom:0}to{height:0;padding-bottom:0}}.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;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{animation:slideDown .3s ease-out}.kbq-accordion-content[data-state=closed]{animation:slideUp .3s ease-out}.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"] }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }] } });
-
-class KbqAccordionTrigger {
-    constructor() {
-        this.accordion = inject(KbqAccordion);
-    }
-    get isFill() {
-        return this.accordion.variant === KbqAccordionVariant.fill;
-    }
-    get isHug() {
-        return this.accordion.variant === KbqAccordionVariant.hug;
-    }
-    get isHugSpaceBetween() {
-        return this.accordion.variant === KbqAccordionVariant.hugSpaceBetween;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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" }, hostDirectives: [{ directive: KbqAccordionTriggerDirective }], ngImport: i0, template: `
-        @if (isHugSpaceBetween) {
-            <i class="kbq-accordion-trigger__icon" kbq-icon="kbq-chevron-down-s_16"></i>
-        } @else {
-            <i class="kbq-accordion-trigger__icon" kbq-icon="kbq-chevron-right-s_16"></i>
-        }
-
-        <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.18", ngImport: i0, type: KbqAccordionTrigger, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-accordion-trigger, [kbq-accordion-trigger]', imports: [
-                        KbqIcon
-                    ], template: `
-        @if (isHugSpaceBetween) {
-            <i class="kbq-accordion-trigger__icon" kbq-icon="kbq-chevron-down-s_16"></i>
-        } @else {
-            <i class="kbq-accordion-trigger__icon" kbq-icon="kbq-chevron-right-s_16"></i>
-        }
-
-        <ng-content />
-    `, encapsulation: ViewEncapsulation.None, hostDirectives: [KbqAccordionTriggerDirective], 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"] }]
-        }] });
-
 class KbqAccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
             KbqAccordion,
             KbqAccordionContent,
             KbqAccordionHeader,
@@ -566,10 +630,10 @@ class KbqAccordionModule {
             KbqAccordionHeader,
             KbqAccordionItem,
             KbqAccordionTrigger] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
             KbqAccordionTrigger] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -594,5 +658,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KbqAccordion, KbqAccordionContent, KbqAccordionContentDirective, KbqAccordionHeader, KbqAccordionHeaderDirective, KbqAccordionItem, KbqAccordionItemDirective, KbqAccordionModule, KbqAccordionRootDirective, KbqAccordionRootToken, KbqAccordionTrigger, KbqAccordionTriggerDirective, KbqAccordionVariant };
+export { KbqAccordion, KbqAccordionContent, KbqAccordionContentDirective, KbqAccordionHeader, KbqAccordionHeaderDirective, KbqAccordionItem, KbqAccordionModule, KbqAccordionTrigger, KbqAccordionTriggerDirective, KbqAccordionVariant };
 //# sourceMappingURL=koobiq-components-accordion.mjs.map