@ionic/core 7.5.2-dev.11697638908.1f04980a → 7.5.2-dev.11697810676.1a4f965d

package/dist/collection/components/item-option/item-option.ios.css

@@ -43,16 +43,6 @@
   font-family: var(--ion-font-family, inherit);
 }
 
-:host(.in-list.item-options-end:last-child) {
-  -webkit-padding-end: calc(0.7em + var(--ion-safe-area-right));
-  padding-inline-end: calc(0.7em + var(--ion-safe-area-right));
-}
-
-:host(.in-list.item-options-start:first-child) {
-  -webkit-padding-start: calc(0.7em + var(--ion-safe-area-left));
-  padding-inline-start: calc(0.7em + var(--ion-safe-area-left));
-}
-
 :host(.ion-color) {
   background: var(--ion-color-base);
   color: var(--ion-color-contrast);

package/dist/collection/components/item-option/item-option.md.css

@@ -43,16 +43,6 @@
   font-family: var(--ion-font-family, inherit);
 }
 
-:host(.in-list.item-options-end:last-child) {
-  -webkit-padding-end: calc(0.7em + var(--ion-safe-area-right));
-  padding-inline-end: calc(0.7em + var(--ion-safe-area-right));
-}
-
-:host(.in-list.item-options-start:first-child) {
-  -webkit-padding-start: calc(0.7em + var(--ion-safe-area-left));
-  padding-inline-start: calc(0.7em + var(--ion-safe-area-left));
-}
-
 :host(.ion-color) {
   background: var(--ion-color-base);
   color: var(--ion-color-contrast);

package/dist/collection/components/item-sliding/test/basic/item-sliding.e2e.js

@@ -83,3 +83,80 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
     });
   });
 });
+/**
+ * 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('item-sliding: basic'), () => {
+    test.describe('safe area left', () => {
+      test('should have padding on the left only', async ({ page }) => {
+        await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+            }
+          </style>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="primary">
+                Archive
+              </ion-item-option>
+              <ion-item-option color="danger">
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>
+                Sliding Item
+              </ion-label>
+            </ion-item>
+          </ion-item-sliding>
+        `, config);
+        const direction = config.direction;
+        const item = page.locator('ion-item-sliding');
+        const dragByX = direction == 'rtl' ? -150 : 150;
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-left`));
+      });
+    });
+    test.describe('safe area right', () => {
+      test('should have padding on the right only', async ({ page }) => {
+        await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-right: 40px;
+            }
+          </style>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>
+                Sliding Item
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options side="end">
+              <ion-item-option color="primary">
+                Archive
+              </ion-item-option>
+              <ion-item-option color="danger">
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        `, config);
+        const direction = config.direction;
+        const item = page.locator('ion-item-sliding');
+        const dragByX = direction == 'rtl' ? 150 : -150;
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-right`));
+      });
+    });
+  });
+});

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

@@ -186,7 +186,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.label-floating):dir(rtl) {
+  :host(.label-floating:dir(rtl)) {
     transform-origin: right top;
   }
 }

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

@@ -114,7 +114,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-start) .menu-inner:dir(rtl) {
+    :host(.menu-side-start:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: auto;
@@ -142,7 +142,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-start) .menu-inner:dir(rtl) {
+  :host(.menu-side-start:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it
@@ -197,7 +197,7 @@
     right: auto;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-end) .menu-inner:dir(rtl) {
+    :host(.menu-side-end:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: 0;
@@ -225,7 +225,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-end) .menu-inner:dir(rtl) {
+  :host(.menu-side-end:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it

package/dist/collection/components/menu/menu.js

@@ -173,6 +173,18 @@ export class Menu {
     this.contentEl = undefined;
   }
   onSplitPaneChanged(ev) {
+    const { target } = ev;
+    const closestSplitPane = this.el.closest('ion-split-pane');
+    /**
+     * Menu listens on the body for "ionSplitPaneVisible".
+     * However, this means the callback will run any time
+     * a SplitPane changes visibility. As a result, we only want
+     * Menu's visibility state to update if its parent SplitPane
+     * changes visibility.
+     */
+    if (target !== closestSplitPane) {
+      return;
+    }
     this.isPaneVisible = ev.detail.isPane(this.el);
     this.updateState();
   }

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

@@ -114,7 +114,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-start) .menu-inner:dir(rtl) {
+    :host(.menu-side-start:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: auto;
@@ -142,7 +142,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-start) .menu-inner:dir(rtl) {
+  :host(.menu-side-start:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it
@@ -197,7 +197,7 @@
     right: auto;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-end) .menu-inner:dir(rtl) {
+    :host(.menu-side-end:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: 0;
@@ -225,7 +225,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-end) .menu-inner:dir(rtl) {
+  :host(.menu-side-end:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it

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

@@ -254,7 +254,7 @@ ion-backdrop {
     border-bottom-left-radius: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.modal-card) .modal-wrapper:dir(rtl) {
+    :host(.modal-card:dir(rtl)) .modal-wrapper {
       border-top-left-radius: var(--border-radius);
       border-top-right-radius: var(--border-radius);
       border-bottom-right-radius: 0;
@@ -304,7 +304,7 @@ ion-backdrop {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.modal-sheet) .modal-wrapper:dir(rtl) {
+  :host(.modal-sheet:dir(rtl)) .modal-wrapper {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0;

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

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

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

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

package/dist/collection/components/picker-internal/picker-internal.ios.css

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-before:dir(rtl) {
+    :host(:dir(rtl)) .picker-before {
       left: unset;
       right: unset;
       right: 0;
@@ -113,7 +113,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-after:dir(rtl) {
+    :host(:dir(rtl)) .picker-after {
       left: unset;
       right: unset;
       right: 0;

package/dist/collection/components/picker-internal/picker-internal.md.css

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-before:dir(rtl) {
+    :host(:dir(rtl)) .picker-before {
       left: unset;
       right: unset;
       right: 0;
@@ -113,7 +113,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-after:dir(rtl) {
+    :host(:dir(rtl)) .picker-after {
       left: unset;
       right: unset;
       right: 0;

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

@@ -138,7 +138,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-start):dir(rtl) {
+  :host(.popover-nested.popover-side-start:dir(rtl)) {
     --offset-x: -5px;
   }
 }
@@ -151,7 +151,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-end):dir(rtl) {
+  :host(.popover-nested.popover-side-end:dir(rtl)) {
     --offset-x: 5px;
   }
 }
@@ -284,7 +284,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-side-start) .popover-arrow:dir(rtl) {
+  :host(.popover-side-start:dir(rtl)) .popover-arrow {
     transform: rotate(-90deg);
   }
 }
@@ -297,7 +297,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-side-end) .popover-arrow:dir(rtl) {
+  :host(.popover-side-end:dir(rtl)) .popover-arrow {
     transform: rotate(90deg);
   }
 }

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

@@ -138,7 +138,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-start):dir(rtl) {
+  :host(.popover-nested.popover-side-start:dir(rtl)) {
     --offset-x: -5px;
   }
 }
@@ -151,7 +151,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-end):dir(rtl) {
+  :host(.popover-nested.popover-side-end:dir(rtl)) {
     --offset-x: 5px;
   }
 }

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

@@ -103,7 +103,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-radio) label:dir(rtl) {
+    :host(.legacy-radio:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -317,7 +317,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -330,7 +330,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }
@@ -463,7 +463,7 @@ input {
     right: -9px;
   }
   @supports selector(:dir(rtl)) {
-    :host(.ion-focused) .radio-icon::after:dir(rtl) {
+    :host(.ion-focused:dir(rtl)) .radio-icon::after {
       left: unset;
       right: unset;
       right: -9px;

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

@@ -103,7 +103,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-radio) label:dir(rtl) {
+    :host(.legacy-radio:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -317,7 +317,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -330,7 +330,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }
@@ -477,7 +477,7 @@ input {
     right: -12px;
   }
   @supports selector(:dir(rtl)) {
-    :host(.ion-focused.legacy-radio) .radio-icon::after:dir(rtl) {
+    :host(.ion-focused.legacy-radio:dir(rtl)) .radio-icon::after {
       left: unset;
       right: unset;
       right: -12px;

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/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/segment/segment.js

@@ -106,13 +106,7 @@ export class Segment {
      * before we can scroll.
      */
     raf(() => {
-      /**
-       * 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.scrollActiveButtonIntoView();
     });
     this.gesture = (await import('../../utils/gesture')).createGesture({
       el: this.el,
@@ -242,48 +236,28 @@ export class Segment {
       buttons[next].classList.add('segment-button-after-checked');
     }
   }
-  scrollActiveButtonIntoView(smoothScroll = true) {
-    const { scrollable, value, el } = this;
+  scrollActiveButtonIntoView() {
+    const { scrollable, value } = 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);
         /**
-         * 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.
+         * Scrollable segment buttons should be
+         * centered within the view including
+         * buttons that are partially offscreen.
          */
-        this.el.scrollBy({
-          top: 0,
-          left: centeredX,
-          behavior: smoothScroll ? 'smooth' : 'instant'
+        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',
         });
       }
     }

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

@@ -161,7 +161,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;

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

@@ -161,7 +161,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 +653,7 @@ button {
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 /**
@@ -716,7 +717,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 +774,7 @@ button {
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 :host(.select-fill-outline.select-shape-round) {
@@ -1027,10 +1029,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 +1119,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;