voyager-ionic-core 7.5.0 → 7.5.5

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

@@ -55,7 +55,16 @@ export class RadioGroup {
     this.ionValueChange.emit({ value });
   }
   componentDidLoad() {
-    this.setRadioTabindex(this.value);
+    /**
+     * There's an issue when assigning a value to the radio group
+     * within the Angular primary content (rendering within the
+     * app component template). When the template is isolated to a route,
+     * the value is assigned correctly.
+     * To address this issue, we need to ensure that the watcher is
+     * called after the component has finished loading,
+     * allowing the emit to be dispatched correctly.
+     */
+    this.valueChanged(this.value);
   }
   async connectedCallback() {
     // Get the list header if it exists and set the id

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

@@ -428,7 +428,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.range-label-placement-stacked) .label-text-wrapper:dir(rtl) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }

package/dist/collection/components/range/range.md.css

@@ -428,7 +428,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.range-label-placement-stacked) .label-text-wrapper:dir(rtl) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }

package/dist/collection/components/refresher/refresher.utils.js

@@ -16,7 +16,6 @@ export const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
     : createTranslateAnimation(pullingSpinner, refresherEl);
 };
 const createBaseAnimation = (pullingRefresherIcon) => {
-  // TODO(FW-2832): add types/re-evaluate asserting so many things
   const spinner = pullingRefresherIcon.querySelector('ion-spinner');
   const circle = spinner.shadowRoot.querySelector('circle');
   const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
@@ -173,6 +172,14 @@ export const shouldUseNativeRefresher = async (referenceEl, mode) => {
   const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
   return (pullingSpinner !== null &&
     refreshingSpinner !== null &&
+    /**
+     * We use webkitOverflowScrolling for feature detection with rubber band scrolling
+     * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
+     * However, it will be the empty string on iOS.
+     * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
+     * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
+     * set on the element, even if the platform does not support that.
+     */
     ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
       mode === 'md'));
 };

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

@@ -1,36 +1,3 @@
-/**
- * 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([slot]) {
   display: none;
   line-height: 0;
@@ -46,7 +13,7 @@
  * icons resize with Dynamic Type.
  */
 ::slotted(ion-icon) {
-  font-size: 1rem;
+  font-size: dynamic-font(16px);
 }
 
 /**

package/dist/collection/components/reorder/reorder.md.css

@@ -1,36 +1,3 @@
-/**
- * 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([slot]) {
   display: none;
   line-height: 0;
@@ -46,7 +13,7 @@
  * icons resize with Dynamic Type.
  */
 ::slotted(ion-icon) {
-  font-size: 1rem;
+  font-size: dynamic-font(16px);
 }
 
 /**

package/dist/collection/components/searchbar/searchbar.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, forceUpdate, h } from "@stencil/core";
-import { debounceEvent, raf } from "../../utils/helpers";
+import { debounceEvent, raf, componentOnReady } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from "ionicons/icons";
@@ -189,7 +189,14 @@ export class Searchbar {
   /**
    * Returns the native `<input>` element used under the hood.
    */
-  getInputElement() {
+  async getInputElement() {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.nativeInput) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
     return Promise.resolve(this.nativeInput);
   }
   /**

package/dist/collection/components/searchbar/searchbar.md.css

@@ -265,34 +265,40 @@
 }
 
 .searchbar-cancel-button {
+  /**
+   * The left edge of the cancel button
+   * should align with the left edge
+   * of the back button if the searchbar
+   * is used in a toolbar.
+   */
   top: 0;
   background-color: transparent;
-  font-size: 1.6em;
+  font-size: 1.5em;
 }
 @supports (inset-inline-start: 0) {
   .searchbar-cancel-button {
-    inset-inline-start: 5px;
+    inset-inline-start: 9px;
   }
 }
 @supports not (inset-inline-start: 0) {
   .searchbar-cancel-button {
-    left: 5px;
+    left: 9px;
   }
   :host-context([dir=rtl]) .searchbar-cancel-button {
     left: unset;
     right: unset;
-    right: 5px;
+    right: 9px;
   }
   [dir=rtl] .searchbar-cancel-button {
     left: unset;
     right: unset;
-    right: 5px;
+    right: 9px;
   }
   @supports selector(:dir(rtl)) {
     .searchbar-cancel-button:dir(rtl) {
       left: unset;
       right: unset;
-      right: 5px;
+      right: 9px;
     }
   }
 }

package/dist/collection/components/searchbar/test/basic/searchbar.e2e.js

@@ -134,3 +134,28 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('searchbar: cancel button alignment'), () => {
+    test('should align with the back button when used in a toolbar', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28468',
+      });
+      await page.setContent(`
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button default-href="#"></ion-back-button>
+            </ion-buttons>
+            <ion-title>Test</ion-title>
+          </ion-toolbar>
+          <ion-toolbar>
+            <ion-searchbar show-cancel-button="always"></ion-searchbar>
+          </ion-toolbar>
+        </ion-header>
+      `, config);
+      const header = page.locator('ion-header');
+      await expect(header).toHaveScreenshot(screenshot(`searchbar-back-button-align`));
+    });
+  });
+});

package/dist/collection/components/segment/segment.js

@@ -106,7 +106,13 @@ export class Segment {
      * before we can scroll.
      */
     raf(() => {
-      this.scrollActiveButtonIntoView();
+      /**
+       * When the segment loads for the first
+       * time we just want to snap the active button into
+       * place instead of scroll. Smooth scrolling should only
+       * happen when the user interacts with the segment.
+       */
+      this.scrollActiveButtonIntoView(false);
     });
     this.gesture = (await import('../../utils/gesture')).createGesture({
       el: this.el,
@@ -236,28 +242,48 @@ export class Segment {
       buttons[next].classList.add('segment-button-after-checked');
     }
   }
-  scrollActiveButtonIntoView() {
-    const { scrollable, value } = this;
+  scrollActiveButtonIntoView(smoothScroll = true) {
+    const { scrollable, value, el } = this;
     if (scrollable) {
       const buttons = this.getButtons();
       const activeButton = buttons.find((button) => button.value === value);
       if (activeButton !== undefined) {
+        const scrollContainerBox = el.getBoundingClientRect();
+        const activeButtonBox = activeButton.getBoundingClientRect();
+        /**
+         * Subtract the active button x position from the scroll
+         * container x position. This will give us the x position
+         * of the active button within the scroll container.
+         */
+        const activeButtonLeft = activeButtonBox.x - scrollContainerBox.x;
+        /**
+         * If we just used activeButtonLeft, then the active button
+         * would be aligned with the left edge of the scroll container.
+         * Instead, we want the segment button to be centered. As a result,
+         * we subtract half of the scroll container width. This will position
+         * the left edge of the active button at the midpoint of the scroll container.
+         * We then add half of the active button width. This will position the active
+         * button such that the midpoint of the active button is at the midpoint of the
+         * scroll container.
+         */
+        const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2;
         /**
-         * Scrollable segment buttons should be
-         * centered within the view including
-         * buttons that are partially offscreen.
+         * We intentionally use scrollBy here instead of scrollIntoView
+         * to avoid a WebKit bug where accelerated animations break
+         * when using scrollIntoView. Using scrollIntoView will cause the
+         * segment container to jump during the transition and then snap into place.
+         * This is because scrollIntoView can potentially cause parent element
+         * containers to also scroll. scrollBy does not have this same behavior, so
+         * we use this API instead.
+         *
+         * Note that if there is not enough scrolling space to center the element
+         * within the scroll container, the browser will attempt
+         * to center by as much as it can.
          */
-        activeButton.scrollIntoView({
-          behavior: 'smooth',
-          inline: 'center',
-          /**
-           * Segment should scroll on the
-           * horizontal axis. `block: 'nearest'`
-           * ensures that the vertical axis
-           * does not scroll if the segment
-           * as a whole is already in view.
-           */
-          block: 'nearest',
+        el.scrollBy({
+          top: 0,
+          left: centeredX,
+          behavior: smoothScroll ? 'smooth' : 'instant',
         });
       }
     }

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

@@ -81,6 +81,17 @@
 
 :host(:not(.legacy-select)) {
   width: 100%;
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the select text.
+ */
+:host(.select-label-placement-floating),
+:host(.select-label-placement-stacked) {
+  min-height: 56px;
 }
 
 :host(.ion-color) {
@@ -161,7 +172,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-select) label:dir(rtl) {
+    :host(.legacy-select:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -621,20 +632,6 @@ button {
   --padding-start: 16px;
 }
 
-:host(:not(.legacy-select)) {
-  min-height: 44px;
-}
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the select text.
- */
-:host(.select-label-placement-floating),
-:host(.select-label-placement-stacked) {
-  min-height: 56px;
-}
-
 .select-icon {
   width: 1.125rem;
   height: 1.125rem;

package/dist/collection/components/select/select.md.css

@@ -81,6 +81,17 @@
 
 :host(:not(.legacy-select)) {
   width: 100%;
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the select text.
+ */
+:host(.select-label-placement-floating),
+:host(.select-label-placement-stacked) {
+  min-height: 56px;
 }
 
 :host(.ion-color) {
@@ -161,7 +172,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-select) label:dir(rtl) {
+    :host(.legacy-select:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -653,6 +664,7 @@ button {
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 /**
@@ -716,7 +728,7 @@ button {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.select-fill-solid) .select-wrapper:dir(rtl) {
+  :host(.select-fill-solid:dir(rtl)) .select-wrapper {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0px;
@@ -773,6 +785,7 @@ button {
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 :host(.select-fill-outline.select-shape-round) {
@@ -1027,10 +1040,6 @@ button {
   --padding-start: 16px;
 }
 
-:host(:not(.legacy-select)) {
-  min-height: 56px;
-}
-
 .select-icon {
   width: 0.8125rem;
   transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1121,7 +1130,7 @@ button {
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.in-item) .select-highlight:dir(rtl) {
+    :host(.in-item:dir(rtl)) .select-highlight {
       left: unset;
       right: unset;
       right: 0;

package/dist/collection/components/split-pane/test/multiple/split-pane.e2e.js

@@ -0,0 +1,31 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test, Viewports } from "../../../../utils/test/playwright/index";
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('split-pane: multiple'), () => {
+    test('using multiple split panes should not hide a menu in another split pane', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/18683',
+      });
+      await page.setViewportSize(Viewports.large);
+      await page.goto(`/src/components/split-pane/test/multiple`, config);
+      const paneOneMenuOne = page.locator('ion-menu#pane-one-menu-one');
+      const paneOneMenuTwo = page.locator('ion-menu#pane-one-menu-two');
+      const paneTwoMenuOne = page.locator('ion-menu#pane-two-menu-one');
+      const paneTwoMenuTwo = page.locator('ion-menu#pane-two-menu-two');
+      const showPaneOne = page.locator('button#show-pane-one');
+      const showPaneTwo = page.locator('button#show-pane-two');
+      await expect(paneOneMenuOne).toBeVisible();
+      await expect(paneOneMenuTwo).toBeVisible();
+      await showPaneTwo.click();
+      await expect(paneTwoMenuOne).toBeVisible();
+      await expect(paneTwoMenuTwo).toBeVisible();
+      await showPaneOne.click();
+      await expect(paneOneMenuOne).toBeVisible();
+      await expect(paneOneMenuTwo).toBeVisible();
+    });
+  });
+});

package/dist/collection/components/tab-bar/tab-bar.ios.css

@@ -37,15 +37,15 @@
    * @prop --border: Border of the tab bar
    * @prop --color: Color of the tab bar
    */
-  -webkit-padding-start: var(--ion-safe-area-left);
-  padding-inline-start: var(--ion-safe-area-left);
-  -webkit-padding-end: var(--ion-safe-area-right);
-  padding-inline-end: var(--ion-safe-area-right);
   display: flex;
   align-items: center;
   justify-content: center;
   width: auto;
+  /* stylelint-disable */
+  padding-right: var(--ion-safe-area-right);
   padding-bottom: var(--ion-safe-area-bottom, 0);
+  padding-left: var(--ion-safe-area-left);
+  /* stylelint-enable */
   border-top: var(--border);
   background: var(--background);
   color: var(--color);

package/dist/collection/components/tab-bar/tab-bar.md.css

@@ -37,15 +37,15 @@
    * @prop --border: Border of the tab bar
    * @prop --color: Color of the tab bar
    */
-  -webkit-padding-start: var(--ion-safe-area-left);
-  padding-inline-start: var(--ion-safe-area-left);
-  -webkit-padding-end: var(--ion-safe-area-right);
-  padding-inline-end: var(--ion-safe-area-right);
   display: flex;
   align-items: center;
   justify-content: center;
   width: auto;
+  /* stylelint-disable */
+  padding-right: var(--ion-safe-area-right);
   padding-bottom: var(--ion-safe-area-bottom, 0);
+  padding-left: var(--ion-safe-area-left);
+  /* stylelint-enable */
   border-top: var(--border);
   background: var(--background);
   color: var(--color);

package/dist/collection/components/tab-bar/test/basic/tab-bar.e2e.js

@@ -0,0 +1,43 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior needs to be tested in both modes and directions to
+ * make sure the safe area padding is applied only to that side
+ * regardless of direction
+ */
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-bar: basic'), () => {
+    test.describe('safe area', () => {
+      test('should have padding added by the safe area', async ({ page }) => {
+        await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-tab-bar selected-tab="1">
+            <ion-tab-button tab="1">
+              <ion-label>Recents</ion-label>
+            </ion-tab-button>
+
+            <ion-tab-button tab="2">
+              <ion-label>Favorites</ion-label>
+              <ion-badge>23</ion-badge>
+            </ion-tab-button>
+
+            <ion-tab-button tab="3">
+              <ion-label>Settings</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `, config);
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-safe-area`));
+      });
+    });
+  });
+});

package/dist/collection/components/tab-button/tab-button.ios.css

@@ -345,7 +345,7 @@ ion-ripple-effect {
     right: calc(50% + 12px);
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-bottom) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: calc(50% + 12px);
@@ -383,7 +383,7 @@ ion-ripple-effect {
     right: calc(50% + 35px);
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-start) ::slotted(ion-badge):dir(rtl), :host(.tab-layout-icon-end) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge), :host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: calc(50% + 35px);
@@ -412,7 +412,7 @@ ion-ripple-effect {
     right: calc(50% + 30px);
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-hide) ::slotted(ion-badge):dir(rtl), :host(.tab-has-label-only) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge), :host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: calc(50% + 30px);

package/dist/collection/components/tab-button/tab-button.md.css

@@ -352,7 +352,7 @@ ion-ripple-effect {
     right: 70%;
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-bottom) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: 70%;
@@ -391,7 +391,7 @@ ion-ripple-effect {
     right: 80%;
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-start) ::slotted(ion-badge):dir(rtl), :host(.tab-layout-icon-end) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge), :host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: 80%;
@@ -430,7 +430,7 @@ ion-ripple-effect {
     right: 70%;
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-hide) ::slotted(ion-badge):dir(rtl), :host(.tab-has-label-only) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge), :host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: 70%;