@ionic/core 8.7.19-dev.11772655618.1af0949f → 8.7.19-dev.11773072221.15efeed0

package/components/ion-accordion.js

@@ -1,4 +1,459 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{p as t,t as o,H as i,c as e,h as n,d as s}from"./p-BJoMtgfR.js";import{g as a,r as c,t as d,a as r,b as h}from"./p-DgbT0exM.js";import{c as l}from"./p-CO7fmmxt.js";import{b as p}from"./p-CDfQnFrd.js";import{d as m}from"./p-YLXPWgVj.js";const b=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.accordionGroupUpdateHandler=()=>{const t=this.accordionGroupEl;if(t){const o=t.value,i=this.value,e=Array.isArray(o)?o.includes(i):o===i;this.hasReceivedFirstUpdate&&e!==(4===this.state||8===this.state)&&(this.hasInteracted=!0),void 0!==o&&(this.hasReceivedFirstUpdate=!0)}this.updateState()},this.state=1,this.isNext=!1,this.isPrevious=!1,this.hasInteracted=!1,this.hasEverBeenExpanded=!1,this.hasReceivedFirstUpdate=!1,this.value="ion-accordion-"+u++,this.disabled=!1,this.readonly=!1,this.toggleIcon=l,this.toggleIconSlot="end",this.setItemDefaults=()=>{const t=this.getSlottedHeaderIonItem();t&&(t.button=!0,t.detail=!1,void 0===t.lines&&(t.lines="full"))},this.getSlottedHeaderIonItem=()=>{const{headerEl:t}=this;if(!t)return;const o=t.querySelector("slot");return o&&void 0!==o.assignedElements?o.assignedElements().find((t=>"ION-ITEM"===t.tagName)):void 0},this.setAria=(t=!1)=>{const o=this.getSlottedHeaderIonItem();if(!o)return;const i=a(o).querySelector("button");i&&i.setAttribute("aria-expanded",""+t)},this.slotToggleIcon=()=>{const t=this.getSlottedHeaderIonItem();if(!t)return;const{toggleIconSlot:o,toggleIcon:i}=this;if(t.querySelector(".ion-accordion-toggle-icon"))return;const e=document.createElement("ion-icon");e.slot=o,e.lazy=!1,e.classList.add("ion-accordion-toggle-icon"),e.icon=i,e.setAttribute("aria-hidden","true"),t.appendChild(e)},this.expandAccordion=()=>{const{contentEl:t,contentElWrapper:o}=this;if(void 0===t||void 0===o)return this.state=4,void(this.hasEverBeenExpanded=!0);4!==this.state&&(void 0!==this.currentRaf&&cancelAnimationFrame(this.currentRaf),this.hasEverBeenExpanded=!0,this.shouldAnimate()?c((()=>{this.state=8,this.currentRaf=c((async()=>{const i=o.offsetHeight,e=d(t,2e3);t.style.setProperty("max-height",i+"px"),await e,this.state=4,t.style.removeProperty("max-height")}))})):this.state=4)},this.collapseAccordion=()=>{const{contentEl:t}=this;void 0!==t?1!==this.state&&(void 0!==this.currentRaf&&cancelAnimationFrame(this.currentRaf),this.shouldAnimate()?this.currentRaf=c((async()=>{t.style.setProperty("max-height",t.offsetHeight+"px"),c((async()=>{const o=d(t,2e3);this.state=2,await o,this.state=1,t.style.removeProperty("max-height")}))})):this.state=1):this.state=1},this.shouldAnimate=()=>!(!this.hasInteracted||!this.hasEverBeenExpanded)&&("undefined"!=typeof window&&(!matchMedia("(prefers-reduced-motion: reduce)").matches&&!(!e.get("animated",!0)||this.accordionGroupEl&&!this.accordionGroupEl.animated))),this.updateState=async()=>{const t=this.accordionGroupEl,o=this.value;if(!t)return;const i=t.value;if(Array.isArray(i)?i.includes(o):i===o)this.expandAccordion(),this.isNext=this.isPrevious=!1;else{this.collapseAccordion();const t=this.getNextSibling(),o=null==t?void 0:t.value;void 0!==o&&(this.isPrevious=Array.isArray(i)?i.includes(o):i===o);const e=this.getPreviousSibling(),n=null==e?void 0:e.value;void 0!==n&&(this.isNext=Array.isArray(i)?i.includes(n):i===n)}},this.getNextSibling=()=>{if(!this.el)return;const t=this.el.nextElementSibling;return"ION-ACCORDION"===(null==t?void 0:t.tagName)?t:void 0},this.getPreviousSibling=()=>{if(!this.el)return;const t=this.el.previousElementSibling;return"ION-ACCORDION"===(null==t?void 0:t.tagName)?t:void 0}}valueChanged(){this.updateState()}connectedCallback(){var t;const o=this.accordionGroupEl=null===(t=this.el)||void 0===t?void 0:t.closest("ion-accordion-group");o&&(this.updateState(),r(o,"ionValueChange",this.accordionGroupUpdateHandler))}disconnectedCallback(){const t=this.accordionGroupEl;t&&h(t,"ionValueChange",this.accordionGroupUpdateHandler)}componentDidLoad(){this.setItemDefaults(),this.slotToggleIcon(),c((()=>{this.setAria(4===this.state||8===this.state)}))}toggleExpanded(){const{accordionGroupEl:t,disabled:o,readonly:i,value:e,state:n}=this;o||i||(this.hasInteracted=!0,!t)||t.requestAccordionToggle(e,1===n||2===n)}render(){const{disabled:t,readonly:o}=this,i=p(this),e=4===this.state||8===this.state,a=e?"header expanded":"header",c=e?"content expanded":"content";return this.setAria(e),n(s,{key:"9c90bce01eff7e5774a19f69c872f3761d66cf3c",class:{[i]:!0,"accordion-expanding":8===this.state,"accordion-expanded":4===this.state,"accordion-collapsing":2===this.state,"accordion-collapsed":1===this.state,"accordion-next":this.isNext,"accordion-previous":this.isPrevious,"accordion-disabled":t,"accordion-readonly":o,"accordion-animated":this.shouldAnimate()}},n("div",{key:"cab40d5bcf3c93fd78e70b6d3906a541e725837d",onClick:()=>this.toggleExpanded(),id:"header",part:a,"aria-controls":"content",ref:t=>this.headerEl=t},n("slot",{key:"672bc7fb3f9e18076b41e20fc9eaeab7cafcf3a2",name:"header"})),n("div",{key:"fd777ca5b4ab04aa4f44c339d58c8cd987c52bcb",id:"content",part:c,role:"region","aria-labelledby":"header",ref:t=>this.contentEl=t},n("div",{key:"0aad70a71e2cd2c16b2e98fa0bdd40421d95fe16",id:"content-wrapper",ref:t=>this.contentElWrapper=t},n("slot",{key:"d630e10ac7c56b4dbf943b523f26759b83aead55",name:"content"}))))}static get delegatesFocus(){return!0}get el(){return this}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return{ios:":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}",md:":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}"}}},[305,"ion-accordion",{value:[1],disabled:[4],readonly:[4],toggleIcon:[1,"toggle-icon"],toggleIconSlot:[1,"toggle-icon-slot"],state:[32],isNext:[32],isPrevious:[32],hasInteracted:[32]},void 0,{value:[{valueChanged:0}]}]);let u=0;const f=b,g=function(){"undefined"!=typeof customElements&&["ion-accordion","ion-icon"].forEach((t=>{switch(t){case"ion-accordion":customElements.get(o(t))||customElements.define(o(t),b);break;case"ion-icon":customElements.get(o(t))||m()}}))};export{f as IonAccordion,g as defineCustomElement}
+import { p as proxyCustomElement, H, c as config, h, d as Host } from './p-DWoUQeZ3.js';
+import { g as getElementRoot, r as raf, t as transitionEndAsync, a as addEventListener, b as removeEventListener } from './p-D5hF6rwn.js';
+import { c as chevronDown } from './p-CO7fmmxt.js';
+import { b as getIonMode } from './p-Bxl5etF4.js';
+import { d as defineCustomElement$2 } from './p-Wro9IPHE.js';
+
+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 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 = /*@__PURE__*/ proxyCustomElement(class Accordion extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        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;
+        /**
+         * 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;
+        /**
+         * The toggle icon to use. This icon will be
+         * rotated when the accordion is expanded
+         * or collapsed.
+         */
+        this.toggleIcon = chevronDown;
+        /**
+         * 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;
+            /**
+             * 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 { 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);
+        };
+        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;
+            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 === 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 = () => {
+            if (!this.el) {
+                return;
+            }
+            const nextSibling = this.el.nextElementSibling;
+            if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.tagName) !== 'ION-ACCORDION') {
+                return;
+            }
+            return nextSibling;
+        };
+        this.getPreviousSibling = () => {
+            if (!this.el) {
+                return;
+            }
+            const previousSibling = this.el.previousElementSibling;
+            if ((previousSibling === null || previousSibling === void 0 ? void 0 : previousSibling.tagName) !== 'ION-ACCORDION') {
+                return;
+            }
+            return previousSibling;
+        };
+    }
+    valueChanged() {
+        this.updateState();
+    }
+    connectedCallback() {
+        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);
+        }
+    }
+    disconnectedCallback() {
+        const accordionGroupEl = this.accordionGroupEl;
+        if (accordionGroupEl) {
+            removeEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler);
+        }
+    }
+    componentDidLoad() {
+        this.setItemDefaults();
+        this.slotToggleIcon();
+        /**
+         * We need to wait a tick because we
+         * just set ionItem.button = true and
+         * the button has not have been rendered yet.
+         */
+        raf(() => {
+            /**
+             * Set aria label on button inside of ion-item
+             * once the inner content has been rendered.
+             */
+            const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
+            this.setAria(expanded);
+        });
+    }
+    toggleExpanded() {
+        const { accordionGroupEl, disabled, readonly, value, state } = this;
+        if (disabled || readonly)
+            return;
+        /**
+         * Mark that the user has interacted with the accordion.
+         * This enables animations for all future state changes.
+         */
+        this.hasInteracted = true;
+        if (accordionGroupEl) {
+            /**
+             * Because the accordion group may or may
+             * not allow multiple accordions open, we
+             * need to request the toggling of this
+             * accordion and the accordion group will
+             * make the decision on whether or not
+             * to allow it.
+             */
+            const expand = state === 1 /* AccordionState.Collapsed */ || state === 2 /* AccordionState.Collapsing */;
+            accordionGroupEl.requestAccordionToggle(value, expand);
+        }
+    }
+    render() {
+        const { disabled, readonly } = 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: '9c90bce01eff7e5774a19f69c872f3761d66cf3c', 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-disabled': disabled,
+                'accordion-readonly': readonly,
+                'accordion-animated': this.shouldAnimate(),
+            } }, h("div", { key: 'cab40d5bcf3c93fd78e70b6d3906a541e725837d', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '672bc7fb3f9e18076b41e20fc9eaeab7cafcf3a2', name: "header" })), h("div", { key: 'fd777ca5b4ab04aa4f44c339d58c8cd987c52bcb', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '0aad70a71e2cd2c16b2e98fa0bdd40421d95fe16', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'd630e10ac7c56b4dbf943b523f26759b83aead55', name: "content" })))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return {
+        ios: accordionIosCss,
+        md: accordionMdCss
+    }; }
+}, [305, "ion-accordion", {
+        "value": [1],
+        "disabled": [4],
+        "readonly": [4],
+        "toggleIcon": [1, "toggle-icon"],
+        "toggleIconSlot": [1, "toggle-icon-slot"],
+        "state": [32],
+        "isNext": [32],
+        "isPrevious": [32],
+        "hasInteracted": [32]
+    }, undefined, {
+        "value": ["valueChanged"]
+    }]);
+let accordionIds = 0;
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-accordion", "ion-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Accordion);
+            }
+            break;
+        case "ion-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IonAccordion = Accordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonAccordion, defineCustomElement };

package/components/ion-action-sheet.js

@@ -1,4 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{A as o,d as s}from"./p-1KVKSLu5.js";const p=o,r=s;export{p as IonActionSheet,r as defineCustomElement}
+import { A as ActionSheet, d as defineCustomElement$1 } from './p-CXJR56Oq.js';
+
+const IonActionSheet = ActionSheet;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonActionSheet, defineCustomElement };

package/components/ion-alert.js

@@ -1,4 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{A as o,d as s}from"./p-CH0NYjKq.js";const p=o,r=s;export{p as IonAlert,r as defineCustomElement}
+import { A as Alert, d as defineCustomElement$1 } from './p-BcazQttQ.js';
+
+const IonAlert = Alert;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonAlert, defineCustomElement };

package/components/ion-app.js

@@ -1,4 +1,135 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{p as t,H as e,c as s,f as o,h as i,d as n,t as a}from"./p-BJoMtgfR.js";import{shouldUseCloseWatcher as r}from"./p-vEbVo2hO.js";import{a as p,b as c}from"./p-CDfQnFrd.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost()}componentDidLoad(){this.rIC((async()=>{const t=p(window,"hybrid");if(s.getBoolean("_testing")||import("./p-BgwEQWW6.js").then((t=>t.startTapClick(s))),s.getBoolean("statusTap",t)&&import("./p-CneGxKsZ.js").then((t=>t.startStatusTap())),s.getBoolean("inputShims",m())){const t=p(window,"ios")?"ios":"android";import("./p-Cwv-vmkN.js").then((e=>e.startInputShims(s,t)))}const e=await import("./p-vEbVo2hO.js"),i=t||r();s.getBoolean("hardwareBackButton",i)?e.startHardwareBackButton():(r()&&o("[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used."),e.blockHardwareBackButton()),"undefined"!=typeof window&&import("./p-D6Ynv7Xh.js").then((t=>t.startKeyboardAssist(window))),import("./p-BmVRXR1y.js").then((t=>this.focusVisible=t.startFocusVisible()))}))}disconnectedCallback(){this.loadTimeout&&clearTimeout(this.loadTimeout)}async setFocus(t){this.focusVisible&&this.focusVisible.setFocus(t)}rIC(t){"requestIdleCallback"in window?window.requestIdleCallback(t):this.loadTimeout=setTimeout(t,32)}render(){const t=c(this);return i(n,{key:"77a7459d3e42b3715a5a7e1cf468e2ebc99e54bb",class:{[t]:!0,"ion-page":!0,"force-statusbar-padding":s.getBoolean("_forceStatusbarPadding")}})}get el(){return this}static get style(){return"html.plt-mobile ion-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html.plt-mobile ion-app [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}"}},[0,"ion-app",{setFocus:[64]}]),m=()=>!(!p(window,"ios")||!p(window,"mobile"))||!(!p(window,"android")||!p(window,"mobileweb")),u=d,l=function(){"undefined"!=typeof customElements&&["ion-app"].forEach((t=>{"ion-app"===t&&(customElements.get(a(t))||customElements.define(a(t),d))}))};export{u as IonApp,l as defineCustomElement}
+import { p as proxyCustomElement, H, c as config, f as printIonWarning, h, d as Host } from './p-DWoUQeZ3.js';
+import { shouldUseCloseWatcher } from './p-Boi6hecl.js';
+import { a as isPlatform, b as getIonMode } from './p-Bxl5etF4.js';
+
+const appCss = "html.plt-mobile ion-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html.plt-mobile ion-app [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
+
+const App = /*@__PURE__*/ proxyCustomElement(class App extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    componentDidLoad() {
+        {
+            this.rIC(async () => {
+                const isHybrid = isPlatform(window, 'hybrid');
+                if (!config.getBoolean('_testing')) {
+                    import('./p-Cyd00tgZ.js').then((module) => module.startTapClick(config));
+                }
+                if (config.getBoolean('statusTap', isHybrid)) {
+                    import('./p-DyHPCMyn.js').then((module) => module.startStatusTap());
+                }
+                if (config.getBoolean('inputShims', needInputShims())) {
+                    /**
+                     * needInputShims() ensures that only iOS and Android
+                     * platforms proceed into this block.
+                     */
+                    const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
+                    import('./p-OuiHmXO5.js').then((module) => module.startInputShims(config, platform));
+                }
+                const hardwareBackButtonModule = await import('./p-Boi6hecl.js');
+                const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
+                if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
+                    hardwareBackButtonModule.startHardwareBackButton();
+                }
+                else {
+                    /**
+                     * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
+                     * then the close watcher will not be used.
+                     */
+                    if (shouldUseCloseWatcher()) {
+                        printIonWarning('[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
+                    }
+                    hardwareBackButtonModule.blockHardwareBackButton();
+                }
+                if (typeof window !== 'undefined') {
+                    import('./p-D6Ynv7Xh.js').then((module) => module.startKeyboardAssist(window));
+                }
+                import('./p-BmVRXR1y.js').then((module) => (this.focusVisible = module.startFocusVisible()));
+            });
+        }
+    }
+    disconnectedCallback() {
+        if (this.loadTimeout) {
+            clearTimeout(this.loadTimeout);
+        }
+    }
+    /**
+     * Used to set focus on an element that uses `ion-focusable`.
+     * Do not use this if focusing the element as a result of a keyboard
+     * event as the focus utility should handle this for us. This method
+     * should be used when we want to programmatically focus an element as
+     * a result of another user action. (Ex: We focus the first element
+     * inside of a popover when the user presents it, but the popover is not always
+     * presented as a result of keyboard action.)
+     *
+     * @param elements An array of HTML elements to set focus on.
+     */
+    async setFocus(elements) {
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
+    }
+    rIC(callback) {
+        if ('requestIdleCallback' in window) {
+            window.requestIdleCallback(callback);
+        }
+        else {
+            this.loadTimeout = setTimeout(callback, 32);
+        }
+    }
+    render() {
+        const mode = getIonMode(this);
+        return (h(Host, { key: '77a7459d3e42b3715a5a7e1cf468e2ebc99e54bb', class: {
+                [mode]: true,
+                'ion-page': true,
+                'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
+            } }));
+    }
+    get el() { return this; }
+    static get style() { return appCss; }
+}, [256, "ion-app", {
+        "setFocus": [64]
+    }]);
+const needInputShims = () => {
+    /**
+     * iOS always needs input shims
+     */
+    const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
+    if (needsShimsIOS) {
+        return true;
+    }
+    /**
+     * Android only needs input shims when running
+     * in the browser and only if the browser is using the
+     * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
+     */
+    const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
+    if (isAndroidMobileWeb) {
+        return true;
+    }
+    return false;
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-app"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-app":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, App);
+            }
+            break;
+    } });
+}
+
+const IonApp = App;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonApp, defineCustomElement };