@pod-os/elements 0.7.1-92705ee.0 → 0.7.1-a71f01c.0

package/dist/{esm/index-3a1bd803.js → components/index9.js}

@@ -1,13 +1,18 @@
-import { G as GESTURE_CONTROLLER } from './gesture-controller-8f35af24.js';
-export { G as GESTURE_CONTROLLER } from './gesture-controller-8f35af24.js';
+import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
+export { G as GESTURE_CONTROLLER } from './gesture-controller.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const addEventListener = (el, eventName, callback, opts) => {
   // use event listener options when supported
   // otherwise it's just a boolean for the "capture" arg
-  const listenerOpts = supportsPassive(el) ? {
-    'capture': !!opts.capture,
-    'passive': !!opts.passive,
-  } : !!opts.capture;
+  const listenerOpts = supportsPassive(el)
+    ? {
+      capture: !!opts.capture,
+      passive: !!opts.passive,
+    }
+    : !!opts.capture;
   let add;
   let remove;
   if (el['__zone_symbol__addEventListener']) {
@@ -29,9 +34,11 @@ const supportsPassive = (node) => {
       const opts = Object.defineProperty({}, 'passive', {
         get: () => {
           _sPassive = true;
-        }
+        },
       });
-      node.addEventListener('optsTest', () => { return; }, opts);
+      node.addEventListener('optsTest', () => {
+        return;
+      }, opts);
     }
     catch (e) {
       _sPassive = false;
@@ -41,6 +48,9 @@ const supportsPassive = (node) => {
 };
 let _sPassive;
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const MOUSE_WAIT = 2000;
 const createPointerEvents = (el, pointerDown, pointerMove, pointerUp, options) => {
   let rmTouchStart;
@@ -153,13 +163,16 @@ const createPointerEvents = (el, pointerDown, pointerMove, pointerUp, options) =
   return {
     enable,
     stop,
-    destroy
+    destroy,
   };
 };
 const getDocument = (node) => {
   return node instanceof Document ? node : node.ownerDocument;
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const createPanRecognizer = (direction, thresh, maxAngle) => {
   const radians = maxAngle * (Math.PI / 180);
   const isDirX = direction === 'x';
@@ -180,8 +193,8 @@ const createPanRecognizer = (direction, thresh, maxAngle) => {
       if (!dirty) {
         return false;
       }
-      const deltaX = (x - startX);
-      const deltaY = (y - startY);
+      const deltaX = x - startX;
+      const deltaY = y - startY;
       const distance = deltaX * deltaX + deltaY * deltaY;
       if (distance < threshold) {
         return false;
@@ -205,10 +218,13 @@ const createPanRecognizer = (direction, thresh, maxAngle) => {
     },
     getDirection() {
       return isPan;
-    }
+    },
   };
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const createGesture = (config) => {
   let hasCapturedPan = false;
   let hasStartedPan = false;
@@ -237,13 +253,13 @@ const createGesture = (config) => {
     deltaY: 0,
     currentTime: 0,
     event: undefined,
-    data: undefined
+    data: undefined,
   };
   const pan = createPanRecognizer(finalConfig.direction, finalConfig.threshold, finalConfig.maxAngle);
   const gesture = GESTURE_CONTROLLER.createGesture({
     name: config.gestureName,
     priority: config.gesturePriority,
-    disableScroll: config.disableScroll
+    disableScroll: config.disableScroll,
   });
   const pointerDown = (ev) => {
     const timeStamp = now(ev);
@@ -304,7 +320,7 @@ const createGesture = (config) => {
     }
   };
   const tryToCapturePan = () => {
-    if (gesture && !gesture.capture()) {
+    if (!gesture.capture()) {
       return false;
     }
     hasCapturedPan = true;
@@ -327,10 +343,9 @@ const createGesture = (config) => {
     return true;
   };
   const blurActiveElement = () => {
-    /* tslint:disable-next-line */
     if (typeof document !== 'undefined') {
       const activeElement = document.activeElement;
-      if (activeElement !== null && activeElement.blur) {
+      if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) {
         activeElement.blur();
       }
     }
@@ -374,7 +389,7 @@ const createGesture = (config) => {
   };
   const pointerEvents = createPointerEvents(finalConfig.el, pointerDown, pointerMove, pointerUp, {
     capture: false,
-    passive
+    passive,
   });
   const abortGesture = () => {
     reset();
@@ -396,7 +411,7 @@ const createGesture = (config) => {
     destroy() {
       gesture.destroy();
       pointerEvents.destroy();
-    }
+    },
   };
 };
 const calcGestureData = (detail, ev) => {
@@ -409,7 +424,7 @@ const calcGestureData = (detail, ev) => {
   updateDetail(ev, detail);
   const currentX = detail.currentX;
   const currentY = detail.currentY;
-  const timestamp = detail.currentTime = now(ev);
+  const timestamp = (detail.currentTime = now(ev));
   const timeDelta = timestamp - prevT;
   if (timeDelta > 0 && timeDelta < 100) {
     const velocityX = (currentX - prevX) / timeDelta;

package/dist/{custom-elements → components}/input-shims.js

@@ -1,12 +1,16 @@
-import { a as addEventListener, r as removeEventListener, b as raf, p as pointerCoord, c as componentOnReady } from './index.js';
+import { g as getScrollElement, c as scrollByPoint, f as findClosestIonContent } from './index5.js';
+import { a as addEventListener, b as removeEventListener, r as raf, p as pointerCoord, d as componentOnReady } from './helpers.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const cloneMap = new WeakMap();
-const relocateInput = (componentEl, inputEl, shouldRelocate, inputRelativeY = 0) => {
+const relocateInput = (componentEl, inputEl, shouldRelocate, inputRelativeY = 0, disabledClonedInput = false) => {
   if (cloneMap.has(componentEl) === shouldRelocate) {
     return;
   }
   if (shouldRelocate) {
-    addClone(componentEl, inputEl, inputRelativeY);
+    addClone(componentEl, inputEl, inputRelativeY, disabledClonedInput);
   }
   else {
     removeClone(componentEl, inputEl);
@@ -15,7 +19,7 @@ const relocateInput = (componentEl, inputEl, shouldRelocate, inputRelativeY = 0)
 const isFocused = (input) => {
   return input === input.getRootNode().activeElement;
 };
-const addClone = (componentEl, inputEl, inputRelativeY) => {
+const addClone = (componentEl, inputEl, inputRelativeY, disabledClonedInput = false) => {
   // this allows for the actual input to receive the focus from
   // the user's touch event, but before it receives focus, it
   // moves the actual input to a location that will not screw
@@ -30,6 +34,21 @@ const addClone = (componentEl, inputEl, inputRelativeY) => {
   const clonedEl = inputEl.cloneNode(false);
   clonedEl.classList.add('cloned-input');
   clonedEl.tabIndex = -1;
+  /**
+   * Making the cloned input disabled prevents
+   * Chrome for Android from still scrolling
+   * the entire page since this cloned input
+   * will briefly be hidden by the keyboard
+   * even though it is not focused.
+   *
+   * This is not needed on iOS. While this
+   * does not cause functional issues on iOS,
+   * the input still appears slightly dimmed even
+   * if we set opacity: 1.
+   */
+  if (disabledClonedInput) {
+    clonedEl.disabled = true;
+  }
   parentEl.appendChild(clonedEl);
   cloneMap.set(componentEl, clonedEl);
   const doc = componentEl.ownerDocument;
@@ -47,9 +66,14 @@ const removeClone = (componentEl, inputEl) => {
   inputEl.style.transform = '';
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const enableHideCaretOnScroll = (componentEl, inputEl, scrollEl) => {
   if (!scrollEl || !inputEl) {
-    return () => { return; };
+    return () => {
+      return;
+    };
   }
   const scrollHideCaret = (shouldHideCaret) => {
     if (isFocused(inputEl)) {
@@ -69,6 +93,9 @@ const enableHideCaretOnScroll = (componentEl, inputEl, scrollEl) => {
   };
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const SKIP_SELECTOR = 'input, textarea, [no-blur], [contenteditable]';
 const enableInputBlurring = () => {
   let focused = true;
@@ -103,7 +130,7 @@ const enableInputBlurring = () => {
       return;
     }
     focused = false;
-    // TODO: find a better way, why 50ms?
+    // TODO FW-2796: find a better way, why 50ms?
     setTimeout(() => {
       if (!focused) {
         active.blur();
@@ -120,9 +147,13 @@ const enableInputBlurring = () => {
   };
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const SCROLL_ASSIST_SPEED = 0.3;
 const getScrollData = (componentEl, contentEl, keyboardHeight) => {
-  const itemEl = componentEl.closest('ion-item,[ion-item]') || componentEl;
+  var _a;
+  const itemEl = (_a = componentEl.closest('ion-item,[ion-item]')) !== null && _a !== void 0 ? _a : componentEl;
   return calcScrollData(itemEl.getBoundingClientRect(), contentEl.getBoundingClientRect(), keyboardHeight, componentEl.ownerDocument.defaultView.innerHeight);
 };
 const calcScrollData = (inputRect, contentRect, keyboardHeight, platformHeight) => {
@@ -139,11 +170,7 @@ const calcScrollData = (inputRect, contentRect, keyboardHeight, platformHeight)
   const distanceToBottom = safeAreaBottom - inputBottom;
   const distanceToTop = safeAreaTop - inputTop;
   // desiredScrollAmount is the negated distance to the safe area according to our calculations.
-  const desiredScrollAmount = Math.round((distanceToBottom < 0)
-    ? -distanceToBottom
-    : (distanceToTop > 0)
-      ? -distanceToTop
-      : 0);
+  const desiredScrollAmount = Math.round(distanceToBottom < 0 ? -distanceToBottom : distanceToTop > 0 ? -distanceToTop : 0);
   // our calculations make some assumptions that aren't always true, like the keyboard being closed when an input
   // gets focus, so make sure we don't scroll the input above the visible area
   const scrollAmount = Math.min(desiredScrollAmount, inputTop - visibleAreaTop);
@@ -154,11 +181,14 @@ const calcScrollData = (inputRect, contentRect, keyboardHeight, platformHeight)
     scrollAmount,
     scrollDuration,
     scrollPadding: keyboardHeight,
-    inputSafeY: -(inputTop - safeAreaTop) + 4
+    inputSafeY: -(inputTop - safeAreaTop) + 4,
   };
 };
 
-const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardHeight) => {
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardHeight, disableClonedInput = false) => {
   let coord;
   const touchStart = (ev) => {
     coord = pointerCoord(ev);
@@ -173,19 +203,18 @@ const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardH
     // focus this input if the pointer hasn't moved XX pixels
     // and the input doesn't already have focus
     if (!hasPointerMoved(6, coord, endCoord) && !isFocused(inputEl)) {
-      ev.stopPropagation();
       // begin the input focus process
-      jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight);
+      jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, disableClonedInput);
     }
   };
-  componentEl.addEventListener('touchstart', touchStart, true);
+  componentEl.addEventListener('touchstart', touchStart, { capture: true, passive: true });
   componentEl.addEventListener('touchend', touchEnd, true);
   return () => {
     componentEl.removeEventListener('touchstart', touchStart, true);
     componentEl.removeEventListener('touchend', touchEnd, true);
   };
 };
-const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHeight) => {
+const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHeight, disableClonedInput = false) => {
   if (!contentEl && !footerEl) {
     return;
   }
@@ -199,7 +228,7 @@ const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHei
   // temporarily move the focus to the focus holder so the browser
   // doesn't freak out while it's trying to get the input in place
   // at this point the native text input still does not have focus
-  relocateInput(componentEl, inputEl, true, scrollData.inputSafeY);
+  relocateInput(componentEl, inputEl, true, scrollData.inputSafeY, disableClonedInput);
   inputEl.focus();
   /**
    * Relocating/Focusing input causes the
@@ -207,7 +236,6 @@ const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHei
    * manually fire one here.
    */
   raf(() => componentEl.click());
-  /* tslint:disable-next-line */
   if (typeof window !== 'undefined') {
     let scrollContentTimeout;
     const scrollContent = async () => {
@@ -219,7 +247,7 @@ const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHei
       window.removeEventListener('ionKeyboardDidShow', scrollContent);
       // scroll the input into place
       if (contentEl) {
-        await contentEl.scrollByPoint(0, scrollData.scrollAmount, scrollData.scrollDuration);
+        await scrollByPoint(contentEl, 0, scrollData.scrollAmount, scrollData.scrollDuration);
       }
       // the scroll view is in the correct position now
       // give the native text input focus
@@ -232,7 +260,7 @@ const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHei
       window.addEventListener('ionKeyboardDidShow', scrollContent);
     };
     if (contentEl) {
-      const scrollEl = await contentEl.getScrollElement();
+      const scrollEl = await getScrollElement(contentEl);
       /**
        * scrollData will only consider the amount we need
        * to scroll in order to properly bring the input
@@ -246,7 +274,7 @@ const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHei
        * bandwidth to become available.
        */
       const totalScrollAmount = scrollEl.scrollHeight - scrollEl.clientHeight;
-      if (scrollData.scrollAmount > (totalScrollAmount - scrollEl.scrollTop)) {
+      if (scrollData.scrollAmount > totalScrollAmount - scrollEl.scrollTop) {
         /**
          * On iOS devices, the system will show a "Passwords" bar above the keyboard
          * after the initial keyboard is shown. This prevents the webview from resizing
@@ -275,14 +303,17 @@ const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHei
 };
 const hasPointerMoved = (threshold, startCoord, endCoord) => {
   if (startCoord && endCoord) {
-    const deltaX = (startCoord.x - endCoord.x);
-    const deltaY = (startCoord.y - endCoord.y);
+    const deltaX = startCoord.x - endCoord.x;
+    const deltaY = startCoord.y - endCoord.y;
     const distance = deltaX * deltaX + deltaY * deltaY;
-    return distance > (threshold * threshold);
+    return distance > threshold * threshold;
   }
   return false;
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const PADDING_TIMER_KEY = '$ionPaddingTimer';
 const enableScrollPadding = (keyboardHeight) => {
   const doc = document;
@@ -300,18 +331,17 @@ const enableScrollPadding = (keyboardHeight) => {
   };
 };
 const setScrollPadding = (input, keyboardHeight) => {
+  var _a, _b;
   if (input.tagName !== 'INPUT') {
     return;
   }
   if (input.parentElement && input.parentElement.tagName === 'ION-INPUT') {
     return;
   }
-  if (input.parentElement &&
-    input.parentElement.parentElement &&
-    input.parentElement.parentElement.tagName === 'ION-SEARCHBAR') {
+  if (((_b = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.tagName) === 'ION-SEARCHBAR') {
     return;
   }
-  const el = input.closest('ion-content');
+  const el = findClosestIonContent(input);
   if (el === null) {
     return;
   }
@@ -329,24 +359,34 @@ const setScrollPadding = (input, keyboardHeight) => {
   }
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const INPUT_BLURRING = true;
 const SCROLL_PADDING = true;
-const startInputShims = (config) => {
+const startInputShims = (config, platform) => {
   const doc = document;
+  const isIOS = platform === 'ios';
+  const isAndroid = platform === 'android';
+  /**
+   * Hide Caret and Input Blurring are needed on iOS.
+   * Scroll Assist and Scroll Padding are needed on iOS and Android
+   * with Chrome web browser (not Chrome webview).
+   */
   const keyboardHeight = config.getNumber('keyboardHeight', 290);
   const scrollAssist = config.getBoolean('scrollAssist', true);
-  const hideCaret = config.getBoolean('hideCaretOnScroll', true);
-  const inputBlurring = config.getBoolean('inputBlurring', true);
+  const hideCaret = config.getBoolean('hideCaretOnScroll', isIOS);
+  const inputBlurring = config.getBoolean('inputBlurring', isIOS);
   const scrollPadding = config.getBoolean('scrollPadding', true);
   const inputs = Array.from(doc.querySelectorAll('ion-input, ion-textarea'));
   const hideCaretMap = new WeakMap();
   const scrollAssistMap = new WeakMap();
   const registerInput = async (componentEl) => {
-    await new Promise(resolve => componentOnReady(componentEl, resolve));
+    await new Promise((resolve) => componentOnReady(componentEl, resolve));
     const inputRoot = componentEl.shadowRoot || componentEl;
     const inputEl = inputRoot.querySelector('input') || inputRoot.querySelector('textarea');
-    const scrollEl = componentEl.closest('ion-content');
-    const footerEl = (!scrollEl) ? componentEl.closest('ion-footer') : null;
+    const scrollEl = findClosestIonContent(componentEl);
+    const footerEl = !scrollEl ? componentEl.closest('ion-footer') : null;
     if (!inputEl) {
       return;
     }
@@ -354,8 +394,18 @@ const startInputShims = (config) => {
       const rmFn = enableHideCaretOnScroll(componentEl, inputEl, scrollEl);
       hideCaretMap.set(componentEl, rmFn);
     }
-    if ((!!scrollEl || !!footerEl) && scrollAssist && !scrollAssistMap.has(componentEl)) {
-      const rmFn = enableScrollAssist(componentEl, inputEl, scrollEl, footerEl, keyboardHeight);
+    /**
+     * date/datetime-locale inputs on mobile devices show date picker
+     * overlays instead of keyboards. As a result, scroll assist is
+     * not needed. This also works around a bug in iOS <16 where
+     * scroll assist causes the browser to lock up. See FW-1997.
+     */
+    const isDateInput = inputEl.type === 'date' || inputEl.type === 'datetime-local';
+    if (!isDateInput &&
+      (!!scrollEl || !!footerEl) &&
+      scrollAssist &&
+      !scrollAssistMap.has(componentEl)) {
+      const rmFn = enableScrollAssist(componentEl, inputEl, scrollEl, footerEl, keyboardHeight, isAndroid);
       scrollAssistMap.set(componentEl, rmFn);
     }
   };

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

@@ -0,0 +1,228 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+
+const accordionGroupIosCss = ":host{display:block}:host(.accordion-group-expand-inset){margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.accordion-group-expand-inset){margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end: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){margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.accordion-group-expand-inset){margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}:host(.accordion-group-expand-inset) ::slotted(ion-accordion){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-bottom-right-radius:6px;border-bottom-left-radius:6px}:host-context([dir=rtl]):host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-previous),:host-context([dir=rtl]).accordion-group-expand-inset ::slotted(ion-accordion.accordion-previous){border-bottom-right-radius:6px;border-bottom-left-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next){border-top-left-radius:6px;border-top-right-radius:6px}:host-context([dir=rtl]):host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next),:host-context([dir=rtl]).accordion-group-expand-inset ::slotted(ion-accordion.accordion-next){border-top-left-radius:6px;border-top-right-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}";
+
+const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ionChange = createEvent(this, "ionChange", 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';
+  }
+  valueChanged() {
+    const { value, multiple } = this;
+    /**
+     * If accordion group does not
+     * let multiple accordions be open
+     * at once, but user passes an array
+     * just grab the first value.
+     */
+    if (!multiple && Array.isArray(value)) {
+      this.value = value[0];
+    }
+    else {
+      this.ionChange.emit({ value: this.value });
+    }
+  }
+  async disabledChanged() {
+    const { disabled } = this;
+    const accordions = await this.getAccordions();
+    for (const accordion of accordions) {
+      accordion.disabled = disabled;
+    }
+  }
+  async readonlyChanged() {
+    const { readonly } = this;
+    const accordions = await this.getAccordions();
+    for (const accordion of accordions) {
+      accordion.readonly = readonly;
+    }
+  }
+  async onKeydown(ev) {
+    const activeElement = document.activeElement;
+    if (!activeElement) {
+      return;
+    }
+    /**
+     * Make sure focus is in the header, not the body, of the accordion. This ensures
+     * that if there are any interactable elements in the body, their keyboard
+     * interaction doesn't get stolen by the accordion. Example: using up/down keys
+     * in ion-textarea.
+     */
+    const activeAccordionHeader = activeElement.closest('ion-accordion [slot="header"]');
+    if (!activeAccordionHeader) {
+      return;
+    }
+    const accordionEl = activeElement.tagName === 'ION-ACCORDION' ? activeElement : activeElement.closest('ion-accordion');
+    if (!accordionEl) {
+      return;
+    }
+    const closestGroup = accordionEl.closest('ion-accordion-group');
+    if (closestGroup !== this.el) {
+      return;
+    }
+    // If the active accordion is not in the current array of accordions, do not do anything
+    const accordions = await this.getAccordions();
+    const startingIndex = accordions.findIndex((a) => a === accordionEl);
+    if (startingIndex === -1) {
+      return;
+    }
+    let accordion;
+    if (ev.key === 'ArrowDown') {
+      accordion = this.findNextAccordion(accordions, startingIndex);
+    }
+    else if (ev.key === 'ArrowUp') {
+      accordion = this.findPreviousAccordion(accordions, startingIndex);
+    }
+    else if (ev.key === 'Home') {
+      accordion = accordions[0];
+    }
+    else if (ev.key === 'End') {
+      accordion = accordions[accordions.length - 1];
+    }
+    if (accordion !== undefined && accordion !== activeElement) {
+      accordion.focus();
+    }
+  }
+  async componentDidLoad() {
+    if (this.disabled) {
+      this.disabledChanged();
+    }
+    if (this.readonly) {
+      this.readonlyChanged();
+    }
+  }
+  /**
+   * @internal
+   */
+  async requestAccordionToggle(accordionValue, accordionExpand) {
+    const { multiple, value, readonly, disabled } = this;
+    if (readonly || disabled) {
+      return;
+    }
+    if (accordionExpand) {
+      /**
+       * If group accepts multiple values
+       * check to see if value is already in
+       * in values array. If not, add it
+       * to the array.
+       */
+      if (multiple) {
+        const groupValue = value !== null && value !== void 0 ? value : [];
+        const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
+        const valueExists = processedValue.find((v) => v === accordionValue);
+        if (valueExists === undefined && accordionValue !== undefined) {
+          this.value = [...processedValue, accordionValue];
+        }
+      }
+      else {
+        this.value = accordionValue;
+      }
+    }
+    else {
+      /**
+       * If collapsing accordion, either filter the value
+       * out of the values array or unset the value.
+       */
+      if (multiple) {
+        const groupValue = value !== null && value !== void 0 ? value : [];
+        const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
+        this.value = processedValue.filter((v) => v !== accordionValue);
+      }
+      else {
+        this.value = undefined;
+      }
+    }
+  }
+  findNextAccordion(accordions, startingIndex) {
+    const nextAccordion = accordions[startingIndex + 1];
+    if (nextAccordion === undefined) {
+      return accordions[0];
+    }
+    return nextAccordion;
+  }
+  findPreviousAccordion(accordions, startingIndex) {
+    const prevAccordion = accordions[startingIndex - 1];
+    if (prevAccordion === undefined) {
+      return accordions[accordions.length - 1];
+    }
+    return prevAccordion;
+  }
+  /**
+   * @internal
+   */
+  async getAccordions() {
+    return Array.from(this.el.querySelectorAll(':scope > ion-accordion'));
+  }
+  render() {
+    const { disabled, readonly, expand } = this;
+    const mode = getIonMode(this);
+    return (h(Host, { class: {
+        [mode]: true,
+        'accordion-group-disabled': disabled,
+        'accordion-group-readonly': readonly,
+        [`accordion-group-expand-${expand}`]: true,
+      }, role: "presentation" }, h("slot", null)));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "value": ["valueChanged"],
+    "disabled": ["disabledChanged"],
+    "readonly": ["readonlyChanged"]
+  }; }
+  static get style() { return {
+    ios: accordionGroupIosCss,
+    md: accordionGroupMdCss
+  }; }
+}, [33, "ion-accordion-group", {
+    "animated": [4],
+    "multiple": [4],
+    "value": [1025],
+    "disabled": [4],
+    "readonly": [4],
+    "expand": [1],
+    "requestAccordionToggle": [64],
+    "getAccordions": [64]
+  }, [[0, "keydown", "onKeydown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-accordion-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-accordion-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AccordionGroup);
+      }
+      break;
+  } });
+}
+
+const IonAccordionGroup = AccordionGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonAccordionGroup, defineCustomElement };