@wawjs/ngx-prime 22.0.5 → 22.0.6

package/fesm2022/wawjs-ngx-prime-accordion.mjs

@@ -1,14 +1,16 @@
 export * from '@wawjs/ngx-prime/types/accordion';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, forwardRef, model, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, ContentChild, output, signal, NgModule } from '@angular/core';
-import { findSingle, getAttribute, focus, uuid } from '@wawjs/css-prime-utils';
+import { Injectable, InjectionToken, inject, forwardRef, model, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, effect, ContentChild, output, signal, NgModule } from '@angular/core';
+import * as i3 from '@angular/aria/accordion';
+import { AccordionTrigger, AccordionPanel as AccordionPanel$1, AccordionGroup } from '@angular/aria/accordion';
+import { uuid } from '@wawjs/css-prime-utils';
 import { SharedModule } from '@wawjs/ngx-prime/api';
 import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
 import * as i1 from '@wawjs/ngx-prime/bind';
 import { Bind, BindModule } from '@wawjs/ngx-prime/bind';
 import { ChevronDownIcon, ChevronUpIcon } from '@wawjs/ngx-prime/icons';
-import * as i3 from '@wawjs/ngx-prime/motion';
+import * as i4 from '@wawjs/ngx-prime/motion';
 import { MotionModule } from '@wawjs/ngx-prime/motion';
 import * as i2 from '@wawjs/ngx-prime/ripple';
 import { Ripple } from '@wawjs/ngx-prime/ripple';
@@ -58,10 +60,10 @@ class AccordionStyle extends BaseStyle {
     name = 'accordion';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -139,10 +141,10 @@ class AccordionPanel extends BaseComponent {
         return currentValue === value;
     }
     _componentStyle = inject(AccordionStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AccordionPanel, isStandalone: true, selector: "p-accordion-panel, p-accordionpanel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"panel\")", "attr.data-p-disabled": "disabled()", "attr.data-p-active": "active()" } }, providers: [AccordionStyle, { provide: ACCORDION_PANEL_INSTANCE, useExisting: AccordionPanel }, { provide: PARENT_INSTANCE, useExisting: AccordionPanel }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: AccordionPanel, isStandalone: true, selector: "p-accordion-panel, p-accordionpanel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"panel\")", "attr.data-p-disabled": "disabled()", "attr.data-p-active": "active()" } }, providers: [AccordionStyle, { provide: ACCORDION_PANEL_INSTANCE, useExisting: AccordionPanel }, { provide: PARENT_INSTANCE, useExisting: AccordionPanel }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion-panel, p-accordionpanel',
@@ -173,14 +175,34 @@ class AccordionHeader extends BaseComponent {
     }
     pcAccordion = inject(forwardRef(() => Accordion));
     pcAccordionPanel = inject(forwardRef(() => AccordionPanel));
-    id = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaTrigger = inject(AccordionTrigger, { self: true });
+    /**
+     * The `AccordionContent`'s `ngAccordionPanel` instance this header controls, forwarded to
+     * `AriaAccordionTrigger`'s required `panel` input via `hostDirectives`.
+     * @example
+     * ```html
+     * <p-accordion-header [panel]="content">Header</p-accordion-header>
+     * <p-accordion-content #content>Content</p-accordion-content>
+     * ```
+     * @group Props
+     */
     active = computed(() => this.pcAccordionPanel.active(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     disabled = computed(() => this.pcAccordionPanel.disabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    ariaControls = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+    /** Keeps the accordion's `value` model in sync when the trigger toggles via click/keyboard. */
+    syncExpandedEffect = effect(() => {
+        const expanded = this.ariaTrigger.expanded();
+        if (expanded !== this.active()) {
+            this.changeActiveValue();
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncExpandedEffect" }] : /* istanbul ignore next */ []));
+    /** Reflects `Accordion`'s `value` model back onto the aria trigger's `expanded` state. */
+    syncActiveEffect = effect(() => {
+        this.ariaTrigger.expanded.set(this.active());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncActiveEffect" }] : /* istanbul ignore next */ []));
     /**
      * Toggle icon template.
      * @type {TemplateRef<AccordionToggleIconTemplateContext>} context - Context of the template
@@ -192,109 +214,27 @@ class AccordionHeader extends BaseComponent {
      * @group Templates
      */
     toggleicon;
-    onClick(event) {
-        if (this.disabled()) {
-            return;
-        }
+    _componentStyle = inject(AccordionStyle);
+    /** Invoked from `syncExpandedEffect` when the aria trigger's `expanded` state flips. */
+    changeActiveValue() {
         const wasActive = this.active();
-        this.changeActiveValue();
-        const isActive = this.active();
         const index = this.pcAccordionPanel.value();
+        this.pcAccordion.updateValue(index);
+        const isActive = this.active();
         if (!wasActive && isActive) {
-            this.pcAccordion.onOpen.emit({ originalEvent: event, index });
+            this.pcAccordion.onOpen.emit({ index });
         }
         else if (wasActive && !isActive) {
-            this.pcAccordion.onClose.emit({ originalEvent: event, index });
-        }
-    }
-    onFocus() {
-        if (!this.disabled() && this.pcAccordion.selectOnFocus()) {
-            this.changeActiveValue();
-        }
-    }
-    onKeydown(event) {
-        switch (event.code) {
-            case 'ArrowDown':
-                this.arrowDownKey(event);
-                break;
-            case 'ArrowUp':
-                this.arrowUpKey(event);
-                break;
-            case 'Home':
-                this.onHomeKey(event);
-                break;
-            case 'End':
-                this.onEndKey(event);
-                break;
-            case 'Enter':
-            case 'Space':
-            case 'NumpadEnter':
-                this.onEnterKey(event);
-                break;
-            default:
-                break;
+            this.pcAccordion.onClose.emit({ index });
         }
     }
-    _componentStyle = inject(AccordionStyle);
-    changeActiveValue() {
-        this.pcAccordion.updateValue(this.pcAccordionPanel.value());
-    }
-    findPanel(headerElement) {
-        return headerElement?.closest('[data-pc-name="accordionpanel"]');
-    }
-    findHeader(panelElement) {
-        return findSingle(panelElement, '[data-pc-name="accordionheader"]');
-    }
-    findNextPanel(panelElement, selfCheck = false) {
-        const element = selfCheck ? panelElement : panelElement.nextElementSibling;
-        return element ? (getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null;
-    }
-    findPrevPanel(panelElement, selfCheck = false) {
-        const element = selfCheck ? panelElement : panelElement.previousElementSibling;
-        return element ? (getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null;
-    }
-    findFirstPanel() {
-        return this.findNextPanel(this.pcAccordion.el.nativeElement.firstElementChild, true);
-    }
-    findLastPanel() {
-        return this.findPrevPanel(this.pcAccordion.el.nativeElement.lastElementChild, true);
-    }
-    changeFocusedPanel(event, element) {
-        focus(element);
-    }
-    arrowDownKey(event) {
-        const nextPanel = this.findNextPanel(this.findPanel(event.currentTarget));
-        nextPanel ? this.changeFocusedPanel(event, nextPanel) : this.onHomeKey(event);
-        event.preventDefault();
-    }
-    arrowUpKey(event) {
-        const prevPanel = this.findPrevPanel(this.findPanel(event.currentTarget));
-        prevPanel ? this.changeFocusedPanel(event, prevPanel) : this.onEndKey(event);
-        event.preventDefault();
-    }
-    onHomeKey(event) {
-        const firstPanel = this.findFirstPanel();
-        this.changeFocusedPanel(event, firstPanel);
-        event.preventDefault();
-    }
-    onEndKey(event) {
-        const lastPanel = this.findLastPanel();
-        this.changeFocusedPanel(event, lastPanel);
-        event.preventDefault();
-    }
-    onEnterKey(event) {
-        if (!this.disabled()) {
-            this.changeActiveValue();
-        }
-        event.preventDefault();
-    }
     get dataP() {
         return this.cn({
             active: this.active()
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AccordionHeader, isStandalone: true, selector: "p-accordion-header, p-accordionheader", host: { listeners: { "click": "onClick($event)", "focus": "onFocus()", "keydown": "onKeydown($event)" }, properties: { "class": "cx('header')", "attr.id": "id()", "attr.aria-expanded": "active()", "attr.aria-controls": "ariaControls()", "attr.aria-disabled": "disabled()", "attr.role": "\"button\"", "attr.tabindex": "disabled()?\"-1\":\"0\"", "attr.data-p-active": "active()", "attr.data-p-disabled": "disabled()", "style.user-select": "\"none\"", "attr.data-p": "dataP" } }, providers: [AccordionStyle, { provide: ACCORDION_HEADER_INSTANCE, useExisting: AccordionHeader }, { provide: PARENT_INSTANCE, useExisting: AccordionHeader }], queries: [{ propertyName: "toggleicon", first: true, predicate: ["toggleicon"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Ripple }, { directive: i1.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AccordionHeader, isStandalone: true, selector: "p-accordion-header, p-accordionheader", host: { properties: { "class": "cx('header')", "attr.data-p-active": "active()", "attr.data-p-disabled": "disabled()", "style.user-select": "\"none\"", "attr.data-p": "dataP" } }, providers: [AccordionStyle, { provide: ACCORDION_HEADER_INSTANCE, useExisting: AccordionHeader }, { provide: PARENT_INSTANCE, useExisting: AccordionHeader }], queries: [{ propertyName: "toggleicon", first: true, predicate: ["toggleicon"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Ripple }, { directive: i1.Bind }, { directive: i3.AccordionTrigger, inputs: ["panel", "panel", "disabled", "disabled"] }], ngImport: i0, template: `
         <ng-content />
         @if (toggleicon) {
             <ng-template *ngTemplateOutlet="toggleicon; context: { active: active() }"></ng-template>
@@ -318,7 +258,7 @@ class AccordionHeader extends BaseComponent {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronUpIcon, selector: "[data-p-icon=\"chevron-up\"]" }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion-header, p-accordionheader',
@@ -351,21 +291,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         '[class]': "cx('header')",
-                        '[attr.id]': 'id()',
-                        '[attr.aria-expanded]': 'active()',
-                        '[attr.aria-controls]': 'ariaControls()',
-                        '[attr.aria-disabled]': 'disabled()',
-                        '[attr.role]': '"button"',
-                        '[attr.tabindex]': 'disabled()?"-1":"0"',
                         '[attr.data-p-active]': 'active()',
                         '[attr.data-p-disabled]': 'disabled()',
                         '[style.user-select]': '"none"',
-                        '[attr.data-p]': 'dataP',
-                        '(click)': 'onClick($event)',
-                        '(focus)': 'onFocus()',
-                        '(keydown)': 'onKeydown($event)'
+                        '[attr.data-p]': 'dataP'
                     },
-                    hostDirectives: [Ripple, Bind],
+                    hostDirectives: [Ripple, Bind, { directive: AccordionTrigger, inputs: ['panel', 'disabled'] }],
                     providers: [AccordionStyle, { provide: ACCORDION_HEADER_INSTANCE, useExisting: AccordionHeader }, { provide: PARENT_INSTANCE, useExisting: AccordionHeader }]
                 }]
         }], propDecorators: { toggleicon: [{
@@ -381,12 +312,10 @@ class AccordionContent extends BaseComponent {
     }
     pcAccordion = inject(forwardRef(() => Accordion));
     pcAccordionPanel = inject(forwardRef(() => AccordionPanel));
+    /** The `ngAccordionPanel` instance applied to this component's host, exported as `#content="ngAccordionPanel"`. */
+    ariaPanel = inject(AccordionPanel$1, { self: true });
     active = computed(() => this.pcAccordionPanel.active(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    ariaLabelledby = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
-    id = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     _componentStyle = inject(AccordionStyle);
     ptParams = computed(() => ({ context: this.active() }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ptParams" }] : /* istanbul ignore next */ []));
@@ -395,8 +324,8 @@ class AccordionContent extends BaseComponent {
         ...this.pcAccordion.computedMotionOptions()
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: AccordionContent, isStandalone: true, selector: "p-accordion-content, p-accordioncontent", host: { properties: { "class": "cx(\"contentContainer\")", "attr.id": "id()", "attr.role": "\"region\"", "attr.data-p-active": "active()", "attr.aria-labelledby": "ariaLabelledby()" } }, providers: [AccordionStyle, { provide: ACCORDION_CONTENT_INSTANCE, useExisting: AccordionContent }, { provide: PARENT_INSTANCE, useExisting: AccordionContent }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: AccordionContent, isStandalone: true, selector: "p-accordion-content, p-accordioncontent", host: { properties: { "class": "cx(\"contentContainer\")", "attr.data-p-active": "active()" } }, providers: [AccordionStyle, { provide: ACCORDION_CONTENT_INSTANCE, useExisting: AccordionContent }, { provide: PARENT_INSTANCE, useExisting: AccordionContent }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }, { directive: i3.AccordionPanel }], ngImport: i0, template: `
         <p-motion [visible]="active()" name="p-collapsible" hideStrategy="visibility" [mountOnEnter]="false" [unmountOnLeave]="false" [options]="computedMotionOptions()">
             <div [pBind]="ptm('contentWrapper', ptParams())" [class]="cx('contentWrapper')">
                 <div [pBind]="ptm('content', ptParams())" [class]="cx('content')">
@@ -404,9 +333,9 @@ class AccordionContent extends BaseComponent {
                 </div>
             </div>
         </p-motion>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i3.Motion, selector: "p-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i4.Motion, selector: "p-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion-content, p-accordioncontent',
@@ -425,12 +354,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         '[class]': 'cx("contentContainer")',
-                        '[attr.id]': 'id()',
-                        '[attr.role]': '"region"',
-                        '[attr.data-p-active]': 'active()',
-                        '[attr.aria-labelledby]': 'ariaLabelledby()'
+                        '[attr.data-p-active]': 'active()'
                     },
-                    hostDirectives: [Bind],
+                    hostDirectives: [Bind, AccordionPanel$1],
                     providers: [AccordionStyle, { provide: ACCORDION_CONTENT_INSTANCE, useExisting: AccordionContent }, { provide: PARENT_INSTANCE, useExisting: AccordionContent }]
                 }]
         }] });
@@ -445,6 +371,8 @@ class Accordion extends BaseComponent {
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptm('root'));
     }
+    /** The `ngAccordionGroup` instance applied to this component's host. */
+    ariaGroup = inject(AccordionGroup, { self: true });
     /**
      * Value of the active tab.
      * @defaultValue undefined
@@ -457,7 +385,7 @@ class Accordion extends BaseComponent {
      * @defaultValue false
      * @group Props
      */
-    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: (v) => transformToBoolean(v) });
+    multiple = this.ariaGroup.multiExpandable;
     /**
      * Class of the element.
      * @deprecated since v20.0.0, use `class` instead.
@@ -477,12 +405,6 @@ class Accordion extends BaseComponent {
      */
     collapseIcon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "collapseIcon" }] : /* istanbul ignore next */ []));
-    /**
-     * When enabled, the focused tab is activated.
-     * @defaultValue false
-     * @group Props
-     */
-    selectOnFocus = input(false, { ...(ngDevMode ? { debugName: "selectOnFocus" } : /* istanbul ignore next */ {}), transform: (v) => transformToBoolean(v) });
     /**
      * Transition options of the animation.
      * @group Props
@@ -516,69 +438,6 @@ class Accordion extends BaseComponent {
     id = signal(uuid('pn_id_'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     _componentStyle = inject(AccordionStyle);
-    onKeydown(event) {
-        switch (event.code) {
-            case 'ArrowDown':
-                this.onTabArrowDownKey(event);
-                break;
-            case 'ArrowUp':
-                this.onTabArrowUpKey(event);
-                break;
-            case 'Home':
-                if (!event.shiftKey) {
-                    this.onTabHomeKey(event);
-                }
-                break;
-            case 'End':
-                if (!event.shiftKey) {
-                    this.onTabEndKey(event);
-                }
-                break;
-        }
-    }
-    onTabArrowDownKey(event) {
-        const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement);
-        nextHeaderAction ? this.changeFocusedTab(nextHeaderAction) : this.onTabHomeKey(event);
-        event.preventDefault();
-    }
-    onTabArrowUpKey(event) {
-        const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement);
-        prevHeaderAction ? this.changeFocusedTab(prevHeaderAction) : this.onTabEndKey(event);
-        event.preventDefault();
-    }
-    onTabHomeKey(event) {
-        const firstHeaderAction = this.findFirstHeaderAction();
-        this.changeFocusedTab(firstHeaderAction);
-        event.preventDefault();
-    }
-    changeFocusedTab(element) {
-        if (element) {
-            focus(element);
-        }
-    }
-    findNextHeaderAction(tabElement, selfCheck = false) {
-        const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
-        const headerElement = findSingle(nextTabElement, '[data-pc-section="accordionheader"]');
-        return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')) : null;
-    }
-    findPrevHeaderAction(tabElement, selfCheck = false) {
-        const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
-        const headerElement = findSingle(prevTabElement, '[data-pc-section="accordionheader"]');
-        return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')) : null;
-    }
-    findFirstHeaderAction() {
-        const firstEl = this.el.nativeElement.firstElementChild;
-        return this.findNextHeaderAction(firstEl, true);
-    }
-    findLastHeaderAction() {
-        const lastEl = this.el.nativeElement.lastElementChild;
-        return this.findPrevHeaderAction(lastEl, true);
-    }
-    onTabEndKey(event) {
-        const lastHeaderAction = this.findLastHeaderAction();
-        this.changeFocusedTab(lastHeaderAction);
-        event.preventDefault();
-    }
     getBlockableElement() {
         return this.el.nativeElement.children[0];
     }
@@ -604,10 +463,10 @@ class Accordion extends BaseComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: Accordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: Accordion, isStandalone: true, selector: "p-accordion", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, collapseIcon: { classPropertyName: "collapseIcon", publicName: "collapseIcon", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onClose: "onClose", onOpen: "onOpen" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "cn(cx('root'), styleClass())" } }, providers: [AccordionStyle, { provide: ACCORDION_INSTANCE, useExisting: Accordion }, { provide: PARENT_INSTANCE, useExisting: Accordion }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Accordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: Accordion, isStandalone: true, selector: "p-accordion", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, collapseIcon: { classPropertyName: "collapseIcon", publicName: "collapseIcon", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onClose: "onClose", onOpen: "onOpen" }, host: { properties: { "class": "cn(cx('root'), styleClass())" } }, providers: [AccordionStyle, { provide: ACCORDION_INSTANCE, useExisting: Accordion }, { provide: PARENT_INSTANCE, useExisting: Accordion }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }, { directive: i3.AccordionGroup, inputs: ["multiExpandable", "multiple"] }], ngImport: i0, template: ` <ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: Accordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Accordion, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion',
@@ -615,20 +474,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     imports: [SharedModule, BindModule],
                     template: ` <ng-content />`,
                     host: {
-                        '[class]': "cn(cx('root'), styleClass())",
-                        '(keydown)': 'onKeydown($event)'
+                        '[class]': "cn(cx('root'), styleClass())"
                     },
-                    hostDirectives: [Bind],
+                    hostDirectives: [Bind, { directive: AccordionGroup, inputs: ['multiExpandable: multiple'] }],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [AccordionStyle, { provide: ACCORDION_INSTANCE, useExisting: Accordion }, { provide: PARENT_INSTANCE, useExisting: Accordion }]
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], collapseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseIcon", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], transitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], collapseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseIcon", required: false }] }], transitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }] } });
 class AccordionModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule], exports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule, SharedModule, BindModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule], exports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule, SharedModule, BindModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule],