@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

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

@@ -1,336 +1,106 @@
 /*!
  * (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-C0EQceqV.js';
-import { c as caretDownSvg } from './caret-down-D1t981Ih.js';
-import { g as getElementRoot, r as raf, f as addEventListener, m as removeEventListener, t as transitionEndAsync } from './helpers-DfF5_wJc.js';
-import { h as hostContext } from './theme-DaJxRxSQ.js';
-import { l as chevronDown } from './index-B4Kq2YNk.js';
-import { c as getIonTheme } from './ionic-global-CEwbmRLz.js';
-import './focus-visible-vXpMhGrs.js';
+import { r as registerInstance, g as getElement, e as config, h, d as Host, c as createEvent, f as printIonWarning } from './index-ChhhtsGZ.js';
+import { f as addEventListener, m as removeEventListener, r as raf, g as getElementRoot, t as transitionEndAsync } from './helpers-DexiPLIC.js';
+import { b as chevronDown } from './index-BvabGprD.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
 
-const accordionIonicCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#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}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{position:relative}:host::after{-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));right:0;left:0;bottom:0;display:block;position:absolute;height:var(--token-border-size-025, var(--token-scale-025, 1px));background-color:var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));content:"";z-index:3}:host(.accordion-last)::after{display:none}: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)}::slotted(ion-item[slot=header]){--border-radius:inherit;--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--border-width:var(--token-border-size-0, var(--token-scale-0, 0px));--inner-border-width:var(--token-scale-0, 0px);--min-height:var(--token-scale-700, 28px);--padding-top:var(--token-space-300, var(--token-scale-300, 12px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px));--padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--background-activated:var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-700, var(--token-scale-700, 28px));text-decoration:none;text-transform:none}#content-wrapper{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-300, var(--token-scale-300, 12px));padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424))}:host(.accordion-disabled)::before{border-radius:inherit;right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-disabled, rgba(255, 255, 255, 0.6));content:"";pointer-events:none;z-index:2}`;
+const accordionIosCss = () => `: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}`;
 
-const accordionIosCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#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}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{background-color:var(--ion-background-color, #ffffff)}: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)}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}`;
-
-const accordionMdCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#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}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{background-color:var(--ion-background-color, #ffffff)}: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)}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}`;
+const accordionMdCss = () => `: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 Accordion = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.accordionGroupUpdateHandler = () => {
-            /**
-             * Determine if this update will cause an actual state change.
-             * We only want to mark as "interacted" if the state is changing.
-             */
-            const accordionGroup = this.accordionGroupEl;
-            if (accordionGroup) {
-                const value = accordionGroup.value;
-                const accordionValue = this.value;
-                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;
-                /**
-                 * 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 (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();
-        };
-        this.state = 1 /* AccordionState.Collapsed */;
-        this.isNext = false;
-        this.isPrevious = false;
-        this.isLast = false;
-        /**
-         * 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.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.
-         */
-        this.value = `ion-accordion-${accordionIds++}`;
-        /**
-         * If `true`, the accordion cannot be interacted with.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the accordion cannot be interacted with,
-         * but does not alter the opacity.
-         */
-        this.readonly = false;
+    }
+    accordionGroupEl;
+    accordionGroupUpdateHandler = () => {
         /**
-         * The slot inside of `ion-item` to
-         * place the toggle icon. Defaults to `"end"`.
+         * Determine if this update will cause an actual state change.
+         * We only want to mark as "interacted" if the state is changing.
          */
-        this.toggleIconSlot = 'end';
-        this.setItemDefaults = () => {
-            const ionItem = this.getSlottedHeaderIonItem();
-            if (!ionItem) {
-                return;
-            }
-            /**
-             * For a11y purposes, we make
-             * the ion-item a button so users
-             * can tab to it and use keyboard
-             * navigation to get around.
-             */
-            ionItem.button = true;
-            ionItem.detail = false;
-            /**
-             * By default, the lines in an
-             * item should be full here, but
-             * only do that if a user has
-             * not explicitly overridden them
-             */
-            if (ionItem.lines === undefined) {
-                ionItem.lines = 'full';
-            }
-        };
-        this.getSlottedHeaderIonItem = () => {
-            const { headerEl } = this;
-            if (!headerEl) {
-                return;
-            }
-            /**
-             * Get the first ion-item
-             * slotted in the header slot
-             */
-            const slot = headerEl.querySelector('slot');
-            if (!slot) {
-                return;
-            }
-            // This is not defined in unit tests
-            if (slot.assignedElements === undefined)
-                return;
-            return slot.assignedElements().find((el) => el.tagName === 'ION-ITEM');
-        };
-        this.setAria = (expanded = false) => {
-            const ionItem = this.getSlottedHeaderIonItem();
-            if (!ionItem) {
-                return;
-            }
-            /**
-             * Get the native <button> element inside of
-             * ion-item because that is what will be focused
-             */
-            const root = getElementRoot(ionItem);
-            const button = root.querySelector('button');
-            if (!button) {
-                return;
-            }
-            button.setAttribute('aria-expanded', `${expanded}`);
-        };
-        this.slotToggleIcon = () => {
-            const ionItem = this.getSlottedHeaderIonItem();
-            if (!ionItem) {
-                return;
-            }
-            const { accordionToggleIcon, toggleIconSlot } = this;
-            /**
-             * Check if there already is a toggle icon.
-             * If so, do not add another one.
-             */
-            const existingToggleIcon = ionItem.querySelector('.ion-accordion-toggle-icon');
-            if (existingToggleIcon) {
-                return;
-            }
-            const iconEl = document.createElement('ion-icon');
-            iconEl.slot = toggleIconSlot;
-            iconEl.lazy = false;
-            iconEl.classList.add('ion-accordion-toggle-icon');
-            iconEl.icon = accordionToggleIcon;
-            iconEl.setAttribute('aria-hidden', 'true');
-            ionItem.appendChild(iconEl);
-        };
-        this.expandAccordion = () => {
-            const { contentEl, contentElWrapper } = this;
-            /**
-             * 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 */;
-                this.hasEverBeenExpanded = true;
-                return;
-            }
-            if (this.state === 4 /* AccordionState.Expanded */) {
-                return;
-            }
-            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 */;
-                    this.currentRaf = raf(async () => {
-                        const contentHeight = contentElWrapper.offsetHeight;
-                        const waitForTransition = transitionEndAsync(contentEl, 2000);
-                        contentEl.style.setProperty('max-height', `${contentHeight}px`);
-                        await waitForTransition;
-                        this.state = 4 /* AccordionState.Expanded */;
-                        contentEl.style.removeProperty('max-height');
-                    });
-                });
-            }
-            else {
-                this.state = 4 /* AccordionState.Expanded */;
-            }
-        };
-        this.collapseAccordion = () => {
-            const { contentEl } = this;
+        const accordionGroup = this.accordionGroupEl;
+        if (accordionGroup) {
+            const value = accordionGroup.value;
+            const accordionValue = this.value;
+            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;
             /**
-             * If the content element isn't available yet, just set the state.
-             * This happens on initial render before the DOM is ready.
+             * 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 (contentEl === undefined) {
-                this.state = 1 /* AccordionState.Collapsed */;
-                return;
+            if (this.hasReceivedFirstUpdate && stateWillChange) {
+                this.hasInteracted = true;
             }
-            if (this.state === 1 /* AccordionState.Collapsed */) {
-                return;
-            }
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
-            if (this.shouldAnimate()) {
-                this.currentRaf = raf(async () => {
-                    const contentHeight = contentEl.offsetHeight;
-                    contentEl.style.setProperty('max-height', `${contentHeight}px`);
-                    raf(async () => {
-                        const waitForTransition = transitionEndAsync(contentEl, 2000);
-                        this.state = 2 /* AccordionState.Collapsing */;
-                        await waitForTransition;
-                        this.state = 1 /* AccordionState.Collapsed */;
-                        contentEl.style.removeProperty('max-height');
-                    });
-                });
-            }
-            else {
-                this.state = 1 /* AccordionState.Collapsed */;
-            }
-        };
-        /**
-         * Helper function to determine if
-         * something should animate.
-         * If prefers-reduced-motion is set
-         * then we should not animate, regardless
-         * of what is set in the config.
-         */
-        this.shouldAnimate = () => {
             /**
-             * Don't animate until after the first user interaction.
-             * This prevents animations on initial load when accordions
-             * 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.
+             * 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 (!this.hasInteracted || !this.hasEverBeenExpanded) {
-                return false;
-            }
-            if (typeof window === 'undefined') {
-                return false;
-            }
-            const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
-            if (prefersReducedMotion) {
-                return false;
-            }
-            const animated = config.get('animated', true);
-            if (!animated) {
-                return false;
-            }
-            if (this.accordionGroupEl && !this.accordionGroupEl.animated) {
-                return false;
+            if (value !== undefined) {
+                this.hasReceivedFirstUpdate = true;
             }
-            return true;
-        };
-        this.updateState = async () => {
-            const accordionGroup = this.accordionGroupEl;
-            const accordionValue = this.value;
-            if (!accordionGroup) {
-                return;
-            }
-            const value = accordionGroup.value;
-            const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
-            const nextAccordion = this.getNextSibling();
-            this.isLast = nextAccordion === undefined;
-            if (shouldExpand) {
-                this.expandAccordion();
-                this.isNext = this.isPrevious = false;
-            }
-            else {
-                this.collapseAccordion();
-                /**
-                 * When using popout or inset,
-                 * the collapsed accordion items
-                 * may need additional border radius
-                 * applied. Check to see if the
-                 * next or previous accordion is selected.
-                 */
-                const nextAccordionValue = nextAccordion === null || nextAccordion === void 0 ? void 0 : nextAccordion.value;
-                if (nextAccordionValue !== undefined) {
-                    this.isPrevious = Array.isArray(value) ? value.includes(nextAccordionValue) : value === nextAccordionValue;
-                }
-                const previousAccordion = this.getPreviousSibling();
-                const previousAccordionValue = previousAccordion === null || previousAccordion === void 0 ? void 0 : previousAccordion.value;
-                if (previousAccordionValue !== undefined) {
-                    this.isNext = Array.isArray(value) ? value.includes(previousAccordionValue) : value === previousAccordionValue;
-                }
-            }
-        };
-        this.getNextSibling = () => {
-            const nextSibling = this.el.nextElementSibling;
-            if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.tagName) !== 'ION-ACCORDION') {
-                return;
-            }
-            return nextSibling;
-        };
-        this.getPreviousSibling = () => {
-            const previousSibling = this.el.previousElementSibling;
-            if ((previousSibling === null || previousSibling === void 0 ? void 0 : previousSibling.tagName) !== 'ION-ACCORDION') {
-                return;
-            }
-            return previousSibling;
-        };
-    }
+        }
+        this.updateState();
+    };
+    contentEl;
+    contentElWrapper;
+    headerEl;
+    currentRaf;
+    get el() { return getElement(this); }
+    state = 1 /* AccordionState.Collapsed */;
+    isNext = false;
+    isPrevious = false;
+    /**
+     * 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.
+     */
+    hasInteracted = false;
+    /**
+     * Tracks if this accordion has ever been expanded.
+     * Used to prevent the first expansion from animating.
+     */
+    hasEverBeenExpanded = false;
+    /**
+     * Tracks if this accordion has received its first update from the group.
+     * Used to distinguish initial programmatic sets from user interactions.
+     */
+    hasReceivedFirstUpdate = false;
+    /**
+     * The value of the accordion. Defaults to an autogenerated
+     * value.
+     */
+    value = `ion-accordion-${accordionIds++}`;
     valueChanged() {
         this.updateState();
     }
+    /**
+     * If `true`, the accordion cannot be interacted with.
+     */
+    disabled = false;
+    /**
+     * If `true`, the accordion cannot be interacted with,
+     * but does not alter the opacity.
+     */
+    readonly = false;
+    /**
+     * The toggle icon to use. This icon will be
+     * rotated when the accordion is expanded
+     * or collapsed.
+     */
+    toggleIcon = chevronDown;
+    /**
+     * The slot inside of `ion-item` to
+     * place the toggle icon. Defaults to `"end"`.
+     */
+    toggleIconSlot = 'end';
     connectedCallback() {
-        var _a;
-        const accordionGroupEl = (this.accordionGroupEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('ion-accordion-group'));
+        const accordionGroupEl = (this.accordionGroupEl = this.el?.closest('ion-accordion-group'));
         if (accordionGroupEl) {
             this.updateState();
             addEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler);
@@ -359,23 +129,246 @@ const Accordion = class {
             this.setAria(expanded);
         });
     }
-    get accordionToggleIcon() {
-        // Return the icon if it is explicitly set
-        if (this.toggleIcon != null) {
-            return this.toggleIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronDown,
-            ionic: caretDownSvg,
-            md: chevronDown,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured accordion toggle icon or the default icon
-        return config.get('accordionToggleIcon', defaultIcon);
-    }
+    setItemDefaults = () => {
+        const ionItem = this.getSlottedHeaderIonItem();
+        if (!ionItem) {
+            return;
+        }
+        /**
+         * For a11y purposes, we make
+         * the ion-item a button so users
+         * can tab to it and use keyboard
+         * navigation to get around.
+         */
+        ionItem.button = true;
+        ionItem.detail = false;
+        /**
+         * By default, the lines in an
+         * item should be full here, but
+         * only do that if a user has
+         * not explicitly overridden them
+         */
+        if (ionItem.lines === undefined) {
+            ionItem.lines = 'full';
+        }
+    };
+    getSlottedHeaderIonItem = () => {
+        const { headerEl } = this;
+        if (!headerEl) {
+            return;
+        }
+        /**
+         * Get the first ion-item
+         * slotted in the header slot
+         */
+        const slot = headerEl.querySelector('slot');
+        if (!slot) {
+            return;
+        }
+        // This is not defined in unit tests
+        if (slot.assignedElements === undefined)
+            return;
+        return slot.assignedElements().find((el) => el.tagName === 'ION-ITEM');
+    };
+    setAria = (expanded = false) => {
+        const ionItem = this.getSlottedHeaderIonItem();
+        if (!ionItem) {
+            return;
+        }
+        /**
+         * Get the native <button> element inside of
+         * ion-item because that is what will be focused
+         */
+        const root = getElementRoot(ionItem);
+        const button = root.querySelector('button');
+        if (!button) {
+            return;
+        }
+        button.setAttribute('aria-expanded', `${expanded}`);
+    };
+    slotToggleIcon = () => {
+        const ionItem = this.getSlottedHeaderIonItem();
+        if (!ionItem) {
+            return;
+        }
+        const { toggleIconSlot, toggleIcon } = this;
+        /**
+         * Check if there already is a toggle icon.
+         * If so, do not add another one.
+         */
+        const existingToggleIcon = ionItem.querySelector('.ion-accordion-toggle-icon');
+        if (existingToggleIcon) {
+            return;
+        }
+        const iconEl = document.createElement('ion-icon');
+        iconEl.slot = toggleIconSlot;
+        iconEl.lazy = false;
+        iconEl.classList.add('ion-accordion-toggle-icon');
+        iconEl.icon = toggleIcon;
+        iconEl.setAttribute('aria-hidden', 'true');
+        ionItem.appendChild(iconEl);
+    };
+    expandAccordion = () => {
+        const { contentEl, contentElWrapper } = this;
+        /**
+         * 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 */;
+            this.hasEverBeenExpanded = true;
+            return;
+        }
+        if (this.state === 4 /* AccordionState.Expanded */) {
+            return;
+        }
+        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 */;
+                this.currentRaf = raf(async () => {
+                    const contentHeight = contentElWrapper.offsetHeight;
+                    const waitForTransition = transitionEndAsync(contentEl, 2000);
+                    contentEl.style.setProperty('max-height', `${contentHeight}px`);
+                    await waitForTransition;
+                    this.state = 4 /* AccordionState.Expanded */;
+                    contentEl.style.removeProperty('max-height');
+                });
+            });
+        }
+        else {
+            this.state = 4 /* AccordionState.Expanded */;
+        }
+    };
+    collapseAccordion = () => {
+        const { contentEl } = this;
+        /**
+         * 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;
+        }
+        if (this.state === 1 /* AccordionState.Collapsed */) {
+            return;
+        }
+        if (this.currentRaf !== undefined) {
+            cancelAnimationFrame(this.currentRaf);
+        }
+        if (this.shouldAnimate()) {
+            this.currentRaf = raf(async () => {
+                const contentHeight = contentEl.offsetHeight;
+                contentEl.style.setProperty('max-height', `${contentHeight}px`);
+                raf(async () => {
+                    const waitForTransition = transitionEndAsync(contentEl, 2000);
+                    this.state = 2 /* AccordionState.Collapsing */;
+                    await waitForTransition;
+                    this.state = 1 /* AccordionState.Collapsed */;
+                    contentEl.style.removeProperty('max-height');
+                });
+            });
+        }
+        else {
+            this.state = 1 /* AccordionState.Collapsed */;
+        }
+    };
+    /**
+     * Helper function to determine if
+     * something should animate.
+     * If prefers-reduced-motion is set
+     * then we should not animate, regardless
+     * of what is set in the config.
+     */
+    shouldAnimate = () => {
+        /**
+         * Don't animate until after the first user interaction.
+         * This prevents animations on initial load when accordions
+         * 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.hasInteracted || !this.hasEverBeenExpanded) {
+            return false;
+        }
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (prefersReducedMotion) {
+            return false;
+        }
+        const animated = config.get('animated', true);
+        if (!animated) {
+            return false;
+        }
+        if (this.accordionGroupEl && !this.accordionGroupEl.animated) {
+            return false;
+        }
+        return true;
+    };
+    updateState = async () => {
+        const accordionGroup = this.accordionGroupEl;
+        const accordionValue = this.value;
+        if (!accordionGroup) {
+            return;
+        }
+        const value = accordionGroup.value;
+        const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
+        if (shouldExpand) {
+            this.expandAccordion();
+            this.isNext = this.isPrevious = false;
+        }
+        else {
+            this.collapseAccordion();
+            /**
+             * When using popout or inset,
+             * the collapsed accordion items
+             * may need additional border radius
+             * applied. Check to see if the
+             * next or previous accordion is selected.
+             */
+            const nextAccordion = this.getNextSibling();
+            const nextAccordionValue = nextAccordion?.value;
+            if (nextAccordionValue !== undefined) {
+                this.isPrevious = Array.isArray(value) ? value.includes(nextAccordionValue) : value === nextAccordionValue;
+            }
+            const previousAccordion = this.getPreviousSibling();
+            const previousAccordionValue = previousAccordion?.value;
+            if (previousAccordionValue !== undefined) {
+                this.isNext = Array.isArray(value) ? value.includes(previousAccordionValue) : value === previousAccordionValue;
+            }
+        }
+    };
+    getNextSibling = () => {
+        if (!this.el) {
+            return;
+        }
+        const nextSibling = this.el.nextElementSibling;
+        if (nextSibling?.tagName !== 'ION-ACCORDION') {
+            return;
+        }
+        return nextSibling;
+    };
+    getPreviousSibling = () => {
+        if (!this.el) {
+            return;
+        }
+        const previousSibling = this.el.previousElementSibling;
+        if (previousSibling?.tagName !== 'ION-ACCORDION') {
+            return;
+        }
+        return previousSibling;
+    };
     toggleExpanded() {
         const { accordionGroupEl, disabled, readonly, value, state } = this;
         if (disabled || readonly)
@@ -400,28 +393,25 @@ const Accordion = class {
     }
     render() {
         const { disabled, readonly } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (h(Host, { key: 'dc4f4369be66507b8b0f0e28a8ab73d0d11d89ca', class: {
-                [theme]: true,
+        return (h(Host, { key: '5c58b3809a4636d69f0f9957ecf1f50c42cdfc03', class: {
+                [mode]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
                 'accordion-collapsing': this.state === 2 /* AccordionState.Collapsing */,
                 'accordion-collapsed': this.state === 1 /* AccordionState.Collapsed */,
                 'accordion-next': this.isNext,
                 'accordion-previous': this.isPrevious,
-                'accordion-last': this.isLast,
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
-                'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
-            }, tabindex: disabled ? '-1' : undefined }, h("div", { key: '3e67b334a8b12eb337d2deae47b6a661cba41c74', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: 'ae7618fb460577c6c31995d8e842c1de16263985', name: "header" })), h("div", { key: '9fc9964f77b9344f763c9adf69ce0bc09534bc75', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '996cf517f866dc516e4ce488c647364e8b2726c8', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'b48b4bc14e8ea1ef04c3e5acebbdf6f7c543c4c7', name: "content" })))));
+            }, tabindex: disabled ? '-1' : undefined }, h("div", { key: 'f76bc02347639b41c9a5be8a9488a8be8559cba7', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: 'e01744bf0af3200239e82c60c632ed36295db2da', name: "header" })), h("div", { key: 'c613345a7e244ee361f76ff4ebed139d2a1b9572', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '943b65d9a129759b4c213974ae5ed777b5f6166e', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'b0df520dad9d5557df63a35f8206ada4a765d238', name: "content" })))));
     }
     static get delegatesFocus() { return true; }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "value": [{
                 "valueChanged": 0
@@ -430,13 +420,10 @@ const Accordion = class {
 };
 let accordionIds = 0;
 Accordion.style = {
-    ionic: accordionIonicCss(),
     ios: accordionIosCss(),
     md: accordionMdCss()
 };
 
-const accordionGroupIonicCss = () => `:host{display:block}:host{min-width:calc(var(--token-scale-6200, 248px) + var(--token-space-600, var(--token-scale-600, 24px)));background-color:var(--token-bg-neutral-subtlest-default, var(--token-primitives-base-white, #ffffff))}:host(.accordion-group-expand-inset){-webkit-padding-start:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-padding-end:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-end:var(--token-space-100, var(--token-scale-100, 4px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host(.accordion-group-expand-inset.accordion-group-shape-round){--border-radius:var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));border-radius:var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)))}:host(.accordion-group-expand-inset.accordion-group-shape-soft){--border-radius:var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));border-radius:var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)))}:host(.accordion-group-expand-inset.accordion-group-shape-rectangular){--border-radius:var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));border-radius:var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)))}`;
-
 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}`;
 
 const accordionGroupMdCss = () => `: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}`;
@@ -446,28 +433,53 @@ const AccordionGroup = class {
         registerInstance(this, hostRef);
         this.ionChange = createEvent(this, "ionChange", 7);
         this.ionValueChange = createEvent(this, "ionValueChange", 7);
-        /**
-         * If `true`, all accordions inside of the
-         * accordion group will animate when expanding
-         * or collapsing.
-         */
-        this.animated = true;
-        /**
-         * If `true`, the accordion group cannot be interacted with.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the accordion group cannot be interacted with,
-         * but does not alter the opacity.
-         */
-        this.readonly = false;
-        /**
-         * Describes the expansion behavior for each accordion.
-         * Possible values are `"compact"` and `"inset"`.
-         * Defaults to `"compact"`.
-         */
-        this.expand = 'compact';
     }
+    get el() { return getElement(this); }
+    /**
+     * If `true`, all accordions inside of the
+     * accordion group will animate when expanding
+     * or collapsing.
+     */
+    animated = true;
+    /**
+     * If `true`, the accordion group can have multiple
+     * accordion components expanded at the same time.
+     */
+    multiple;
+    /**
+     * The value of the accordion group. This controls which
+     * accordions are expanded.
+     * This should be an array of strings only when `multiple="true"`
+     */
+    value;
+    /**
+     * If `true`, the accordion group cannot be interacted with.
+     */
+    disabled = false;
+    /**
+     * If `true`, the accordion group cannot be interacted with,
+     * but does not alter the opacity.
+     */
+    readonly = false;
+    /**
+     * Describes the expansion behavior for each accordion.
+     * Possible values are `"compact"` and `"inset"`.
+     * Defaults to `"compact"`.
+     */
+    expand = 'compact';
+    /**
+     * Emitted when the value property has changed as a result of a user action such as a click.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    ionChange;
+    /**
+     * Emitted when the value property has changed.
+     * This is used to ensure that ion-accordion can respond
+     * to any value property changes.
+     * @internal
+     */
+    ionValueChange;
     valueChanged() {
         const { value, multiple } = this;
         if (!multiple && Array.isArray(value)) {
@@ -600,7 +612,7 @@ const AccordionGroup = class {
              * to the array.
              */
             if (multiple) {
-                const groupValue = value !== null && value !== void 0 ? value : [];
+                const groupValue = value ?? [];
                 const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
                 const valueExists = processedValue.find((v) => v === accordionValue);
                 if (valueExists === undefined && accordionValue !== undefined) {
@@ -617,7 +629,7 @@ const AccordionGroup = class {
              * out of the values array or unset the value.
              */
             if (multiple) {
-                const groupValue = value !== null && value !== void 0 ? value : [];
+                const groupValue = value ?? [];
                 const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
                 this.setValue(processedValue.filter((v) => v !== accordionValue));
             }
@@ -646,31 +658,16 @@ const AccordionGroup = class {
     async getAccordions() {
         return Array.from(this.el.querySelectorAll(':scope > ion-accordion'));
     }
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        // TODO(ROU-11328): Remove theme check when shapes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (shape === undefined) {
-            return 'round';
-        }
-        return shape;
-    }
     render() {
         const { disabled, readonly, expand } = this;
-        const theme = getIonTheme(this);
-        const shape = this.getShape();
-        return (h(Host, { key: '3ff9248922382f2fe2eb9eb2fd895bb9aa91ef2f', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'd1a79a93179474fbba66fcf11a92f4871dacc975', class: {
+                [mode]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-                [`accordion-group-shape-${shape}`]: shape !== undefined,
-            }, role: "presentation" }, h("slot", { key: 'aaa96bfa504bb020c7897e44ac1502b12bb81faf' })));
+            }, role: "presentation" }, h("slot", { key: 'e6b8954b686d1fbb4fc92adb07fddc97a24b0a31' })));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "value": [{
                 "valueChanged": 0
@@ -684,7 +681,6 @@ const AccordionGroup = class {
     }; }
 };
 AccordionGroup.style = {
-    ionic: accordionGroupIonicCss(),
     ios: accordionGroupIosCss(),
     md: accordionGroupMdCss()
 };