primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-accordion.mjs

@@ -1,5 +1,4 @@
 export * from 'primeng/types/accordion';
-import { trigger, state, transition, style as style$2, animate } from '@angular/animations';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -10,6 +9,8 @@ import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import * as i1 from 'primeng/bind';
 import { Bind, BindModule } from 'primeng/bind';
 import { ChevronDownIcon, ChevronUpIcon } from 'primeng/icons';
+import * as i4 from 'primeng/motion';
+import { MotionModule } from 'primeng/motion';
 import * as i2 from 'primeng/ripple';
 import { Ripple } from 'primeng/ripple';
 import { transformToBoolean } from 'primeng/utils';
@@ -17,31 +18,27 @@ import { style as style$1 } from '@primeuix/styles/accordion';
 import { BaseStyle } from 'primeng/base';
 
 const style = /*css*/ `
-    ${style$1}
+${style$1}
 
-    /*For PrimeNG*/
-    .p-accordionpanel:not(.p-accordionpanel-active) > .p-accordioncontent,
-    .p-accordioncontent-content.ng-animating {
-        overflow: hidden;
-    }
-
-    .p-accordionheader-toggle-icon.icon-start {
-        order: -1;
-    }
+/* For PrimeNG */
+.p-accordionheader-toggle-icon.icon-start {
+    order: -1;
+}
 
-    .p-accordionheader:has(.p-accordionheader-toggle-icon.icon-start) {
-        justify-content: flex-start;
-        gap: dt('accordion.header.padding');
-    }
+.p-accordionheader:has(.p-accordionheader-toggle-icon.icon-start) {
+    justify-content: flex-start;
+    gap: dt('accordion.header.padding');
+}
 
-    .p-accordioncontent.ng-animating {
-        overflow: hidden;
-    }
+.p-accordionheader.p-ripple {
+    overflow: hidden;
+    position: relative;
+}
 
-    .p-accordionheader.p-ripple {
-        overflow: hidden;
-        position: relative;
-    }
+.p-accordioncontent .p-motion {
+    display: grid;
+    grid-template-rows: 1fr;
+}
 `;
 const classes = {
     root: 'p-accordion p-component',
@@ -55,16 +52,17 @@ const classes = {
     header: 'p-accordionheader',
     toggleicon: 'p-accordionheader-toggle-icon',
     contentContainer: 'p-accordioncontent',
+    contentWrapper: 'p-accordioncontent-wrapper',
     content: 'p-accordioncontent-content'
 };
 class AccordionStyle extends BaseStyle {
     name = 'accordion';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AccordionStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AccordionStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AccordionStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -124,14 +122,14 @@ class AccordionPanel extends BaseComponent {
      * @defaultValue undefined
      * @group Props
      */
-    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
     /**
      * Disables the tab when enabled.
      * @defaultValue false
      * @group Props
      */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: (v) => transformToBoolean(v) }] : [{ transform: (v) => transformToBoolean(v) }]));
-    active = computed(() => (this.pcAccordion.multiple() ? this.valueEquals(this.pcAccordion.value(), this.value()) : this.pcAccordion.value() === this.value()), ...(ngDevMode ? [{ debugName: "active" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: (v) => transformToBoolean(v) });
+    active = computed(() => (this.pcAccordion.multiple() ? this.valueEquals(this.pcAccordion.value(), this.value()) : this.pcAccordion.value() === this.value()), { ...(ngDevMode ? { debugName: "active" } : {}) });
     valueEquals(currentValue, value) {
         if (Array.isArray(currentValue)) {
             return currentValue.includes(value);
@@ -139,10 +137,10 @@ class AccordionPanel extends BaseComponent {
         return currentValue === value;
     }
     _componentStyle = inject(AccordionStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AccordionPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.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: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AccordionPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion-panel, p-accordionpanel',
@@ -159,7 +157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     hostDirectives: [Bind],
                     providers: [AccordionStyle, { provide: ACCORDION_PANEL_INSTANCE, useExisting: AccordionPanel }, { provide: PARENT_INSTANCE, useExisting: AccordionPanel }]
                 }]
-        }] });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 /**
  * AccordionHeader is a helper component for Accordion component.
  * @group Components
@@ -172,10 +170,10 @@ class AccordionHeader extends BaseComponent {
     }
     pcAccordion = inject(forwardRef(() => Accordion));
     pcAccordionPanel = inject(forwardRef(() => AccordionPanel));
-    id = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    active = computed(() => this.pcAccordionPanel.active(), ...(ngDevMode ? [{ debugName: "active" }] : []));
-    disabled = computed(() => this.pcAccordionPanel.disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    ariaControls = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
+    id = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, { ...(ngDevMode ? { debugName: "id" } : {}) });
+    active = computed(() => this.pcAccordionPanel.active(), { ...(ngDevMode ? { debugName: "active" } : {}) });
+    disabled = computed(() => this.pcAccordionPanel.disabled(), { ...(ngDevMode ? { debugName: "disabled" } : {}) });
+    ariaControls = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, { ...(ngDevMode ? { debugName: "ariaControls" } : {}) });
     /**
      * Toggle icon template.
      * @type {TemplateRef<AccordionToggleIconTemplateContext>} context - Context of the template
@@ -283,8 +281,13 @@ class AccordionHeader extends BaseComponent {
         }
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AccordionHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AccordionHeader, isStandalone: true, selector: "p-accordion-header, p-accordionheader", host: { listeners: { "click": "onClick($event)", "focus": "onFocus($event)", "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\"" } }, 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: `
+    get dataP() {
+        return this.cn({
+            active: this.active()
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: `
         <ng-content />
         @if (toggleicon) {
             <ng-template *ngTemplateOutlet="toggleicon; context: { active: active() }"></ng-template>
@@ -300,7 +303,7 @@ class AccordionHeader extends BaseComponent {
         }
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AccordionHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion-header, p-accordionheader',
@@ -333,7 +336,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         '[attr.tabindex]': 'disabled()?"-1":"0"',
                         '[attr.data-p-active]': 'active()',
                         '[attr.data-p-disabled]': 'disabled()',
-                        '[style.user-select]': '"none"'
+                        '[style.user-select]': '"none"',
+                        '[attr.data-p]': 'dataP'
                     },
                     hostDirectives: [Ripple, Bind],
                     providers: [AccordionStyle, { provide: ACCORDION_HEADER_INSTANCE, useExisting: AccordionHeader }, { provide: PARENT_INSTANCE, useExisting: AccordionHeader }]
@@ -346,7 +350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['click', ['$event']]
             }], onFocus: [{
                 type: HostListener,
-                args: ['focus', ['$event']]
+                args: ['focus']
             }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -359,51 +363,43 @@ class AccordionContent extends BaseComponent {
     }
     pcAccordion = inject(forwardRef(() => Accordion));
     pcAccordionPanel = inject(forwardRef(() => AccordionPanel));
-    active = computed(() => this.pcAccordionPanel.active(), ...(ngDevMode ? [{ debugName: "active" }] : []));
-    ariaLabelledby = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
-    id = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    active = computed(() => this.pcAccordionPanel.active(), { ...(ngDevMode ? { debugName: "active" } : {}) });
+    ariaLabelledby = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : {}) });
+    id = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, { ...(ngDevMode ? { debugName: "id" } : {}) });
     _componentStyle = inject(AccordionStyle);
-    ptParams = computed(() => ({ context: this.active() }), ...(ngDevMode ? [{ debugName: "ptParams" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.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: `<div
-        [class]="cx('content')"
-        [@content]="active() ? { value: 'visible', params: { transitionParams: pcAccordion.transitionOptions } } : { value: 'hidden', params: { transitionParams: pcAccordion.transitionOptions } }"
-        [pBind]="ptm('content', ptParams())"
-    >
-        <ng-content />
-    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], animations: [
-            trigger('content', [
-                state('hidden', style$2({
-                    height: '0',
-                    // To prevent memory leak, Angular issue. https://github.com/primefaces/primeng/issues/18546
-                    paddingBlockStart: '0',
-                    paddingBlockEnd: '0',
-                    borderBlockStartWidth: '0',
-                    borderBlockEndWidth: '0',
-                    //
-                    visibility: 'hidden'
-                })),
-                state('visible', style$2({
-                    height: '*'
-                })),
-                transition('visible <=> hidden', [animate('{{transitionParams}}')]),
-                transition('void => *', animate(0))
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ptParams = computed(() => ({ context: this.active() }), { ...(ngDevMode ? { debugName: "ptParams" } : {}) });
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion', this.ptParams()),
+            ...this.pcAccordion.computedMotionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMotionOptions" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", 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: `
+        <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')">
+                    <ng-content />
+                </div>
+            </div>
+        </p-motion>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "20.3.4", ngImport: i0, type: AccordionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion-content, p-accordioncontent',
-                    imports: [CommonModule, BindModule],
+                    imports: [CommonModule, BindModule, MotionModule],
                     standalone: true,
-                    template: `<div
-        [class]="cx('content')"
-        [@content]="active() ? { value: 'visible', params: { transitionParams: pcAccordion.transitionOptions } } : { value: 'hidden', params: { transitionParams: pcAccordion.transitionOptions } }"
-        [pBind]="ptm('content', ptParams())"
-    >
-        <ng-content />
-    </div>`,
+                    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')">
+                    <ng-content />
+                </div>
+            </div>
+        </p-motion>
+    `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
@@ -414,25 +410,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         '[attr.aria-labelledby]': 'ariaLabelledby()'
                     },
                     hostDirectives: [Bind],
-                    animations: [
-                        trigger('content', [
-                            state('hidden', style$2({
-                                height: '0',
-                                // To prevent memory leak, Angular issue. https://github.com/primefaces/primeng/issues/18546
-                                paddingBlockStart: '0',
-                                paddingBlockEnd: '0',
-                                borderBlockStartWidth: '0',
-                                borderBlockEndWidth: '0',
-                                //
-                                visibility: 'hidden'
-                            })),
-                            state('visible', style$2({
-                                height: '*'
-                            })),
-                            transition('visible <=> hidden', [animate('{{transitionParams}}')]),
-                            transition('void => *', animate(0))
-                        ])
-                    ],
                     providers: [AccordionStyle, { provide: ACCORDION_CONTENT_INSTANCE, useExisting: AccordionContent }, { provide: PARENT_INSTANCE, useExisting: AccordionContent }]
                 }]
         }] });
@@ -451,13 +428,13 @@ class Accordion extends BaseComponent {
      * @defaultValue undefined
      * @group Props
      */
-    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
     /**
      * When enabled, multiple tabs can be activated at the same time.
      * @defaultValue false
      * @group Props
      */
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: (v) => transformToBoolean(v) }] : [{ transform: (v) => transformToBoolean(v) }]));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: (v) => transformToBoolean(v) });
     /**
      * Class of the element.
      * @deprecated since v20.0.0, use `class` instead.
@@ -479,12 +456,24 @@ class Accordion extends BaseComponent {
      * @defaultValue false
      * @group Props
      */
-    selectOnFocus = input(false, ...(ngDevMode ? [{ debugName: "selectOnFocus", transform: (v) => transformToBoolean(v) }] : [{ transform: (v) => transformToBoolean(v) }]));
+    selectOnFocus = input(false, { ...(ngDevMode ? { debugName: "selectOnFocus" } : {}), transform: (v) => transformToBoolean(v) });
     /**
      * Transition options of the animation.
      * @group Props
+     * @deprecated since v21.0.0, use `motionOptions` instead.
      */
     transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...this.motionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMotionOptions" } : {}) });
     /**
      * Callback to invoke when an active tab is collapsed by clicking on the header.
      * @param {AccordionTabCloseEvent} event - Custom tab close event.
@@ -497,7 +486,7 @@ class Accordion extends BaseComponent {
      * @group Emits
      */
     onOpen = new EventEmitter();
-    id = signal(uuid('pn_id_'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = signal(uuid('pn_id_'), { ...(ngDevMode ? { debugName: "id" } : {}) });
     _componentStyle = inject(AccordionStyle);
     onKeydown(event) {
         switch (event.code) {
@@ -587,16 +576,16 @@ class Accordion extends BaseComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Accordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.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: false, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: false, isRequired: false, transformFunction: null }, collapseIcon: { classPropertyName: "collapseIcon", publicName: "collapseIcon", isSignal: false, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: false, 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: CommonModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Accordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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: false, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: false, isRequired: false, transformFunction: null }, collapseIcon: { classPropertyName: "collapseIcon", publicName: "collapseIcon", isSignal: false, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: false, 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: CommonModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Accordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Accordion, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion',
                     standalone: true,
                     imports: [CommonModule, SharedModule, BindModule],
-                    template: ` <ng-content /> `,
+                    template: ` <ng-content />`,
                     host: {
                         '[class]': "cn(cx('root'), styleClass)"
                     },
@@ -604,15 +593,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [AccordionStyle, { provide: ACCORDION_INSTANCE, useExisting: Accordion }, { provide: PARENT_INSTANCE, useExisting: Accordion }]
                 }]
-        }], propDecorators: { styleClass: [{
+        }], 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: Input
             }], expandIcon: [{
                 type: Input
             }], collapseIcon: [{
                 type: Input
-            }], transitionOptions: [{
+            }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], transitionOptions: [{
                 type: Input
-            }], onClose: [{
+            }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onClose: [{
                 type: Output
             }], onOpen: [{
                 type: Output
@@ -621,11 +610,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 class AccordionModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.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: "20.3.4", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule, SharedModule, BindModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", 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: "21.0.1", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule, SharedModule, BindModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule],