voyager-ionic-core 7.5.0 → 7.5.5

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

@@ -188,10 +188,6 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
-  -webkit-padding-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  padding-inline-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
   font-family: inherit;
@@ -206,6 +202,10 @@
   text-align: inherit;
   white-space: inherit;
   color: inherit;
+  /* stylelint-disable */
+  padding-right: var(--padding-end);
+  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  /* stylelint-enable */
   display: flex;
   position: relative;
   align-items: inherit;
@@ -222,6 +222,22 @@
   box-sizing: border-box;
   z-index: 1;
 }
+:host-context([dir=rtl]) .item-native {
+  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+  padding-left: var(--padding-end);
+}
+
+[dir=rtl] .item-native {
+  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+  padding-left: var(--padding-end);
+}
+
+@supports selector(:dir(rtl)) {
+  .item-native:dir(rtl) {
+    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+    padding-left: var(--padding-end);
+  }
+}
 
 .item-native::-moz-focus-inner {
   border: 0;
@@ -250,12 +266,12 @@ button, a {
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
-  -webkit-padding-start: var(--inner-padding-start);
-  padding-inline-start: var(--inner-padding-start);
-  -webkit-padding-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
-  padding-inline-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
   padding-top: var(--inner-padding-top);
   padding-bottom: var(--inner-padding-bottom);
+  /* stylelint-disable */
+  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
+  padding-left: var(--inner-padding-start);
+  /* stylelint-enable */
   display: flex;
   position: relative;
   flex: 1;
@@ -270,21 +286,53 @@ button, a {
   overflow: inherit;
   box-sizing: border-box;
 }
+:host-context([dir=rtl]) .item-inner {
+  padding-right: var(--inner-padding-start);
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+}
+
+[dir=rtl] .item-inner {
+  padding-right: var(--inner-padding-start);
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+}
+
+@supports selector(:dir(rtl)) {
+  .item-inner:dir(rtl) {
+    padding-right: var(--inner-padding-start);
+    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+  }
+}
 
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
-  -webkit-padding-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  padding-inline-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  -webkit-padding-end: var(--inner-padding-end);
-  padding-inline-end: var(--inner-padding-end);
   padding-top: 0;
   padding-bottom: 0;
+  /* stylelint-disable */
+  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  padding-right: calc(var(--inner-padding-end) + var(--ion-safe-area-right, 0px));
+  /* stylelint-enable */
   display: flex;
   justify-content: space-between;
 }
+:host-context([dir=rtl]) .item-bottom {
+  padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
+  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+}
+
+[dir=rtl] .item-bottom {
+  padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
+  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+}
+
+@supports selector(:dir(rtl)) {
+  .item-bottom:dir(rtl) {
+    padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
+    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+  }
+}
 
 .item-detail-icon {
   /**
@@ -743,7 +791,7 @@ ion-ripple-effect {
     right: var(--position-offset);
   }
   @supports selector(:dir(rtl)) {
-    :host(.item-fill-outline) .item-highlight:dir(rtl) {
+    :host(.item-fill-outline:dir(rtl)) .item-highlight {
       left: unset;
       right: unset;
       right: var(--position-offset);
@@ -955,7 +1003,7 @@ ion-ripple-effect {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.item-fill-solid):dir(rtl) {
+  :host(.item-fill-solid:dir(rtl)) {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 0;
@@ -986,7 +1034,7 @@ ion-ripple-effect {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.item-fill-solid.item-shape-round):dir(rtl) {
+  :host(.item-fill-solid.item-shape-round:dir(rtl)) {
     border-top-left-radius: 16px;
     border-top-right-radius: 16px;
     border-bottom-right-radius: 0;

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

@@ -10,5 +10,31 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.setIonViewport();
       await expect(page).toHaveScreenshot(screenshot(`item-diff`));
     });
+    /**
+     * This behavior needs to be tested for all modes & directions
+     * Safe padding should stay on the same side when the direction changes
+     */
+    test('should have safe area padding', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          :root {
+            --ion-safe-area-left: 40px;
+            --ion-safe-area-right: 20px;
+          }
+        </style>
+        <ion-list>
+          <ion-item>
+            <ion-label>Item with helper</ion-label>
+            <div slot="helper">Helper</div>
+          </ion-item>
+
+          <ion-item>
+            <ion-label> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
+          </ion-item>
+        </ion-list>
+      `, config);
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot('item-safe-area'));
+    });
   });
 });

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

@@ -61,12 +61,12 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
-  -webkit-padding-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  padding-inline-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
+  /* stylelint-disable */
+  padding-right: var(--padding-end);
+  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  /* stylelint-enable */
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -78,6 +78,17 @@
   z-index: 100;
   box-sizing: border-box;
 }
+:host-context([dir=rtl]) {
+  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+  padding-left: var(--padding-end);
+}
+
+@supports selector(:dir(rtl)) {
+  :host(:dir(rtl)) {
+    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+    padding-left: var(--padding-end);
+  }
+}
 
 :host(.ion-color) {
   background: var(--ion-color-base);
@@ -94,12 +105,12 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
-  -webkit-padding-start: var(--inner-padding-start);
-  padding-inline-start: var(--inner-padding-start);
-  -webkit-padding-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
-  padding-inline-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
   padding-top: var(--inner-padding-top);
   padding-bottom: var(--inner-padding-bottom);
+  /* stylelint-disable */
+  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
+  padding-left: var(--inner-padding-start);
+  /* stylelint-enable */
   display: flex;
   flex: 1;
   flex-direction: inherit;
@@ -109,6 +120,22 @@
   border: 0;
   overflow: hidden;
 }
+:host-context([dir=rtl]) .item-divider-inner {
+  padding-right: var(--inner-padding-start);
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+}
+
+[dir=rtl] .item-divider-inner {
+  padding-right: var(--inner-padding-start);
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+}
+
+@supports selector(:dir(rtl)) {
+  .item-divider-inner:dir(rtl) {
+    padding-right: var(--inner-padding-start);
+    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+  }
+}
 
 .item-divider-wrapper {
   display: flex;

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

@@ -61,12 +61,12 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
-  -webkit-padding-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  padding-inline-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
+  /* stylelint-disable */
+  padding-right: var(--padding-end);
+  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  /* stylelint-enable */
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -78,6 +78,17 @@
   z-index: 100;
   box-sizing: border-box;
 }
+:host-context([dir=rtl]) {
+  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+  padding-left: var(--padding-end);
+}
+
+@supports selector(:dir(rtl)) {
+  :host(:dir(rtl)) {
+    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+    padding-left: var(--padding-end);
+  }
+}
 
 :host(.ion-color) {
   background: var(--ion-color-base);
@@ -94,12 +105,12 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
-  -webkit-padding-start: var(--inner-padding-start);
-  padding-inline-start: var(--inner-padding-start);
-  -webkit-padding-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
-  padding-inline-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
   padding-top: var(--inner-padding-top);
   padding-bottom: var(--inner-padding-bottom);
+  /* stylelint-disable */
+  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
+  padding-left: var(--inner-padding-start);
+  /* stylelint-enable */
   display: flex;
   flex: 1;
   flex-direction: inherit;
@@ -109,6 +120,22 @@
   border: 0;
   overflow: hidden;
 }
+:host-context([dir=rtl]) .item-divider-inner {
+  padding-right: var(--inner-padding-start);
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+}
+
+[dir=rtl] .item-divider-inner {
+  padding-right: var(--inner-padding-start);
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+}
+
+@supports selector(:dir(rtl)) {
+  .item-divider-inner:dir(rtl) {
+    padding-right: var(--inner-padding-start);
+    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+  }
+}
 
 .item-divider-wrapper {
   display: flex;

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

@@ -34,5 +34,27 @@ configs().forEach(({ title, screenshot, config }) => {
       const divider = page.locator('ion-item-divider');
       await expect(divider).toHaveScreenshot(screenshot(`item-divider-icon-start`));
     });
+    /**
+     * This behavior needs to be tested for all modes & directions
+     * Safe padding should stay on the same side when the direction changes
+     */
+    test('should have safe area padding', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          :root {
+            --ion-safe-area-left: 40px;
+            --ion-safe-area-right: 20px;
+          }
+        </style>
+        <ion-list>
+          <ion-item-divider>
+            <ion-label>Item Divider</ion-label>
+            <ion-button slot="end">Button</ion-button>
+          </ion-item-divider>
+        </ion-list>
+      `, config);
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot('item-divider-safe-area'));
+    });
   });
 });

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/list/list.ios.css

@@ -130,7 +130,21 @@ ion-list.list-inset {
   border-radius: 10px;
 }
 
-.list-ios.list-inset ion-item:last-child {
+/**
+ * These selectors ensure the last item in the list
+ * has the correct border.
+ * We need to consider the following scenarios:
+ 1. The only item in a list.
+ 2. The last item in a list as long as it is not the only item.
+ 3. The item in the last item-sliding in a list.
+ * Note that we do not select ion-item:last-of-type
+ * because that will cause the borders to disappear on
+ * items in an item-sliding when the item is the last
+ * element in the item-sliding container.
+ */
+.list-ios.list-inset ion-item:only-child,
+.list-ios.list-inset ion-item:not(:only-of-type):last-of-type,
+.list-ios.list-inset ion-item-sliding:last-of-type ion-item {
   --border-width: 0;
   --inner-border-width: 0;
 }

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

@@ -166,12 +166,50 @@ ion-list.list-inset {
   border-radius: 2px;
 }
 
-.list-md.list-inset ion-item:first-child {
+/**
+ * These selectors ensure the first item in the list
+ * has the correct radius.
+ * We need to consider the following scenarios:
+ 1. The first item in a list as long as it is not the only item.
+ 2. The item in the first item-sliding in a list.
+ * Note that we do not select "ion-item-sliding ion-item:first-of-type"
+ * because that will cause the borders to disappear on
+ * items in an item-sliding when the item is the first
+ * element in the item-sliding container.
+ */
+.list-md.list-inset ion-item:not(:only-of-type):first-of-type,
+.list-md.list-inset ion-item-sliding:first-of-type ion-item {
   --border-radius: 2px 2px 0 0;
 }
 
-.list-md.list-inset ion-item:last-child {
-  --border-radius: 0 0 2px, 2px;
+/**
+ * These selectors ensure the last item in the list
+ * has the correct radius and border.
+ * We need to consider the following scenarios:
+ 1. The last item in a list as long as it is not the only item.
+ 2. The item in the last item-sliding in a list.
+ * Note that we do not select "ion-item-sliding ion-item:last-of-type"
+ * because that will cause the borders to disappear on
+ * items in an item-sliding when the item is the last
+ * element in the item-sliding container.
+ */
+.list-md.list-inset ion-item:not(:only-of-type):last-of-type,
+.list-md.list-inset ion-item-sliding:last-of-type ion-item {
+  --border-radius: 0 0 2px 2px;
+  --border-width: 0;
+  --inner-border-width: 0;
+}
+
+/**
+ * The only item in a list should have a border radius
+ * on all corners.
+ * We target :only-child instead of :only-of-type
+ * otherwise borders will disappear on items inside of
+ * ion-item-sliding because the item will be the only
+ * one of its type inside of the ion-item-sliding group.
+ */
+.list-md.list-inset ion-item:only-child {
+  --border-radius: 2px;
   --border-width: 0;
   --inner-border-width: 0;
 }