@koobiq/components 20.4.2 → 21.0.1

package/fesm2022/koobiq-components-accordion.mjs

@@ -3,10 +3,11 @@ import { Directionality } from '@angular/cdk/bidi';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import { ENTER, SPACE } from '@angular/cdk/keycodes';
 import * as i0 from '@angular/core';
-import { inject, Renderer2, Injector, signal, afterNextRender, RendererStyleFlags2, Directive, viewChild, ViewEncapsulation, Component, ChangeDetectorRef, contentChild, forwardRef, input, computed, output, booleanAttribute, Input, Injectable, InjectionToken, ElementRef, contentChildren, numberAttribute, effect, untracked, isDevMode, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { inject, Renderer2, Injector, computed, signal, afterNextRender, untracked, RendererStyleFlags2, Directive, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, forwardRef, linkedSignal, input, output, booleanAttribute, ElementRef, contentChildren, numberAttribute, effect, NgModule } from '@angular/core';
+import * as i1 from '@koobiq/components/core';
+import { kbqInjectNativeElement, kbqAnimationsDisabled, KbqStateSaving } from '@koobiq/components/core';
 import { Subscription, Subject } from 'rxjs';
 import { Platform } from '@angular/cdk/platform';
-import { kbqInjectNativeElement, KBQ_WINDOW } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 
 const CONTENT_HEIGHT = '--kbq-accordion-content-height';
@@ -27,8 +28,14 @@ class KbqAccordionContentDirective {
         this.nativeElement = kbqInjectNativeElement();
         /** @docs-private */
         this.item = inject(KbqAccordionItem);
+        /**
+         * Value of `data-state`.
+         *
+         * @internal
+         */
+        this.dataState = computed(() => this.item.dataState, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.hidden = signal(true, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+        this.hidden = signal(true, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
         /** Whether the first browser render has happened; until then a toggle only sets the initial state. */
         this.rendered = false;
         // `afterNextRender` never runs on the server, so no platform check is needed here.
@@ -57,10 +64,14 @@ class KbqAccordionContentDirective {
         this.disableAnimation();
     }
     toggle() {
-        if (this.rendered) {
-            this.pinHeight();
-        }
-        this.hidden.set(!this.item.expanded);
+        // Untracked: called from a consumer's `effect()`, the `expanded` of the item read on the way would make the
+        // effect run again on every expand and collapse.
+        untracked(() => {
+            if (this.rendered) {
+                this.pinHeight();
+            }
+            this.hidden.set(!this.item.expanded);
+        });
     }
     /** @docs-private */
     onTransitionEnd(event) {
@@ -134,10 +145,10 @@ class KbqAccordionContentDirective {
     releaseHeight() {
         this.renderer.removeStyle(this.nativeElement, CONTENT_HEIGHT, RendererStyleFlags2.DashCase);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAccordionContentDirective, isStandalone: true, selector: "[kbqAccordionContent]", host: { listeners: { "transitionend": "onTransitionEnd($event)", "transitioncancel": "onTransitionEnd($event)" }, properties: { "attr.id": "contentId", "attr.role": "\"region\"", "attr.hidden": "hidden() ? \"\" : null", "attr.inert": "hidden() ? \"\" : null", "attr.aria-labelledby": "triggerId", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["kbqAccordionContent"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqAccordionContentDirective, isStandalone: true, selector: "[kbqAccordionContent]", host: { listeners: { "transitionend": "onTransitionEnd($event)", "transitioncancel": "onTransitionEnd($event)" }, properties: { "attr.id": "contentId", "attr.role": "\"region\"", "attr.hidden": "hidden() ? \"\" : null", "attr.inert": "hidden() ? \"\" : null", "attr.aria-labelledby": "triggerId", "attr.data-state": "dataState()", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["kbqAccordionContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionContent]',
@@ -151,7 +162,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         // a zero-height, clipped box.
                         '[attr.inert]': 'hidden() ? "" : null',
                         '[attr.aria-labelledby]': 'triggerId',
-                        '[attr.data-state]': 'item.dataState',
+                        // Signals of this directive's own: the item and its other parts read the same state, and the host bindings of
+                        // every item in a view run in that view's reactive consumer, where a signal read again after others costs a
+                        // scan of all it has read so far.
+                        '[attr.data-state]': 'dataState()',
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation',
                         '(transitionend)': 'onTransitionEnd($event)',
@@ -169,6 +183,18 @@ class KbqAccordionTriggerDirective {
         this.accordion = inject(KbqAccordion);
         /** @docs-private */
         this.item = inject(KbqAccordionItem);
+        /**
+         * Value of `aria-expanded`.
+         *
+         * @internal
+         */
+        this.expanded = computed(() => this.item.expanded, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /**
+         * Value of `data-state`.
+         *
+         * @internal
+         */
+        this.dataState = computed(() => this.item.dataState, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
     }
     /** @docs-private */
     get triggerId() {
@@ -188,6 +214,7 @@ class KbqAccordionTriggerDirective {
     /**
      * 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() {
@@ -213,20 +240,23 @@ class KbqAccordionTriggerDirective {
     focus() {
         this.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAccordionTriggerDirective, isStandalone: true, selector: "[kbqAccordionTrigger]", host: { listeners: { "click": "onClick()", "focus": "onFocus()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "triggerId", "attr.role": "\"button\"", "attr.aria-expanded": "item.expanded", "attr.aria-controls": "contentId", "attr.aria-disabled": "item.disabled", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqAccordionTriggerDirective, isStandalone: true, selector: "[kbqAccordionTrigger]", host: { listeners: { "click": "onClick()", "focus": "onFocus()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "triggerId", "attr.role": "\"button\"", "attr.aria-expanded": "expanded()", "attr.aria-controls": "contentId", "attr.aria-disabled": "item.disabled", "attr.data-state": "dataState()", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionTrigger]',
                     host: {
                         '[attr.id]': 'triggerId',
                         '[attr.role]': '"button"',
-                        '[attr.aria-expanded]': 'item.expanded',
+                        // Signals of this directive's own: the item and its other parts read the same state, and the host bindings of
+                        // every item in a view run in that view's reactive consumer, where a signal read again after others costs a
+                        // scan of all it has read so far.
+                        '[attr.aria-expanded]': 'expanded()',
                         '[attr.aria-controls]': 'contentId',
                         '[attr.aria-disabled]': 'item.disabled',
-                        '[attr.data-state]': 'item.dataState',
+                        '[attr.data-state]': 'dataState()',
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation',
                         '(click)': 'onClick()',
@@ -249,11 +279,15 @@ class KbqAccordionTrigger {
     constructor() {
         this.platform = inject(Platform);
         /** @docs-private */
-        this.nativeElement = kbqInjectNativeElement();
-        /** @docs-private */
         this.accordion = inject(KbqAccordion);
         /** @docs-private */
         this.icon = viewChild.required(KbqIcon);
+        /**
+         * Whether the icon turns without motion.
+         *
+         * @docs-private
+         */
+        this.animationsDisabled = kbqAnimationsDisabled();
         this.afterRenderRef = afterNextRender(() => {
             this.animationTimerId = setTimeout(() => this.enableAnimation());
             this.afterRenderRef?.destroy();
@@ -277,31 +311,33 @@ class KbqAccordionTrigger {
     enableAnimation() {
         this.icon().getHostElement().style.transition = this.savedTransition;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqAccordionTrigger, isStandalone: true, selector: "kbq-accordion-trigger, [kbq-accordion-trigger]", host: { properties: { "class.kbq-accordion-trigger_fill": "isFill", "class.kbq-accordion-trigger_hug": "isHug", "class.kbq-accordion-trigger_hug-space-between": "isHugSpaceBetween" }, classAttribute: "kbq-accordion-trigger" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true, isSignal: true }], hostDirectives: [{ directive: KbqAccordionTriggerDirective }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqAccordionTrigger, isStandalone: true, selector: "kbq-accordion-trigger, [kbq-accordion-trigger]", host: { properties: { "class.kbq-accordion-trigger_fill": "isFill", "class.kbq-accordion-trigger_hug": "isHug", "class.kbq-accordion-trigger_hug-space-between": "isHugSpaceBetween" }, classAttribute: "kbq-accordion-trigger" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true, isSignal: true }], hostDirectives: [{ directive: KbqAccordionTriggerDirective }], ngImport: i0, template: `
         <i
             kbq-icon="{{ isHugSpaceBetween ? 'kbq-chevron-down-s_16' : 'kbq-chevron-right-s_16' }}"
             class="kbq-accordion-trigger__icon"
+            [class.kbq-animations-disabled]="animationsDisabled"
         ></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}@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;min-width:0}\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-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--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: ["@charset \"UTF-8\";.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__icon.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-accordion-trigger .kbq-accordion-trigger__icon{animation:none;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_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;min-width:0}\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-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--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: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", 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"
+            [class.kbq-animations-disabled]="animationsDisabled"
         ></i>
 
         <ng-content />
-    `, encapsulation: ViewEncapsulation.None, host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-accordion-trigger',
                         '[class.kbq-accordion-trigger_fill]': 'isFill',
                         '[class.kbq-accordion-trigger_hug]': 'isHug',
                         '[class.kbq-accordion-trigger_hug-space-between]': 'isHugSpaceBetween'
-                    }, 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;min-width:0}\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-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--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: ["@charset \"UTF-8\";.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__icon.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-accordion-trigger .kbq-accordion-trigger__icon{animation:none;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_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;min-width:0}\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-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--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$1 = 0;
@@ -322,33 +358,52 @@ class KbqAccordionItem {
      * Whether the AccordionItem is expanded. When the accordion initializes, its controlled `value`, the saved
      * state and `defaultValue` take precedence over it.
      */
-    // 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.
+    // An accessor over the bound state rather than a `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;
+        return this.expandedState();
     }
     set expanded(expanded) {
+        // Untracked, as `toggle()`, `open()` and `close()`: called from a consumer's `effect()`, the state read on the
+        // way — `expanded`, `disabled`, the siblings and the accordion it reports to — would make the effect run again
+        // on every expand and collapse.
+        untracked(() => this.setExpanded(expanded));
+    }
+    /** Body of the `expanded` setter. */
+    setExpanded(expanded) {
         // Only emit events and update the internal value if the value changes.
-        if (this._expanded !== expanded) {
-            this._expanded = expanded;
+        if (this.expandedState() !== expanded) {
+            this.expandedState.set(expanded);
             // Before `ngOnInit` the accordion's inputs may still be unbound, this item may not be in its `items()`
-            // and nothing listens to the outputs yet — the static attribute is applied while the view is created.
+            // and nothing listens to the outputs yet.
             if (this.initialized)
                 this.reportExpanded();
         }
     }
     /** Whether the AccordionItem is disabled. */
-    // 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).
+    // An 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.
     get disabled() {
         return this.accordion.disabled() || this._disabled;
     }
     set disabled(value) {
         this._disabled = value;
     }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        // The state already follows the binding; a later change still has to be reported, once.
+        if (changes['expandedInput'] && this.initialized && this.expanded !== this.reportedExpanded) {
+            this.reportExpanded();
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+    }
     constructor() {
         /**
          * The accordion this item belongs to — always the nearest one, because it is injected.
@@ -356,26 +411,47 @@ class KbqAccordionItem {
          */
         this.accordion = inject(KbqAccordion);
         /** @docs-private */
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        /** @docs-private */
         this.expansionDispatcher = inject(UniqueSelectionDispatcher);
         /** @docs-private */
-        this.trigger = contentChild(KbqAccordionTriggerDirective, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+        this.trigger = contentChild(KbqAccordionTriggerDirective, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.triggerComponent = contentChild(KbqAccordionTrigger, ...(ngDevMode ? [{ debugName: "triggerComponent" }] : []));
+        this.triggerComponent = contentChild(KbqAccordionTrigger, ...(ngDevMode ? [{ debugName: "triggerComponent" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.content = contentChild(forwardRef(() => KbqAccordionContentDirective), ...(ngDevMode ? [{ debugName: "content" }] : []));
+        this.content = contentChild(forwardRef(() => KbqAccordionContentDirective), ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
         this._id = `kbq-accordion-item-${uniqueIdCounter$1++}`;
-        this._expanded = false;
+        /**
+         * Follows the binding at once, a static `expanded` included, while the view is created: every item of a
+         * single-mode accordion holds its bound state before the first of them reports in `ngOnInit` and collapses
+         * the others.
+         */
+        this.expandedState = linkedSignal(() => !!this.expandedInput(), ...(ngDevMode ? [{ debugName: "expandedState" }] : /* istanbul ignore next */ []));
+        /** The state the item last reported, so a binding change that the state already follows is reported once. */
+        this.reportedExpanded = false;
         this.initialized = 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.valueInput = input('', { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        /**
+         * The item's effective value — its own `value`, or its position inside the accordion when none is
+         * provided.
+         *
+         * The position, rather than the id: the value is what the accordion persists, and the id carries a
+         * global instantiation counter that shifts as soon as anything else on the page is created ahead of
+         * this accordion. The prefix keeps a generated value from colliding with an author-written one.
+         */
+        this.value = computed(() => {
+            const value = this.valueInput();
+            if (value)
+                return value;
+            const index = this.accordion.items().indexOf(this);
+            // The accordion's content query has not matched this item yet. Nothing is persisted that early —
+            // the accordion suppresses writes until it has read — and the id is unique, so it stands in.
+            return index < 0 ? this.id : `kbq-item-${index}`;
+        }, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this._disabled = false;
         /** Event emitted every time the AccordionItem is closed. */
         this.closed = output();
@@ -384,11 +460,18 @@ class KbqAccordionItem {
         /**
          * Emits whenever the expanded state of the accordion item changes.
          * Primarily used to facilitate two-way binding.
+         *
          * @docs-private
          */
         this.expandedChange = output();
         /** Subscription to openAll/closeAll events. */
         this.openCloseAllSubscription = Subscription.EMPTY;
+        /** @docs-private */
+        this.expandedInput = input(undefined, { ...(ngDevMode ? { debugName: "expandedInput" } : /* istanbul ignore next */ {}), alias: 'expanded',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
         this.removeUniqueSelectionListener = this.expansionDispatcher.listen((id, accordionId) => {
             if (this.accordion.id !== accordionId)
                 return;
@@ -417,7 +500,7 @@ class KbqAccordionItem {
     }
     ngOnInit() {
         this.initialized = true;
-        if (this._expanded)
+        if (this.expanded)
             this.reportExpanded();
     }
     ngOnDestroy() {
@@ -430,28 +513,27 @@ class KbqAccordionItem {
     }
     /** Toggles the expanded state of the accordion item. */
     toggle() {
-        if (!this.disabled) {
-            this.expanded = !this.expanded;
-        }
+        untracked(() => {
+            if (!this.disabled) {
+                this.expanded = !this.expanded;
+            }
+        });
     }
     /** Sets the expanded state of the accordion item to false. */
     close() {
-        if (!this.disabled) {
-            this.expanded = false;
-        }
+        untracked(() => {
+            if (!this.disabled) {
+                this.expanded = false;
+            }
+        });
     }
     /** Sets the expanded state of the accordion item to true. */
     open() {
-        if (!this.disabled) {
-            this.expanded = true;
-        }
-    }
-    /** Returns a snapshot of the item's current persisted state. @docs-private */
-    getState() {
-        return {
-            expanded: this.expanded,
-            value: this.value()
-        };
+        untracked(() => {
+            if (!this.disabled) {
+                this.expanded = true;
+            }
+        });
     }
     /** Disables the open/close animation of the item's content and chevron. @docs-private */
     disableAnimation() {
@@ -465,11 +547,11 @@ class KbqAccordionItem {
     }
     /** Emits the expanded state and propagates it to the siblings, the content and the saved state. */
     reportExpanded() {
+        this.reportedExpanded = this.expanded;
         // First: a handler below may run change detection, and the content pins its height before `data-state` flips.
         this.content()?.toggle();
-        this.expandedChange.emit(this._expanded);
-        if (this._expanded) {
-            // TODO: The 'emit' function requires a mandatory void argument
+        this.expandedChange.emit(this.expanded);
+        if (this.expanded) {
             this.opened.emit();
             /**
              * In the unique selection dispatcher, the id parameter is the id of the KbqAccordionItem,
@@ -478,13 +560,9 @@ class KbqAccordionItem {
             this.expansionDispatcher.notify(this.value(), this.accordion.id);
         }
         else {
-            // TODO: The 'emit' function requires a mandatory void argument
             this.closed.emit();
         }
-        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();
+        this.accordion.saveState();
     }
     subscribeToOpenCloseAllActions() {
         return this.accordion.openCloseAllActions.subscribe((expanded) => {
@@ -494,10 +572,10 @@ class KbqAccordionItem {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.30", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.25", type: KbqAccordionItem, isStandalone: true, selector: "kbq-accordion-item, [kbq-accordion-item]", inputs: { valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expandedInput: { classPropertyName: "expandedInput", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, 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 }], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-item, [kbq-accordion-item]',
@@ -508,63 +586,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[attr.data-orientation]': 'orientation'
                     }
                 }]
-        }], 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 }]
-            }], 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"] }] } });
+        }], 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 }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], expandedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
+let uniqueIdCounter = 0;
+/** Normalizes a value input to an array, dropping the empty string that stands for "nothing expanded". */
+const toValueArray = (value) => (Array.isArray(value) ? value : [value]).filter(Boolean);
+/** Whether two value sets hold the same values, regardless of order. */
+const sameValues = (a, b) => a.length === b.length && a.every((value) => b.includes(value));
 /**
- * Default `KbqAccordionStateStore` implementation backed by `localStorage`.
+ * Coerces a raw persisted payload into a `KbqAccordionState`, returning `null` for anything
+ * unrecognizable. Web storage is origin-wide and user-writable, so a payload is never trusted —
+ * without this, an entry such as `{"a": null}` would crash the accordion while restoring.
  *
- * 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.
+ * Also upgrades the previous `{ [itemId]: { expanded, value } }` format, so state persisted by an
+ * earlier version is carried over instead of silently resetting.
  */
-class KbqAccordionLocalStorageStateStore {
-    constructor() {
-        this.isBrowser = inject(Platform).isBrowser;
-        this.window = inject(KBQ_WINDOW);
-    }
-    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.).
-        }
+const normalizeAccordionState = (parsed) => {
+    if (Array.isArray(parsed)) {
+        const values = parsed.filter((value) => typeof value === 'string');
+        // An array that held nothing usable is somebody else's payload, not "nothing was expanded" — the
+        // difference matters, because a state that exists suppresses `defaultValue` from then on.
+        return values.length || !parsed.length ? values : null;
+    }
+    if (parsed !== null && typeof parsed === 'object') {
+        const snapshots = Object.values(parsed).filter((snapshot) => {
+            const { expanded, value } = (snapshot ?? {});
+            return typeof expanded === 'boolean' && typeof value === 'string';
+        });
+        // Same reasoning as above: only an object that actually holds snapshots is the previous format.
+        return snapshots.length ? snapshots.filter(({ expanded }) => expanded).map(({ value }) => value) : null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionLocalStorageStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionLocalStorageStateStore, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", 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;
+    return null;
+};
 class KbqAccordion {
     /** The unique id of this accordion. */
     get id() {
@@ -574,9 +627,12 @@ class KbqAccordion {
     get isMultiple() {
         return this.type() === 'multiple';
     }
-    /** Whether a persisted state exists for this accordion. */
+    /**
+     * Whether state is currently persisted for this accordion — restored on init, or written since.
+     * Always `false` while `useStateSaving` is unset, and `false` again after `clearSavedState()`.
+     */
     get hasSavedState() {
-        return typeof this.state === 'object' && this.state !== null;
+        return this.stateSaving.state != null;
     }
     constructor() {
         /** @docs-private */
@@ -584,23 +640,21 @@ class KbqAccordion {
         /** @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 });
         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();
         /**
          * Every item the content query matches, including those of a nested accordion.
          * Use `items` instead — this one is the raw, unfiltered query.
+         *
          * @docs-private
          */
         // The generic is explicit because `forwardRef` erases the locator type, which would leave both
         // this query and `items` as `Signal<any[]>` in the public API report.
-        this.allItems = contentChildren(forwardRef(() => KbqAccordionItem), ...(ngDevMode ? [{ debugName: "allItems", descendants: true }] : [{ descendants: true }]));
+        this.allItems = contentChildren(forwardRef(() => KbqAccordionItem), { ...(ngDevMode ? { debugName: "allItems" } : /* istanbul ignore next */ {}), descendants: true });
         /**
          * The accordion items that belong to this accordion.
          *
@@ -610,44 +664,43 @@ class KbqAccordion {
          * injected and therefore always its nearest one, which makes ownership the reliable filter.
          * Without it the key manager would move focus into the nested accordion's headers, `valueChange`
          * would report a nested item's value and state saving would persist it under the outer key.
+         *
          * @docs-private
          */
-        this.items = computed(() => this.allItems().filter((item) => item.accordion === this), ...(ngDevMode ? [{ debugName: "items" }] : []));
-        /** 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 }]));
+        this.items = computed(() => this.allItems().filter((item) => item.accordion === this), ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         /**
-         * 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.
+         * Persistence of the expanded state, applied as a host directive. `useStateSaving` and
+         * `stateSavingKey` are its inputs, forwarded onto the accordion.
          */
-        this.stateSavingKey = input('', ...(ngDevMode ? [{ debugName: "stateSavingKey" }] : []));
+        this.stateSaving = inject(KbqStateSaving);
         /** The visual variant of the accordion. Defaults to `fill`. */
-        this.variant = input('fill', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.variant = input('fill', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         /** Whether the whole accordion is disabled. */
-        this.disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** The layout orientation of the accordion. Defaults to `vertical`. */
-        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /**
          * 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 }]));
+        this.level = input(2, { ...(ngDevMode ? { debugName: "level" } : /* istanbul ignore next */ {}), 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" }] : []));
+        this.defaultValue = input([], ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
         /** Determines whether one or multiple items can be expanded at the same time. */
-        this.type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         /** Whether an expanded item can be collapsed by the user. Defaults to `true`. */
-        this.collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+        this.collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
         /**
          * 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' }]));
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
         /**
          * The controlled value of the item(s) to expand, reshaped by mode. Supports `[(value)]`.
          * Falls back to `defaultValue` while `value` is unbound.
@@ -656,24 +709,26 @@ class KbqAccordion {
          * when nothing is expanded, matching what `valueChange` emits.
          */
         this.value = computed(() => {
-            const value = this.valueInput() ?? this.defaultValue();
-            const array = Array.isArray(value) ? value : [value];
+            const array = this.valueArray();
             return this.isMultiple ? array : (array[0] ?? '');
-        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** 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;
         /**
-         * Whether the saved state has been read. An item reports a static `[expanded]` from its own `ngOnInit`,
-         * which runs before `ngAfterContentInit`, and writing then would replace the saved state before it is read.
+         * `value()` as an array, reshaped by mode — the shape the selection dispatcher is notified with.
+         * Falls back to `defaultValue` while `value` is unbound, so it doubles as the uncontrolled default.
          */
-        this.stateRestored = false;
+        this.valueArray = computed(() => {
+            const array = toValueArray(this.valueInput() ?? this.defaultValue());
+            return this.isMultiple ? array : array.slice(0, 1);
+        }, ...(ngDevMode ? [{ debugName: "valueArray" }] : /* istanbul ignore next */ []));
+        this._id = `kbq-accordion-${uniqueIdCounter++}`;
+        /** Whether the state saving key changed and the state under the new key is still to be restored. */
+        this.keyChanged = false;
+        // The state lives under the new key now, so restore from it — in `ngAfterContentChecked`: the change is
+        // reported while the view updates, before sections created in the same pass have bound their `value`,
+        // and that same pass runs the hook.
+        this.stateSaving.keyChanges.subscribe(() => (this.keyChanged = true));
         // 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.
@@ -682,45 +737,18 @@ class KbqAccordion {
             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).
+        // side-effect). An unbound `value` (`undefined`, or `null` from an `async` pipe) keeps the mandatory
+        // first run a no-op. View effects run before content hooks, so when bound this notifies first and
+        // `ngAfterContentInit` re-notifies the same value (idempotent).
         effect(() => {
             const value = this.valueInput();
-            if (value === undefined)
+            if (value == null)
                 return;
-            untracked(() => this.selectionDispatcher.notify(this.value(), this.id));
+            untracked(() => this.notifySelection(this.valueArray()));
         });
     }
     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);
-        }
-        this.stateRestored = true;
-        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 if (this.defaultValueArray().length) {
-            // Without a `defaultValue` the items keep their own `[expanded]`: an empty payload would close them all.
-            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.restoreState(true);
         this.keyManager = new FocusKeyManager(this.items, this.injector).withHomeAndEnd();
         if (this.orientation() === 'horizontal') {
             this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');
@@ -729,6 +757,12 @@ class KbqAccordion {
             this.keyManager.withVerticalOrientation();
         }
     }
+    ngAfterContentChecked() {
+        if (!this.keyChanged)
+            return;
+        this.keyChanged = false;
+        this.restoreState(false);
+    }
     ngAfterViewInit() {
         this.focusMonitor.monitor(this.elementRef, true);
     }
@@ -744,6 +778,7 @@ class KbqAccordion {
      * also receives keys bubbling from the section content and from controls placed next to the
      * trigger, and would swallow their Enter/Space and hijack their arrow keys. It would also
      * activate the first item — stealing focus — the first time any key was pressed anywhere inside.
+     *
      * @docs-private
      */
     keydownHandler(event) {
@@ -763,62 +798,133 @@ class KbqAccordion {
     }
     /** Opens all enabled accordion items in an accordion where `type` is `multiple`. */
     openAll() {
-        if (this.isMultiple) {
-            this.openCloseAllActions.next(true);
-        }
+        // Untracked, as `closeAll()`, `saveState()` and `clearSavedState()`: called from a consumer's `effect()`, the
+        // state read on the way — the inputs, the items' `disabled` — would make the effect run again.
+        untracked(() => {
+            if (this.isMultiple) {
+                this.openCloseAllActions.next(true);
+            }
+        });
     }
     /** Closes all enabled accordion items. */
     closeAll() {
-        this.openCloseAllActions.next(false);
+        untracked(() => this.openCloseAllActions.next(false));
     }
     /** @docs-private */
     setActiveItem(item) {
         this.keyManager?.setActiveItem(item);
     }
+    /** Reads the persisted state and applies it. Runs while initializing, and again after the key changes. */
+    restoreState(initializing) {
+        const savedState = this.stateSaving.read(normalizeAccordionState);
+        const initialValue = this.initialValue(savedState, initializing);
+        if (initialValue) {
+            this.stateSaving.applying(() => this.notifySelection(initialValue));
+        }
+        // Reconcile the store with what was applied, dropping values whose item is gone. Only when there
+        // are items to reconcile against: sections that arrive later (`@if`, `@for` over an async list)
+        // would otherwise have their saved values deleted before they exist.
+        if (savedState !== null && this.items().length > 0 && !sameValues(savedState, this.expandedValues())) {
+            this.saveState();
+        }
+    }
     /**
-     * Persists the current state of the given item when `useStateSaving` is enabled.
+     * Persists the values of the currently expanded items when `useStateSaving` is enabled.
+     *
      * @docs-private
      */
-    saveItemState(item, force = true) {
-        if (!this.useStateSaving() || !this.stateRestored)
-            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);
+    saveState() {
+        untracked(() => {
+            // Checked before the snapshot is built: `expandedValues()` walks the content query on every
+            // toggle. A controlled `[value]` belongs to the application, so persisting it is pointless.
+            if (!this.stateSaving.useStateSaving() || this.valueInput() != null)
+                return;
+            this.stateSaving.write(this.expandedValues());
+        });
     }
-    /** The current expanded value(s) derived from the live item state. */
-    getCurrentValue() {
-        const expandedValues = this.items()
+    /**
+     * Removes the state persisted for this accordion.
+     *
+     * Persistence itself stays on — the next change is written again. Unset `useStateSaving` to stop it.
+     */
+    clearSavedState() {
+        untracked(() => this.stateSaving.clear());
+    }
+    /**
+     * The values to expand when restoring: a controlled `value` wins, then the persisted state, then — only
+     * while initializing — `defaultValue`. An array, because only the array payload can also *close* the items
+     * that are not part of it — a scalar cannot express an empty selection at all.
+     *
+     * `null` when there is nothing to apply, so the items keep their current `expanded`: their own while
+     * initializing, whatever the previous key left after a key change.
+     */
+    initialValue(savedState, initializing) {
+        if (this.valueInput() != null)
+            return this.valueArray();
+        if (savedState !== null) {
+            if (this.isMultiple)
+                return savedState;
+            // The first value that still names an item, so a stale one does not collapse every section.
+            const values = this.items().map((item) => item.value());
+            return savedState.filter((value) => values.includes(value)).slice(0, 1);
+        }
+        if (!initializing)
+            return null;
+        // While `value` is unbound, `valueArray()` is `defaultValue` reshaped by mode.
+        const defaultValue = this.valueArray();
+        return defaultValue.length ? defaultValue : null;
+    }
+    /** The values of the items that are currently expanded. */
+    expandedValues() {
+        return this.items()
             .filter((item) => item.expanded)
             .map((item) => item.value());
+    }
+    /** The current expanded value(s) derived from the live item state. */
+    getCurrentValue() {
+        const expandedValues = this.expandedValues();
         return this.isMultiple ? expandedValues : (expandedValues[0] ?? '');
     }
-    /** The key used to persist/restore state. */
-    get stateStorageKey() {
-        return this.stateSavingKey() || this.id;
+    /**
+     * Notifies the items of the whole expanded set.
+     *
+     * `UniqueSelectionDispatcher` types its payload as a `string`, which only an individual item toggle
+     * ever is — the accordion always sends the full set, the only shape that also closes the items
+     * outside it. The cast lives here alone so the rest of the component keeps working with the real type.
+     */
+    notifySelection(values) {
+        this.selectionDispatcher.notify(values, this.id);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", 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: { properties: { "attr.data-orientation": "orientation()" }, classAttribute: "kbq-accordion" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.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 }, 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: { properties: { "attr.data-orientation": "orientation()" }, classAttribute: "kbq-accordion" }, providers: [
             { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
-        ], queries: [{ propertyName: "allItems", 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);overflow:hidden}.kbq-accordion-header>.kbq-accordion-header__actions{display:flex;align-items:center;gap:var(--kbq-accordion-size-item-header-actions-gap);flex-shrink:0;padding-right:var(--kbq-accordion-size-item-header-actions-padding-right)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{--kbq-accordion-content-height: initial;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, auto)}.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:has(>.kbq-accordion-trigger:focus),.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-header .kbq-accordion-trigger:focus){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-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "allItems", predicate: i0.forwardRef(() => KbqAccordionItem), descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.KbqStateSaving, inputs: ["useStateSaving", "useStateSaving", "stateSavingKey", "stateSavingKey"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@charset \"UTF-8\";.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);overflow:hidden}.kbq-accordion-header>.kbq-accordion-header__actions{display:flex;align-items:center;gap:var(--kbq-accordion-size-item-header-actions-gap);flex-shrink:0;padding-right:var(--kbq-accordion-size-item-header-actions-padding-right)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{--kbq-accordion-content-height: initial;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, auto)}.kbq-accordion-content[data-state=open].kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open]{animation:none;transition:none}}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}.kbq-accordion-content[data-state=closed].kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=closed]{animation:none;transition:none}}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-trigger:focus),.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-header .kbq-accordion-trigger:focus){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-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--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.30", ngImport: i0, type: KbqAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.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()'
-                    }, 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);overflow:hidden}.kbq-accordion-header>.kbq-accordion-header__actions{display:flex;align-items:center;gap:var(--kbq-accordion-size-item-header-actions-gap);flex-shrink:0;padding-right:var(--kbq-accordion-size-item-header-actions-padding-right)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{--kbq-accordion-content-height: initial;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, auto)}.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:has(>.kbq-accordion-trigger:focus),.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-header .kbq-accordion-trigger:focus){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-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--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: { allItems: [{ 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"] }] } });
+                    }, hostDirectives: [
+                        { directive: KbqStateSaving, inputs: ['useStateSaving', 'stateSavingKey'] }
+                    ], styles: ["@charset \"UTF-8\";.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);overflow:hidden}.kbq-accordion-header>.kbq-accordion-header__actions{display:flex;align-items:center;gap:var(--kbq-accordion-size-item-header-actions-gap);flex-shrink:0;padding-right:var(--kbq-accordion-size-item-header-actions-padding-right)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{--kbq-accordion-content-height: initial;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, auto)}.kbq-accordion-content[data-state=open].kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open]{animation:none;transition:none}}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}.kbq-accordion-content[data-state=closed].kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=closed]{animation:none;transition:none}}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-trigger:focus),.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-header .kbq-accordion-trigger:focus){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-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--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: { allItems: [{ 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 }] }], 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.30", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", 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 }); }
+    constructor() {
+        /**
+         * Whether the content expands and collapses without motion.
+         *
+         * @docs-private
+         */
+        this.animationsDisabled = kbqAnimationsDisabled();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqAccordionContent, isStandalone: true, selector: "kbq-accordion-content, [kbq-accordion-content]", host: { properties: { "class.kbq-animations-disabled": "animationsDisabled" }, classAttribute: "kbq-accordion-content" }, hostDirectives: [{ directive: KbqAccordionContentDirective }], ngImport: i0, template: '<div class="kbq-accordion-content__body"><ng-content /></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-accordion-content, [kbq-accordion-content]',
@@ -826,8 +932,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     // 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>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        class: 'kbq-accordion-content'
+                        class: 'kbq-accordion-content',
+                        '[class.kbq-animations-disabled]': 'animationsDisabled'
                     },
                     hostDirectives: [KbqAccordionContentDirective]
                 }]
@@ -839,6 +947,12 @@ class KbqAccordionHeader {
         this.item = inject(KbqAccordionItem);
         /** @docs-private */
         this.accordion = inject(KbqAccordion);
+        /**
+         * Value of `data-state`.
+         *
+         * @internal
+         */
+        this.dataState = computed(() => this.item.dataState, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
     }
     /**
      * Names the heading after the trigger alone.
@@ -848,15 +962,16 @@ class KbqAccordionHeader {
      * announced as "Profile Run More" when navigating by heading. Pointing at the trigger yields the
      * announcement the WAI-ARIA APG gets by keeping the button the only element in the heading,
      * which this component cannot do because the header is also the row that lays the actions out.
+     *
      * @docs-private
      */
     get labelledBy() {
         return this.item.trigger()?.triggerId ?? null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAccordionHeader, isStandalone: true, selector: "kbq-accordion-header, [kbq-accordion-header]", host: { properties: { "attr.role": "\"heading\"", "attr.aria-level": "accordion.level()", "attr.aria-labelledby": "labelledBy", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" }, classAttribute: "kbq-accordion-header" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqAccordionHeader, isStandalone: true, selector: "kbq-accordion-header, [kbq-accordion-header]", host: { properties: { "attr.role": "\"heading\"", "attr.aria-level": "accordion.level()", "attr.aria-labelledby": "labelledBy", "attr.data-state": "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.30", ngImport: i0, type: KbqAccordionHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-header, [kbq-accordion-header]',
@@ -865,7 +980,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[attr.role]': '"heading"',
                         '[attr.aria-level]': 'accordion.level()',
                         '[attr.aria-labelledby]': 'labelledBy',
-                        '[attr.data-state]': 'item.dataState',
+                        // Signals of this directive's own: the item and its other parts read the same state, and the host bindings of
+                        // every item in a view run in that view's reactive consumer, where a signal read again after others costs a
+                        // scan of all it has read so far.
+                        '[attr.data-state]': 'dataState()',
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation'
                     }
@@ -873,8 +991,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         }] });
 
 class KbqAccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
             KbqAccordion,
             KbqAccordionContent,
             KbqAccordionHeader,
@@ -884,10 +1002,10 @@ class KbqAccordionModule {
             KbqAccordionHeader,
             KbqAccordionItem,
             KbqAccordionTrigger] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
             KbqAccordionTrigger] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -912,5 +1030,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_ACCORDION_STATE_STORE, KbqAccordion, KbqAccordionContent, KbqAccordionContentDirective, KbqAccordionHeader, KbqAccordionItem, KbqAccordionLocalStorageStateStore, KbqAccordionModule, KbqAccordionTrigger, KbqAccordionTriggerDirective };
+export { KbqAccordion, KbqAccordionContent, KbqAccordionContentDirective, KbqAccordionHeader, KbqAccordionItem, KbqAccordionModule, KbqAccordionTrigger, KbqAccordionTriggerDirective };
 //# sourceMappingURL=koobiq-components-accordion.mjs.map