@ionic/core 8.7.4-dev.11756388042.1a103a79 → 8.7.4-dev.11756747371.11c148d6

package/dist/cjs/{overlays-v_jc1Hok.js → overlays-cmlYi6Sc.js}

@@ -3,12 +3,10 @@
  */
 'use strict';
 
-var index$1 = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-DgwmcYAu.js');
-var hardwareBackButton = require('./hardware-back-button-BxdNu76F.js');
+var ionicGlobal = require('./ionic-global-RZLbse4y.js');
+var helpers = require('./helpers-CYFB2_7O.js');
 var index = require('./index-DNh170BW.js');
-var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
-var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
+var frameworkDelegate = require('./framework-delegate-D94PxJL6.js');
 var gestureController = require('./gesture-controller-dtqlP_q4.js');
 
 /**
@@ -396,7 +394,7 @@ const connectListeners = (doc) => {
         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
@@ -419,7 +417,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);
@@ -492,17 +490,15 @@ const getPresentedOverlay = (doc, overlayTag, id) => {
  */
 const setRootAriaHidden = (hidden = false) => {
     const root = getAppRoot(document);
-    const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
+    const viewContainer = root.querySelector('ion-router-outlet, ion-nav, #ion-view-container-root');
     if (!viewContainer) {
         return;
     }
     if (hidden) {
         viewContainer.setAttribute('aria-hidden', 'true');
-        viewContainer.setAttribute('inert', '');
     }
     else {
         viewContainer.removeAttribute('aria-hidden');
-        viewContainer.removeAttribute('inert');
     }
 };
 const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
@@ -510,17 +506,6 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
     if (overlay.presented) {
         return;
     }
-    /**
-     * When an overlay that steals focus
-     * is dismissed, focus should be returned
-     * to the element that was focused
-     * prior to the overlay opening. Toast
-     * does not steal focus and is excluded
-     * from returning focus as a result.
-     */
-    if (overlay.el.tagName !== 'ION-TOAST') {
-        restoreElementFocus(overlay.el);
-    }
     /**
      * Due to accessibility guidelines, toasts do not have
      * focus traps.
@@ -532,6 +517,8 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         setRootAriaHidden(true);
         document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
     }
+    hideUnderlyingOverlaysFromScreenReaders(overlay.el);
+    hideAnimatingOverlayFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -545,6 +532,17 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         overlay.didPresent.emit();
         (_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
     }
+    /**
+     * When an overlay that steals focus
+     * is dismissed, focus should be returned
+     * to the element that was focused
+     * prior to the overlay opening. Toast
+     * does not steal focus and is excluded
+     * from returning focus as a result.
+     */
+    if (overlay.el.tagName !== 'ION-TOAST') {
+        restoreElementFocus(overlay.el);
+    }
     /**
      * If the focused element is already
      * inside the overlay component then
@@ -567,7 +565,6 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      * screen readers.
      */
     overlay.el.removeAttribute('aria-hidden');
-    overlay.el.removeAttribute('inert');
 };
 /**
  * When an overlay component is dismissed,
@@ -584,8 +581,6 @@ const restoreElementFocus = async (overlayEl) => {
     if (!previousElement) {
         return;
     }
-    // Ensure active element is blurred to prevent a11y warning issues
-    previousElement.blur();
     const shadowRoot = previousElement === null || previousElement === void 0 ? void 0 : previousElement.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
@@ -625,7 +620,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.
@@ -649,6 +644,12 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     }
     overlay.presented = false;
     try {
+        /**
+         * There is no need to show the overlay to screen readers during
+         * the dismiss animation. This is because the overlay will be removed
+         * from the DOM after the animation is complete.
+         */
+        hideAnimatingOverlayFromScreenReaders(overlay.el);
         // Overlay contents should not be clickable during dismiss
         overlay.el.style.setProperty('pointer-events', 'none');
         overlay.willDismiss.emit({ data, role });
@@ -687,10 +688,12 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         index.printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
     }
     overlay.el.remove();
+    revealOverlaysToScreenReaders();
     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
@@ -882,6 +885,93 @@ const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * The overlay that is being animated also needs to hide from screen
+ * readers during its animation. This ensures that assistive technologies
+ * like TalkBack do not announce or interact with the content until the
+ * animation is complete, avoiding confusion for users.
+ *
+ * When the overlay is presented on an Android device, TalkBack's focus rings
+ * may appear in the wrong position due to the transition (specifically
+ * `transform` styles). This occurs because the focus rings are initially
+ * displayed at the starting position of the elements before the transition
+ * begins. This workaround ensures the focus rings do not appear in the
+ * incorrect location.
+ *
+ * If this solution is applied to iOS devices, then it leads to a bug where
+ * the overlays cannot be accessed by screen readers. This is due to
+ * VoiceOver not being able to update the accessibility tree when the
+ * `aria-hidden` is removed.
+ *
+ * @param overlay - The overlay that is being animated.
+ */
+const hideAnimatingOverlayFromScreenReaders = (overlay) => {
+    if (ionicGlobal.doc === undefined)
+        return;
+    if (ionicGlobal.isPlatform('android')) {
+        /**
+         * Once the animation is complete, this attribute will be removed.
+         * This is done at the end of the `present` method.
+         */
+        overlay.setAttribute('aria-hidden', 'true');
+    }
+};
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
+    var _a;
+    if (ionicGlobal.doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(ionicGlobal.doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const presentedOverlay = overlays[i];
+        const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
+        /**
+         * If next overlay has aria-hidden then all remaining overlays will have it too.
+         * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
+         * should not have aria-hidden either so focus can remain in the current overlay.
+         */
+        if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+        }
+    }
+};
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+    if (ionicGlobal.doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(ionicGlobal.doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const currentOverlay = overlays[i];
+        /**
+         * If the current we are looking at is a Toast then we can remove aria-hidden.
+         * However, we potentially need to keep looking at the overlay stack because there
+         * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+         * overlay too so focus can move there since focus is never automatically moved to the Toast.
+         */
+        currentOverlay.removeAttribute('aria-hidden');
+        /**
+         * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+         * since this overlay should always receive focus. As a result, all underlying overlays should still
+         * be hidden from screen readers.
+         */
+        if (currentOverlay.tagName !== 'ION-TOAST') {
+            break;
+        }
+    }
+};
 const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
 
 exports.BACKDROP = BACKDROP;

package/dist/cjs/{status-tap-D9YPr62n.js → status-tap-D-MulHQM.js}

@@ -4,8 +4,9 @@
 'use strict';
 
 var index = require('./index-DNh170BW.js');
-var index$1 = require('./index-Cc5PNMyz.js');
-var helpers = require('./helpers-DgwmcYAu.js');
+var index$1 = require('./index-DsE1tD-q.js');
+var helpers = require('./helpers-CYFB2_7O.js');
+require('./focus-visible-BIj-I3-C.js');
 
 const startStatusTap = () => {
     const win = window;

package/dist/cjs/{swipe-back-C1wRtoww.js → swipe-back-C5W5r-1A.js}

@@ -3,9 +3,10 @@
  */
 'use strict';
 
-var helpers = require('./helpers-DgwmcYAu.js');
+var helpers = require('./helpers-CYFB2_7O.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var index = require('./index-CAvQ7Tka.js');
+require('./focus-visible-BIj-I3-C.js');
 require('./index-DNh170BW.js');
 require('./gesture-controller-dtqlP_q4.js');
 

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,6 +27,7 @@
     "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",

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

@@ -0,0 +1,198 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/*
+Do not edit directly, this file was auto-generated.
+*/ /**
+ * 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 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(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  right: 0;
+  left: 0;
+  bottom: 0;
+  display: block;
+  position: absolute;
+  height: var(--ion-border-size-025, var(--ion-scale-025, 1px));
+  background-color: var(--ion-border-default, var(--ion-primitives-neutral-400, #d5d5d5));
+  content: "";
+  z-index: 3;
+}
+
+: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(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));
+  --border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
+  --inner-border-width: var(--ion-scale-0, 0px);
+  --min-height: var(--ion-scale-700, 28px);
+  --padding-top: var(--ion-space-300, var(--ion-scale-300, 12px));
+  --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  --padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
+  --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  font-size: var(--ion-font-size-450, 1.125rem);
+  font-weight: var(--ion-font-weight-medium, 500);
+  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
+  line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
+  text-decoration: none;
+  text-transform: none;
+}
+
+#content-wrapper {
+  -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-top: var(--ion-space-300, var(--ion-scale-300, 12px));
+  padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
+  font-size: var(--ion-font-size-350, 0.875rem);
+  font-weight: var(--ion-font-weight-regular, 400);
+  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
+  color: var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));
+}
+
+:host(.accordion-disabled)::before {
+  border-radius: inherit;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  background-color: var(--ion-state-disabled, rgba(255, 255, 255, 0.6));
+  content: "";
+  pointer-events: none;
+  z-index: 2;
+}

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

@@ -1,3 +1,70 @@
+: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;
+  }
+}
+/**
+ * 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
@@ -54,25 +121,7 @@
  * }
  */
 :host {
-  display: block;
-  position: relative;
-  width: 100%;
   background-color: var(--ion-background-color, #ffffff);
-  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;
 }
 
 :host(.accordion-animated) {
@@ -83,39 +132,6 @@
   transition: max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
 }
 
-#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;
-}
-
 /**
  * We do not set the opacity on the
  * host otherwise you would see the
@@ -126,13 +142,12 @@
   opacity: 0.4;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  :host,
-  #content {
-    /* stylelint-disable declaration-no-important */
-    transition: none !important;
-  }
-}
+/**
+ * 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