@ionic/core 7.5.1 → 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/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;

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-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);