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

package/components/ion-accordion-group.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { p as printIonWarning } from './index4.js';
 import { b as getIonMode } from './ionic-global.js';
 
 const accordionGroupIosCss = ":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}";
@@ -39,12 +38,9 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
          * 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;
@@ -118,12 +114,11 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
          * 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.
@@ -134,7 +129,6 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
      * accordion group to an array.
      */
     setValue(accordionValue) {
-        this.isUserInitiatedChange = true;
         const value = (this.value = accordionValue);
         this.ionChange.emit({ value });
     }
@@ -204,41 +198,15 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
     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 this; }
     static get watchers() { return {

package/components/ion-accordion.js

@@ -19,10 +19,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             this.__registerHost();
         }
         this.__attachShadow();
-        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.
@@ -34,18 +31,24 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
                 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;
@@ -62,6 +65,11 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
          * 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.
@@ -166,21 +174,18 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             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) {
@@ -191,9 +196,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
              * 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 () => {
@@ -210,9 +213,13 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
                 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;
             }
@@ -257,7 +264,6 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
              * 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') {
@@ -276,7 +282,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             }
             return true;
         };
-        this.updateState = async (initialUpdate = false) => {
+        this.updateState = async () => {
             const accordionGroup = this.accordionGroupEl;
             const accordionValue = this.value;
             if (!accordionGroup) {
@@ -285,11 +291,11 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             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
@@ -337,7 +343,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         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);
         }
     }
@@ -392,10 +398,8 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         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 */,
@@ -405,8 +409,8 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
                 '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 this; }

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

@@ -15,10 +15,7 @@ const accordionMdCss = ":host{display:block;position:relative;width:100%;backgro
 const Accordion = class {
     constructor(hostRef) {
         index.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.
@@ -30,18 +27,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;
@@ -58,6 +61,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.
@@ -162,21 +170,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) {
@@ -187,9 +192,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');
                 helpers.raf(() => {
                     this.state = 8 /* AccordionState.Expanding */;
                     this.currentRaf = helpers.raf(async () => {
@@ -206,9 +209,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;
             }
@@ -253,7 +260,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') {
@@ -272,7 +278,7 @@ const Accordion = class {
             }
             return true;
         };
-        this.updateState = async (initialUpdate = false) => {
+        this.updateState = async () => {
             const accordionGroup = this.accordionGroupEl;
             const accordionValue = this.value;
             if (!accordionGroup) {
@@ -281,11 +287,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
@@ -333,7 +339,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();
             helpers.addEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
         }
     }
@@ -388,10 +394,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 (index.h(index.Host, { key: 'df064b6e04171a481170075c5e7171eb47f6e991', class: {
+        return (index.h(index.Host, { key: '0f3b65e32d6908f466e0b0535fbdad1d6d6c4c88', class: {
                 [mode]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
@@ -401,8 +405,8 @@ const Accordion = class {
                 'accordion-previous': this.isPrevious,
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
-                'accordion-animated': shouldAnimate,
-            } }, index.h("div", { key: 'b24711c72057162e6f328fee4959e0da1a09ac61', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, index.h("slot", { key: 'd22719b5e50275b9368ca55c11c9ac5dfd1b4d37', name: "header" })), index.h("div", { key: 'd8971d0c5afd10d8c57a0f2f47e41d3ae39da271', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, index.h("div", { key: '46f2a9daf8dd67594ae1591771bae286355ff7a7', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, index.h("slot", { key: 'e44acd5d15f147cb7048d52528150a0e51bc924d', name: "content" })))));
+                'accordion-animated': this.shouldAnimate(),
+            } }, index.h("div", { key: '79e49dde14246e65fab5ee991a9f06fda649b8a4', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, index.h("slot", { key: '8938988b9a5f87357b8351ecf5ca37ae80461170', name: "header" })), index.h("div", { key: '636a23a49fd8daae92a584452bc3f5b35072110d', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, index.h("div", { key: 'dd28ba52dbd28690561206aac205190aebecb793', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, index.h("slot", { key: '133fb1680990303ba55b61e3fed741a31295acdf', name: "content" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -446,12 +450,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;
@@ -525,12 +526,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.
@@ -541,7 +541,6 @@ const AccordionGroup = class {
      * accordion group to an array.
      */
     setValue(accordionValue) {
-        this.isUserInitiatedChange = true;
         const value = (this.value = accordionValue);
         this.ionChange.emit({ value });
     }
@@ -611,41 +610,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']
-             */
-            index.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 = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'fd64cd203e2c8acdfc266005f372e26c29853847', class: {
+        return (index.h(index.Host, { key: '9a4a3b7811e63a0748cdcda82a840179cdfb26e1', class: {
                 [mode]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-            }, role: "presentation" }, index.h("slot", { key: 'bdd9f419fc6e20f5de6f0f52ac93af7ec9a380ef' })));
+            }, role: "presentation" }, index.h("slot", { key: '183cebf7e0eb468b5c28c4105f23ec5aed36be1b' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {