@koobiq/components 20.1.0 → 20.3.0

package/accordion/_accordion-theme.scss

@@ -1,8 +1,12 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-accordion-theme() {
+    // Only the trigger owns the item's focus ring. `:focus-within` would also fire for header
+    // actions and for controls inside the expanded content, ringing a section the user is merely
+    // typing in. Both shapes are matched because `<kbq-accordion-header>` is optional.
     .kbq-accordion.cdk-keyboard-focused {
-        & .kbq-accordion-item:focus-within {
+        & .kbq-accordion-item:has(> .kbq-accordion-trigger:focus),
+        & .kbq-accordion-item:has(> .kbq-accordion-header .kbq-accordion-trigger:focus) {
             border-color: var(--kbq-accordion-item-states-focus-border-color);
         }
     }
@@ -36,7 +40,7 @@
             color: var(--kbq-accordion-item-states-disabled-text-color);
 
             & .kbq-accordion-trigger__icon {
-                color: var(--kbq-accordion-item-states-disabled-icon-color) !important;
+                color: var(--kbq-accordion-item-states-disabled-icon-color);
             }
         }
     }

package/accordion/accordion-tokens.scss

@@ -1,9 +1,12 @@
 .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);
     /* THEME TOKENS */
     --kbq-accordion-item-default-background: transparent;
     --kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);

package/accordion/{accordion-trigger.component.scss → accordion-trigger.scss}

@@ -11,6 +11,10 @@
         padding: var(--kbq-size-xxs);
 
         transition: transform 300ms ease-out;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
     }
 
     & .kbq-accordion-trigger__badge,
@@ -19,6 +23,8 @@
         margin-right: var(--kbq-size-s);
     }
 
+    // @deprecated Actions nested inside the trigger are focusable elements inside a `role="button"`.
+    // Put them in a `.kbq-accordion-header__actions` sibling of the trigger instead.
     & .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)});
@@ -57,4 +63,8 @@
 
 button.kbq-accordion-trigger {
     flex: 1;
+
+    // A flex item floors at its min-content width by default, which would push the header actions
+    // past the item's right edge instead of letting a long label give way.
+    min-width: 0;
 }

package/accordion/accordion.scss

@@ -0,0 +1,71 @@
+@use './accordion-theme' as *;
+
+.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);
+    // The height above is fixed, so a trigger label long enough to wrap would paint outside the
+    // header and over the item's border. Clipping keeps it inside; the trigger is a flex container,
+    // so `text-overflow` cannot ellipsize its text — wrap the label in an element of your own if you
+    // need that.
+    overflow: hidden;
+
+    // Interactive controls live NEXT TO the trigger, never inside it: the trigger is `role="button"`
+    // and nesting focusable elements in it is an accessibility violation. The trigger's `flex: 1`
+    // keeps the rest of the header clickable, so the actions sit flush right; their padding matches
+    // the trigger's own right padding, which is `--kbq-size-s` in every variant.
+    & > .kbq-accordion-header__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--kbq-accordion-size-item-header-actions-gap);
+
+        // Icon buttons have a fixed size and nothing to reflow, so the trigger — not the actions —
+        // is what gives way when the header runs out of room.
+        flex-shrink: 0;
+
+        padding-right: var(--kbq-accordion-size-item-header-actions-padding-right);
+    }
+}
+
+.kbq-accordion-content {
+    display: block;
+    overflow: hidden;
+
+    & > .kbq-accordion-content__body {
+        margin: unset;
+        padding: var(--kbq-accordion-size-item-content-padding);
+    }
+
+    &[data-state='open'] {
+        transition: height 300ms ease-out;
+        height: var(--kbq-accordion-content-height);
+    }
+
+    &[data-state='closed'] {
+        transition: height 300ms ease-out;
+        height: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &[data-state='open'],
+        &[data-state='closed'] {
+            transition: none;
+        }
+    }
+}
+
+@include kbq-accordion-theme();
+@include kbq-accordion-typography();

package/accordion/index.d.ts

@@ -1,83 +1,55 @@
-import * as i0 from '@angular/core';
-import { OnDestroy, AfterViewInit, AfterContentInit, ElementRef, ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
-import * as i1 from '@koobiq/components/icon';
-import { KbqIcon } from '@koobiq/components/icon';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, AfterViewInit, OnDestroy, ChangeDetectorRef, AfterContentInit, ElementRef, Signal } 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 { KbqIcon } from '@koobiq/components/icon';
 
-declare enum KbqAccordionVariant {
-    fill = "fill",
-    hug = "hug",
-    hugSpaceBetween = "hugSpaceBetween"
+/** 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;
 }
-type KbqAccordionType = 'single' | 'multiple';
-type KbqAccordionOrientation = 'horizontal' | 'vertical';
-declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit {
+/** 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 localStorage;
-    /** @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;
-    /** @docs-private */
-    protected keyManager: FocusKeyManager<KbqAccordionItem>;
-    /** @docs-private */
-    readonly openCloseAllActions: Subject<boolean>;
-    /**  @docs-private */
-    readonly items: i0.Signal<readonly any[]>;
-    /** Specifies whether the accordion saves its states. Default is false */
-    useStateSaving: boolean;
-    readonly variant: i0.InputSignal<string>;
-    /** Whether the Accordion is disabled. */
-    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
-    /** The orientation of the accordion. */
-    readonly orientation: i0.InputSignal<KbqAccordionOrientation>;
-    /**
-     * The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state of the items.
-     */
-    get defaultValue(): string[] | string;
-    set defaultValue(value: string[] | string);
-    /** Determines whether one or multiple items can be opened at the same time. */
-    readonly type: i0.InputSignal<KbqAccordionType>;
-    readonly collapsible: i0.InputSignal<boolean>;
-    /** The controlled value of the item to expand */
-    get value(): string[] | string;
-    set value(value: string[] | string);
-    readonly onValueChange: i0.OutputEmitterRef<void>;
-    get id(): string;
-    get isMultiple(): boolean;
-    get hasSavedState(): boolean;
-    private _value?;
-    private _defaultValue;
-    private onValueChangeSubscription;
-    private _id;
-    private state;
-    constructor();
-    ngAfterContentInit(): void;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    /** @docs-private */
-    keydownHandler(event: KeyboardEvent): void;
-    /** Opens all enabled accordion items in an accordion where multi is enabled. */
-    openAll(): void;
-    /** Closes all enabled accordion items. */
-    closeAll(): void;
-    /** @docs-private */
-    setActiveItem(item: KbqAccordionItem): void;
-    /** @docs-private */
-    saveItemState(item: KbqAccordionItem, force?: boolean): void;
-    private getSavedState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordion, never>;
-    static ɵcmp: i0.ɵɵ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; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "onValueChange": "onValueChange"; }, ["items"], ["*"], true, never>;
+    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>;
 
 declare class KbqAccordionTriggerDirective {
     /** @docs-private */
@@ -92,84 +64,106 @@ declare class KbqAccordionTriggerDirective {
     get contentId(): string;
     /** Fires when trigger clicked */
     onClick(): void;
+    /**
+     * 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;
+    /**
+     * Routes keyboard interaction to the accordion, but only while the trigger itself is focused.
+     *
+     * A `keydown` targets the focused element, so header actions placed next to the trigger and
+     * controls inside the expanded content keep their own keys — the accordion no longer toggles the
+     * section on Enter/Space nor moves focus to another header on the arrow keys. The `target` check
+     * additionally covers focusable content mistakenly nested inside the trigger.
+     */
+    onKeydown(event: KeyboardEvent): void;
     /** @docs-private */
     focus(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionTriggerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionTriggerDirective, "[kbqAccordionTrigger]", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAccordionTriggerDirective, "[kbqAccordionTrigger]", never, {}, {}, never, never, true, never>;
 }
 
-declare class KbqAccordionTrigger implements AfterViewInit {
+declare class KbqAccordionTrigger implements AfterViewInit, OnDestroy {
     /** @docs-private */
     protected readonly nativeElement: HTMLElement;
     /** @docs-private */
     protected readonly accordion: KbqAccordion;
     /** @docs-private */
-    readonly icon: i0.Signal<KbqIcon>;
+    readonly icon: _angular_core.Signal<KbqIcon>;
     private savedTransition;
     private readonly afterRenderRef?;
+    private animationTimerId?;
     get isFill(): boolean;
     get isHug(): boolean;
     get isHugSpaceBetween(): boolean;
     constructor();
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     disableAnimation(): void;
     enableAnimation(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionTrigger, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordionTrigger, "kbq-accordion-trigger, [kbq-accordion-trigger]", never, {}, {}, never, ["*"], true, [{ directive: typeof KbqAccordionTriggerDirective; inputs: {}; outputs: {}; }]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionTrigger, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAccordionTrigger, "kbq-accordion-trigger, [kbq-accordion-trigger]", never, {}, {}, never, ["*"], true, [{ directive: typeof KbqAccordionTriggerDirective; inputs: {}; outputs: {}; }]>;
 }
 
 type KbqAccordionItemState = 'open' | 'closed';
 declare class KbqAccordionItem implements OnDestroy {
-    /** @docs-private */
-    protected readonly accordion: KbqAccordion;
+    /**
+     * 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: i0.Signal<KbqAccordionTriggerDirective | undefined>;
+    readonly trigger: _angular_core.Signal<KbqAccordionTriggerDirective | undefined>;
     /** @docs-private */
-    readonly triggerComponent: i0.Signal<KbqAccordionTrigger | undefined>;
+    readonly triggerComponent: _angular_core.Signal<KbqAccordionTrigger | undefined>;
     /** @docs-private */
-    readonly content: i0.Signal<any>;
+    readonly content: _angular_core.Signal<any>;
     /** The unique AccordionItem id. */
     get id(): string;
     private _id;
+    /** The current open/closed state of the item. @docs-private */
     get dataState(): KbqAccordionItemState;
+    /** The layout orientation inherited from the parent accordion. @docs-private */
     get orientation(): KbqAccordionOrientation;
     /** Whether the AccordionItem is expanded. */
     get expanded(): boolean;
     set expanded(expanded: boolean);
     private _expanded;
-    set value(value: string);
-    get value(): string;
-    private _value?;
+    /**
+     * 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. */
+    readonly value: _angular_core.Signal<string>;
     /** Whether the AccordionItem is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
     /** Event emitted every time the AccordionItem is closed. */
-    readonly closed: i0.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
     /** Event emitted every time the AccordionItem is opened. */
-    readonly opened: i0.OutputEmitterRef<void>;
-    /**
-     * Event emitted when the AccordionItem is destroyed.
-     * @docs-private
-     */
-    readonly destroyed: EventEmitter<void>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
     /**
-     * Emits whenever the expanded state of the accordion changes.
+     * Emits whenever the expanded state of the accordion item changes.
      * Primarily used to facilitate two-way binding.
      * @docs-private
      */
-    readonly expandedChange: i0.OutputEmitterRef<boolean>;
+    readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
     /** Unregister function for expansionDispatcher. */
     private removeUniqueSelectionListener;
     /** Subscription to openAll/closeAll events. */
     private openCloseAllSubscription;
     constructor();
-    /** Emits an event for the accordion item being destroyed. */
     ngOnDestroy(): void;
+    /** Moves focus to the item's trigger. */
     focus(): void;
     /** Toggles the expanded state of the accordion item. */
     toggle(): void;
@@ -177,19 +171,149 @@ declare class KbqAccordionItem implements OnDestroy {
     close(): void;
     /** Sets the expanded state of the accordion item to true. */
     open(): void;
-    getState(): any;
+    /** 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 */
     enableAnimation(): void;
     private subscribeToOpenCloseAllActions;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionItem, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionItem, "kbq-accordion-item, [kbq-accordion-item]", never, { "expanded": { "alias": "expanded"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; "expandedChange": "expandedChange"; }, ["trigger", "triggerComponent", "content"], never, true, never>;
+    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;
 }
 
-declare class KbqAccordionContentDirective implements AfterContentInit, AfterViewInit {
+/** Available visual variants of the accordion. */
+type KbqAccordionVariant = 'fill' | 'hug' | 'hugSpaceBetween';
+/** Determines whether one or multiple items can be expanded at the same time. */
+type KbqAccordionType = 'single' | 'multiple';
+/** The layout orientation of the accordion. */
+type KbqAccordionOrientation = 'horizontal' | 'vertical';
+declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit {
+    /** @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 */
+    readonly openCloseAllActions: Subject<boolean>;
+    /**
+     * 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[]>;
+    /**
+     * The accordion items that belong to this accordion.
+     *
+     * A descendant content query resolves against the template the tag is authored in and does not
+     * stop at a nested component of the same type, so `allItems` of an outer accordion also matches
+     * the items of an accordion rendered inside an item's content. Each item's own `accordion` is
+     * 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.
+     */
+    readonly stateSavingKey: _angular_core.InputSignal<string>;
+    /** The visual variant of the accordion. Defaults to `fill`. */
+    readonly variant: _angular_core.InputSignal<KbqAccordionVariant>;
+    /** Whether the whole accordion is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The layout orientation of the accordion. Defaults to `vertical`. */
+    readonly orientation: _angular_core.InputSignal<KbqAccordionOrientation>;
+    /**
+     * 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).
+     */
+    readonly level: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * The value of the item(s) to expand when initially rendered.
+     * Use when you do not need to control the state of the items.
+     */
+    readonly defaultValue: _angular_core.InputSignal<string | string[]>;
+    /** Determines whether one or multiple items can be expanded at the same time. */
+    readonly type: _angular_core.InputSignal<KbqAccordionType>;
+    /** Whether an expanded item can be collapsed by the user. Defaults to `true`. */
+    readonly collapsible: _angular_core.InputSignal<boolean>;
+    /**
+     * 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>;
+    /**
+     * The controlled value of the item(s) to expand, reshaped by mode. Supports `[(value)]`.
+     * Falls back to `defaultValue` while `value` is unbound.
+     *
+     * Always an array in `multiple` mode and always a string in `single` mode — an empty string
+     * when nothing is expanded, matching what `valueChange` emits.
+     */
+    readonly value: Signal<string | string[]>;
+    /** Emits the current value whenever the expanded state of the accordion changes. */
+    readonly valueChange: _angular_core.OutputEmitterRef<string | string[]>;
+    /** The unique id of this accordion. */
+    get id(): string;
+    /** Whether multiple items can be expanded at the same time. */
+    get isMultiple(): boolean;
+    /** Whether a persisted state exists for this accordion. */
+    get hasSavedState(): boolean;
+    /** `defaultValue` normalized to an array for internal coordination. */
+    private readonly defaultValueArray;
+    private _id;
+    private state;
+    constructor();
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Handles a key pressed on an item's trigger.
+     *
+     * Invoked by `KbqAccordionTriggerDirective`, not bound on the accordion host: a root listener
+     * 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;
+    /** Opens all enabled accordion items in an accordion where `type` is `multiple`. */
+    openAll(): void;
+    /** Closes all enabled accordion items. */
+    closeAll(): void;
+    /** @docs-private */
+    setActiveItem(item: KbqAccordionItem): void;
+    /**
+     * Persists the current state of the given item when `useStateSaving` is enabled.
+     * @docs-private
+     */
+    saveItemState(item: KbqAccordionItem, force?: boolean): void;
+    /** The current expanded value(s) derived from the live item state. */
+    private getCurrentValue;
+    /** The key used to persist/restore state. */
+    private get stateStorageKey();
+    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>;
+}
+
+declare class KbqAccordionContentDirective implements AfterViewInit {
     private readonly renderer;
-    private readonly platform;
     /** @docs-private */
     protected readonly nativeElement: HTMLElement;
     /** @docs-private */
@@ -199,40 +323,59 @@ declare class KbqAccordionContentDirective implements AfterContentInit, AfterVie
     /** @docs-private */
     get triggerId(): string;
     /** @docs-private */
-    protected readonly hidden: i0.WritableSignal<boolean>;
+    protected readonly hidden: _angular_core.WritableSignal<boolean>;
     private savedTransition;
     private readonly afterRenderRef?;
+    /** Whether the first browser render has happened, i.e. whether the content can be measured. */
+    private rendered;
     constructor();
     ngAfterViewInit(): void;
-    ngAfterContentInit(): void;
     toggle(): void;
     disableAnimation(): void;
     enableAnimation(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionContentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionContentDirective, "[kbqAccordionContent]", ["kbqAccordionContent"], {}, {}, never, never, true, never>;
+    /**
+     * Publishes the natural height of the projected content as `--kbq-accordion-content-height`,
+     * which the open state animates towards.
+     *
+     * `scrollHeight` is used rather than `getBoundingClientRect()`: the host is `overflow: hidden`
+     * and collapsed to `height: 0` while closed, so its box reports `0`, whereas `scrollHeight`
+     * still reports the height of the content it clips.
+     */
+    private updateHeight;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAccordionContentDirective, "[kbqAccordionContent]", ["kbqAccordionContent"], {}, {}, never, never, true, never>;
 }
 
 declare class KbqAccordionContent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionContent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordionContent, "kbq-accordion-content, [kbq-accordion-content]", never, {}, {}, never, ["*"], true, [{ directive: typeof KbqAccordionContentDirective; inputs: {}; outputs: {}; }]>;
-}
-
-declare class KbqAccordionHeaderDirective {
-    protected readonly item: KbqAccordionItem;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionHeaderDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionHeaderDirective, "[kbqAccordionHeader]", never, {}, {}, never, never, true, never>;
+    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: {}; }]>;
 }
 
 declare class KbqAccordionHeader {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionHeader, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionHeader, "kbq-accordion-header, [kbq-accordion-header]", never, {}, {}, never, never, true, [{ directive: typeof KbqAccordionHeaderDirective; inputs: {}; outputs: {}; }]>;
+    /** @docs-private */
+    protected readonly item: KbqAccordionItem;
+    /** @docs-private */
+    protected readonly accordion: KbqAccordion;
+    /**
+     * Names the heading after the trigger alone.
+     *
+     * A `role="heading"` takes its name from its content, so the header actions sitting beside the
+     * trigger would otherwise append their own labels to it — a section titled "Profile" would be
+     * 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;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAccordionHeader, "kbq-accordion-header, [kbq-accordion-header]", never, {}, {}, never, never, true, never>;
 }
 
 declare class KbqAccordionModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionModule, never>;
-    static ɵmod: i0.ɵɵ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 ɵinj: i0.ɵɵInjectorDeclaration<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 ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqAccordionModule>;
 }
 
-export { KbqAccordion, KbqAccordionContent, KbqAccordionContentDirective, KbqAccordionHeader, KbqAccordionHeaderDirective, KbqAccordionItem, KbqAccordionModule, KbqAccordionTrigger, KbqAccordionTriggerDirective, KbqAccordionVariant };
-export type { KbqAccordionItemState, KbqAccordionOrientation, KbqAccordionType };
+export { KBQ_ACCORDION_STATE_STORE, KbqAccordion, KbqAccordionContent, KbqAccordionContentDirective, KbqAccordionHeader, KbqAccordionItem, KbqAccordionLocalStorageStateStore, KbqAccordionModule, KbqAccordionTrigger, KbqAccordionTriggerDirective };
+export type { KbqAccordionItemSnapshot, KbqAccordionItemState, KbqAccordionOrientation, KbqAccordionState, KbqAccordionStateStore, KbqAccordionType, KbqAccordionVariant };