@koobiq/components 20.4.1 → 21.0.0

package/top-bar/top-bar.scss

@@ -1,27 +1,28 @@
+@use '../core/styles/common/animation';
 @use '../core/styles/common/tokens';
-@use '../core/styles/common/overlay';
+@use '../core/styles/common/squircle' as *;
 
 @mixin _overflow-items-margins {
     padding: var(--kbq-size-border-width);
 
     > .kbq-overflow-item {
         &:not(:last-of-type) {
-            margin-right: var(--kbq-top-bar-container-end-gap);
+            margin-inline-end: var(--kbq-top-bar-container-end-gap);
         }
 
         // apply margin if the last item needs to be alwaysVisible
         &:last-of-type:is(.kbq-overflow-item_always-visible) + .kbq-overflow-items-result {
-            margin-left: var(--kbq-top-bar-container-end-gap);
+            margin-inline-start: var(--kbq-top-bar-container-end-gap);
         }
     }
 
     .kbq-overflow-items-result:first-child {
-        margin-right: var(--kbq-top-bar-container-end-gap);
+        margin-inline-end: var(--kbq-top-bar-container-end-gap);
     }
 }
 
 .kbq-top-bar {
-    z-index: overlay.$overlay-z-index;
+    z-index: var(--kbq-top-bar-z-index);
 
     display: flex;
     align-items: center;
@@ -30,47 +31,51 @@
     box-sizing: border-box;
 
     position: var(--kbq-top-bar-position);
+    inset-block-start: var(--kbq-top-bar-inset-block-start);
     background-color: var(--kbq-top-bar-background);
     padding: var(--kbq-top-bar-padding-vertical) var(--kbq-top-bar-padding-horizontal);
-    border-radius: var(--kbq-top-bar-border-radius);
+    @include kbq-squircle(var(--kbq-top-bar-border-radius));
 
     &.kbq-top-bar_with-shadow {
         box-shadow: var(--kbq-top-bar-shadow-bottom);
         transition: box-shadow var(--kbq-top-bar-shadow-transition);
+
+        @include animation.kbq-animations-off();
     }
 
     .kbq-top-bar-spacer {
-        height: 100%;
         flex: 0 0 var(--kbq-top-bar-spacer-min-width);
     }
 
     .kbq-top-bar-container {
-        &:has(.kbq-overflow-items) {
+        // Must match the host set of the ruleset immediately below: the negative margin compensates the
+        // padding that mixin adds, so a container the mixin skips must not get the compensation either.
+        &.kbq-overflow-items,
+        &:has(> .kbq-overflow-items) {
             gap: unset;
             overflow: hidden;
             // reduce height added by overflow-items' padding
-            margin-top: calc(-1 * var(--kbq-size-border-width));
-            margin-bottom: calc(-1 * var(--kbq-size-border-width));
+            margin-block: calc(-1 * var(--kbq-size-border-width));
+        }
+
+        &.kbq-overflow-items,
+        > .kbq-overflow-items {
+            @include _overflow-items-margins;
         }
 
-        &.kbq-top-bar-container__start {
+        &.kbq-top-bar-container_start {
             display: flex;
             gap: var(--kbq-top-bar-container-start-gap);
-            flex: 1 0 var(--kbq-top-bar-container-start-basis);
+            flex: 1 1 auto;
             justify-content: flex-start;
-            min-width: 0;
+            min-width: var(--kbq-top-bar-container-start-min-width);
         }
 
-        &.kbq-top-bar-container__end {
+        &.kbq-top-bar-container_end {
             display: flex;
             gap: var(--kbq-top-bar-container-end-gap);
             justify-content: end;
         }
-
-        &.kbq-overflow-items,
-        > .kbq-overflow-items {
-            @include _overflow-items-margins;
-        }
     }
 
     @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);

package/tree/_tree-theme.scss

@@ -1,5 +1,4 @@
 @use '../core/styles/theming/theming' as *;
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-tree-option($state-name) {

package/tree/toggle.scss

@@ -1,8 +1,11 @@
 @use '../core/styles/common/tokens' as *;
 
-@use './tree-theme' as *;
-
+// The tree theme is emitted once, from `tree-selection.scss`. Every rule in it is scoped to
+// `.kbq-tree-selection` or `.kbq-tree-option`, and a toggle only ever renders inside one of those.
 .kbq-tree-node-toggle {
+    // No horizontal padding here: the box is the chevron's own 16px, and `KbqTreeNodePadding` reserves
+    // exactly that plus the option's 8px `gap` for a node that has none. Widening the toggle pushes
+    // every branch row out of line with its leaf siblings.
     display: flex;
     align-items: center;
     justify-content: center;
@@ -10,10 +13,6 @@
 
     height: 100%;
 
-    // FIXME: default token doesn't exist
-    padding-left: var(--kbq-tree-size-toggle-padding);
-    padding-right: var(--kbq-tree-size-toggle-padding);
-
     cursor: pointer;
 
     & .kbq-icon {
@@ -34,6 +33,3 @@
         }
     }
 }
-
-@include kbq-tree-theme();
-@include kbq-tree-typography();

package/tree/tree-option.scss

@@ -2,6 +2,7 @@
 @use '../core/styles/common';
 @use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/vendor-prefixes';
+@use '../core/styles/common/squircle' as *;
 
 .kbq-tree-option {
     @include vendor-prefixes.user-select(none);
@@ -21,7 +22,7 @@
     border-width: var(--kbq-tree-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
-    border-radius: var(--kbq-tree-option-border-radius);
+    @include kbq-squircle(var(--kbq-tree-option-border-radius));
 
     padding-top: kbq-difference-series-css-variables(
         [tree-size-container-padding-vertical,
@@ -43,9 +44,6 @@
         display: inline-block;
 
         @include common.kbq-truncate-line();
-
-        padding-top: var(--kbq-list-size-text-padding-vertical, 0);
-        padding-bottom: var(--kbq-list-size-text-padding-vertical, 0);
     }
 
     // Two-line options only: align leading content to the center of the FIRST line.

package/tree/tree-tokens.scss

@@ -4,8 +4,9 @@
     --kbq-tree-size-container-padding-right: var(--kbq-size-s);
     --kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);
     --kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);
-    --kbq-tree-size-container-content-gap-vertical: 0px;
     --kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);
+    /* Not applied to `.kbq-option-text`: 2px above and below every line grows two-line rows and drops
+       the text below the chevron and the checkbox beside it. Applying it is a design decision. */
     --kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);
     --kbq-tree-option-border-radius: var(--kbq-size-border-radius);
     /* THEME TOKENS */

package/tree/tree.scss

@@ -1,8 +1,6 @@
-@use './tree-theme' as *;
-
+// The tree theme is emitted once, from `tree-selection.scss`. It styles `.kbq-tree-selection` and
+// `.kbq-tree-option`, and an option is only ever rendered by a `kbq-tree-selection` — the parent
+// token it depends on has no other provider.
 .kbq-tree {
     display: block;
 }
-
-@include kbq-tree-theme();
-@include kbq-tree-typography();

package/tree-select/_tree-select-theme.scss

@@ -1,3 +1,4 @@
+@use '../core/styles/common/select' as *;
 @use '../core/styles/common/tokens' as *;
 @use '../tree/tree-theme' as tree-theme;
 
@@ -5,8 +6,6 @@
     .kbq-tree-select {
         color: var(--kbq-foreground-contrast);
 
-        // Invalid by `KbqValidateDirective`
-        &.kbq-control_has-validate-directive.ng-invalid,
         // Invalid by control `ErrorStateMatcher`
         &.kbq-invalid {
             color: var(--kbq-foreground-error);
@@ -25,11 +24,9 @@
         }
     }
 
-    .kbq-select__placeholder {
-        text-overflow: ellipsis;
-
-        color: var(--kbq-form-field-default-placeholder);
-    }
+    // Placeholder, search container and empty-result message: styled identically wherever a
+    // select-shaped panel is rendered, so the rules live next to the structure they belong to.
+    @include kbq-select-shared-theme();
 
     .kbq-tree-select__panel {
         box-shadow: var(--kbq-select-panel-dropdown-shadow);
@@ -99,14 +96,6 @@
             border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
         }
     }
-
-    .kbq-select__search-container {
-        border-bottom-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
-    }
-
-    .kbq-select__no-options-message {
-        color: var(--kbq-foreground-contrast-secondary);
-    }
 }
 
 @mixin kbq-tree-select-typography() {

package/tree-select/tree-select-tokens.scss

@@ -1,3 +1,19 @@
+// Tokens read by the `core/styles/common/select` partial that the tree-select shares with the select.
+// Declared here rather than pulled in through the select package's own stylesheet, so that importing
+// the tree-select alone is enough to style it.
+.kbq-tree-select,
+.kbq-tree-select__panel {
+    --kbq-select-size-single-padding-left: 0;
+    --kbq-select-size-single-padding-right: 0;
+    --kbq-select-size-single-padding-vertical: var(--kbq-size-xs);
+    --kbq-select-size-single-content-gap: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-padding-left: 0;
+    --kbq-select-size-multiple-padding-right: 0;
+    --kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);
+    --kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);
+}
+
 .kbq-tree-select__panel {
     /* THEME TOKENS */
     --kbq-select-panel-dropdown-background: var(--kbq-background-card);

package/tree-select/tree-select.scss

@@ -26,11 +26,5 @@
     }
 }
 
-.kbq-form-field-type-select {
-    &:not(.kbq-disabled) .kbq-form-field-flex {
-        cursor: pointer;
-    }
-}
-
 @include kbq-tree-select-theme();
 @include kbq-tree-select-typography();

package/{accordion/index.d.ts → types/koobiq-components-accordion.d.ts}

@@ -1,55 +1,12 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, AfterViewInit, OnDestroy, OnInit, ChangeDetectorRef, AfterContentInit, ElementRef, Signal, DoCheck } from '@angular/core';
+import { AfterViewInit, OnDestroy, OnChanges, OnInit, SimpleChanges, AfterContentInit, AfterContentChecked, ElementRef, Signal, DoCheck } from '@angular/core';
 import { FocusMonitor, FocusKeyManager } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import { Subject } from 'rxjs';
-import * as i1 from '@koobiq/components/icon';
+import * as i1$1 from '@koobiq/components/icon';
 import { KbqIcon } from '@koobiq/components/icon';
-
-/** A snapshot of a single accordion item's persisted state. */
-interface KbqAccordionItemSnapshot {
-    /** Whether the item is expanded. */
-    expanded: boolean;
-    /** The item's value. */
-    value: string;
-}
-/** The persisted state of an accordion, keyed by accordion item id. */
-interface KbqAccordionState {
-    [itemId: string]: KbqAccordionItemSnapshot;
-}
-/**
- * Strategy used by `KbqAccordion` to persist and restore the expanded state of its items
- * while `useStateSaving` is enabled.
- *
- * Provide a custom implementation through the `KBQ_ACCORDION_STATE_STORE` token to change
- * where the state is stored (e.g. `sessionStorage`, a backend, or an in-memory map).
- */
-interface KbqAccordionStateStore {
-    /** Returns the previously saved state for the given key, or `null` when nothing is stored/available. */
-    getState(key: string): KbqAccordionState | null;
-    /** Persists the state for the given key. */
-    setState(key: string, state: KbqAccordionState): void;
-}
-/**
- * Default `KbqAccordionStateStore` implementation backed by `localStorage`.
- *
- * All access is guarded so it is safe on the server (SSR) and in environments where storage
- * throws on access (private mode, sandboxed iframes) or contains corrupt JSON.
- */
-declare class KbqAccordionLocalStorageStateStore implements KbqAccordionStateStore {
-    private readonly isBrowser;
-    private readonly window;
-    getState(key: string): KbqAccordionState | null;
-    setState(key: string, state: KbqAccordionState): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionLocalStorageStateStore, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<KbqAccordionLocalStorageStateStore>;
-}
-/**
- * Injection token for the store used to persist accordion state while `useStateSaving` is enabled.
- * Defaults to a `localStorage`-backed implementation (`KbqAccordionLocalStorageStateStore`).
- */
-declare const KBQ_ACCORDION_STATE_STORE: InjectionToken<KbqAccordionStateStore>;
+import * as i1 from '@koobiq/components/core';
 
 declare class KbqAccordionTriggerDirective {
     /** @docs-private */
@@ -67,6 +24,7 @@ declare 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(): void;
@@ -88,11 +46,15 @@ declare class KbqAccordionTriggerDirective {
 declare class KbqAccordionTrigger implements AfterViewInit, OnDestroy {
     private readonly platform;
     /** @docs-private */
-    protected readonly nativeElement: HTMLElement;
-    /** @docs-private */
     protected readonly accordion: KbqAccordion;
     /** @docs-private */
     readonly icon: _angular_core.Signal<KbqIcon>;
+    /**
+     * Whether the icon turns without motion.
+     *
+     * @docs-private
+     */
+    protected readonly animationsDisabled: boolean;
     private savedTransition;
     private readonly afterRenderRef?;
     private animationTimerId?;
@@ -109,15 +71,13 @@ declare class KbqAccordionTrigger implements AfterViewInit, OnDestroy {
 }
 
 type KbqAccordionItemState = 'open' | 'closed';
-declare class KbqAccordionItem implements OnInit, OnDestroy {
+declare class KbqAccordionItem implements OnChanges, OnInit, OnDestroy {
     /**
      * The accordion this item belongs to — always the nearest one, because it is injected.
      * The accordion reads it back to tell its own items apart from a nested accordion's.
      */
     readonly accordion: KbqAccordion;
     /** @docs-private */
-    protected readonly changeDetectorRef: ChangeDetectorRef;
-    /** @docs-private */
     protected readonly expansionDispatcher: UniqueSelectionDispatcher;
     /** @docs-private */
     readonly trigger: _angular_core.Signal<KbqAccordionTriggerDirective | undefined>;
@@ -138,15 +98,32 @@ declare class KbqAccordionItem implements OnInit, OnDestroy {
      */
     get expanded(): boolean;
     set expanded(expanded: boolean);
-    private _expanded;
+    /** Body of the `expanded` setter. */
+    private setExpanded;
+    /**
+     * 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.
+     */
+    private readonly expandedState;
+    /** The state the item last reported, so a binding change that the state already follows is reported once. */
+    private reportedExpanded;
     private initialized;
     /**
      * 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
      */
     readonly valueInput: _angular_core.InputSignal<string>;
-    /** The item's effective value — its own value, or the item id when none is provided. */
+    /**
+     * 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.
+     */
     readonly value: _angular_core.Signal<string>;
     /** Whether the AccordionItem is disabled. */
     get disabled(): boolean;
@@ -159,6 +136,7 @@ declare class KbqAccordionItem implements OnInit, OnDestroy {
     /**
      * Emits whenever the expanded state of the accordion item changes.
      * Primarily used to facilitate two-way binding.
+     *
      * @docs-private
      */
     readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
@@ -166,6 +144,11 @@ declare class KbqAccordionItem implements OnInit, OnDestroy {
     private removeUniqueSelectionListener;
     /** Subscription to openAll/closeAll events. */
     private openCloseAllSubscription;
+    /** @docs-private */
+    readonly expandedInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    /** @docs-private */
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    ngOnChanges(changes: SimpleChanges): void;
     constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -177,8 +160,6 @@ declare class KbqAccordionItem implements OnInit, OnDestroy {
     close(): void;
     /** Sets the expanded state of the accordion item to true. */
     open(): void;
-    /** Returns a snapshot of the item's current persisted state. @docs-private */
-    getState(): KbqAccordionItemSnapshot;
     /** Disables the open/close animation of the item's content and chevron. @docs-private */
     disableAnimation(): void;
     /** Restores the open/close animation of the item's content and chevron. @docs-private */
@@ -187,9 +168,7 @@ declare class KbqAccordionItem implements OnInit, OnDestroy {
     private reportExpanded;
     private subscribeToOpenCloseAllActions;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionItem, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAccordionItem, "kbq-accordion-item, [kbq-accordion-item]", never, { "expanded": { "alias": "expanded"; "required": false; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; "expandedChange": "expandedChange"; }, ["trigger", "triggerComponent", "content"], never, true, never>;
-    static ngAcceptInputType_expanded: unknown;
-    static ngAcceptInputType_disabled: unknown;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAccordionItem, "kbq-accordion-item, [kbq-accordion-item]", never, { "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; "expandedInput": { "alias": "expanded"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "opened": "opened"; "expandedChange": "expandedChange"; }, ["trigger", "triggerComponent", "content"], never, true, never>;
 }
 
 /** Available visual variants of the accordion. */
@@ -198,19 +177,21 @@ type KbqAccordionVariant = 'fill' | 'hug' | 'hugSpaceBetween';
 type KbqAccordionType = 'single' | 'multiple';
 /** The layout orientation of the accordion. */
 type KbqAccordionOrientation = 'horizontal' | 'vertical';
-declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit {
+/**
+ * The persisted state of an accordion — the values of the items that were expanded.
+ * Mirrors `KbqAccordion.value` normalized to an array.
+ */
+type KbqAccordionState = string[];
+declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit, AfterContentChecked {
     /** @docs-private */
     protected readonly focusMonitor: FocusMonitor;
     /** @docs-private */
     protected readonly elementRef: ElementRef<any>;
     /** @docs-private */
-    protected readonly changeDetectorRef: ChangeDetectorRef;
-    /** @docs-private */
     protected readonly selectionDispatcher: UniqueSelectionDispatcher;
     /** @docs-private */
     protected readonly dir: Directionality | null;
     private readonly injector;
-    private readonly stateStore;
     /** @docs-private */
     protected keyManager: FocusKeyManager<KbqAccordionItem>;
     /** Emits every time `openAll()` or `closeAll()` is called. @docs-private */
@@ -218,6 +199,7 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
     /**
      * Every item the content query matches, including those of a nested accordion.
      * Use `items` instead — this one is the raw, unfiltered query.
+     *
      * @docs-private
      */
     protected readonly allItems: Signal<readonly KbqAccordionItem[]>;
@@ -230,17 +212,15 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
      * 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
      */
     readonly items: Signal<readonly KbqAccordionItem[]>;
-    /** Whether the accordion persists the expanded state of its items across reloads. Defaults to `false`. */
-    readonly useStateSaving: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * 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.
      */
-    readonly stateSavingKey: _angular_core.InputSignal<string>;
+    private readonly stateSaving;
     /** The visual variant of the accordion. Defaults to `fill`. */
     readonly variant: _angular_core.InputSignal<KbqAccordionVariant>;
     /** Whether the whole accordion is disabled. */
@@ -264,6 +244,7 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
     /**
      * 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
      */
     readonly valueInput: _angular_core.InputSignal<string | string[] | undefined>;
@@ -281,19 +262,22 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
     get id(): string;
     /** Whether multiple items can be expanded at the same time. */
     get isMultiple(): boolean;
-    /** 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(): boolean;
-    /** `defaultValue` normalized to an array for internal coordination. */
-    private readonly defaultValueArray;
-    private _id;
-    private state;
     /**
-     * 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.
      */
-    private stateRestored;
+    private readonly valueArray;
+    private _id;
+    /** Whether the state saving key changed and the state under the new key is still to be restored. */
+    private keyChanged;
     constructor();
     ngAfterContentInit(): void;
+    ngAfterContentChecked(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**
@@ -303,6 +287,7 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
      * 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: KeyboardEvent): void;
@@ -312,17 +297,43 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
     closeAll(): void;
     /** @docs-private */
     setActiveItem(item: KbqAccordionItem): void;
+    /** Reads the persisted state and applies it. Runs while initializing, and again after the key changes. */
+    private restoreState;
     /**
-     * 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: KbqAccordionItem, force?: boolean): void;
+    saveState(): void;
+    /**
+     * Removes the state persisted for this accordion.
+     *
+     * Persistence itself stays on — the next change is written again. Unset `useStateSaving` to stop it.
+     */
+    clearSavedState(): void;
+    /**
+     * 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.
+     */
+    private initialValue;
+    /** The values of the items that are currently expanded. */
+    private expandedValues;
     /** The current expanded value(s) derived from the live item state. */
     private getCurrentValue;
-    /** The key used to persist/restore state. */
-    private get stateStorageKey();
+    /**
+     * 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.
+     */
+    private notifySelection;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordion, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAccordion, "kbq-accordion, [kbq-accordion]", never, { "useStateSaving": { "alias": "useStateSaving"; "required": false; "isSignal": true; }; "stateSavingKey": { "alias": "stateSavingKey"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["allItems"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAccordion, "kbq-accordion, [kbq-accordion]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["allItems"], ["*"], true, [{ directive: typeof i1.KbqStateSaving; inputs: { "useStateSaving": "useStateSaving"; "stateSavingKey": "stateSavingKey"; }; outputs: {}; }]>;
 }
 
 declare class KbqAccordionContentDirective implements OnInit, DoCheck, AfterViewInit {
@@ -371,6 +382,12 @@ declare class KbqAccordionContentDirective implements OnInit, DoCheck, AfterView
 }
 
 declare class KbqAccordionContent {
+    /**
+     * Whether the content expands and collapses without motion.
+     *
+     * @docs-private
+     */
+    protected readonly animationsDisabled: boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionContent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAccordionContent, "kbq-accordion-content, [kbq-accordion-content]", never, {}, {}, never, ["*"], true, [{ directive: typeof KbqAccordionContentDirective; inputs: {}; outputs: {}; }]>;
 }
@@ -388,6 +405,7 @@ declare 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
      */
     protected get labelledBy(): string | null;
@@ -397,9 +415,9 @@ declare class KbqAccordionHeader {
 
 declare class KbqAccordionModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqAccordionModule, never, [typeof i1.KbqIcon, typeof KbqAccordion, typeof KbqAccordionContent, typeof KbqAccordionHeader, typeof KbqAccordionItem, typeof KbqAccordionTrigger], [typeof KbqAccordion, typeof KbqAccordionContent, typeof KbqAccordionHeader, typeof KbqAccordionItem, typeof KbqAccordionTrigger]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqAccordionModule, never, [typeof i1$1.KbqIcon, typeof KbqAccordion, typeof KbqAccordionContent, typeof KbqAccordionHeader, typeof KbqAccordionItem, typeof KbqAccordionTrigger], [typeof KbqAccordion, typeof KbqAccordionContent, typeof KbqAccordionHeader, typeof KbqAccordionItem, typeof KbqAccordionTrigger]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqAccordionModule>;
 }
 
-export { KBQ_ACCORDION_STATE_STORE, KbqAccordion, KbqAccordionContent, KbqAccordionContentDirective, KbqAccordionHeader, KbqAccordionItem, KbqAccordionLocalStorageStateStore, KbqAccordionModule, KbqAccordionTrigger, KbqAccordionTriggerDirective };
-export type { KbqAccordionItemSnapshot, KbqAccordionItemState, KbqAccordionOrientation, KbqAccordionState, KbqAccordionStateStore, KbqAccordionType, KbqAccordionVariant };
+export { KbqAccordion, KbqAccordionContent, KbqAccordionContentDirective, KbqAccordionHeader, KbqAccordionItem, KbqAccordionModule, KbqAccordionTrigger, KbqAccordionTriggerDirective };
+export type { KbqAccordionItemState, KbqAccordionOrientation, KbqAccordionState, KbqAccordionType, KbqAccordionVariant };