voyager-ionic-core 7.5.0 → 7.5.5

package/dist/cjs/{ios.transition-a4d545dd.js → ios.transition-ac909bc8.js}

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-const animation = require('./animation-c8bdd3c7.js');
-const index = require('./index-d93fb71d.js');
+const animation = require('./animation-1083855c.js');
+const index = require('./index-573877f3.js');
 require('./index-306a7476.js');
 require('./helpers-ea4ccbcb.js');
-require('./index-305a23dc.js');
+require('./index-c2940dc1.js');
 
 const DURATION = 540;
 // TODO(FW-2832): types
@@ -60,60 +60,134 @@ const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringE
   if (shouldAnimationForward) {
     const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect();
     const enteringBackButtonBox = enteringBackButton.getBoundingClientRect();
-    animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, enteringBackButtonBox);
-    animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, leavingLargeTitleBox, enteringBackButtonBox);
+    const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text');
+    const enteringBackButtonTextBox = enteringBackButtonTextEl.getBoundingClientRect();
+    const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title');
+    const leavingLargeTitleTextBox = leavingLargeTitleTextEl.getBoundingClientRect();
+    animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, enteringBackButtonTextEl, enteringBackButtonTextBox);
+    animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox, leavingLargeTitle, leavingLargeTitleTextBox);
   }
   else if (shouldAnimationBackward) {
     const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect();
     const leavingBackButtonBox = leavingBackButton.getBoundingClientRect();
-    animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, leavingBackButtonBox);
-    animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, enteringLargeTitleBox, leavingBackButtonBox);
+    const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text');
+    const leavingBackButtonTextBox = leavingBackButtonTextEl.getBoundingClientRect();
+    const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title');
+    const enteringLargeTitleTextBox = enteringLargeTitleTextEl.getBoundingClientRect();
+    animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
+    animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox, enteringLargeTitle, enteringLargeTitleTextBox);
   }
   return {
     forward: shouldAnimationForward,
     backward: shouldAnimationBackward,
   };
 };
-const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, largeTitleBox, backButtonBox) => {
+const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, backButtonBox, backButtonTextEl, backButtonTextBox, largeTitleEl, largeTitleTextBox) => {
+  var _a, _b;
   const BACK_BUTTON_START_OFFSET = rtl ? `calc(100% - ${backButtonBox.right + 4}px)` : `${backButtonBox.left - 4}px`;
-  const START_TEXT_TRANSLATE = rtl ? '7px' : '-7px';
-  const END_TEXT_TRANSLATE = rtl ? '-4px' : '4px';
-  const ICON_TRANSLATE = rtl ? '-4px' : '4px';
   const TEXT_ORIGIN_X = rtl ? 'right' : 'left';
   const ICON_ORIGIN_X = rtl ? 'left' : 'right';
+  const CONTAINER_ORIGIN_X = rtl ? 'right' : 'left';
+  /**
+   * When the title and back button texts match
+   * then they should overlap during the page transition.
+   * If the texts do not match up then the back button text scale adjusts
+   * to not perfectly match the large title text otherwise the
+   * proportions will be incorrect.
+   * When the texts match we scale both the width and height to account for
+   * font weight differences between the title and back button.
+   */
+  const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+  const WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width;
+  /**
+   * We subtract an offset to account for slight sizing/padding
+   * differences between the title and the back button.
+   */
+  const HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height;
+  const TEXT_START_SCALE = doTitleAndButtonTextsMatch
+    ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`
+    : `scale(${HEIGHT_SCALE})`;
+  const TEXT_END_SCALE = 'scale(1)';
+  const backButtonIconEl = shadow(backButtonEl).querySelector('ion-icon');
+  const backButtonIconBox = backButtonIconEl.getBoundingClientRect();
+  /**
+   * We need to offset the container by the icon dimensions
+   * so that the back button text aligns with the large title
+   * text. Otherwise, the back button icon will align with the
+   * large title text but the back button text will not.
+   */
+  const CONTAINER_START_TRANSLATE_X = rtl
+    ? `${backButtonIconBox.width / 2 - (backButtonIconBox.right - backButtonBox.right)}px`
+    : `${backButtonBox.left - backButtonIconBox.width / 2}px`;
+  const CONTAINER_END_TRANSLATE_X = rtl ? `-${window.innerWidth - backButtonBox.right}px` : `${backButtonBox.left}px`;
+  /**
+   * Back button container should be
+   * aligned to the top of the title container
+   * so the texts overlap as the back button
+   * text begins to fade in.
+   */
+  const CONTAINER_START_TRANSLATE_Y = `${largeTitleTextBox.top}px`;
+  /**
+   * The cloned back button should align exactly with the
+   * real back button on the entering page otherwise there will
+   * be a layout shift.
+   */
+  const CONTAINER_END_TRANSLATE_Y = `${backButtonBox.top}px`;
+  /**
+   * In the forward direction, the cloned back button
+   * container should translate from over the large title
+   * to over the back button. In the backward direction,
+   * it should translate from over the back button to over
+   * the large title.
+   */
+  const FORWARD_CONTAINER_KEYFRAMES = [
+    { offset: 0, transform: `translate3d(${CONTAINER_START_TRANSLATE_X}, ${CONTAINER_START_TRANSLATE_Y}, 0)` },
+    { offset: 1, transform: `translate3d(${CONTAINER_END_TRANSLATE_X}, ${CONTAINER_END_TRANSLATE_Y}, 0)` },
+  ];
+  const BACKWARD_CONTAINER_KEYFRAMES = [
+    { offset: 0, transform: `translate3d(${CONTAINER_END_TRANSLATE_X}, ${CONTAINER_END_TRANSLATE_Y}, 0)` },
+    { offset: 1, transform: `translate3d(${CONTAINER_START_TRANSLATE_X}, ${CONTAINER_START_TRANSLATE_Y}, 0)` },
+  ];
+  const CONTAINER_KEYFRAMES = backDirection ? BACKWARD_CONTAINER_KEYFRAMES : FORWARD_CONTAINER_KEYFRAMES;
+  /**
+   * In the forward direction, the text in the cloned back button
+   * should start to be (roughly) the size of the large title
+   * and then scale down to be the size of the actual back button.
+   * The text should also translate, but that translate is handled
+   * by the container keyframes.
+   */
   const FORWARD_TEXT_KEYFRAMES = [
-    {
-      offset: 0,
-      opacity: 0,
-      transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)`,
-    },
-    { offset: 1, opacity: 1, transform: `translate3d(${END_TEXT_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
+    { offset: 0, opacity: 0, transform: TEXT_START_SCALE },
+    { offset: 1, opacity: 1, transform: TEXT_END_SCALE },
   ];
   const BACKWARD_TEXT_KEYFRAMES = [
-    { offset: 0, opacity: 1, transform: `translate3d(${END_TEXT_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
-    { offset: 0.6, opacity: 0 },
-    {
-      offset: 1,
-      opacity: 0,
-      transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)`,
-    },
+    { offset: 0, opacity: 1, transform: TEXT_END_SCALE },
+    { offset: 1, opacity: 0, transform: TEXT_START_SCALE },
   ];
   const TEXT_KEYFRAMES = backDirection ? BACKWARD_TEXT_KEYFRAMES : FORWARD_TEXT_KEYFRAMES;
+  /**
+   * The icon should scale in/out in the second
+   * half of the animation. The icon should also
+   * translate, but that translate is handled by the
+   * container keyframes.
+   */
   const FORWARD_ICON_KEYFRAMES = [
-    { offset: 0, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
-    { offset: 1, opacity: 1, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
+    { offset: 0, opacity: 0, transform: 'scale(0.6)' },
+    { offset: 0.6, opacity: 0, transform: 'scale(0.6)' },
+    { offset: 1, opacity: 1, transform: 'scale(1)' },
   ];
   const BACKWARD_ICON_KEYFRAMES = [
-    { offset: 0, opacity: 1, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
-    { offset: 0.2, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
-    { offset: 1, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
+    { offset: 0, opacity: 1, transform: 'scale(1)' },
+    { offset: 0.2, opacity: 0, transform: 'scale(0.6)' },
+    { offset: 1, opacity: 0, transform: 'scale(0.6)' },
   ];
   const ICON_KEYFRAMES = backDirection ? BACKWARD_ICON_KEYFRAMES : FORWARD_ICON_KEYFRAMES;
   const enteringBackButtonTextAnimation = animation.createAnimation();
   const enteringBackButtonIconAnimation = animation.createAnimation();
+  const enteringBackButtonAnimation = animation.createAnimation();
   const clonedBackButtonEl = getClonedElement('ion-back-button');
-  const backButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text');
-  const backButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
+  const clonedBackButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text');
+  const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
   clonedBackButtonEl.text = backButtonEl.text;
   clonedBackButtonEl.mode = backButtonEl.mode;
   clonedBackButtonEl.icon = backButtonEl.icon;
@@ -121,11 +195,19 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, larg
   clonedBackButtonEl.disabled = backButtonEl.disabled;
   clonedBackButtonEl.style.setProperty('display', 'block');
   clonedBackButtonEl.style.setProperty('position', 'fixed');
-  enteringBackButtonIconAnimation.addElement(backButtonIconEl);
-  enteringBackButtonTextAnimation.addElement(backButtonTextEl);
+  enteringBackButtonIconAnimation.addElement(clonedBackButtonIconEl);
+  enteringBackButtonTextAnimation.addElement(clonedBackButtonTextEl);
+  enteringBackButtonAnimation.addElement(clonedBackButtonEl);
+  enteringBackButtonAnimation
+    .beforeStyles({
+    position: 'absolute',
+    top: '0px',
+    [CONTAINER_ORIGIN_X]: '0px',
+  })
+    .keyframes(CONTAINER_KEYFRAMES);
   enteringBackButtonTextAnimation
     .beforeStyles({
-    'transform-origin': `${TEXT_ORIGIN_X} center`,
+    'transform-origin': `${TEXT_ORIGIN_X} top`,
   })
     .beforeAddWrite(() => {
     backButtonEl.style.setProperty('display', 'none');
@@ -142,21 +224,91 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, larg
     'transform-origin': `${ICON_ORIGIN_X} center`,
   })
     .keyframes(ICON_KEYFRAMES);
-  rootAnimation.addAnimation([enteringBackButtonTextAnimation, enteringBackButtonIconAnimation]);
+  rootAnimation.addAnimation([
+    enteringBackButtonTextAnimation,
+    enteringBackButtonIconAnimation,
+    enteringBackButtonAnimation,
+  ]);
 };
-const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, backButtonBox) => {
-  const TITLE_START_OFFSET = rtl ? `calc(100% - ${largeTitleBox.right}px)` : `${largeTitleBox.left}px`;
-  const START_TRANSLATE = rtl ? '-18px' : '18px';
+const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonTextEl, backButtonTextBox) => {
+  var _a, _b;
+  /**
+   * The horizontal transform origin for the large title
+   */
   const ORIGIN_X = rtl ? 'right' : 'left';
+  const TITLE_START_OFFSET = rtl ? `calc(100% - ${largeTitleBox.right}px)` : `${largeTitleBox.left}px`;
+  /**
+   * The cloned large should align exactly with the
+   * real large title on the leaving page otherwise there will
+   * be a layout shift.
+   */
+  const START_TRANSLATE_X = '0px';
+  const START_TRANSLATE_Y = `${largeTitleBox.top}px`;
+  /**
+   * How much to offset the large title translation by.
+   * This accounts for differences in sizing between the large
+   * title and the back button due to padding and font weight.
+   */
+  const LARGE_TITLE_TRANSLATION_OFFSET = 8;
+  /**
+   * The scaled title should (roughly) overlap the back button.
+   * This ensures that the back button and title overlap during
+   * the animation. Note that since both elements either fade in
+   * or fade out over the course of the animation, neither element
+   * will be fully visible on top of the other. As a result, the overlap
+   * does not need to be perfect, so approximate values are acceptable here.
+   */
+  const END_TRANSLATE_X = rtl
+    ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
+    : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`;
+  /**
+   * The top of the scaled large title
+   * should match with the top of the
+   * back button text element.
+   * We subtract 2px to account for the top padding
+   * on the large title element.
+   */
+  const LARGE_TITLE_TOP_PADDING = 2;
+  const END_TRANSLATE_Y = `${backButtonTextBox.y - LARGE_TITLE_TOP_PADDING}px`;
+  /**
+   * In the forward direction, the large title should start at its
+   * normal size and then scale down to be (roughly) the size of the
+   * back button on the other view. In the backward direction, the
+   * large title should start at (roughly) the size of the back button
+   * and then scale up to its original size.
+   *
+   * Note that since both elements either fade in
+   * or fade out over the course of the animation, neither element
+   * will be fully visible on top of the other. As a result, the overlap
+   * does not need to be perfect, so approximate values are acceptable here.
+   */
+  /**
+   * When the title and back button texts match
+   * then they should overlap during the page transition.
+   * If the texts do not match up then the large title text scale adjusts
+   * to not perfectly match the back button text otherwise the
+   * proportions will be incorrect.
+   * When the texts match we scale both the width and height to account for
+   * font weight differences between the title and back button.
+   */
+  const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+  const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width;
+  const HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET);
+  const START_SCALE = 'scale(1)';
+  const END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
   const BACKWARDS_KEYFRAMES = [
-    { offset: 0, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.49)` },
+    { offset: 0, opacity: 0, transform: `translate3d(${END_TRANSLATE_X}, ${END_TRANSLATE_Y}, 0) ${END_SCALE}` },
     { offset: 0.1, opacity: 0 },
-    { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` },
+    { offset: 1, opacity: 1, transform: `translate3d(${START_TRANSLATE_X}, ${START_TRANSLATE_Y}, 0) ${START_SCALE}` },
   ];
   const FORWARDS_KEYFRAMES = [
-    { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` },
+    {
+      offset: 0,
+      opacity: 0.99,
+      transform: `translate3d(${START_TRANSLATE_X}, ${START_TRANSLATE_Y}, 0) ${START_SCALE}`,
+    },
     { offset: 0.6, opacity: 0 },
-    { offset: 1, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.5)` },
+    { offset: 1, opacity: 0, transform: `translate3d(${END_TRANSLATE_X}, ${END_TRANSLATE_Y}, 0) ${END_SCALE}` },
   ];
   const KEYFRAMES = backDirection ? BACKWARDS_KEYFRAMES : FORWARDS_KEYFRAMES;
   const clonedTitleEl = getClonedElement('ion-title');
@@ -167,8 +319,14 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
   clonedLargeTitleAnimation.addElement(clonedTitleEl);
   clonedLargeTitleAnimation
     .beforeStyles({
-    'transform-origin': `${ORIGIN_X} center`,
-    height: '46px',
+    'transform-origin': `${ORIGIN_X} top`,
+    /**
+     * Since font size changes will cause
+     * the dimension of the large title to change
+     * we need to set the cloned title height
+     * equal to that of the original large title height.
+     */
+    height: `${largeTitleBox.height}px`,
     display: '',
     position: 'relative',
     [ORIGIN_X]: TITLE_START_OFFSET,
@@ -481,6 +639,16 @@ const iosTransitionAnimation = (navEl, opts) => {
     throw err;
   }
 };
+/**
+ * The scale of the back button during the animation
+ * is computed based on the scale of the large title
+ * and vice versa. However, we need to account for slight
+ * variations in the size of the large title due to
+ * padding and font weight. This value should be used to subtract
+ * a small amount from the large title height when computing scales
+ * to get more accurate scale results.
+ */
+const LARGE_TITLE_SIZE_OFFSET = 10;
 
 exports.iosTransitionAnimation = iosTransitionAnimation;
 exports.shadow = shadow;

package/dist/cjs/loader.cjs.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-305a23dc.js');
-const appGlobals = require('./app-globals-fe1ad535.js');
-require('./ionic-global-fb752503.js');
+const index = require('./index-c2940dc1.js');
+const appGlobals = require('./app-globals-1d4c1dbf.js');
+require('./ionic-global-ea2901a3.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/{md.transition-80bb961b.js → md.transition-907af519.js}

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-const animation = require('./animation-c8bdd3c7.js');
-const index = require('./index-d93fb71d.js');
+const animation = require('./animation-1083855c.js');
+const index = require('./index-573877f3.js');
 require('./index-306a7476.js');
 require('./helpers-ea4ccbcb.js');
-require('./index-305a23dc.js');
+require('./index-c2940dc1.js');
 
 const mdTransitionAnimation = (_, opts) => {
   var _a, _b, _c;

package/dist/cjs/{overlays-1a734051.js → overlays-2ffc5f27.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-306a7476.js');
-const ionicGlobal = require('./ionic-global-fb752503.js');
+const ionicGlobal = require('./ionic-global-ea2901a3.js');
 const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 const hardwareBackButton = require('./hardware-back-button-b67c8e75.js');
 const helpers = require('./helpers-ea4ccbcb.js');

package/dist/cjs/{status-tap-778e8054.js → status-tap-3fb2391a.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-const index = require('./index-305a23dc.js');
-const index$1 = require('./index-10873539.js');
+const index = require('./index-c2940dc1.js');
+const index$1 = require('./index-da2c7a37.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 require('./index-cc7dfb7c.js');
 

package/dist/cjs/{watch-options-f3f77e54.js → watch-options-53bbb124.js}

@@ -3,7 +3,6 @@
  */
 'use strict';
 
-// TODO(FW-2832): types
 const watchForOptions = (containerEl, tagName, onChange) => {
   if (typeof MutationObserver === 'undefined') {
     return;
@@ -27,10 +26,22 @@ const getSelectedOption = (mutationList, tagName) => {
   });
   return newOption;
 };
-const findCheckedOption = (el, tagName) => {
-  if (el.nodeType !== 1) {
+/**
+ * The "value" key is only set on some components such as ion-select-option.
+ * As a result, we create a default union type of HTMLElement and the "value" key.
+ * However, implementers are required to provide the appropriate component type
+ * such as HTMLIonSelectOptionElement.
+ */
+const findCheckedOption = (node, tagName) => {
+  /**
+   * https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+   * The above check ensures "node" is an Element (nodeType 1).
+   */
+  if (node.nodeType !== 1) {
     return undefined;
   }
+  // HTMLElement inherits from Element, so we cast "el" as T.
+  const el = node;
   const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
   return options.find((o) => o.value === el.value);
 };

package/dist/collection/collection-manifest.json

@@ -94,7 +94,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.4.1",
+    "version": "4.7.2",
     "typescriptVersion": "5.2.2"
   },
   "collections": [

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

@@ -105,6 +105,16 @@ export class AccordionGroup {
     if (this.readonly) {
       this.readonlyChanged();
     }
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.valueChanged();
   }
   /**
    * Sets the value property and emits ionChange.

package/dist/collection/components/accordion-group/accordion-group.md.css

@@ -133,7 +133,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-previous):dir(rtl) {
+  :host(.accordion-group-expand-inset:dir(rtl)) ::slotted(ion-accordion.accordion-previous) {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
   }
@@ -149,7 +149,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next):dir(rtl) {
+  :host(.accordion-group-expand-inset:dir(rtl)) ::slotted(ion-accordion.accordion-next) {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
   }

package/dist/collection/components/action-sheet/action-sheet.ios.css

@@ -140,8 +140,8 @@
   justify-content: flex-end;
   height: 100%;
   /* Fallback for browsers that do not support dvh */
-  max-height: 100vh;
-  max-height: 100dvh;
+  max-height: calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
+  max-height: calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
 }
 
 .action-sheet-group {
@@ -153,10 +153,23 @@
   background: var(--background);
 }
 
-.action-sheet-group::-webkit-scrollbar {
-  display: none;
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .action-sheet-group::-webkit-scrollbar {
+    display: none;
+  }
 }
-
 .action-sheet-group-cancel {
   flex-shrink: 0;
   overflow: hidden;

package/dist/collection/components/action-sheet/action-sheet.md.css

@@ -140,8 +140,8 @@
   justify-content: flex-end;
   height: 100%;
   /* Fallback for browsers that do not support dvh */
-  max-height: 100vh;
-  max-height: 100dvh;
+  max-height: calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
+  max-height: calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
 }
 
 .action-sheet-group {
@@ -153,10 +153,23 @@
   background: var(--background);
 }
 
-.action-sheet-group::-webkit-scrollbar {
-  display: none;
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .action-sheet-group::-webkit-scrollbar {
+    display: none;
+  }
 }
-
 .action-sheet-group-cancel {
   flex-shrink: 0;
   overflow: hidden;

package/dist/collection/components/action-sheet/test/basic/action-sheet.e2e.js

@@ -81,3 +81,62 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
     });
   });
 });
+/**
+ * This behavior needs to be tested in both modes but does not vary
+ * across directions due to the component only applying safe area
+ * to the top and bottom
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('action-sheet: basic'), () => {
+    test.describe('safe area', () => {
+      test('should have padding added by the safe area', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/27777',
+        });
+        await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-top: 60px;
+              --ion-safe-area-bottom: 40px;
+            }
+          </style>
+
+          <ion-action-sheet></ion-action-sheet>
+
+          <script>
+            const actionSheet = document.querySelector('ion-action-sheet');
+            actionSheet.header = 'Header';
+            actionSheet.subHeader = 'Sub Header';
+            actionSheet.buttons = [
+              'Add Reaction',
+              'Copy Text',
+              'Share Text',
+              'Copy Link to Message',
+              'Remind Me',
+              'Pin File',
+              'Star File',
+              'Mark Unread',
+              'Mark Read',
+              'Edit Title',
+              'Erase Title',
+              'Save Image',
+              'Copy Image',
+              'Erase Image',
+              'Delete File',
+              {
+                text: 'Cancel',
+                role: 'cancel'
+              },
+            ];
+          </script>
+        `, config);
+        const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+        const actionSheet = page.locator('ion-action-sheet');
+        await actionSheet.evaluate((el) => el.present());
+        await ionActionSheetDidPresent.next();
+        await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-safe-area`));
+      });
+    });
+  });
+});

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

@@ -122,12 +122,45 @@
   overscroll-behavior-y: contain;
 }
 
-.alert-checkbox-group::-webkit-scrollbar,
-.alert-radio-group::-webkit-scrollbar,
-.alert-message::-webkit-scrollbar {
-  display: none;
+.alert-checkbox-label,
+.alert-radio-label {
+  /**
+   * This allows long words to wrap to the next line
+   * instead of flowing outside of the container.
+   *
+   * The "anywhere" keyword should be used instead
+   * of the "break-word" keyword since the parent
+   * container is using flexbox. Flex relies on min-content and
+   * max-content intrinsic sizes to structure the layout. Flex will
+   * wrap content only until it reaches its min-content intrinsic size
+   * which in this case is equal to the longest word in this container.
+   * "break-word" does not shrink the min-content intrinsic size
+   * of the flex item which causes the long word to still overflow.
+   * "anywhere" on the other hand does shrink the min-content
+   * intrinsic size which allows the long word to wrap to the next line.
+   */
+  overflow-wrap: anywhere;
 }
 
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .alert-checkbox-group::-webkit-scrollbar,
+  .alert-radio-group::-webkit-scrollbar,
+  .alert-message::-webkit-scrollbar {
+    display: none;
+  }
+}
 .alert-input {
   padding-left: 0;
   padding-right: 0;