@koobiq/components 20.1.0 → 20.2.0

package/fesm2022/koobiq-components-accordion.mjs

@@ -1,200 +1,91 @@
-import * as i0 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';
-import { Subject, merge, Subscription } from 'rxjs';
-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';
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { ENTER, SPACE } from '@angular/cdk/keycodes';
+import * as i0 from '@angular/core';
+import { inject, Renderer2, signal, afterNextRender, RendererStyleFlags2, Directive, viewChild, ViewEncapsulation, Component, ChangeDetectorRef, contentChild, forwardRef, input, computed, output, booleanAttribute, Input, Injectable, InjectionToken, ElementRef, Injector, contentChildren, numberAttribute, effect, untracked, isDevMode, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Subscription, Subject } from 'rxjs';
+import { kbqInjectNativeElement, KBQ_WINDOW } from '@koobiq/components/core';
+import { KbqIcon } from '@koobiq/components/icon';
+import { Platform } from '@angular/cdk/platform';
 
-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.
-     */
-    // 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];
-    }
-    set defaultValue(value) {
-        if (value !== this._defaultValue) {
-            this._defaultValue = Array.isArray(value) ? value : [value];
-        }
-    }
-    /** 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;
-        }
-        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 id() {
-        return this._id;
-    }
-    get isMultiple() {
-        return this.type() === 'multiple';
+class KbqAccordionContentDirective {
+    /** @docs-private */
+    get contentId() {
+        return `${this.item.id}-content`;
     }
-    get hasSavedState() {
-        return typeof this.state === 'object' && this.state !== null;
+    /** @docs-private */
+    get triggerId() {
+        return `${this.item.id}-trigger`;
     }
     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);
+        this.renderer = inject(Renderer2);
         /** @docs-private */
-        this.selectionDispatcher = inject(UniqueSelectionDispatcher);
+        this.nativeElement = kbqInjectNativeElement();
         /** @docs-private */
-        this.dir = inject(Directionality, { optional: true });
+        this.item = inject(KbqAccordionItem);
         /** @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 = 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 = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
-        /** Determines whether one or multiple items can be opened at the same time. */
-        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) {
-            this.getSavedState();
-        }
-    }
-    ngAfterContentInit() {
-        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');
-        }
-        else {
-            this.keyManager.withVerticalOrientation();
-        }
-        this.onValueChangeSubscription = merge(...this.items().map((item) => outputToObservable(item.expandedChange))).subscribe(() => this.onValueChange.emit());
+        this.hidden = signal(true, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+        /** Whether the first browser render has happened, i.e. whether the content can be measured. */
+        this.rendered = false;
+        // `afterNextRender` never runs on the server, so no platform check is needed here.
+        this.afterRenderRef = afterNextRender(() => {
+            this.rendered = true;
+            this.updateHeight();
+            this.enableAnimation();
+            this.afterRenderRef?.destroy();
+        });
     }
     ngAfterViewInit() {
-        this.focusMonitor.monitor(this.elementRef, true);
-    }
-    ngOnDestroy() {
-        this.focusMonitor.stopMonitoring(this.elementRef);
-        this.openCloseAllActions.complete();
-        this.onValueChangeSubscription.unsubscribe();
-    }
-    /** @docs-private */
-    keydownHandler(event) {
-        if (!this.keyManager.activeItem) {
-            this.keyManager.setFirstItemActive();
-        }
-        const activeItem = this.keyManager.activeItem;
-        if ((event.keyCode === ENTER || event.keyCode === SPACE) &&
-            !this.keyManager.isTyping() &&
-            activeItem &&
-            !activeItem.disabled) {
-            event.preventDefault();
-            activeItem.toggle();
-        }
-        else if (event.keyCode === TAB && event.shiftKey) {
-            if (this.keyManager.activeItemIndex === 0)
-                return;
-            this.keyManager.setPreviousItemActive();
-            event.preventDefault();
-        }
-        else if (event.keyCode === TAB) {
-            if (this.keyManager.activeItemIndex === this.items().length - 1)
-                return;
-            this.keyManager.setNextItemActive();
-            event.preventDefault();
-        }
-        else {
-            this.keyManager.onKeydown(event);
-        }
+        this.disableAnimation();
     }
-    /** Opens all enabled accordion items in an accordion where multi is enabled. */
-    openAll() {
-        if (this.isMultiple) {
-            this.openCloseAllActions.next(true);
+    toggle() {
+        // Re-measure while the content is still collapsed. Its natural height depends on the width
+        // it is finally laid out at, and that width is not known at first render when the accordion
+        // lives in a container sized afterwards (sidepanel, overlay, responsive layout).
+        if (this.rendered && this.item.expanded && this.hidden()) {
+            this.updateHeight();
         }
+        this.hidden.set(!this.item.expanded);
     }
-    /** Closes all enabled accordion items. */
-    closeAll() {
-        this.openCloseAllActions.next(false);
-    }
-    /** @docs-private */
-    setActiveItem(item) {
-        this.keyManager.setActiveItem(item);
+    disableAnimation() {
+        this.savedTransition = this.nativeElement.style.transition;
+        this.nativeElement.style.transition = 'none';
     }
-    /** @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));
+    enableAnimation() {
+        this.nativeElement.style.transition = this.savedTransition;
     }
-    getSavedState() {
-        if (!this.isBrowser)
-            return;
-        this.state = JSON.parse(this.localStorage.getItem(this.id));
+    /**
+     * Publishes the natural height of the projected content as `--kbq-accordion-content-height`,
+     * which the open state animates towards.
+     *
+     * `scrollHeight` is used rather than `getBoundingClientRect()`: the host is `overflow: hidden`
+     * and collapsed to `height: 0` while closed, so its box reports `0`, whereas `scrollHeight`
+     * still reports the height of the content it clips.
+     */
+    updateHeight() {
+        this.renderer.setStyle(this.nativeElement, '--kbq-accordion-content-height', `${this.nativeElement.scrollHeight}px`, RendererStyleFlags2.DashCase);
     }
-    /** @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, 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:height .3s ease-out;height:var(--radix-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.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 }); }
+    /** @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: "20.3.25", ngImport: i0, type: KbqAccordion, decorators: [{
-            type: Component,
-            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()',
-                        '(keydown)': 'keydownHandler($event)'
-                    }, 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:height .3s ease-out;height:var(--radix-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.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
-            }], 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
-            }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqAccordionContent]',
+                    host: {
+                        '[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',
+                        '(transitionend)': 'toggle()'
+                    },
+                    exportAs: 'kbqAccordionContent'
+                }]
+        }], ctorParameters: () => [] });
 
 class KbqAccordionTriggerDirective {
     constructor() {
@@ -220,12 +111,20 @@ class KbqAccordionTriggerDirective {
         this.item.toggle();
         this.accordion.setActiveItem(this.item);
     }
+    /**
+     * Keeps the accordion's key manager in sync with native focus so that arrow-key navigation
+     * continues from the header the user has just tabbed/focused into.
+     * @docs-private
+     */
+    onFocus() {
+        this.accordion.setActiveItem(this.item);
+    }
     /** @docs-private */
     focus() {
         this.nativeElement.focus();
     }
     /** @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 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAccordionTriggerDirective, isStandalone: true, selector: "[kbqAccordionTrigger]", host: { listeners: { "click": "onClick()", "focus": "onFocus()" }, 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: "20.3.25", ngImport: i0, type: KbqAccordionTriggerDirective, decorators: [{
             type: Directive,
@@ -240,20 +139,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '[attr.data-state]': 'item.dataState',
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation',
-                        '(click)': 'onClick()'
+                        '(click)': 'onClick()',
+                        '(focus)': 'onFocus()'
                     }
                 }]
         }] });
 
 class KbqAccordionTrigger {
     get isFill() {
-        return this.accordion.variant() === KbqAccordionVariant.fill;
+        return this.accordion.variant() === 'fill';
     }
     get isHug() {
-        return this.accordion.variant() === KbqAccordionVariant.hug;
+        return this.accordion.variant() === 'hug';
     }
     get isHugSpaceBetween() {
-        return this.accordion.variant() === KbqAccordionVariant.hugSpaceBetween;
+        return this.accordion.variant() === 'hugSpaceBetween';
     }
     constructor() {
         /** @docs-private */
@@ -263,13 +163,16 @@ class KbqAccordionTrigger {
         /** @docs-private */
         this.icon = viewChild.required(KbqIcon);
         this.afterRenderRef = afterNextRender(() => {
-            setTimeout(() => this.enableAnimation());
+            this.animationTimerId = setTimeout(() => this.enableAnimation());
             this.afterRenderRef?.destroy();
         });
     }
     ngAfterViewInit() {
         this.disableAnimation();
     }
+    ngOnDestroy() {
+        clearTimeout(this.animationTimerId);
+    }
     disableAnimation() {
         this.savedTransition = this.icon().elementRef.nativeElement.style.transition;
         this.icon().getHostElement().style.transition = 'none';
@@ -285,7 +188,7 @@ class KbqAccordionTrigger {
         ></i>
 
         <ng-content />
-    `, isInline: true, styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center}.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.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)}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 }); }
+    `, isInline: true, styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center}.kbq-accordion-trigger .kbq-accordion-trigger__icon{box-sizing:initial;align-self:flex-start;padding:var(--kbq-size-xxs);transition:transform .3s ease-out}@media(prefers-reduced-motion:reduce){.kbq-accordion-trigger .kbq-accordion-trigger__icon{transition:none}}.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.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)}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-border-width: 2px;--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: "20.3.25", ngImport: i0, type: KbqAccordionTrigger, decorators: [{
             type: Component,
@@ -301,24 +204,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '[class.kbq-accordion-trigger_fill]': 'isFill',
                         '[class.kbq-accordion-trigger_hug]': 'isHug',
                         '[class.kbq-accordion-trigger_hug-space-between]': 'isHugSpaceBetween'
-                    }, hostDirectives: [KbqAccordionTriggerDirective], styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center}.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.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)}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"] }]
+                    }, hostDirectives: [KbqAccordionTriggerDirective], styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center}.kbq-accordion-trigger .kbq-accordion-trigger__icon{box-sizing:initial;align-self:flex-start;padding:var(--kbq-size-xxs);transition:transform .3s ease-out}@media(prefers-reduced-motion:reduce){.kbq-accordion-trigger .kbq-accordion-trigger__icon{transition:none}}.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.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)}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-border-width: 2px;--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;
+let uniqueIdCounter$1 = 0;
 class KbqAccordionItem {
     /** The unique AccordionItem id. */
     get id() {
         return this._id;
     }
+    /** The current open/closed state of the item. @docs-private */
     get dataState() {
         return this.expanded ? 'open' : 'closed';
     }
+    /** The layout orientation inherited from the parent accordion. @docs-private */
     get 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.
+    // Kept as an `@Input` accessor (not `model()`): the setter runs a synchronous side-effect
+    // cascade (emits opened/closed/expandedChange, notifies the selection dispatcher, toggles the
+    // content and persists state) that sibling items rely on within the same change-detection tick.
     get expanded() {
         return this._expanded;
     }
@@ -334,33 +240,26 @@ class KbqAccordionItem {
                  * 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;
-                this.expansionDispatcher.notify(this.value, accordionId);
+                this.expansionDispatcher.notify(this.value(), this.accordion.id);
             }
             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;
-    }
-    get value() {
-        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.
+    // Kept as an `@Input` accessor (not a signal): `KbqAccordionItem` is a `FocusKeyManager` option,
+    // and `ListKeyManagerOption.disabled` (core/a11y/key-manager) is read as a plain `boolean` — a
+    // signal function is always truthy, which makes the key manager treat every item as disabled.
+    // The getter also merges the item's own state with the parent accordion's (an effective value).
     get disabled() {
-        return this.accordion.disabled() ?? this._disabled;
+        return this.accordion.disabled() || this._disabled;
     }
     set disabled(value) {
         this._disabled = value;
@@ -378,20 +277,23 @@ class KbqAccordionItem {
         this.triggerComponent = contentChild(KbqAccordionTrigger, ...(ngDevMode ? [{ debugName: "triggerComponent" }] : []));
         /** @docs-private */
         this.content = contentChild(forwardRef(() => KbqAccordionContentDirective), ...(ngDevMode ? [{ debugName: "content" }] : []));
-        this._id = `kbq-accordion-item-${uniqueIdCounter++}`;
+        this._id = `kbq-accordion-item-${uniqueIdCounter$1++}`;
         this._expanded = false;
+        /**
+         * The item's own `value` input. Must stay `public`: a `protected` input cannot be bound from a
+         * consumer template (TS2445 under full AOT template type-checking).
+         * @docs-private
+         */
+        this.valueInput = input('', ...(ngDevMode ? [{ debugName: "valueInput", alias: 'value' }] : [{ alias: 'value' }]));
+        /** The item's effective value — its own value, or the item id when none is provided. */
+        this.value = computed(() => this.valueInput() || this.id, ...(ngDevMode ? [{ debugName: "value" }] : []));
         this._disabled = false;
         /** Event emitted every time the AccordionItem is closed. */
         this.closed = output();
         /** Event emitted every time the AccordionItem is opened. */
         this.opened = output();
         /**
-         * Event emitted when the AccordionItem is destroyed.
-         * @docs-private
-         */
-        this.destroyed = new EventEmitter();
-        /**
-         * Emits whenever the expanded state of the accordion changes.
+         * Emits whenever the expanded state of the accordion item changes.
          * Primarily used to facilitate two-way binding.
          * @docs-private
          */
@@ -399,28 +301,36 @@ class KbqAccordionItem {
         /** Subscription to openAll/closeAll events. */
         this.openCloseAllSubscription = Subscription.EMPTY;
         this.removeUniqueSelectionListener = this.expansionDispatcher.listen((id, accordionId) => {
-            if (this.accordion.isMultiple) {
-                if (this.accordion.id === accordionId && id.includes(this.value)) {
+            if (this.accordion.id !== accordionId)
+                return;
+            // The dispatcher payload is a single value (individual toggle / single-mode value) or an
+            // array (controlled `[value]`, default value and restored state). Match exactly to avoid
+            // substring collisions (e.g. `item-10` must not open `item-1`).
+            const value = id;
+            const ownValue = this.value();
+            if (Array.isArray(value)) {
+                // Sync to array membership: opens members, closes non-members.
+                this.expanded = value.includes(ownValue);
+            }
+            else if (this.accordion.isMultiple) {
+                // Individual toggle in multiple mode: only the matching item opens; others stay independent.
+                if (value === ownValue) {
                     this.expanded = true;
                 }
             }
             else {
-                this.expanded = this.accordion.id === accordionId && id.includes(this.value);
+                // Individual toggle / controlled value in single mode: exactly one item stays open.
+                this.expanded = value === ownValue;
             }
         });
         // When an accordion item is hosted in an accordion, subscribe to open/close events.
-        if (this.accordion) {
-            this.openCloseAllSubscription = this.subscribeToOpenCloseAllActions();
-        }
-        this.accordion.saveItemState(this, false);
+        this.openCloseAllSubscription = this.subscribeToOpenCloseAllActions();
     }
-    /** Emits an event for the accordion item being destroyed. */
     ngOnDestroy() {
-        this.destroyed.emit();
-        this.destroyed.complete();
         this.removeUniqueSelectionListener();
         this.openCloseAllSubscription.unsubscribe();
     }
+    /** Moves focus to the item's trigger. */
     focus() {
         this.trigger()?.focus();
     }
@@ -442,16 +352,19 @@ class KbqAccordionItem {
             this.expanded = true;
         }
     }
+    /** Returns a snapshot of the item's current persisted state. @docs-private */
     getState() {
         return {
             expanded: this.expanded,
-            value: this.value
+            value: this.value()
         };
     }
+    /** Disables the open/close animation of the item's content and chevron. @docs-private */
     disableAnimation() {
         this.content()?.disableAnimation();
         this.triggerComponent()?.disableAnimation();
     }
+    /** Restores the open/close animation of the item's content and chevron. @docs-private */
     enableAnimation() {
         this.content()?.enableAnimation();
         this.triggerComponent()?.enableAnimation();
@@ -465,7 +378,7 @@ class KbqAccordionItem {
         });
     }
     /** @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 }); }
+    /** @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: { classPropertyName: "expanded", publicName: "expanded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: 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: "20.3.25", ngImport: i0, type: KbqAccordionItem, decorators: [{
             type: Directive,
@@ -481,92 +394,293 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], 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: [{
-                type: Input
-            }], disabled: [{
+            }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
-class KbqAccordionContentDirective {
-    /** @docs-private */
-    get contentId() {
-        return `${this.item.id}-content`;
+/**
+ * Default `KbqAccordionStateStore` implementation backed by `localStorage`.
+ *
+ * All access is guarded so it is safe on the server (SSR) and in environments where storage
+ * throws on access (private mode, sandboxed iframes) or contains corrupt JSON.
+ */
+class KbqAccordionLocalStorageStateStore {
+    constructor() {
+        this.isBrowser = inject(Platform).isBrowser;
+        this.window = inject(KBQ_WINDOW);
     }
-    /** @docs-private */
-    get triggerId() {
-        return `${this.item.id}-trigger`;
+    getState(key) {
+        if (!this.isBrowser)
+            return null;
+        try {
+            const raw = this.window.localStorage.getItem(key);
+            return raw ? JSON.parse(raw) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    setState(key, state) {
+        if (!this.isBrowser)
+            return;
+        try {
+            this.window.localStorage.setItem(key, JSON.stringify(state));
+        }
+        catch {
+            // Ignore storage write failures (quota exceeded, disabled/blocked storage, etc.).
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionLocalStorageStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionLocalStorageStateStore, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionLocalStorageStateStore, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Injection token for the store used to persist accordion state while `useStateSaving` is enabled.
+ * Defaults to a `localStorage`-backed implementation (`KbqAccordionLocalStorageStateStore`).
+ */
+const KBQ_ACCORDION_STATE_STORE = new InjectionToken('KBQ_ACCORDION_STATE_STORE', {
+    providedIn: 'root',
+    factory: () => inject(KbqAccordionLocalStorageStateStore)
+});
+
+let uniqueIdCounter = 0;
+class KbqAccordion {
+    /** The unique id of this accordion. */
+    get id() {
+        return this._id;
+    }
+    /** Whether multiple items can be expanded at the same time. */
+    get isMultiple() {
+        return this.type() === 'multiple';
+    }
+    /** Whether a persisted state exists for this accordion. */
+    get hasSavedState() {
+        return typeof this.state === 'object' && this.state !== null;
     }
     constructor() {
-        this.renderer = inject(Renderer2);
-        this.platform = inject(Platform);
         /** @docs-private */
-        this.nativeElement = kbqInjectNativeElement();
+        this.focusMonitor = inject(FocusMonitor);
         /** @docs-private */
-        this.item = inject(KbqAccordionItem);
+        this.elementRef = inject(ElementRef);
         /** @docs-private */
-        this.hidden = signal(true, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
-        this.afterRenderRef = afterNextRender(() => {
-            this.enableAnimation();
-            this.afterRenderRef?.destroy();
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        /** @docs-private */
+        this.selectionDispatcher = inject(UniqueSelectionDispatcher);
+        /** @docs-private */
+        this.dir = inject(Directionality, { optional: true });
+        this.injector = inject(Injector);
+        this.stateStore = inject(KBQ_ACCORDION_STATE_STORE);
+        /** Emits every time `openAll()` or `closeAll()` is called. @docs-private */
+        this.openCloseAllActions = new Subject();
+        /** The accordion items projected into this accordion. @docs-private */
+        this.items = contentChildren(forwardRef(() => KbqAccordionItem), ...(ngDevMode ? [{ debugName: "items", descendants: true }] : [{ descendants: true }]));
+        /** Whether the accordion persists the expanded state of its items across reloads. Defaults to `false`. */
+        this.useStateSaving = input(false, ...(ngDevMode ? [{ debugName: "useStateSaving", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * A stable, consumer-provided key used to persist state when `useStateSaving` is enabled.
+         * Strongly recommended: without it the accordion falls back to an auto-generated,
+         * instantiation-order-dependent id that is unreliable under lazy/conditional/reordered rendering.
+         */
+        this.stateSavingKey = input('', ...(ngDevMode ? [{ debugName: "stateSavingKey" }] : []));
+        /** The visual variant of the accordion. Defaults to `fill`. */
+        this.variant = input('fill', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        /** Whether the whole accordion is disabled. */
+        this.disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** The layout orientation of the accordion. Defaults to `vertical`. */
+        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        /**
+         * The `aria-level` applied to the item headings. Defaults to `2`.
+         * Set it to match the surrounding document outline (e.g. `3` when nested under an `<h2>` section).
+         */
+        this.level = input(2, ...(ngDevMode ? [{ debugName: "level", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * The value of the item(s) to expand when initially rendered.
+         * Use when you do not need to control the state of the items.
+         */
+        this.defaultValue = input([], ...(ngDevMode ? [{ debugName: "defaultValue" }] : []));
+        /** Determines whether one or multiple items can be expanded at the same time. */
+        this.type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        /** Whether an expanded item can be collapsed by the user. Defaults to `true`. */
+        this.collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+        /**
+         * The raw controlled `value` input. Must stay `public`: a `protected` input cannot be bound from
+         * a consumer template (TS2445 under full AOT template type-checking).
+         * @docs-private
+         */
+        // `input()` (not `model()`): a `model()` would auto-create a colliding `valueChange` output.
+        this.valueInput = input(undefined, ...(ngDevMode ? [{ debugName: "valueInput", alias: 'value' }] : [{ alias: 'value' }]));
+        /**
+         * The controlled value of the item(s) to expand, reshaped by mode. Supports `[(value)]`.
+         * Falls back to `defaultValue` while `value` is unbound.
+         *
+         * Always an array in `multiple` mode and always a string in `single` mode — an empty string
+         * when nothing is expanded, matching what `valueChange` emits.
+         */
+        this.value = computed(() => {
+            const value = this.valueInput() ?? this.defaultValue();
+            const array = Array.isArray(value) ? value : [value];
+            return this.isMultiple ? array : (array[0] ?? '');
+        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        /** Emits the current value whenever the expanded state of the accordion changes. */
+        this.valueChange = output();
+        /** `defaultValue` normalized to an array for internal coordination. */
+        this.defaultValueArray = computed(() => {
+            const value = this.defaultValue();
+            return Array.isArray(value) ? value : [value];
+        }, ...(ngDevMode ? [{ debugName: "defaultValueArray" }] : []));
+        this._id = `kbq-accordion-${uniqueIdCounter++}`;
+        this.state = null;
+        // Re-emit `valueChange` whenever any (current or future) item toggles its expanded state.
+        // Reading `items()` inside the effect keeps the subscriptions in sync with dynamically
+        // added/removed items.
+        effect((onCleanup) => {
+            const subscriptions = this.items().map((item) => item.expandedChange.subscribe(() => this.valueChange.emit(this.getCurrentValue())));
+            onCleanup(() => subscriptions.forEach((subscription) => subscription.unsubscribe()));
         });
+        // Notify the selection dispatcher when the controlled `[value]` changes (the old setter's
+        // side-effect). The `undefined` sentinel keeps the mandatory first run a no-op when unbound;
+        // when bound it re-notifies the value `ngAfterContentInit` already sent (idempotent).
+        effect(() => {
+            const value = this.valueInput();
+            if (value === undefined)
+                return;
+            untracked(() => this.selectionDispatcher.notify(this.value(), this.id));
+        });
+    }
+    ngAfterContentInit() {
+        if (this.useStateSaving()) {
+            if (isDevMode() && !this.stateSavingKey()) {
+                // eslint-disable-next-line no-console
+                console.warn('KbqAccordion: `useStateSaving` is enabled without a `stateSavingKey`. Falling back to an ' +
+                    'auto-generated id, which is unreliable across lazy/conditional/reordered rendering. ' +
+                    'Provide a stable `stateSavingKey`.');
+            }
+            this.state = this.stateStore.getState(this.stateStorageKey);
+        }
+        if (this.valueInput() !== undefined) {
+            this.selectionDispatcher.notify(this.value(), this.id);
+        }
+        else if (this.useStateSaving() && this.hasSavedState) {
+            const expandedValues = Object.keys(this.state)
+                .filter((key) => this.state[key].expanded)
+                .map((key) => this.state[key].value);
+            if (expandedValues.length) {
+                this.selectionDispatcher.notify((this.isMultiple ? expandedValues : expandedValues[0]), this.id);
+            }
+        }
+        else {
+            this.selectionDispatcher.notify(this.defaultValueArray(), this.id);
+        }
+        // Seed initial state for any items missing from the store (without overwriting existing entries).
+        if (this.useStateSaving()) {
+            this.items().forEach((item) => this.saveItemState(item, false));
+        }
+        this.keyManager = new FocusKeyManager(this.items, this.injector).withHomeAndEnd();
+        if (this.orientation() === 'horizontal') {
+            this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');
+        }
+        else {
+            this.keyManager.withVerticalOrientation();
+        }
     }
     ngAfterViewInit() {
-        this.disableAnimation();
+        this.focusMonitor.monitor(this.elementRef, true);
     }
-    ngAfterContentInit() {
-        if (!this.platform.isBrowser)
+    ngOnDestroy() {
+        this.focusMonitor.stopMonitoring(this.elementRef);
+        this.openCloseAllActions.complete();
+        this.keyManager?.destroy();
+    }
+    /** @docs-private */
+    keydownHandler(event) {
+        if (!this.keyManager)
             return;
-        const { height, width } = this.nativeElement.getBoundingClientRect();
-        this.renderer.setProperty(this.nativeElement, 'style', `
-            --radix-accordion-content-height: ${height}px;
-            --radix-accordion-content-width: ${width}px;
-        `);
+        if (!this.keyManager.activeItem) {
+            this.keyManager.setFirstItemActive();
+        }
+        const activeItem = this.keyManager.activeItem;
+        if ((event.keyCode === ENTER || event.keyCode === SPACE) &&
+            !this.keyManager.isTyping() &&
+            activeItem &&
+            !activeItem.disabled) {
+            event.preventDefault();
+            activeItem.toggle();
+        }
+        else {
+            // Arrow/Home/End move between headers; Tab falls through natively (WAI-ARIA APG pattern).
+            this.keyManager.onKeydown(event);
+        }
     }
-    toggle() {
-        this.hidden.set(!this.item.expanded);
+    /** Opens all enabled accordion items in an accordion where `type` is `multiple`. */
+    openAll() {
+        if (this.isMultiple) {
+            this.openCloseAllActions.next(true);
+        }
     }
-    disableAnimation() {
-        this.savedTransition = this.nativeElement.style.transition;
-        this.nativeElement.style.transition = 'none';
+    /** Closes all enabled accordion items. */
+    closeAll() {
+        this.openCloseAllActions.next(false);
     }
-    enableAnimation() {
-        this.nativeElement.style.transition = this.savedTransition;
+    /** @docs-private */
+    setActiveItem(item) {
+        this.keyManager?.setActiveItem(item);
     }
-    /** @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 }); }
+    /**
+     * Persists the current state of the given item when `useStateSaving` is enabled.
+     * @docs-private
+     */
+    saveItemState(item, force = true) {
+        if (!this.useStateSaving())
+            return;
+        if (!force && this.state?.[item.id])
+            return;
+        this.state = this.state ?? {};
+        this.state[item.id] = item.getState();
+        this.stateStore.setState(this.stateStorageKey, this.state);
+    }
+    /** The current expanded value(s) derived from the live item state. */
+    getCurrentValue() {
+        const expandedValues = this.items()
+            .filter((item) => item.expanded)
+            .map((item) => item.value());
+        return this.isMultiple ? expandedValues : (expandedValues[0] ?? '');
+    }
+    /** The key used to persist/restore state. */
+    get stateStorageKey() {
+        return this.stateSavingKey() || this.id;
+    }
+    /** @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: { useStateSaving: { classPropertyName: "useStateSaving", publicName: "useStateSaving", isSignal: true, isRequired: false, transformFunction: null }, stateSavingKey: { classPropertyName: "stateSavingKey", publicName: "stateSavingKey", isSignal: true, isRequired: false, transformFunction: null }, 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 }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, 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 }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, 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, 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:var(--kbq-accordion-size-item-border-width);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>.kbq-accordion-content__body{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:height .3s ease-out;height:var(--kbq-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.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)}.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-border-width: 2px;--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: "20.3.25", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbqAccordionContent]',
-                    host: {
-                        '[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',
-                        '(transitionend)': 'toggle()'
-                    },
-                    exportAs: 'kbqAccordionContent'
-                }]
-        }], ctorParameters: () => [] });
+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 />', providers: [
+                        { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-accordion',
+                        '[attr.data-orientation]': 'orientation()',
+                        '(keydown)': 'keydownHandler($event)'
+                    }, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:var(--kbq-accordion-size-item-border-width);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>.kbq-accordion-content__body{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:height .3s ease-out;height:var(--kbq-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.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)}.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-border-width: 2px;--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 }] }], useStateSaving: [{ type: i0.Input, args: [{ isSignal: true, alias: "useStateSaving", required: false }] }], stateSavingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateSavingKey", required: false }] }], 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 }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class KbqAccordionContent {
     /** @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 }); }
+    /** @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: '<div class="kbq-accordion-content__body"><ng-content /></div>', isInline: true }); }
 }
 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]',
-                    template: `
-        <p><ng-content /></p>
-    `,
+                    // A `<div>` wrapper (not `<p>`) carries the content padding: `<p>` is invalid for projected
+                    // block content (a `<div>` would auto-close it), and keeping padding off the animated
+                    // `.kbq-accordion-content` host lets it collapse cleanly to `height: 0`.
+                    template: '<div class="kbq-accordion-content__body"><ng-content /></div>',
                     host: {
                         class: 'kbq-accordion-content'
                     },
@@ -574,20 +688,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }] });
 
-class KbqAccordionHeaderDirective {
+class KbqAccordionHeader {
     constructor() {
+        /** @docs-private */
         this.item = inject(KbqAccordionItem);
+        /** @docs-private */
+        this.accordion = inject(KbqAccordion);
     }
-    /** @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 }); }
+    /** @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: { properties: { "attr.role": "\"heading\"", "attr.aria-level": "accordion.level()", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" }, classAttribute: "kbq-accordion-header" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionHeader, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kbqAccordionHeader]',
+                    selector: 'kbq-accordion-header, [kbq-accordion-header]',
                     host: {
+                        class: 'kbq-accordion-header',
                         '[attr.role]': '"heading"',
-                        '[attr.aria-level]': '2',
+                        '[attr.aria-level]': 'accordion.level()',
                         '[attr.data-state]': 'item.dataState',
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation'
@@ -595,21 +713,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }] });
 
-class KbqAccordionHeader {
-    /** @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: "20.3.25", ngImport: i0, type: KbqAccordionHeader, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-accordion-header, [kbq-accordion-header]',
-                    host: {
-                        class: 'kbq-accordion-header'
-                    },
-                    hostDirectives: [KbqAccordionHeaderDirective]
-                }]
-        }] });
-
 class KbqAccordionModule {
     /** @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,
@@ -650,5 +753,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KbqAccordion, KbqAccordionContent, KbqAccordionContentDirective, KbqAccordionHeader, KbqAccordionHeaderDirective, KbqAccordionItem, KbqAccordionModule, KbqAccordionTrigger, KbqAccordionTriggerDirective, KbqAccordionVariant };
+export { KBQ_ACCORDION_STATE_STORE, KbqAccordion, KbqAccordionContent, KbqAccordionContentDirective, KbqAccordionHeader, KbqAccordionItem, KbqAccordionLocalStorageStateStore, KbqAccordionModule, KbqAccordionTrigger, KbqAccordionTriggerDirective };
 //# sourceMappingURL=koobiq-components-accordion.mjs.map