@ionic/core 8.7.8-dev.11761837781.122f452f → 8.7.8-dev.11761840817.1bede576

package/dist/collection/components/accordion/accordion.js

@@ -21,10 +21,7 @@ import { getIonMode } from "../../global/ionic-global";
  */
 export class Accordion {
     constructor() {
-        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;
-            console.log('[Accordion]', this.value, 'updateListener - initial:', initialUpdate, 'hasInteracted:', this.hasInteracted, 'hasEverBeenExpanded:', this.hasEverBeenExpanded, 'currentState:', this.state);
+        this.updateListener = () => {
             /**
              * Determine if this update will cause an actual state change.
              * We only want to mark as "interacted" if the state is changing.
@@ -36,18 +33,24 @@ export class Accordion {
                 const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
                 const isExpanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
                 const stateWillChange = shouldExpand !== isExpanded;
-                console.log('[Accordion]', this.value, 'shouldExpand:', shouldExpand, 'isExpanded:', isExpanded, 'stateWillChange:', stateWillChange);
                 /**
-                 * If this is not an initial update AND the state is actually changing,
-                 * mark that we've had an interaction. This prevents redundant updates
-                 * (like React StrictMode re-renders) from incorrectly enabling animations.
+                 * Only mark as interacted if:
+                 * 1. This is not the first update we've received with a defined value
+                 * 2. The state is actually changing (prevents redundant updates from enabling animations)
                  */
-                if (!initialUpdate && stateWillChange) {
-                    console.log('[Accordion]', this.value, 'Setting hasInteracted to true');
+                if (this.hasReceivedFirstUpdate && stateWillChange) {
                     this.hasInteracted = true;
                 }
+                /**
+                 * Only count this as the first update if the group value is defined.
+                 * This prevents the initial undefined value from the group's componentDidLoad
+                 * from being treated as the first real update.
+                 */
+                if (value !== undefined) {
+                    this.hasReceivedFirstUpdate = true;
+                }
             }
-            this.updateState(initialUpdate);
+            this.updateState();
         };
         this.state = 1 /* AccordionState.Collapsed */;
         this.isNext = false;
@@ -64,6 +67,11 @@ export class Accordion {
          * Used to prevent the first expansion from animating.
          */
         this.hasEverBeenExpanded = false;
+        /**
+         * Tracks if this accordion has received its first update from the group.
+         * Used to distinguish initial programmatic sets from user interactions.
+         */
+        this.hasReceivedFirstUpdate = false;
         /**
          * The value of the accordion. Defaults to an autogenerated
          * value.
@@ -168,21 +176,18 @@ export class Accordion {
             iconEl.setAttribute('aria-hidden', 'true');
             ionItem.appendChild(iconEl);
         };
-        this.expandAccordion = (initialUpdate = false) => {
-            console.log('[Accordion]', this.value, 'expandAccordion - initialUpdate:', initialUpdate, 'state:', this.state);
+        this.expandAccordion = () => {
             const { contentEl, contentElWrapper } = this;
-            if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
+            /**
+             * If the content elements aren't available yet, just set the state.
+             * This happens on initial render before the DOM is ready.
+             */
+            if (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;
-                console.log('[Accordion]', this.value, 'expandAccordion early return - hasEverBeenExpanded set to true');
                 return;
             }
             if (this.state === 4 /* AccordionState.Expanded */) {
-                console.log('[Accordion]', this.value, 'expandAccordion - already expanded, returning');
                 return;
             }
             if (this.currentRaf !== undefined) {
@@ -193,9 +198,7 @@ export class Accordion {
              * This allows subsequent expansions to animate.
              */
             this.hasEverBeenExpanded = true;
-            console.log('[Accordion]', this.value, 'expandAccordion - hasEverBeenExpanded set to true');
             if (this.shouldAnimate()) {
-                console.log('[Accordion]', this.value, 'expandAccordion - will animate');
                 raf(() => {
                     this.state = 8 /* AccordionState.Expanding */;
                     this.currentRaf = raf(async () => {
@@ -212,9 +215,13 @@ export class Accordion {
                 this.state = 4 /* AccordionState.Expanded */;
             }
         };
-        this.collapseAccordion = (initialUpdate = false) => {
+        this.collapseAccordion = () => {
             const { contentEl } = this;
-            if (initialUpdate || contentEl === undefined) {
+            /**
+             * If the content element isn't available yet, just set the state.
+             * This happens on initial render before the DOM is ready.
+             */
+            if (contentEl === undefined) {
                 this.state = 1 /* AccordionState.Collapsed */;
                 return;
             }
@@ -259,7 +266,6 @@ export class Accordion {
              * where effects run twice and might incorrectly mark as interacted.
              */
             if (!this.hasInteracted || !this.hasEverBeenExpanded) {
-                console.log('[Accordion]', this.value, 'shouldAnimate: false - hasInteracted:', this.hasInteracted, 'hasEverBeenExpanded:', this.hasEverBeenExpanded);
                 return false;
             }
             if (typeof window === 'undefined') {
@@ -278,7 +284,7 @@ export class Accordion {
             }
             return true;
         };
-        this.updateState = async (initialUpdate = false) => {
+        this.updateState = async () => {
             const accordionGroup = this.accordionGroupEl;
             const accordionValue = this.value;
             if (!accordionGroup) {
@@ -287,11 +293,11 @@ export class Accordion {
             const value = accordionGroup.value;
             const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
             if (shouldExpand) {
-                this.expandAccordion(initialUpdate);
+                this.expandAccordion();
                 this.isNext = this.isPrevious = false;
             }
             else {
-                this.collapseAccordion(initialUpdate);
+                this.collapseAccordion();
                 /**
                  * When using popout or inset,
                  * the collapsed accordion items
@@ -339,7 +345,7 @@ export class Accordion {
         var _a;
         const accordionGroupEl = (this.accordionGroupEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('ion-accordion-group'));
         if (accordionGroupEl) {
-            this.updateState(true);
+            this.updateState();
             addEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
         }
     }
@@ -394,10 +400,8 @@ export class Accordion {
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
-        const shouldAnimate = this.shouldAnimate();
-        console.log('[Accordion]', this.value, 'render - state:', this.state, 'shouldAnimate:', shouldAnimate, 'hasInteracted:', this.hasInteracted, 'hasEverBeenExpanded:', this.hasEverBeenExpanded);
         this.setAria(expanded);
-        return (h(Host, { key: 'df064b6e04171a481170075c5e7171eb47f6e991', class: {
+        return (h(Host, { key: '0f3b65e32d6908f466e0b0535fbdad1d6d6c4c88', class: {
                 [mode]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
@@ -407,8 +411,8 @@ export class Accordion {
                 'accordion-previous': this.isPrevious,
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
-                'accordion-animated': shouldAnimate,
-            } }, h("div", { key: 'b24711c72057162e6f328fee4959e0da1a09ac61', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: 'd22719b5e50275b9368ca55c11c9ac5dfd1b4d37', name: "header" })), h("div", { key: 'd8971d0c5afd10d8c57a0f2f47e41d3ae39da271', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '46f2a9daf8dd67594ae1591771bae286355ff7a7', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'e44acd5d15f147cb7048d52528150a0e51bc924d', name: "content" })))));
+                'accordion-animated': this.shouldAnimate(),
+            } }, h("div", { key: '79e49dde14246e65fab5ee991a9f06fda649b8a4', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '8938988b9a5f87357b8351ecf5ca37ae80461170', name: "header" })), h("div", { key: '636a23a49fd8daae92a584452bc3f5b35072110d', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: 'dd28ba52dbd28690561206aac205190aebecb793', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '133fb1680990303ba55b61e3fed741a31295acdf', name: "content" })))));
     }
     static get is() { return "ion-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/accordion-group/accordion-group.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { printIonWarning } from "../../utils/logging/index";
 import { getIonMode } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -30,12 +29,9 @@ export class AccordionGroup {
          * Defaults to `"compact"`.
          */
         this.expand = 'compact';
-        this.hasEmittedInitialValue = false;
-        this.isUserInitiatedChange = false;
     }
     valueChanged() {
-        this.emitValueChange(false, this.isUserInitiatedChange);
-        this.isUserInitiatedChange = false;
+        this.ionValueChange.emit({ value: this.value });
     }
     async disabledChanged() {
         const { disabled } = this;
@@ -109,12 +105,11 @@ export class AccordionGroup {
          * it is possible for the value to be set after the Web Component
          * initializes but before the value watcher is set up in Stencil.
          * As a result, the watcher callback may not be fired.
-         * We work around this by manually emitting a value change when the component
-         * has loaded and the watcher is configured.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
          */
-        if (!this.hasEmittedInitialValue) {
-            this.emitValueChange(true);
-        }
+        this.valueChanged();
     }
     /**
      * Sets the value property and emits ionChange.
@@ -125,7 +120,6 @@ export class AccordionGroup {
      * accordion group to an array.
      */
     setValue(accordionValue) {
-        this.isUserInitiatedChange = true;
         const value = (this.value = accordionValue);
         this.ionChange.emit({ value });
     }
@@ -195,41 +189,15 @@ export class AccordionGroup {
     async getAccordions() {
         return Array.from(this.el.querySelectorAll(':scope > ion-accordion'));
     }
-    emitValueChange(initial, isUserInitiated = false) {
-        const { value, multiple } = this;
-        if (!multiple && Array.isArray(value)) {
-            /**
-             * We do some processing on the `value` array so
-             * that it looks more like an array when logged to
-             * the console.
-             * Example given ['a', 'b']
-             * Default toString() behavior: a,b
-             * Custom behavior: ['a', 'b']
-             */
-            printIonWarning(`[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".
-
-  Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
-`, this.el);
-        }
-        /**
-         * Track if this is the initial value update so accordions
-         * can skip transition animations when they first render.
-         */
-        const shouldMarkInitial = initial || (!this.hasEmittedInitialValue && value !== undefined && !isUserInitiated);
-        this.ionValueChange.emit({ value, initial: shouldMarkInitial });
-        if (value !== undefined) {
-            this.hasEmittedInitialValue = true;
-        }
-    }
     render() {
         const { disabled, readonly, expand } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'fd64cd203e2c8acdfc266005f372e26c29853847', class: {
+        return (h(Host, { key: '9a4a3b7811e63a0748cdcda82a840179cdfb26e1', class: {
                 [mode]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-            }, role: "presentation" }, h("slot", { key: 'bdd9f419fc6e20f5de6f0f52ac93af7ec9a380ef' })));
+            }, role: "presentation" }, h("slot", { key: '183cebf7e0eb468b5c28c4105f23ec5aed36be1b' })));
     }
     static get is() { return "ion-accordion-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-10-30T15:24:50",
+  "timestamp": "2025-10-30T16:16:02",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",
@@ -37226,7 +37226,7 @@
   ],
   "typeLibrary": {
     "src/components/accordion-group/accordion-group-interface.ts::AccordionGroupChangeEventDetail": {
-      "declaration": "export interface AccordionGroupChangeEventDetail<T = any> {\n  value: T;\n  initial?: boolean;\n}",
+      "declaration": "export interface AccordionGroupChangeEventDetail<T = any> {\n  value: T;\n}",
       "docstring": "",
       "path": "src/components/accordion-group/accordion-group-interface.ts"
     },

package/dist/esm/ion-accordion_2.entry.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, e as config, h, d as Host, g as getElement, c as createEvent, f as printIonWarning } from './index-C8IsBmNU.js';
+import { r as registerInstance, e as config, h, d as Host, g as getElement, c as createEvent } from './index-C8IsBmNU.js';
 import { g as getElementRoot, r as raf, f as addEventListener, m as removeEventListener, t as transitionEndAsync } from './helpers-DEn3pfjm.js';
 import { l as chevronDown } from './index-DV3sJJW8.js';
 import { b as getIonMode } from './ionic-global-CDrldh-5.js';
@@ -13,10 +13,7 @@ const accordionMdCss = ":host{display:block;position:relative;width:100%;backgro
 const Accordion = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        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;
-            console.log('[Accordion]', this.value, 'updateListener - initial:', initialUpdate, 'hasInteracted:', this.hasInteracted, 'hasEverBeenExpanded:', this.hasEverBeenExpanded, 'currentState:', this.state);
+        this.updateListener = () => {
             /**
              * Determine if this update will cause an actual state change.
              * We only want to mark as "interacted" if the state is changing.
@@ -28,18 +25,24 @@ const Accordion = class {
                 const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
                 const isExpanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
                 const stateWillChange = shouldExpand !== isExpanded;
-                console.log('[Accordion]', this.value, 'shouldExpand:', shouldExpand, 'isExpanded:', isExpanded, 'stateWillChange:', stateWillChange);
                 /**
-                 * If this is not an initial update AND the state is actually changing,
-                 * mark that we've had an interaction. This prevents redundant updates
-                 * (like React StrictMode re-renders) from incorrectly enabling animations.
+                 * Only mark as interacted if:
+                 * 1. This is not the first update we've received with a defined value
+                 * 2. The state is actually changing (prevents redundant updates from enabling animations)
                  */
-                if (!initialUpdate && stateWillChange) {
-                    console.log('[Accordion]', this.value, 'Setting hasInteracted to true');
+                if (this.hasReceivedFirstUpdate && stateWillChange) {
                     this.hasInteracted = true;
                 }
+                /**
+                 * Only count this as the first update if the group value is defined.
+                 * This prevents the initial undefined value from the group's componentDidLoad
+                 * from being treated as the first real update.
+                 */
+                if (value !== undefined) {
+                    this.hasReceivedFirstUpdate = true;
+                }
             }
-            this.updateState(initialUpdate);
+            this.updateState();
         };
         this.state = 1 /* AccordionState.Collapsed */;
         this.isNext = false;
@@ -56,6 +59,11 @@ const Accordion = class {
          * Used to prevent the first expansion from animating.
          */
         this.hasEverBeenExpanded = false;
+        /**
+         * Tracks if this accordion has received its first update from the group.
+         * Used to distinguish initial programmatic sets from user interactions.
+         */
+        this.hasReceivedFirstUpdate = false;
         /**
          * The value of the accordion. Defaults to an autogenerated
          * value.
@@ -160,21 +168,18 @@ const Accordion = class {
             iconEl.setAttribute('aria-hidden', 'true');
             ionItem.appendChild(iconEl);
         };
-        this.expandAccordion = (initialUpdate = false) => {
-            console.log('[Accordion]', this.value, 'expandAccordion - initialUpdate:', initialUpdate, 'state:', this.state);
+        this.expandAccordion = () => {
             const { contentEl, contentElWrapper } = this;
-            if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
+            /**
+             * If the content elements aren't available yet, just set the state.
+             * This happens on initial render before the DOM is ready.
+             */
+            if (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;
-                console.log('[Accordion]', this.value, 'expandAccordion early return - hasEverBeenExpanded set to true');
                 return;
             }
             if (this.state === 4 /* AccordionState.Expanded */) {
-                console.log('[Accordion]', this.value, 'expandAccordion - already expanded, returning');
                 return;
             }
             if (this.currentRaf !== undefined) {
@@ -185,9 +190,7 @@ const Accordion = class {
              * This allows subsequent expansions to animate.
              */
             this.hasEverBeenExpanded = true;
-            console.log('[Accordion]', this.value, 'expandAccordion - hasEverBeenExpanded set to true');
             if (this.shouldAnimate()) {
-                console.log('[Accordion]', this.value, 'expandAccordion - will animate');
                 raf(() => {
                     this.state = 8 /* AccordionState.Expanding */;
                     this.currentRaf = raf(async () => {
@@ -204,9 +207,13 @@ const Accordion = class {
                 this.state = 4 /* AccordionState.Expanded */;
             }
         };
-        this.collapseAccordion = (initialUpdate = false) => {
+        this.collapseAccordion = () => {
             const { contentEl } = this;
-            if (initialUpdate || contentEl === undefined) {
+            /**
+             * If the content element isn't available yet, just set the state.
+             * This happens on initial render before the DOM is ready.
+             */
+            if (contentEl === undefined) {
                 this.state = 1 /* AccordionState.Collapsed */;
                 return;
             }
@@ -251,7 +258,6 @@ const Accordion = class {
              * where effects run twice and might incorrectly mark as interacted.
              */
             if (!this.hasInteracted || !this.hasEverBeenExpanded) {
-                console.log('[Accordion]', this.value, 'shouldAnimate: false - hasInteracted:', this.hasInteracted, 'hasEverBeenExpanded:', this.hasEverBeenExpanded);
                 return false;
             }
             if (typeof window === 'undefined') {
@@ -270,7 +276,7 @@ const Accordion = class {
             }
             return true;
         };
-        this.updateState = async (initialUpdate = false) => {
+        this.updateState = async () => {
             const accordionGroup = this.accordionGroupEl;
             const accordionValue = this.value;
             if (!accordionGroup) {
@@ -279,11 +285,11 @@ const Accordion = class {
             const value = accordionGroup.value;
             const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
             if (shouldExpand) {
-                this.expandAccordion(initialUpdate);
+                this.expandAccordion();
                 this.isNext = this.isPrevious = false;
             }
             else {
-                this.collapseAccordion(initialUpdate);
+                this.collapseAccordion();
                 /**
                  * When using popout or inset,
                  * the collapsed accordion items
@@ -331,7 +337,7 @@ const Accordion = class {
         var _a;
         const accordionGroupEl = (this.accordionGroupEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('ion-accordion-group'));
         if (accordionGroupEl) {
-            this.updateState(true);
+            this.updateState();
             addEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
         }
     }
@@ -386,10 +392,8 @@ const Accordion = class {
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
-        const shouldAnimate = this.shouldAnimate();
-        console.log('[Accordion]', this.value, 'render - state:', this.state, 'shouldAnimate:', shouldAnimate, 'hasInteracted:', this.hasInteracted, 'hasEverBeenExpanded:', this.hasEverBeenExpanded);
         this.setAria(expanded);
-        return (h(Host, { key: 'df064b6e04171a481170075c5e7171eb47f6e991', class: {
+        return (h(Host, { key: '0f3b65e32d6908f466e0b0535fbdad1d6d6c4c88', class: {
                 [mode]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
@@ -399,8 +403,8 @@ const Accordion = class {
                 'accordion-previous': this.isPrevious,
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
-                'accordion-animated': shouldAnimate,
-            } }, h("div", { key: 'b24711c72057162e6f328fee4959e0da1a09ac61', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: 'd22719b5e50275b9368ca55c11c9ac5dfd1b4d37', name: "header" })), h("div", { key: 'd8971d0c5afd10d8c57a0f2f47e41d3ae39da271', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '46f2a9daf8dd67594ae1591771bae286355ff7a7', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'e44acd5d15f147cb7048d52528150a0e51bc924d', name: "content" })))));
+                'accordion-animated': this.shouldAnimate(),
+            } }, h("div", { key: '79e49dde14246e65fab5ee991a9f06fda649b8a4', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '8938988b9a5f87357b8351ecf5ca37ae80461170', name: "header" })), h("div", { key: '636a23a49fd8daae92a584452bc3f5b35072110d', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: 'dd28ba52dbd28690561206aac205190aebecb793', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '133fb1680990303ba55b61e3fed741a31295acdf', name: "content" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -444,12 +448,9 @@ const AccordionGroup = class {
          * Defaults to `"compact"`.
          */
         this.expand = 'compact';
-        this.hasEmittedInitialValue = false;
-        this.isUserInitiatedChange = false;
     }
     valueChanged() {
-        this.emitValueChange(false, this.isUserInitiatedChange);
-        this.isUserInitiatedChange = false;
+        this.ionValueChange.emit({ value: this.value });
     }
     async disabledChanged() {
         const { disabled } = this;
@@ -523,12 +524,11 @@ const AccordionGroup = class {
          * it is possible for the value to be set after the Web Component
          * initializes but before the value watcher is set up in Stencil.
          * As a result, the watcher callback may not be fired.
-         * We work around this by manually emitting a value change when the component
-         * has loaded and the watcher is configured.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
          */
-        if (!this.hasEmittedInitialValue) {
-            this.emitValueChange(true);
-        }
+        this.valueChanged();
     }
     /**
      * Sets the value property and emits ionChange.
@@ -539,7 +539,6 @@ const AccordionGroup = class {
      * accordion group to an array.
      */
     setValue(accordionValue) {
-        this.isUserInitiatedChange = true;
         const value = (this.value = accordionValue);
         this.ionChange.emit({ value });
     }
@@ -609,41 +608,15 @@ const AccordionGroup = class {
     async getAccordions() {
         return Array.from(this.el.querySelectorAll(':scope > ion-accordion'));
     }
-    emitValueChange(initial, isUserInitiated = false) {
-        const { value, multiple } = this;
-        if (!multiple && Array.isArray(value)) {
-            /**
-             * We do some processing on the `value` array so
-             * that it looks more like an array when logged to
-             * the console.
-             * Example given ['a', 'b']
-             * Default toString() behavior: a,b
-             * Custom behavior: ['a', 'b']
-             */
-            printIonWarning(`[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".
-
-  Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
-`, this.el);
-        }
-        /**
-         * Track if this is the initial value update so accordions
-         * can skip transition animations when they first render.
-         */
-        const shouldMarkInitial = initial || (!this.hasEmittedInitialValue && value !== undefined && !isUserInitiated);
-        this.ionValueChange.emit({ value, initial: shouldMarkInitial });
-        if (value !== undefined) {
-            this.hasEmittedInitialValue = true;
-        }
-    }
     render() {
         const { disabled, readonly, expand } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'fd64cd203e2c8acdfc266005f372e26c29853847', class: {
+        return (h(Host, { key: '9a4a3b7811e63a0748cdcda82a840179cdfb26e1', class: {
                 [mode]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-            }, role: "presentation" }, h("slot", { key: 'bdd9f419fc6e20f5de6f0f52ac93af7ec9a380ef' })));
+            }, role: "presentation" }, h("slot", { key: '183cebf7e0eb468b5c28c4105f23ec5aed36be1b' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {