@koobiq/components 20.1.0 → 20.2.0

package/accordion/_accordion-theme.scss

@@ -36,7 +36,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,4 +1,5 @@
 .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)

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,

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

@@ -8,7 +8,7 @@
     box-sizing: border-box;
     display: block;
 
-    border-width: 2px;
+    border-width: var(--kbq-accordion-size-item-border-width);
     border-style: solid;
     border-color: transparent;
 }
@@ -23,14 +23,14 @@
     display: block;
     overflow: hidden;
 
-    & > p {
+    & > .kbq-accordion-content__body {
         margin: unset;
         padding: var(--kbq-accordion-size-item-content-padding);
     }
 
     &[data-state='open'] {
         transition: height 300ms ease-out;
-        height: var(--radix-accordion-content-height);
+        height: var(--kbq-accordion-content-height);
     }
 
     &[data-state='closed'] {

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 } 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,30 +64,38 @@ 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;
     /** @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';
@@ -127,49 +107,51 @@ declare class KbqAccordionItem implements OnDestroy {
     /** @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>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
     /**
-     * Event emitted when the AccordionItem is destroyed.
-     * @docs-private
-     */
-    readonly destroyed: EventEmitter<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 +159,125 @@ 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>;
+    /** The accordion items projected into this accordion. @docs-private */
+    readonly items: _angular_core.Signal<readonly any[]>;
+    /** 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: _angular_core.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;
+    /** @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"; }, ["items"], ["*"], true, never>;
+}
+
+declare class KbqAccordionContentDirective implements AfterViewInit {
     private readonly renderer;
-    private readonly platform;
     /** @docs-private */
     protected readonly nativeElement: HTMLElement;
     /** @docs-private */
@@ -199,40 +287,48 @@ 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;
+    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 };

package/alert/_alert-theme.scss

@@ -29,6 +29,20 @@
         &.kbq-alert_info {
             @include kbq-alert-style(default, info);
         }
+
+        // The status icon is the only thing distinguishing default-style alerts, so it must clear the
+        // WCAG 1.4.11 3:1 non-text minimum. The `--kbq-icon-*` palette is tuned for the page background
+        // and does not clear it against the neutral container in the light scheme (warning 2.59:1,
+        // success 2.79:1); the darker `--kbq-foreground-*` values do (4.00:1 / 4.65:1). In the dark
+        // scheme both palettes resolve to the same value, so this override is inert there.
+        // The token has to be redeclared on the icon element itself: icon-tokens.scss declares
+        // `--kbq-icon-warning-color` on `.kbq-icon`, so a value inherited from `.kbq-alert` never wins.
+        // `:not()` excludes icon-item and icon-button, which inherit `.kbq-icon` from KbqIcon but paint
+        // their own filled backgrounds.
+        .kbq-alert__icon > .kbq-icon:not(.kbq-icon-item, .kbq-icon-button) {
+            --kbq-icon-warning-color: var(--kbq-foreground-warning);
+            --kbq-icon-success-color: var(--kbq-foreground-success);
+        }
     }
 
     .kbq-alert.kbq-alert_colored {

package/alert/alert.component.scss

@@ -12,6 +12,11 @@
     }
 }
 
+.kbq-alert__icon {
+    display: inline-flex;
+    align-items: flex-start;
+}
+
 .kbq-alert__content {
     display: flex;
     flex-direction: column;
@@ -30,14 +35,13 @@
         margin: var(--kbq-alert-size-normal-no-title-icon-margin-top) var(--kbq-alert-size-normal-icon-margin-right)
             var(--kbq-alert-size-normal-icon-margin-bottom) var(--kbq-alert-size-normal-icon-margin-left);
 
+        padding-top: var(--kbq-alert-size-normal-no-title-icon-padding-top);
+
         &.kbq-alert__icon_title {
             margin-top: var(--kbq-alert-size-normal-icon-margin-top);
 
-            padding-top: var(--kbq-alert-size-normal-no-title-icon-padding-top);
+            padding-top: var(--kbq-alert-size-normal-icon-padding-top);
         }
-
-        display: inline-flex;
-        align-items: flex-start;
     }
 
     & .kbq-alert__content {
@@ -50,12 +54,17 @@
     }
 
     & .kbq-alert__button-stack {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--kbq-size-m);
+
         padding-top: var(--kbq-alert-size-normal-button-stack-padding-top);
         padding-bottom: var(--kbq-alert-size-normal-button-stack-padding-bottom);
     }
 
     & .kbq-alert__button-stack_has-button {
-        padding-top: 12px;
+        padding-top: var(--kbq-size-m);
     }
 
     & .kbq-alert__close-button {
@@ -63,8 +72,8 @@
         margin-left: var(--kbq-alert-size-normal-close-button-margin-left);
 
         .kbq-icon-button {
-            --kbq-icon-button-size-normal-horizontal-padding: 4px;
-            --kbq-icon-button-size-normal-vertical-padding: 4px;
+            --kbq-icon-button-size-normal-horizontal-padding: var(--kbq-size-xxs);
+            --kbq-icon-button-size-normal-vertical-padding: var(--kbq-size-xxs);
         }
     }
 }
@@ -86,9 +95,6 @@
 
             padding-top: var(--kbq-alert-size-compact-icon-padding-top);
         }
-
-        display: inline-flex;
-        align-items: flex-start;
     }
 
     & .kbq-alert__content {
@@ -101,12 +107,17 @@
     }
 
     & .kbq-alert__button-stack {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--kbq-size-m);
+
         padding-top: var(--kbq-alert-size-compact-button-stack-padding-top);
         padding-bottom: var(--kbq-alert-size-compact-button-stack-padding-bottom);
     }
 
     & .kbq-alert__button-stack_has-button {
-        padding-top: 12px;
+        padding-top: var(--kbq-size-m);
     }
 
     & .kbq-alert__close-button {
@@ -114,8 +125,8 @@
         margin-left: var(--kbq-alert-size-compact-close-button-margin-left);
 
         .kbq-icon-button {
-            --kbq-icon-button-size-normal-horizontal-padding: 4px;
-            --kbq-icon-button-size-normal-vertical-padding: 4px;
+            --kbq-icon-button-size-normal-horizontal-padding: var(--kbq-size-xxs);
+            --kbq-icon-button-size-normal-vertical-padding: var(--kbq-size-xxs);
         }
     }
 }