@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11789504012.1a675914

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

@@ -3,11 +3,13 @@
  */
 import { Host, h } from "@stencil/core";
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from "../../utils/helpers";
+import { hostContext } from "../../utils/theme";
 import { chevronDown } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot header - Content is placed at the top and is used to
  * expand or collapse the accordion item.
@@ -20,93 +22,320 @@ import { getIonMode } from "../../global/ionic-global";
  * with the `header` and `content` parts (i.e. `::part(header expanded)`).
  */
 export class Accordion {
-    accordionGroupEl;
-    accordionGroupUpdateHandler = () => {
+    constructor() {
+        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;
         /**
-         * Determine if this update will cause an actual state change.
-         * We only want to mark as "interacted" if the state is changing.
+         * 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.
          */
-        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;
+        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;
+        /**
+         * The slot inside of `ion-item` to
+         * place the toggle icon. Defaults to `"end"`.
+         */
+        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;
             /**
-             * 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)
+             * By default, the lines in an
+             * item should be full here, but
+             * only do that if a user has
+             * not explicitly overridden them
              */
-            if (this.hasReceivedFirstUpdate && stateWillChange) {
-                this.hasInteracted = true;
+            if (ionItem.lines === undefined) {
+                ionItem.lines = 'full';
+            }
+        };
+        this.getSlottedHeaderIonItem = () => {
+            const { headerEl } = this;
+            if (!headerEl) {
+                return;
             }
             /**
-             * 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.
+             * Get the first ion-item
+             * slotted in the header slot
              */
-            if (value !== undefined) {
-                this.hasReceivedFirstUpdate = true;
+            const slot = headerEl.querySelector('slot');
+            if (!slot) {
+                return;
             }
-        }
-        this.updateState();
-    };
-    contentEl;
-    contentElWrapper;
-    headerEl;
-    currentRaf;
-    el;
-    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++}`;
+            // 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;
+            /**
+             * 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.
+         */
+        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.
+             */
+            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;
+        };
+        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;
+        };
+    }
     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() {
-        const accordionGroupEl = (this.accordionGroupEl = this.el?.closest('ion-accordion-group'));
+        var _a;
+        const accordionGroupEl = (this.accordionGroupEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('ion-accordion-group'));
         if (accordionGroupEl) {
             this.updateState();
             addEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler);
@@ -135,246 +364,20 @@ export class Accordion {
             this.setAria(expanded);
         });
     }
-    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.
+     * Get the icon to use for the toggle icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
      */
-    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;
+    get accordionToggleIcon() {
+        // Return the icon if it is explicitly set
+        if (this.toggleIcon != null) {
+            return this.toggleIcon;
         }
-        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;
-    };
+        // Return the configured accordion toggle icon or the default icon
+        return config.get('accordionToggleIcon', chevronDown);
+    }
     toggleExpanded() {
         const { accordionGroupEl, disabled, readonly, value, state } = this;
         if (disabled || readonly)
@@ -399,23 +402,25 @@ export class Accordion {
     }
     render() {
         const { disabled, readonly } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(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: '5c58b3809a4636d69f0f9957ecf1f50c42cdfc03', class: {
-                [mode]: true,
+        return (h(Host, { key: '2e516386263715b2843c0af02e7ac928df1da007', class: {
+                [theme]: 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(),
-            }, 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" })))));
+                'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
+            }, tabindex: disabled ? '-1' : undefined }, h("div", { key: 'd865a68388a1a7e6d594258a277a0b72a2565043', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '1a5b7987a7e2b4903bdf5575c10f2995bcbc7a64', name: "header" })), h("div", { key: 'dbba2ad70c192a08e73e490876ad57f35499c551', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '0183fb76b3a8356b0d1d3f5cd53dd77e1bc196f4', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'fa38df103feb66a412d7998e664f3c4818b20f75', name: "content" })))));
     }
     static get is() { return "ion-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -423,13 +428,15 @@ export class Accordion {
     static get originalStyleUrls() {
         return {
             "ios": ["accordion.ios.scss"],
-            "md": ["accordion.md.scss"]
+            "md": ["accordion.md.scss"],
+            "ionic": ["accordion.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["accordion.ios.css"],
-            "md": ["accordion.md.css"]
+            "md": ["accordion.md.css"],
+            "ionic": ["accordion.ionic.css"]
         };
     }
     static get properties() {
@@ -499,11 +506,11 @@ export class Accordion {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed."
@@ -511,8 +518,7 @@ export class Accordion {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "toggle-icon",
-                "defaultValue": "chevronDown"
+                "attribute": "toggle-icon"
             },
             "toggleIconSlot": {
                 "type": "string",
@@ -541,6 +547,7 @@ export class Accordion {
             "state": {},
             "isNext": {},
             "isPrevious": {},
+            "isLast": {},
             "hasInteracted": {}
         };
     }