@koobiq/components 20.2.0 → 20.3.1

package/fesm2022/koobiq-components-accordion.mjs

@@ -66,10 +66,10 @@ class KbqAccordionContentDirective {
     updateHeight() {
         this.renderer.setStyle(this.nativeElement, '--kbq-accordion-content-height', `${this.nativeElement.scrollHeight}px`, RendererStyleFlags2.DashCase);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAccordionContentDirective, isStandalone: true, selector: "[kbqAccordionContent]", host: { listeners: { "transitionend": "toggle()" }, properties: { "attr.id": "contentId", "attr.role": "\"region\"", "attr.hidden": "hidden() ? \"\" : null", "attr.aria-labelledby": "triggerId", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["kbqAccordionContent"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAccordionContentDirective, isStandalone: true, selector: "[kbqAccordionContent]", host: { listeners: { "transitionend": "toggle()" }, properties: { "attr.id": "contentId", "attr.role": "\"region\"", "attr.hidden": "hidden() ? \"\" : null", "attr.inert": "hidden() ? \"\" : null", "attr.aria-labelledby": "triggerId", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["kbqAccordionContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionContent]',
@@ -77,6 +77,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '[attr.id]': 'contentId',
                         '[attr.role]': '"region"',
                         '[attr.hidden]': 'hidden() ? "" : null',
+                        // `hidden` alone does not take the collapsed content out of the tab order: the host keeps an
+                        // explicit `display: block` so the height can animate, which overrides `[hidden]`'s
+                        // `display: none`. Without `inert`, every control inside a closed section stays focusable in
+                        // a zero-height, clipped box.
+                        '[attr.inert]': 'hidden() ? "" : null',
                         '[attr.aria-labelledby]': 'triggerId',
                         '[attr.data-state]': 'item.dataState',
                         '[attr.data-disabled]': 'item.disabled',
@@ -119,14 +124,30 @@ class KbqAccordionTriggerDirective {
     onFocus() {
         this.accordion.setActiveItem(this.item);
     }
+    /**
+     * 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) {
+        if (event.target !== this.nativeElement)
+            return;
+        // The key manager can lag behind when focus was moved programmatically rather than by the
+        // user, in which case `onFocus` never ran.
+        this.accordion.setActiveItem(this.item);
+        this.accordion.keydownHandler(event);
+    }
     /** @docs-private */
     focus() {
         this.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAccordionTriggerDirective, isStandalone: true, selector: "[kbqAccordionTrigger]", host: { listeners: { "click": "onClick()", "focus": "onFocus()" }, properties: { "attr.id": "triggerId", "attr.role": "\"button\"", "attr.aria-expanded": "item.expanded", "attr.aria-controls": "contentId", "attr.aria-disabled": "item.disabled", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAccordionTriggerDirective, isStandalone: true, selector: "[kbqAccordionTrigger]", host: { listeners: { "click": "onClick()", "focus": "onFocus()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "triggerId", "attr.role": "\"button\"", "attr.aria-expanded": "item.expanded", "attr.aria-controls": "contentId", "attr.aria-disabled": "item.disabled", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionTrigger]',
@@ -140,7 +161,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation',
                         '(click)': 'onClick()',
-                        '(focus)': 'onFocus()'
+                        '(focus)': 'onFocus()',
+                        '(keydown)': 'onKeydown($event)'
                     }
                 }]
         }] });
@@ -180,17 +202,17 @@ class KbqAccordionTrigger {
     enableAnimation() {
         this.icon().getHostElement().style.transition = this.savedTransition;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqAccordionTrigger, isStandalone: true, selector: "kbq-accordion-trigger, [kbq-accordion-trigger]", host: { properties: { "class.kbq-accordion-trigger_fill": "isFill", "class.kbq-accordion-trigger_hug": "isHug", "class.kbq-accordion-trigger_hug-space-between": "isHugSpaceBetween" }, classAttribute: "kbq-accordion-trigger" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true, isSignal: true }], hostDirectives: [{ directive: KbqAccordionTriggerDirective }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqAccordionTrigger, isStandalone: true, selector: "kbq-accordion-trigger, [kbq-accordion-trigger]", host: { properties: { "class.kbq-accordion-trigger_fill": "isFill", "class.kbq-accordion-trigger_hug": "isHug", "class.kbq-accordion-trigger_hug-space-between": "isHugSpaceBetween" }, classAttribute: "kbq-accordion-trigger" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true, isSignal: true }], hostDirectives: [{ directive: KbqAccordionTriggerDirective }], ngImport: i0, template: `
         <i
             kbq-icon="{{ isHugSpaceBetween ? 'kbq-chevron-down-s_16' : 'kbq-chevron-right-s_16' }}"
             class="kbq-accordion-trigger__icon"
         ></i>
 
         <ng-content />
-    `, isInline: true, styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center}.kbq-accordion-trigger .kbq-accordion-trigger__icon{box-sizing:initial;align-self:flex-start;padding:var(--kbq-size-xxs);transition:transform .3s ease-out}@media(prefers-reduced-motion:reduce){.kbq-accordion-trigger .kbq-accordion-trigger__icon{transition:none}}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center}.kbq-accordion-trigger .kbq-accordion-trigger__icon{box-sizing:initial;align-self:flex-start;padding:var(--kbq-size-xxs);transition:transform .3s ease-out}@media(prefers-reduced-motion:reduce){.kbq-accordion-trigger .kbq-accordion-trigger__icon{transition:none}}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}button.kbq-accordion-trigger{flex:1;min-width:0}\n", ".kbq-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionTrigger, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-accordion-trigger, [kbq-accordion-trigger]', imports: [KbqIcon], template: `
         <i
@@ -204,7 +226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '[class.kbq-accordion-trigger_fill]': 'isFill',
                         '[class.kbq-accordion-trigger_hug]': 'isHug',
                         '[class.kbq-accordion-trigger_hug-space-between]': 'isHugSpaceBetween'
-                    }, hostDirectives: [KbqAccordionTriggerDirective], styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center}.kbq-accordion-trigger .kbq-accordion-trigger__icon{box-sizing:initial;align-self:flex-start;padding:var(--kbq-size-xxs);transition:transform .3s ease-out}@media(prefers-reduced-motion:reduce){.kbq-accordion-trigger .kbq-accordion-trigger__icon{transition:none}}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
+                    }, hostDirectives: [KbqAccordionTriggerDirective], styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center}.kbq-accordion-trigger .kbq-accordion-trigger__icon{box-sizing:initial;align-self:flex-start;padding:var(--kbq-size-xxs);transition:transform .3s ease-out}@media(prefers-reduced-motion:reduce){.kbq-accordion-trigger .kbq-accordion-trigger__icon{transition:none}}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}button.kbq-accordion-trigger{flex:1;min-width:0}\n", ".kbq-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqIcon), { isSignal: true }] }] } });
 
 let uniqueIdCounter$1 = 0;
@@ -265,7 +287,10 @@ class KbqAccordionItem {
         this._disabled = value;
     }
     constructor() {
-        /** @docs-private */
+        /**
+         * 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.
+         */
         this.accordion = inject(KbqAccordion);
         /** @docs-private */
         this.changeDetectorRef = inject(ChangeDetectorRef);
@@ -377,10 +402,10 @@ class KbqAccordionItem {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: KbqAccordionItem, isStandalone: true, selector: "kbq-accordion-item, [kbq-accordion-item]", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { closed: "closed", opened: "opened", expandedChange: "expandedChange" }, host: { properties: { "attr.data-state": "dataState", "attr.data-disabled": "disabled", "attr.data-orientation": "orientation" }, classAttribute: "kbq-accordion-item" }, queries: [{ propertyName: "trigger", first: true, predicate: KbqAccordionTriggerDirective, descendants: true, isSignal: true }, { propertyName: "triggerComponent", first: true, predicate: KbqAccordionTrigger, descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: i0.forwardRef(() => KbqAccordionContentDirective), descendants: true, isSignal: true }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.30", type: KbqAccordionItem, isStandalone: true, selector: "kbq-accordion-item, [kbq-accordion-item]", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { closed: "closed", opened: "opened", expandedChange: "expandedChange" }, host: { properties: { "attr.data-state": "dataState", "attr.data-disabled": "disabled", "attr.data-orientation": "orientation" }, classAttribute: "kbq-accordion-item" }, queries: [{ propertyName: "trigger", first: true, predicate: KbqAccordionTriggerDirective, descendants: true, isSignal: true }, { propertyName: "triggerComponent", first: true, predicate: KbqAccordionTrigger, descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: i0.forwardRef(() => KbqAccordionContentDirective), descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-item, [kbq-accordion-item]',
@@ -431,10 +456,10 @@ class KbqAccordionLocalStorageStateStore {
             // Ignore storage write failures (quota exceeded, disabled/blocked storage, etc.).
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionLocalStorageStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionLocalStorageStateStore, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionLocalStorageStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionLocalStorageStateStore, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionLocalStorageStateStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionLocalStorageStateStore, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -476,8 +501,26 @@ class KbqAccordion {
         this.stateStore = inject(KBQ_ACCORDION_STATE_STORE);
         /** Emits every time `openAll()` or `closeAll()` is called. @docs-private */
         this.openCloseAllActions = new Subject();
-        /** The accordion items projected into this accordion. @docs-private */
-        this.items = contentChildren(forwardRef(() => KbqAccordionItem), ...(ngDevMode ? [{ debugName: "items", descendants: true }] : [{ descendants: true }]));
+        /**
+         * Every item the content query matches, including those of a nested accordion.
+         * Use `items` instead — this one is the raw, unfiltered query.
+         * @docs-private
+         */
+        // The generic is explicit because `forwardRef` erases the locator type, which would leave both
+        // this query and `items` as `Signal<any[]>` in the public API report.
+        this.allItems = contentChildren(forwardRef(() => KbqAccordionItem), ...(ngDevMode ? [{ debugName: "allItems", descendants: true }] : [{ descendants: true }]));
+        /**
+         * 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
+         */
+        this.items = computed(() => this.allItems().filter((item) => item.accordion === this), ...(ngDevMode ? [{ debugName: "items" }] : []));
         /** Whether the accordion persists the expanded state of its items across reloads. Defaults to `false`. */
         this.useStateSaving = input(false, ...(ngDevMode ? [{ debugName: "useStateSaving", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /**
@@ -595,17 +638,21 @@ class KbqAccordion {
         this.openCloseAllActions.complete();
         this.keyManager?.destroy();
     }
-    /** @docs-private */
+    /**
+     * 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) {
-        if (!this.keyManager)
+        const activeItem = this.keyManager?.activeItem;
+        if (!activeItem)
             return;
-        if (!this.keyManager.activeItem) {
-            this.keyManager.setFirstItemActive();
-        }
-        const activeItem = this.keyManager.activeItem;
         if ((event.keyCode === ENTER || event.keyCode === SPACE) &&
             !this.keyManager.isTyping() &&
-            activeItem &&
             !activeItem.disabled) {
             event.preventDefault();
             activeItem.toggle();
@@ -653,27 +700,26 @@ class KbqAccordion {
     get stateStorageKey() {
         return this.stateSavingKey() || this.id;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqAccordion, isStandalone: true, selector: "kbq-accordion, [kbq-accordion]", inputs: { useStateSaving: { classPropertyName: "useStateSaving", publicName: "useStateSaving", isSignal: true, isRequired: false, transformFunction: null }, stateSavingKey: { classPropertyName: "stateSavingKey", publicName: "stateSavingKey", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "keydownHandler($event)" }, properties: { "attr.data-orientation": "orientation()" }, classAttribute: "kbq-accordion" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqAccordion, isStandalone: true, selector: "kbq-accordion, [kbq-accordion]", inputs: { useStateSaving: { classPropertyName: "useStateSaving", publicName: "useStateSaving", isSignal: true, isRequired: false, transformFunction: null }, stateSavingKey: { classPropertyName: "stateSavingKey", publicName: "stateSavingKey", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-orientation": "orientation()" }, classAttribute: "kbq-accordion" }, providers: [
             { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
-        ], queries: [{ propertyName: "items", predicate: i0.forwardRef(() => KbqAccordionItem), descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:var(--kbq-accordion-size-item-border-width);border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:height .3s ease-out;height:var(--kbq-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:focus-within{border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "allItems", predicate: i0.forwardRef(() => KbqAccordionItem), descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:var(--kbq-accordion-size-item-border-width);border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height);overflow:hidden}.kbq-accordion-header>.kbq-accordion-header__actions{display:flex;align-items:center;gap:var(--kbq-accordion-size-item-header-actions-gap);flex-shrink:0;padding-right:var(--kbq-accordion-size-item-header-actions-padding-right)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:height .3s ease-out;height:var(--kbq-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-trigger:focus),.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-header .kbq-accordion-trigger:focus){border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordion, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-accordion, [kbq-accordion]', template: '<ng-content />', providers: [
                         { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-accordion',
-                        '[attr.data-orientation]': 'orientation()',
-                        '(keydown)': 'keydownHandler($event)'
-                    }, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:var(--kbq-accordion-size-item-border-width);border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:height .3s ease-out;height:var(--kbq-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:focus-within{border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqAccordionItem), { ...{ descendants: true }, isSignal: true }] }], useStateSaving: [{ type: i0.Input, args: [{ isSignal: true, alias: "useStateSaving", required: false }] }], stateSavingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateSavingKey", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+                        '[attr.data-orientation]': 'orientation()'
+                    }, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:var(--kbq-accordion-size-item-border-width);border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height);overflow:hidden}.kbq-accordion-header>.kbq-accordion-header__actions{display:flex;align-items:center;gap:var(--kbq-accordion-size-item-header-actions-gap);flex-shrink:0;padding-right:var(--kbq-accordion-size-item-header-actions-padding-right)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>.kbq-accordion-content__body{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:height .3s ease-out;height:var(--kbq-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:height .3s ease-out;height:0}@media(prefers-reduced-motion:reduce){.kbq-accordion-content[data-state=open],.kbq-accordion-content[data-state=closed]{transition:none}}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-trigger:focus),.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:has(>.kbq-accordion-header .kbq-accordion-trigger:focus){border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-border-width: 2px;--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-size-item-header-actions-gap: var(--kbq-size-3xs);--kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { allItems: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqAccordionItem), { ...{ descendants: true }, isSignal: true }] }], useStateSaving: [{ type: i0.Input, args: [{ isSignal: true, alias: "useStateSaving", required: false }] }], stateSavingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateSavingKey", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class KbqAccordionContent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: KbqAccordionContent, isStandalone: true, selector: "kbq-accordion-content, [kbq-accordion-content]", host: { classAttribute: "kbq-accordion-content" }, hostDirectives: [{ directive: KbqAccordionContentDirective }], ngImport: i0, template: '<div class="kbq-accordion-content__body"><ng-content /></div>', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqAccordionContent, isStandalone: true, selector: "kbq-accordion-content, [kbq-accordion-content]", host: { classAttribute: "kbq-accordion-content" }, hostDirectives: [{ directive: KbqAccordionContentDirective }], ngImport: i0, template: '<div class="kbq-accordion-content__body"><ng-content /></div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-accordion-content, [kbq-accordion-content]',
@@ -695,10 +741,23 @@ class KbqAccordionHeader {
         /** @docs-private */
         this.accordion = inject(KbqAccordion);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAccordionHeader, isStandalone: true, selector: "kbq-accordion-header, [kbq-accordion-header]", host: { properties: { "attr.role": "\"heading\"", "attr.aria-level": "accordion.level()", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" }, classAttribute: "kbq-accordion-header" }, ngImport: i0 }); }
+    /**
+     * 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
+     */
+    get labelledBy() {
+        return this.item.trigger()?.triggerId ?? null;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAccordionHeader, isStandalone: true, selector: "kbq-accordion-header, [kbq-accordion-header]", host: { properties: { "attr.role": "\"heading\"", "attr.aria-level": "accordion.level()", "attr.aria-labelledby": "labelledBy", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" }, classAttribute: "kbq-accordion-header" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-header, [kbq-accordion-header]',
@@ -706,6 +765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         class: 'kbq-accordion-header',
                         '[attr.role]': '"heading"',
                         '[attr.aria-level]': 'accordion.level()',
+                        '[attr.aria-labelledby]': 'labelledBy',
                         '[attr.data-state]': 'item.dataState',
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation'
@@ -714,8 +774,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 
 class KbqAccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
             KbqAccordion,
             KbqAccordionContent,
             KbqAccordionHeader,
@@ -725,10 +785,10 @@ class KbqAccordionModule {
             KbqAccordionHeader,
             KbqAccordionItem,
             KbqAccordionTrigger] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
             KbqAccordionTrigger] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [