@ionic/core 8.8.5 → 8.8.6-dev.11777490150.1970e4f2

package/dist/cjs/{overlays-C2jiBSNQ.js → overlays-Hci_7vw_.js}

@@ -3,12 +3,10 @@
  */
 'use strict';
 
-var index$1 = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-CxTYJdbT.js');
-var hardwareBackButton = require('./hardware-back-button-C4rMJ5uI.js');
-var index = require('./index-CqT-2gKy.js');
-var ionicGlobal = require('./ionic-global-Bc3kJi1Z.js');
-var frameworkDelegate = require('./framework-delegate-CRgp8o_p.js');
+var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
+var helpers = require('./helpers-DJYxKN5U.js');
+var index = require('./index-CzcLEdQ5.js');
+var frameworkDelegate = require('./framework-delegate-Dx9FrqAC.js');
 var gestureController = require('./gesture-controller-dtqlP_q4.js');
 
 /**
@@ -23,7 +21,7 @@ var gestureController = require('./gesture-controller-dtqlP_q4.js');
  * Note: We need this distinction because `disabled="false"` is
  * valid usage for the disabled property on ion-button.
  */
-const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
 /**
  * Focuses the first descendant in a context
  * that can receive focus. If none exists,
@@ -75,7 +73,18 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
     const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
-        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
+        const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+        // If the host has a setFocus() method, use it to delegate focus properly.
+        // This is needed for shadow DOM components like ion-textarea that override
+        // focus() to delegate to their inner native elements.
+        const hasSetFocus = typeof hostToFocus.setFocus === 'function';
+        if (innerFocusable && hasSetFocus) {
+            // Keep the host element so we can call setFocus() on it
+            elementToFocus = hostToFocus;
+        }
+        else {
+            elementToFocus = innerFocusable || hostToFocus;
+        }
     }
     if (elementToFocus) {
         const radioGroup = elementToFocus.closest('ion-radio-group');
@@ -400,11 +409,91 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
+        // Listen for keydown events to intercept Tab navigation.
+        // This is needed for Safari and Firefox which may skip focusable
+        // elements or allow focus to escape the overlay.
+        // It also ensures proper focus delegation for shadow DOM elements
+        // like ion-textarea.
+        doc.addEventListener('keydown', (ev) => {
+            var _a, _b, _c;
+            if (ev.key !== 'Tab' && ev.key !== 'Alt+Tab')
+                return;
+            const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
+                return;
+            const activeElement = doc.activeElement;
+            if (activeElement === lastOverlay) {
+                ev.preventDefault();
+                focusFirstDescendant(lastOverlay);
+                return;
+            }
+            // Check if activeElement is inside the overlay (including shadow DOM)
+            const isInsideOverlay = activeElement
+                ? lastOverlay.contains(activeElement) ||
+                    (activeElement.getRootNode() instanceof ShadowRoot &&
+                        lastOverlay.contains(activeElement.getRootNode().host)) ||
+                    ((_b = (_a = lastOverlay.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) !== null && _b !== void 0 ? _b : false)
+                : false;
+            if (!isInsideOverlay)
+                return;
+            // Get all focusable elements from both light and shadow DOM
+            const allFocusable = [
+                ...lastOverlay.querySelectorAll(focusableQueryString),
+                ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
+            ];
+            if (allFocusable.length === 0) {
+                ev.preventDefault();
+                return;
+            }
+            // Find current element's index (accounting for shadow DOM)
+            const currentIndex = activeElement
+                ? allFocusable.findIndex((el) => {
+                    var _a;
+                    if (el === activeElement)
+                        return true;
+                    if ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement))
+                        return true;
+                    const rootNode = activeElement.getRootNode();
+                    return rootNode instanceof ShadowRoot && rootNode.host === el;
+                })
+                : -1;
+            ev.preventDefault();
+            // Helper to focus an element, handling shadow DOM properly
+            const focusElement = (element) => {
+                const shadowRoot = element.shadowRoot;
+                if (shadowRoot) {
+                    const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+                    if (innerFocusable && typeof element.setFocus !== 'function') {
+                        helpers.focusVisibleElement(innerFocusable);
+                        return;
+                    }
+                }
+                helpers.focusVisibleElement(element);
+            };
+            if (ev.shiftKey) {
+                // Shift+Tab: previous element, wrap to last if at first
+                if (currentIndex <= 0) {
+                    focusLastDescendant(lastOverlay);
+                }
+                else {
+                    focusElement(allFocusable[currentIndex - 1]);
+                }
+            }
+            else {
+                // Tab: next element, wrap to first if at last
+                if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
+                    focusFirstDescendant(lastOverlay);
+                }
+                else {
+                    focusElement(allFocusable[currentIndex + 1]);
+                }
+            }
+        }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);
             if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
-                ev.detail.register(hardwareBackButton.OVERLAY_BACK_BUTTON_PRIORITY, () => {
+                ev.detail.register(ionicGlobal.OVERLAY_BACK_BUTTON_PRIORITY, () => {
                     /**
                      * Do not return this promise otherwise
                      * the hardware back button utility will
@@ -427,7 +516,7 @@ const connectListeners = (doc) => {
          * this behavior will be handled via the ionBackButton
          * event.
          */
-        if (!hardwareBackButton.shouldUseCloseWatcher()) {
+        if (!ionicGlobal.shouldUseCloseWatcher()) {
             doc.addEventListener('keydown', (ev) => {
                 if (ev.key === 'Escape') {
                     const lastOverlay = getPresentedOverlay(doc);
@@ -513,7 +602,7 @@ const setRootAriaHidden = (hidden = false) => {
         viewContainer.removeAttribute('aria-hidden');
     }
 };
-const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
+const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, opts) => {
     var _a, _b;
     if (overlay.presented) {
         return;
@@ -561,11 +650,15 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
     }
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
+    const theme = ionicGlobal.getIonTheme(overlay);
     const mode = ionicGlobal.getIonMode(overlay);
+    const selectedAnimation = mode === 'ios'
+        ? iosEnterAnimation
+        : theme === 'ionic' && ionicEnterAnimation
+            ? ionicEnterAnimation
+            : mdEnterAnimation;
     // get the user's animation fn if one was provided
-    const animationBuilder = overlay.enterAnimation
-        ? overlay.enterAnimation
-        : index.config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
+    const animationBuilder = overlay.enterAnimation ? overlay.enterAnimation : index.config.get(name, selectedAnimation);
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
@@ -651,7 +744,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     if (!overlay.presented) {
         return false;
     }
-    const presentedOverlays = index$1.doc !== undefined ? getPresentedOverlays(index$1.doc) : [];
+    const presentedOverlays = ionicGlobal.doc !== undefined ? getPresentedOverlays(ionicGlobal.doc) : [];
     /**
      * For accessibility, toasts lack focus traps and don't receive
      * `aria-hidden` on the root element when presented.
@@ -720,7 +813,8 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     return true;
 };
 const getAppRoot = (doc) => {
-    return doc.querySelector('ion-app') || doc.body;
+    const appRootSelector = index.config.get('appRootSelector', 'ion-app');
+    return doc.querySelector(appRootSelector) || doc.body;
 };
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     // Make overlay visible in case it's hidden

package/dist/cjs/select-option-render-C7klBX2H.js

@@ -0,0 +1,81 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+var index = require('./index-CzcLEdQ5.js');
+var index$1 = require('./index-BJlwOs11.js');
+
+/**
+ * Cache that maps rendered span elements to the source HTMLElement
+ * they were cloned from. This prevents flickering when a user
+ * selects an option that has rich content, as the content will only be
+ * re-rendered if the source HTMLElement changes.
+ */
+const contentCache = new WeakMap();
+/**
+ * Renders cloned DOM content into an element via a ref callback.
+ * The content is only cloned when the source element changes,
+ * preventing flicker caused by destroying and recreating web
+ * components (e.g., ion-avatar) on every re-render cycle.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param id - Unique identifier for generating stable virtual DOM keys.
+ * @param content - The HTMLElement container whose child nodes will be cloned.
+ * @param className - CSS class applied to the wrapper span.
+ * @param useSpan - Whether to use a span element instead of a div for the wrapper.
+ */
+const renderClonedContent = (id, content, className, useSpan = false) => {
+    const Tag = useSpan ? 'span' : 'div';
+    return (index.h(Tag, { class: className, key: `${className}-${id}`, ref: (el) => {
+            if (el) {
+                const cached = contentCache.get(el);
+                // Skip if this element already has clones from the same source
+                if (cached === content) {
+                    return;
+                }
+                const sanitized = index$1.sanitizeDOMString(content.innerHTML);
+                el.innerHTML = sanitized !== null && sanitized !== void 0 ? sanitized : '';
+                contentCache.set(el, content);
+            }
+        } }));
+};
+/**
+ * Renders the label content for a select option within an overlay
+ * interface based on the presence of rich content.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param option - The content option data containing label, slots,
+ * and description.
+ * @param className - The base CSS class for the label element.
+ * @param useSpan - Whether to use a span element instead of a div for the label.
+ */
+const renderOptionLabel = (option, className, useSpan = false) => {
+    const { id, label, startContent, endContent, description } = option;
+    const hasRichContent = !!startContent || !!endContent || !!description;
+    const Tag = useSpan ? 'span' : 'div';
+    // Render simple string label if there is no rich content to display
+    if (!hasRichContent && (typeof label === 'string' || !label)) {
+        return (index.h(Tag, { class: className, key: `${className}-${id}` }, label));
+    }
+    // Render the main label
+    const labelEl = typeof label === 'string' || !label ? (
+    // Label is a simple string or undefined
+    index.h(Tag, { key: `${className}-label-${id}` }, label)) : (
+    // Label is an HTMLElement with potential rich content
+    renderClonedContent(id, label, `${className}-text`, useSpan));
+    // No rich content, render just the label
+    if (!hasRichContent) {
+        return (index.h(Tag, { class: className, key: `${className}-${id}` }, labelEl));
+    }
+    // Render label with rich content (start, end, description)
+    return (index.h(Tag, { class: className, key: `${className}-${id}` }, startContent && renderClonedContent(id, startContent, 'select-option-start', useSpan), index.h(Tag, { class: "select-option-content", key: `${className}-content-${id}` }, labelEl, description && (index.h(Tag, { class: "select-option-description", key: `${className}-desc-${id}` }, description))), endContent && renderClonedContent(id, endContent, 'select-option-end', useSpan)));
+};
+
+exports.renderOptionLabel = renderOptionLabel;

package/dist/cjs/{status-tap-CCJk5VgT.js → status-tap-CTY2dMsZ.js}

@@ -3,9 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-CqT-2gKy.js');
-var index$1 = require('./index-MbaBbWXk.js');
-var helpers = require('./helpers-CxTYJdbT.js');
+var index = require('./index-CzcLEdQ5.js');
+var index$1 = require('./index-BJrpF9T3.js');
+var helpers = require('./helpers-DJYxKN5U.js');
+require('./focus-visible-BIj-I3-C.js');
 
 const startStatusTap = () => {
     const win = window;

package/dist/cjs/{swipe-back-BGhTQ1CU.js → swipe-back-jJFi5KCB.js}

@@ -3,10 +3,11 @@
  */
 'use strict';
 
-var helpers = require('./helpers-CxTYJdbT.js');
+var helpers = require('./helpers-DJYxKN5U.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var index = require('./index-CAvQ7Tka.js');
-require('./index-CqT-2gKy.js');
+require('./focus-visible-BIj-I3-C.js');
+require('./index-CzcLEdQ5.js');
 require('./gesture-controller-dtqlP_q4.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {

package/dist/cjs/{theme-CeDs6Hcv.js → theme-IlOsGAz7.js}

@@ -3,8 +3,32 @@
  */
 'use strict';
 
+/**
+ * Checks if an element has a parent matching the specified selector.
+ * This handles an element in both light DOM and shadow DOM contexts.
+ * @param selector The parent selector to check for (e.g., 'ion-datetime'
+ * or 'ion-toolbar[color]').
+ * @param el The element to check.
+ * @returns `true` if the element has a parent matching the specified selector,
+ * `false` otherwise.
+ */
 const hostContext = (selector, el) => {
-    return el.closest(selector) !== null;
+    // Check the light DOM first
+    if (el.closest(selector) !== null) {
+        return true;
+    }
+    // For attribute or class selectors (e.g., 'ion-toolbar[color]' or
+    // 'ion-toolbar.ion-color') we can only check light DOM since tagName
+    // doesn't include attributes or classes.
+    if (selector.includes('[') || selector.includes('.')) {
+        return false;
+    }
+    // Check the shadow DOM by looking at the shadow root host and
+    // converting the selector to uppercase to compare with tagName
+    const upperCaseTagName = selector.toUpperCase();
+    const rootNode = el.getRootNode();
+    const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    return (shadowHost === null || shadowHost === void 0 ? void 0 : shadowHost.tagName) === upperCaseTagName;
 };
 /**
  * Create the mode and color classes for the component based on the classes passed in

package/dist/cjs/validity-QmuwEptc.js

@@ -0,0 +1,51 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+/**
+ * Checks if the form element is in an invalid state based on
+ * Ionic validation classes.
+ *
+ * @param el The form element to check.
+ * @returns `true` if the element is invalid, `false` otherwise.
+ */
+const checkInvalidState = (el) => {
+    const hasIonTouched = el.classList.contains('ion-touched');
+    const hasIonInvalid = el.classList.contains('ion-invalid');
+    return hasIonTouched && hasIonInvalid;
+};
+const getValidityFlags = (validity) => {
+    return {
+        badInput: validity.badInput,
+        customError: validity.customError,
+        patternMismatch: validity.patternMismatch,
+        rangeOverflow: validity.rangeOverflow,
+        rangeUnderflow: validity.rangeUnderflow,
+        stepMismatch: validity.stepMismatch,
+        tooLong: validity.tooLong,
+        tooShort: validity.tooShort,
+        typeMismatch: validity.typeMismatch,
+        valueMissing: validity.valueMissing,
+    };
+};
+/**
+ * Reports the validity state of a native form element to ElementInternals.
+ * This delegates to the native element's built-in validation, which automatically
+ * handles required, minlength, maxlength, and other constraints.
+ */
+const reportValidityToElementInternals = (nativeElement, internals) => {
+    if (!(nativeElement === null || nativeElement === void 0 ? void 0 : nativeElement.validity)) {
+        return;
+    }
+    if (nativeElement.validity.valid) {
+        internals.setValidity({});
+    }
+    else {
+        const validityFlags = getValidityFlags(nativeElement.validity);
+        internals.setValidity(validityFlags, nativeElement.validationMessage, nativeElement);
+    }
+};
+
+exports.checkInvalidState = checkInvalidState;
+exports.reportValidityToElementInternals = reportValidityToElementInternals;

package/dist/cjs/x-BTF99yFH.js

@@ -0,0 +1,8 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+const xSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMDUuNjYsMTk0LjM0YTgsOCwwLDAsMS0xMS4zMiwxMS4zMkwxMjgsMTM5LjMxLDYxLjY2LDIwNS42NmE4LDgsMCwwLDEtMTEuMzItMTEuMzJMMTE2LjY5LDEyOCw1MC4zNCw2MS42NkE4LDgsMCwwLDEsNjEuNjYsNTAuMzRMMTI4LDExNi42OWw2Ni4zNC02Ni4zNWE4LDgsMCwwLDEsMTEuMzIsMTEuMzJMMTM5LjMxLDEyOFoiLz48L3N2Zz4=';
+
+exports.xSvg = xSvg;

package/dist/collection/collection-manifest.json

@@ -27,10 +27,12 @@
     "components/picker-column/picker-column.js",
     "components/picker/picker.js",
     "components/datetime-button/datetime-button.js",
+    "components/divider/divider.js",
     "components/fab/fab.js",
     "components/fab-button/fab-button.js",
     "components/fab-list/fab-list.js",
     "components/footer/footer.js",
+    "components/gallery/gallery.js",
     "components/grid/grid.js",
     "components/header/header.js",
     "components/img/img.js",
@@ -142,6 +144,11 @@
         "ion-chip"
       ]
     },
+    {
+      "components": [
+        "ion-gallery"
+      ]
+    },
     {
       "components": [
         "ion-input"

package/dist/collection/components/accordion/accordion.ionic.css

@@ -0,0 +1,201 @@
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  /**
+   * This is required to force WebKit
+   * to create a new stacking context
+   * otherwise the border radius is
+   * temporarily lost when hovering over
+   * the ion-item or expanding/collapsing
+   * the accordion.
+   */
+  z-index: 0;
+}
+
+:host(.accordion-expanding) ::slotted(ion-item[slot=header]),
+:host(.accordion-expanded) ::slotted(ion-item[slot=header]) {
+  --border-width: 0px;
+}
+
+#content {
+  overflow: hidden;
+  will-change: max-height;
+}
+
+:host(.accordion-collapsing) #content {
+  /* stylelint-disable-next-line declaration-no-important */
+  max-height: 0 !important;
+}
+
+:host(.accordion-collapsed) #content {
+  display: none;
+}
+
+:host(.accordion-expanding) #content {
+  max-height: 0;
+}
+
+/**
+ * Prevent margins of content-wrapper
+ * from collapsing, breaking the animation.
+ */
+:host(.accordion-expanding) #content-wrapper {
+  overflow: auto;
+}
+
+:host(.accordion-disabled) #header,
+:host(.accordion-readonly) #header,
+:host(.accordion-disabled) #content,
+:host(.accordion-readonly) #content {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host,
+  #content {
+    /* stylelint-disable declaration-no-important */
+    transition: none !important;
+  }
+}
+:host {
+  position: relative;
+}
+
+:host::after {
+  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  right: 0;
+  left: 0;
+  bottom: 0;
+  display: block;
+  position: absolute;
+  height: var(--token-border-size-025, var(--token-scale-025, 1px));
+  background-color: var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));
+  content: "";
+  z-index: 3;
+}
+
+:host(.accordion-last)::after {
+  display: none;
+}
+
+:host(.accordion-animated) {
+  transition: all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+:host(.accordion-animated) #content {
+  transition: max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+::slotted(ion-item[slot=header]) {
+  --border-radius: inherit;
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
+  --inner-border-width: var(--token-scale-0, 0px);
+  --min-height: var(--token-scale-700, 28px);
+  --padding-top: var(--token-space-300, var(--token-scale-300, 12px));
+  --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+  --padding-bottom: var(--token-space-300, var(--token-scale-300, 12px));
+  --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
+  font-size: var(--token-font-size-450, 1.125rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
+  text-decoration: none;
+  text-transform: none;
+}
+
+#content-wrapper {
+  -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-top: var(--token-space-300, var(--token-scale-300, 12px));
+  padding-bottom: var(--token-space-300, var(--token-scale-300, 12px));
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-regular, 400);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+}
+
+:host(.accordion-disabled)::before {
+  border-radius: inherit;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  background-color: var(--token-state-disabled, rgba(255, 255, 255, 0.6));
+  content: "";
+  pointer-events: none;
+  z-index: 2;
+}