@ionic/core 8.7.8-dev.11761831339.1f84c484 → 8.7.8-dev.11761836444.1981623a

package/dist/ionic/p-22f43409.entry.js

@@ -0,0 +1,4 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import{r as o,e as t,h as i,d as n,g as e,c as a,f as s}from"./p-C8IsBmNU.js";import{g as r,r as d,f as c,m as h,t as l}from"./p-CTfR9YZG.js";import{l as p}from"./p-DV3sJJW8.js";import{b as u}from"./p-BFvmZNyx.js";const g=class{constructor(i){o(this,i),this.updateListener=o=>{var t,i;const n=null!==(i=null===(t=o.detail)||void 0===t?void 0:t.initial)&&void 0!==i&&i;n||(this.hasInteracted=!0),this.updateState(n)},this.state=1,this.isNext=!1,this.isPrevious=!1,this.hasInteracted=!1,this.hasEverBeenExpanded=!1,this.value="ion-accordion-"+x++,this.disabled=!1,this.readonly=!1,this.toggleIcon=p,this.toggleIconSlot="end",this.setItemDefaults=()=>{const o=this.getSlottedHeaderIonItem();o&&(o.button=!0,o.detail=!1,void 0===o.lines&&(o.lines="full"))},this.getSlottedHeaderIonItem=()=>{const{headerEl:o}=this;if(!o)return;const t=o.querySelector("slot");return t&&void 0!==t.assignedElements?t.assignedElements().find((o=>"ION-ITEM"===o.tagName)):void 0},this.setAria=(o=!1)=>{const t=this.getSlottedHeaderIonItem();if(!t)return;const i=r(t).querySelector("button");i&&i.setAttribute("aria-expanded",`${o}`)},this.slotToggleIcon=()=>{const o=this.getSlottedHeaderIonItem();if(!o)return;const{toggleIconSlot:t,toggleIcon:i}=this;if(o.querySelector(".ion-accordion-toggle-icon"))return;const n=document.createElement("ion-icon");n.slot=t,n.lazy=!1,n.classList.add("ion-accordion-toggle-icon"),n.icon=i,n.setAttribute("aria-hidden","true"),o.appendChild(n)},this.expandAccordion=(o=!1)=>{const{contentEl:t,contentElWrapper:i}=this;if(o||void 0===t||void 0===i)return this.state=4,void(this.hasEverBeenExpanded=!0);4!==this.state&&(void 0!==this.currentRaf&&cancelAnimationFrame(this.currentRaf),this.hasEverBeenExpanded=!0,this.shouldAnimate()?d((()=>{this.state=8,this.currentRaf=d((async()=>{const o=i.offsetHeight,n=l(t,2e3);t.style.setProperty("max-height",`${o}px`),await n,this.state=4,t.style.removeProperty("max-height")}))})):this.state=4)},this.collapseAccordion=(o=!1)=>{const{contentEl:t}=this;o||void 0===t?this.state=1:1!==this.state&&(void 0!==this.currentRaf&&cancelAnimationFrame(this.currentRaf),this.shouldAnimate()?this.currentRaf=d((async()=>{t.style.setProperty("max-height",`${t.offsetHeight}px`),d((async()=>{const o=l(t,2e3);this.state=2,await o,this.state=1,t.style.removeProperty("max-height")}))})):this.state=1)},this.shouldAnimate=()=>!(!this.hasInteracted||!this.hasEverBeenExpanded)&&("undefined"!=typeof window&&(!matchMedia("(prefers-reduced-motion: reduce)").matches&&!(!t.get("animated",!0)||this.accordionGroupEl&&!this.accordionGroupEl.animated))),this.updateState=async(o=!1)=>{const t=this.accordionGroupEl,i=this.value;if(!t)return;const n=t.value;if(Array.isArray(n)?n.includes(i):n===i)this.expandAccordion(o),this.isNext=this.isPrevious=!1;else{this.collapseAccordion(o);const t=this.getNextSibling(),i=null==t?void 0:t.value;void 0!==i&&(this.isPrevious=Array.isArray(n)?n.includes(i):n===i);const e=this.getPreviousSibling(),a=null==e?void 0:e.value;void 0!==a&&(this.isNext=Array.isArray(n)?n.includes(a):n===a)}},this.getNextSibling=()=>{if(!this.el)return;const o=this.el.nextElementSibling;return"ION-ACCORDION"===(null==o?void 0:o.tagName)?o:void 0},this.getPreviousSibling=()=>{if(!this.el)return;const o=this.el.previousElementSibling;return"ION-ACCORDION"===(null==o?void 0:o.tagName)?o:void 0}}valueChanged(){this.updateState()}connectedCallback(){var o;const t=this.accordionGroupEl=null===(o=this.el)||void 0===o?void 0:o.closest("ion-accordion-group");t&&(this.updateState(!0),c(t,"ionValueChange",this.updateListener))}disconnectedCallback(){const o=this.accordionGroupEl;o&&h(o,"ionValueChange",this.updateListener)}componentDidLoad(){this.setItemDefaults(),this.slotToggleIcon(),d((()=>{this.setAria(4===this.state||8===this.state)}))}toggleExpanded(){const{accordionGroupEl:o,disabled:t,readonly:i,value:n,state:e}=this;t||i||(this.hasInteracted=!0,!o)||o.requestAccordionToggle(n,1===e||2===e)}render(){const{disabled:o,readonly:t}=this,e=u(this),a=4===this.state||8===this.state,s=a?"header expanded":"header",r=a?"content expanded":"content";return this.setAria(a),i(n,{key:"cea1e33c18d788fc1d4ed7f62fc2d2eac823b3db",class:{[e]:!0,"accordion-expanding":8===this.state,"accordion-expanded":4===this.state,"accordion-collapsing":2===this.state,"accordion-collapsed":1===this.state,"accordion-next":this.isNext,"accordion-previous":this.isPrevious,"accordion-disabled":o,"accordion-readonly":t,"accordion-animated":this.shouldAnimate()}},i("div",{key:"47bd62c4777b5981233c7323c7e6a5cbc1793f08",onClick:()=>this.toggleExpanded(),id:"header",part:s,"aria-controls":"content",ref:o=>this.headerEl=o},i("slot",{key:"eb62780ae8e3eda8a1bbca0bc01cc66e6b64fc62",name:"header"})),i("div",{key:"e99c196a3300b6d2f2f7d436e072f6c2d1ba93e2",id:"content",part:r,role:"region","aria-labelledby":"header",ref:o=>this.contentEl=o},i("div",{key:"8bd97889dee898dd34500270c3e05754d28fde06",id:"content-wrapper",ref:o=>this.contentElWrapper=o},i("slot",{key:"4a140b338677b9f852a59926a2369b081ae2aa02",name:"content"}))))}static get delegatesFocus(){return!0}get el(){return e(this)}static get watchers(){return{value:["valueChanged"]}}};let x=0;g.style={ios:":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}",md:":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}"};const m=class{constructor(t){o(this,t),this.ionChange=a(this,"ionChange",7),this.ionValueChange=a(this,"ionValueChange",7),this.animated=!0,this.disabled=!1,this.readonly=!1,this.expand="compact",this.hasEmittedInitialValue=!1,this.isUserInitiatedChange=!1}valueChanged(){this.emitValueChange(!1,this.isUserInitiatedChange),this.isUserInitiatedChange=!1}async disabledChanged(){const{disabled:o}=this,t=await this.getAccordions();for(const i of t)i.disabled=o}async readonlyChanged(){const{readonly:o}=this,t=await this.getAccordions();for(const i of t)i.readonly=o}async onKeydown(o){const t=document.activeElement;if(!t)return;if(!t.closest('ion-accordion [slot="header"]'))return;const i="ION-ACCORDION"===t.tagName?t:t.closest("ion-accordion");if(!i)return;if(i.closest("ion-accordion-group")!==this.el)return;const n=await this.getAccordions(),e=n.findIndex((o=>o===i));if(-1===e)return;let a;"ArrowDown"===o.key?a=this.findNextAccordion(n,e):"ArrowUp"===o.key?a=this.findPreviousAccordion(n,e):"Home"===o.key?a=n[0]:"End"===o.key&&(a=n[n.length-1]),void 0!==a&&a!==t&&a.focus()}async componentDidLoad(){this.disabled&&this.disabledChanged(),this.readonly&&this.readonlyChanged(),this.hasEmittedInitialValue||this.emitValueChange(!0)}setValue(o){this.isUserInitiatedChange=!0;const t=this.value=o;this.ionChange.emit({value:t})}async requestAccordionToggle(o,t){const{multiple:i,value:n,readonly:e,disabled:a}=this;if(!e&&!a)if(t)if(i){const t=null!=n?n:[],i=Array.isArray(t)?t:[t];void 0===i.find((t=>t===o))&&void 0!==o&&this.setValue([...i,o])}else this.setValue(o);else if(i){const t=null!=n?n:[],i=Array.isArray(t)?t:[t];this.setValue(i.filter((t=>t!==o)))}else this.setValue(void 0)}findNextAccordion(o,t){const i=o[t+1];return void 0===i?o[0]:i}findPreviousAccordion(o,t){const i=o[t-1];return void 0===i?o[o.length-1]:i}async getAccordions(){return Array.from(this.el.querySelectorAll(":scope > ion-accordion"))}emitValueChange(o,t=!1){const{value:i,multiple:n}=this;!n&&Array.isArray(i)&&s(`[ion-accordion-group] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".\n\n  Value Passed: [${i.map((o=>`'${o}'`)).join(", ")}]\n`,this.el),this.ionValueChange.emit({value:i,initial:o||!this.hasEmittedInitialValue&&void 0!==i&&!t}),void 0!==i&&(this.hasEmittedInitialValue=!0)}render(){const{disabled:o,readonly:t,expand:e}=this,a=u(this);return i(n,{key:"fd64cd203e2c8acdfc266005f372e26c29853847",class:{[a]:!0,"accordion-group-disabled":o,"accordion-group-readonly":t,[`accordion-group-expand-${e}`]:!0},role:"presentation"},i("slot",{key:"bdd9f419fc6e20f5de6f0f52ac93af7ec9a380ef"}))}get el(){return e(this)}static get watchers(){return{value:["valueChanged"],disabled:["disabledChanged"],readonly:["readonlyChanged"]}}};m.style={ios:":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){border-bottom:none}",md:":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion){-webkit-box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){margin-left:0;margin-right:0;margin-top:16px;margin-bottom:16px;border-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-previous){border-end-end-radius:6px;border-end-start-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next){border-start-start-radius:6px;border-start-end-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}"};export{g as ion_accordion,m as ion_accordion_group}

package/dist/types/components/accordion/accordion.d.ts

@@ -30,12 +30,17 @@ export declare class Accordion implements ComponentInterface {
     isNext: boolean;
     isPrevious: boolean;
     /**
-     * Tracks whether the component has completed its initial render.
-     * Animations are disabled until after the first render completes.
-     * This prevents the accordion from animating when it starts
-     * expanded or collapsed on initial load.
+     * Tracks whether a user-initiated interaction has occurred.
+     * Animations are disabled until the first interaction happens.
+     * This prevents the accordion from animating when it's programmatically
+     * set to an expanded or collapsed state on initial load.
      */
-    hasRendered: boolean;
+    hasInteracted: boolean;
+    /**
+     * Tracks if this accordion has ever been expanded.
+     * Used to prevent the first expansion from animating.
+     */
+    private hasEverBeenExpanded;
     /**
      * The value of the accordion. Defaults to an autogenerated
      * value.
@@ -65,7 +70,6 @@ export declare class Accordion implements ComponentInterface {
     connectedCallback(): void;
     disconnectedCallback(): void;
     componentDidLoad(): void;
-    componentDidRender(): void;
     private setItemDefaults;
     private getSlottedHeaderIonItem;
     private setAria;

package/hydrate/index.js

@@ -4045,18 +4045,31 @@ class Accordion {
         this.updateListener = (ev) => {
             var _a, _b;
             const initialUpdate = (_b = (_a = ev.detail) === null || _a === void 0 ? void 0 : _a.initial) !== null && _b !== void 0 ? _b : false;
+            /**
+             * If this is not an initial update (meaning it's from a user interaction
+             * or programmatic call after load), mark that we've had an interaction.
+             * This enables animations for this and future updates.
+             */
+            if (!initialUpdate) {
+                this.hasInteracted = true;
+            }
             this.updateState(initialUpdate);
         };
         this.state = 1 /* AccordionState.Collapsed */;
         this.isNext = false;
         this.isPrevious = false;
         /**
-         * Tracks whether the component has completed its initial render.
-         * Animations are disabled until after the first render completes.
-         * This prevents the accordion from animating when it starts
-         * expanded or collapsed on initial load.
+         * Tracks whether a user-initiated interaction has occurred.
+         * Animations are disabled until the first interaction happens.
+         * This prevents the accordion from animating when it's programmatically
+         * set to an expanded or collapsed state on initial load.
+         */
+        this.hasInteracted = false;
+        /**
+         * Tracks if this accordion has ever been expanded.
+         * Used to prevent the first expansion from animating.
          */
-        this.hasRendered = false;
+        this.hasEverBeenExpanded = false;
         /**
          * The value of the accordion. Defaults to an autogenerated
          * value.
@@ -4165,6 +4178,11 @@ class Accordion {
             const { contentEl, contentElWrapper } = this;
             if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
                 this.state = 4 /* AccordionState.Expanded */;
+                /**
+                 * Mark that this accordion has been expanded at least once.
+                 * Do this even on initial expansion so future interactions animate.
+                 */
+                this.hasEverBeenExpanded = true;
                 return;
             }
             if (this.state === 4 /* AccordionState.Expanded */) {
@@ -4173,6 +4191,11 @@ class Accordion {
             if (this.currentRaf !== undefined) {
                 cancelAnimationFrame(this.currentRaf);
             }
+            /**
+             * Mark that this accordion has been expanded at least once.
+             * This allows subsequent expansions to animate.
+             */
+            this.hasEverBeenExpanded = true;
             if (this.shouldAnimate()) {
                 raf(() => {
                     this.state = 8 /* AccordionState.Expanding */;
@@ -4228,11 +4251,15 @@ class Accordion {
          */
         this.shouldAnimate = () => {
             /**
-             * Don't animate until after the first render cycle completes.
+             * Don't animate until after the first user interaction.
              * This prevents animations on initial load when accordions
-             * start in an expanded or collapsed state.
+             * start in an expanded or collapsed state programmatically.
+             *
+             * Additionally, don't animate the very first expansion even if
+             * hasInteracted is true. This handles edge cases like React StrictMode
+             * where effects run twice and might incorrectly mark as interacted.
              */
-            if (!this.hasRendered) {
+            if (!this.hasInteracted || !this.hasEverBeenExpanded) {
                 return false;
             }
             if (typeof window === 'undefined') {
@@ -4339,21 +4366,15 @@ class Accordion {
             this.setAria(expanded);
         });
     }
-    componentDidRender() {
-        /**
-         * After the first render completes, mark that we've rendered.
-         * Setting this state property triggers a re-render, at which point
-         * animations will be enabled. This ensures animations are disabled
-         * only for the initial render, avoiding unwanted animations on load.
-         */
-        if (!this.hasRendered) {
-            this.hasRendered = true;
-        }
-    }
     toggleExpanded() {
         const { accordionGroupEl, disabled, readonly, value, state } = this;
         if (disabled || readonly)
             return;
+        /**
+         * Mark that the user has interacted with the accordion.
+         * This enables animations for all future state changes.
+         */
+        this.hasInteracted = true;
         if (accordionGroupEl) {
             /**
              * Because the accordion group may or may
@@ -4374,7 +4395,7 @@ class Accordion {
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (hAsync(Host, { key: '7a1b3d2826dd701dc9f440c856dc41b95e518796', class: {
+        return (hAsync(Host, { key: 'cea1e33c18d788fc1d4ed7f62fc2d2eac823b3db', class: {
                 [mode]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
@@ -4385,7 +4406,7 @@ class Accordion {
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
-            } }, hAsync("div", { key: '6d88ed234058d21af9c490780753ce4879e20ff0', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, hAsync("slot", { key: 'c9dbd253cf4cee7d4b68c289a2b4c728307d7fad', name: "header" })), hAsync("div", { key: 'ab8352f1376f9b4d81580d6ad56954021252c0e6', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, hAsync("div", { key: 'f4050ed3256ecd9ad4dc8e2fee2dc41618b94140', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, hAsync("slot", { key: '96bfcd6b48a8339e41b73af1c087aa00c6dcc20d', name: "content" })))));
+            } }, hAsync("div", { key: '47bd62c4777b5981233c7323c7e6a5cbc1793f08', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, hAsync("slot", { key: 'eb62780ae8e3eda8a1bbca0bc01cc66e6b64fc62', name: "header" })), hAsync("div", { key: 'e99c196a3300b6d2f2f7d436e072f6c2d1ba93e2', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, hAsync("div", { key: '8bd97889dee898dd34500270c3e05754d28fde06', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, hAsync("slot", { key: '4a140b338677b9f852a59926a2369b081ae2aa02', name: "content" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -4408,7 +4429,7 @@ class Accordion {
             "state": [32],
             "isNext": [32],
             "isPrevious": [32],
-            "hasRendered": [32]
+            "hasInteracted": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",

package/hydrate/index.mjs

@@ -4043,18 +4043,31 @@ class Accordion {
         this.updateListener = (ev) => {
             var _a, _b;
             const initialUpdate = (_b = (_a = ev.detail) === null || _a === void 0 ? void 0 : _a.initial) !== null && _b !== void 0 ? _b : false;
+            /**
+             * If this is not an initial update (meaning it's from a user interaction
+             * or programmatic call after load), mark that we've had an interaction.
+             * This enables animations for this and future updates.
+             */
+            if (!initialUpdate) {
+                this.hasInteracted = true;
+            }
             this.updateState(initialUpdate);
         };
         this.state = 1 /* AccordionState.Collapsed */;
         this.isNext = false;
         this.isPrevious = false;
         /**
-         * Tracks whether the component has completed its initial render.
-         * Animations are disabled until after the first render completes.
-         * This prevents the accordion from animating when it starts
-         * expanded or collapsed on initial load.
+         * Tracks whether a user-initiated interaction has occurred.
+         * Animations are disabled until the first interaction happens.
+         * This prevents the accordion from animating when it's programmatically
+         * set to an expanded or collapsed state on initial load.
+         */
+        this.hasInteracted = false;
+        /**
+         * Tracks if this accordion has ever been expanded.
+         * Used to prevent the first expansion from animating.
          */
-        this.hasRendered = false;
+        this.hasEverBeenExpanded = false;
         /**
          * The value of the accordion. Defaults to an autogenerated
          * value.
@@ -4163,6 +4176,11 @@ class Accordion {
             const { contentEl, contentElWrapper } = this;
             if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
                 this.state = 4 /* AccordionState.Expanded */;
+                /**
+                 * Mark that this accordion has been expanded at least once.
+                 * Do this even on initial expansion so future interactions animate.
+                 */
+                this.hasEverBeenExpanded = true;
                 return;
             }
             if (this.state === 4 /* AccordionState.Expanded */) {
@@ -4171,6 +4189,11 @@ class Accordion {
             if (this.currentRaf !== undefined) {
                 cancelAnimationFrame(this.currentRaf);
             }
+            /**
+             * Mark that this accordion has been expanded at least once.
+             * This allows subsequent expansions to animate.
+             */
+            this.hasEverBeenExpanded = true;
             if (this.shouldAnimate()) {
                 raf(() => {
                     this.state = 8 /* AccordionState.Expanding */;
@@ -4226,11 +4249,15 @@ class Accordion {
          */
         this.shouldAnimate = () => {
             /**
-             * Don't animate until after the first render cycle completes.
+             * Don't animate until after the first user interaction.
              * This prevents animations on initial load when accordions
-             * start in an expanded or collapsed state.
+             * start in an expanded or collapsed state programmatically.
+             *
+             * Additionally, don't animate the very first expansion even if
+             * hasInteracted is true. This handles edge cases like React StrictMode
+             * where effects run twice and might incorrectly mark as interacted.
              */
-            if (!this.hasRendered) {
+            if (!this.hasInteracted || !this.hasEverBeenExpanded) {
                 return false;
             }
             if (typeof window === 'undefined') {
@@ -4337,21 +4364,15 @@ class Accordion {
             this.setAria(expanded);
         });
     }
-    componentDidRender() {
-        /**
-         * After the first render completes, mark that we've rendered.
-         * Setting this state property triggers a re-render, at which point
-         * animations will be enabled. This ensures animations are disabled
-         * only for the initial render, avoiding unwanted animations on load.
-         */
-        if (!this.hasRendered) {
-            this.hasRendered = true;
-        }
-    }
     toggleExpanded() {
         const { accordionGroupEl, disabled, readonly, value, state } = this;
         if (disabled || readonly)
             return;
+        /**
+         * Mark that the user has interacted with the accordion.
+         * This enables animations for all future state changes.
+         */
+        this.hasInteracted = true;
         if (accordionGroupEl) {
             /**
              * Because the accordion group may or may
@@ -4372,7 +4393,7 @@ class Accordion {
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (hAsync(Host, { key: '7a1b3d2826dd701dc9f440c856dc41b95e518796', class: {
+        return (hAsync(Host, { key: 'cea1e33c18d788fc1d4ed7f62fc2d2eac823b3db', class: {
                 [mode]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
@@ -4383,7 +4404,7 @@ class Accordion {
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
-            } }, hAsync("div", { key: '6d88ed234058d21af9c490780753ce4879e20ff0', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, hAsync("slot", { key: 'c9dbd253cf4cee7d4b68c289a2b4c728307d7fad', name: "header" })), hAsync("div", { key: 'ab8352f1376f9b4d81580d6ad56954021252c0e6', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, hAsync("div", { key: 'f4050ed3256ecd9ad4dc8e2fee2dc41618b94140', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, hAsync("slot", { key: '96bfcd6b48a8339e41b73af1c087aa00c6dcc20d', name: "content" })))));
+            } }, hAsync("div", { key: '47bd62c4777b5981233c7323c7e6a5cbc1793f08', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, hAsync("slot", { key: 'eb62780ae8e3eda8a1bbca0bc01cc66e6b64fc62', name: "header" })), hAsync("div", { key: 'e99c196a3300b6d2f2f7d436e072f6c2d1ba93e2', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, hAsync("div", { key: '8bd97889dee898dd34500270c3e05754d28fde06', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, hAsync("slot", { key: '4a140b338677b9f852a59926a2369b081ae2aa02', name: "content" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -4406,7 +4427,7 @@ class Accordion {
             "state": [32],
             "isNext": [32],
             "isPrevious": [32],
-            "hasRendered": [32]
+            "hasInteracted": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.8-dev.11761831339.1f84c484",
+  "version": "8.7.8-dev.11761836444.1981623a",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

package/dist/ionic/p-ba592b03.entry.js

@@ -1,4 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import{r as o,e as t,h as i,d as n,g as e,c as a,f as s}from"./p-C8IsBmNU.js";import{g as r,r as d,f as c,m as h,t as l}from"./p-CTfR9YZG.js";import{l as p}from"./p-DV3sJJW8.js";import{b as u}from"./p-BFvmZNyx.js";const g=class{constructor(i){o(this,i),this.updateListener=o=>{var t,i;const n=null!==(i=null===(t=o.detail)||void 0===t?void 0:t.initial)&&void 0!==i&&i;this.updateState(n)},this.state=1,this.isNext=!1,this.isPrevious=!1,this.hasRendered=!1,this.value="ion-accordion-"+x++,this.disabled=!1,this.readonly=!1,this.toggleIcon=p,this.toggleIconSlot="end",this.setItemDefaults=()=>{const o=this.getSlottedHeaderIonItem();o&&(o.button=!0,o.detail=!1,void 0===o.lines&&(o.lines="full"))},this.getSlottedHeaderIonItem=()=>{const{headerEl:o}=this;if(!o)return;const t=o.querySelector("slot");return t&&void 0!==t.assignedElements?t.assignedElements().find((o=>"ION-ITEM"===o.tagName)):void 0},this.setAria=(o=!1)=>{const t=this.getSlottedHeaderIonItem();if(!t)return;const i=r(t).querySelector("button");i&&i.setAttribute("aria-expanded",`${o}`)},this.slotToggleIcon=()=>{const o=this.getSlottedHeaderIonItem();if(!o)return;const{toggleIconSlot:t,toggleIcon:i}=this;if(o.querySelector(".ion-accordion-toggle-icon"))return;const n=document.createElement("ion-icon");n.slot=t,n.lazy=!1,n.classList.add("ion-accordion-toggle-icon"),n.icon=i,n.setAttribute("aria-hidden","true"),o.appendChild(n)},this.expandAccordion=(o=!1)=>{const{contentEl:t,contentElWrapper:i}=this;o||void 0===t||void 0===i?this.state=4:4!==this.state&&(void 0!==this.currentRaf&&cancelAnimationFrame(this.currentRaf),this.shouldAnimate()?d((()=>{this.state=8,this.currentRaf=d((async()=>{const o=i.offsetHeight,n=l(t,2e3);t.style.setProperty("max-height",`${o}px`),await n,this.state=4,t.style.removeProperty("max-height")}))})):this.state=4)},this.collapseAccordion=(o=!1)=>{const{contentEl:t}=this;o||void 0===t?this.state=1:1!==this.state&&(void 0!==this.currentRaf&&cancelAnimationFrame(this.currentRaf),this.shouldAnimate()?this.currentRaf=d((async()=>{t.style.setProperty("max-height",`${t.offsetHeight}px`),d((async()=>{const o=l(t,2e3);this.state=2,await o,this.state=1,t.style.removeProperty("max-height")}))})):this.state=1)},this.shouldAnimate=()=>!!this.hasRendered&&("undefined"!=typeof window&&(!matchMedia("(prefers-reduced-motion: reduce)").matches&&!(!t.get("animated",!0)||this.accordionGroupEl&&!this.accordionGroupEl.animated))),this.updateState=async(o=!1)=>{const t=this.accordionGroupEl,i=this.value;if(!t)return;const n=t.value;if(Array.isArray(n)?n.includes(i):n===i)this.expandAccordion(o),this.isNext=this.isPrevious=!1;else{this.collapseAccordion(o);const t=this.getNextSibling(),i=null==t?void 0:t.value;void 0!==i&&(this.isPrevious=Array.isArray(n)?n.includes(i):n===i);const e=this.getPreviousSibling(),a=null==e?void 0:e.value;void 0!==a&&(this.isNext=Array.isArray(n)?n.includes(a):n===a)}},this.getNextSibling=()=>{if(!this.el)return;const o=this.el.nextElementSibling;return"ION-ACCORDION"===(null==o?void 0:o.tagName)?o:void 0},this.getPreviousSibling=()=>{if(!this.el)return;const o=this.el.previousElementSibling;return"ION-ACCORDION"===(null==o?void 0:o.tagName)?o:void 0}}valueChanged(){this.updateState()}connectedCallback(){var o;const t=this.accordionGroupEl=null===(o=this.el)||void 0===o?void 0:o.closest("ion-accordion-group");t&&(this.updateState(!0),c(t,"ionValueChange",this.updateListener))}disconnectedCallback(){const o=this.accordionGroupEl;o&&h(o,"ionValueChange",this.updateListener)}componentDidLoad(){this.setItemDefaults(),this.slotToggleIcon(),d((()=>{this.setAria(4===this.state||8===this.state)}))}componentDidRender(){this.hasRendered||(this.hasRendered=!0)}toggleExpanded(){const{accordionGroupEl:o,disabled:t,readonly:i,value:n,state:e}=this;t||i||!o||o.requestAccordionToggle(n,1===e||2===e)}render(){const{disabled:o,readonly:t}=this,e=u(this),a=4===this.state||8===this.state,s=a?"header expanded":"header",r=a?"content expanded":"content";return this.setAria(a),i(n,{key:"7a1b3d2826dd701dc9f440c856dc41b95e518796",class:{[e]:!0,"accordion-expanding":8===this.state,"accordion-expanded":4===this.state,"accordion-collapsing":2===this.state,"accordion-collapsed":1===this.state,"accordion-next":this.isNext,"accordion-previous":this.isPrevious,"accordion-disabled":o,"accordion-readonly":t,"accordion-animated":this.shouldAnimate()}},i("div",{key:"6d88ed234058d21af9c490780753ce4879e20ff0",onClick:()=>this.toggleExpanded(),id:"header",part:s,"aria-controls":"content",ref:o=>this.headerEl=o},i("slot",{key:"c9dbd253cf4cee7d4b68c289a2b4c728307d7fad",name:"header"})),i("div",{key:"ab8352f1376f9b4d81580d6ad56954021252c0e6",id:"content",part:r,role:"region","aria-labelledby":"header",ref:o=>this.contentEl=o},i("div",{key:"f4050ed3256ecd9ad4dc8e2fee2dc41618b94140",id:"content-wrapper",ref:o=>this.contentElWrapper=o},i("slot",{key:"96bfcd6b48a8339e41b73af1c087aa00c6dcc20d",name:"content"}))))}static get delegatesFocus(){return!0}get el(){return e(this)}static get watchers(){return{value:["valueChanged"]}}};let x=0;g.style={ios:":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}",md:":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}"};const m=class{constructor(t){o(this,t),this.ionChange=a(this,"ionChange",7),this.ionValueChange=a(this,"ionValueChange",7),this.animated=!0,this.disabled=!1,this.readonly=!1,this.expand="compact",this.hasEmittedInitialValue=!1,this.isUserInitiatedChange=!1}valueChanged(){this.emitValueChange(!1,this.isUserInitiatedChange),this.isUserInitiatedChange=!1}async disabledChanged(){const{disabled:o}=this,t=await this.getAccordions();for(const i of t)i.disabled=o}async readonlyChanged(){const{readonly:o}=this,t=await this.getAccordions();for(const i of t)i.readonly=o}async onKeydown(o){const t=document.activeElement;if(!t)return;if(!t.closest('ion-accordion [slot="header"]'))return;const i="ION-ACCORDION"===t.tagName?t:t.closest("ion-accordion");if(!i)return;if(i.closest("ion-accordion-group")!==this.el)return;const n=await this.getAccordions(),e=n.findIndex((o=>o===i));if(-1===e)return;let a;"ArrowDown"===o.key?a=this.findNextAccordion(n,e):"ArrowUp"===o.key?a=this.findPreviousAccordion(n,e):"Home"===o.key?a=n[0]:"End"===o.key&&(a=n[n.length-1]),void 0!==a&&a!==t&&a.focus()}async componentDidLoad(){this.disabled&&this.disabledChanged(),this.readonly&&this.readonlyChanged(),this.hasEmittedInitialValue||this.emitValueChange(!0)}setValue(o){this.isUserInitiatedChange=!0;const t=this.value=o;this.ionChange.emit({value:t})}async requestAccordionToggle(o,t){const{multiple:i,value:n,readonly:e,disabled:a}=this;if(!e&&!a)if(t)if(i){const t=null!=n?n:[],i=Array.isArray(t)?t:[t];void 0===i.find((t=>t===o))&&void 0!==o&&this.setValue([...i,o])}else this.setValue(o);else if(i){const t=null!=n?n:[],i=Array.isArray(t)?t:[t];this.setValue(i.filter((t=>t!==o)))}else this.setValue(void 0)}findNextAccordion(o,t){const i=o[t+1];return void 0===i?o[0]:i}findPreviousAccordion(o,t){const i=o[t-1];return void 0===i?o[o.length-1]:i}async getAccordions(){return Array.from(this.el.querySelectorAll(":scope > ion-accordion"))}emitValueChange(o,t=!1){const{value:i,multiple:n}=this;!n&&Array.isArray(i)&&s(`[ion-accordion-group] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".\n\n  Value Passed: [${i.map((o=>`'${o}'`)).join(", ")}]\n`,this.el),this.ionValueChange.emit({value:i,initial:o||!this.hasEmittedInitialValue&&void 0!==i&&!t}),void 0!==i&&(this.hasEmittedInitialValue=!0)}render(){const{disabled:o,readonly:t,expand:e}=this,a=u(this);return i(n,{key:"fd64cd203e2c8acdfc266005f372e26c29853847",class:{[a]:!0,"accordion-group-disabled":o,"accordion-group-readonly":t,[`accordion-group-expand-${e}`]:!0},role:"presentation"},i("slot",{key:"bdd9f419fc6e20f5de6f0f52ac93af7ec9a380ef"}))}get el(){return e(this)}static get watchers(){return{value:["valueChanged"],disabled:["disabledChanged"],readonly:["readonlyChanged"]}}};m.style={ios:":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){border-bottom:none}",md:":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion){-webkit-box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){margin-left:0;margin-right:0;margin-top:16px;margin-bottom:16px;border-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-previous){border-end-end-radius:6px;border-end-start-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next){border-start-start-radius:6px;border-start-end-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}"};export{g as ion_accordion,m as ion_accordion_group}