@ionic/core 7.6.2-dev.11704998705.1e1f9850 → 7.6.2-dev.11705694334.11b34c62

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

@@ -71,10 +71,9 @@
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
    * @prop --checkmark-width: Stroke width of the checkbox checkmark
    */
-  --checkbox-background-checked: var(--ion-color-primary, #0054e9);
-  --border-color-checked: var(--ion-color-primary, #0054e9);
+  --checkbox-background-checked: var(--ion-color-primary, #3880ff);
+  --border-color-checked: var(--ion-color-primary, #3880ff);
   --checkmark-color: var(--ion-color-primary-contrast, #fff);
-  --checkmark-width: 1;
   --transition: none;
   display: inline-block;
   position: relative;

package/dist/collection/components/checkbox/test/a11y/checkbox.e2e.js

@@ -4,19 +4,10 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('checkbox: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-checkbox>Label</ion-checkbox>
-          <ion-checkbox aria-label="my aria label"></ion-checkbox>
-          <ion-checkbox checked="true">Checked</ion-checkbox>
-          <ion-item>
-            <ion-checkbox>Checkbox in item</ion-checkbox>
-          </ion-item>
-        </main>
-      `, config);
+            await page.goto(`/src/components/checkbox/test/a11y`, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });

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

@@ -5,6 +5,16 @@ import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
     test.describe(title('checkbox: basic visual tests'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.setContent(`
+        <div id="checkboxes">
+          <ion-checkbox>Unchecked</ion-checkbox>
+          <ion-checkbox checked>Checked</ion-checkbox>
+        </div>
+      `, config);
+            const checkboxes = page.locator('#checkboxes');
+            await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-basic`));
+        });
         test('should render custom checkmark-width correctly', async ({ page }) => {
             await page.setContent(`
         <ion-checkbox checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox>

package/dist/collection/components/content/content.js

@@ -334,8 +334,9 @@ export class Content {
         const mode = getIonMode(this);
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
+        const TagType = isMainContent ? 'main' : 'div';
         this.resize();
-        return (h(Host, { role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, { class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -343,7 +344,7 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h("div", { class: {
+            } }, h("div", { ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,

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

@@ -613,8 +613,8 @@ ion-picker {
  * }
  */
 :host {
-  --background: var(--ion-color-light, #f6f8fc);
-  --background-rgb: var(--ion-color-light-rgb, 246, 248, 252);
+  --background: var(--ion-color-light, #ffffff);
+  --background-rgb: var(--ion-color-light-rgb);
   --title-color: var(--ion-color-step-600, #666666);
 }
 
@@ -837,6 +837,7 @@ ion-picker {
 
 .calendar-day.calendar-day-active {
   background: rgba(var(--ion-color-base-rgb), 0.2);
+  font-size: min(1.375rem, 35.2px);
 }
 
 /**

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

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+:host button {
+  border-radius: 8px;
+  -webkit-margin-start: 2px;
+  margin-inline-start: 2px;
+  -webkit-margin-end: 2px;
+  margin-inline-end: 2px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  position: relative;
+  transition: 150ms color ease-in-out;
+  border: none;
+  background: var(--ion-color-step-300, #edeef0);
+  color: var(--ion-text-color, #000);
+  font-family: inherit;
+  font-size: 1rem;
+  cursor: pointer;
+  overflow: hidden;
+  appearance: none;
+}
+
+:host(.time-active) #time-button,
+:host(.date-active) #date-button {
+  color: var(--ion-color-base);
+}
+
+:host(.datetime-button-disabled) {
+  pointer-events: none;
+}
+
+:host(.datetime-button-disabled) button {
+  opacity: 0.4;
+}
+
+:host button {
+  -webkit-padding-start: 13px;
+  padding-inline-start: 13px;
+  -webkit-padding-end: 13px;
+  padding-inline-end: 13px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
+:host button.ion-activated {
+  color: var(--ion-color-step-600, #666666);
+}

package/dist/collection/components/datetime-button/datetime-button.js

@@ -346,14 +346,14 @@ export class DatetimeButton {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["datetime-button.scss"],
-            "md": ["datetime-button.scss"]
+            "ios": ["datetime-button.ios.scss"],
+            "md": ["datetime-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["datetime-button.css"],
-            "md": ["datetime-button.css"]
+            "ios": ["datetime-button.ios.css"],
+            "md": ["datetime-button.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/datetime-button/{datetime-button.css → datetime-button.md.css}

@@ -62,12 +62,6 @@
 
 :host button {
   border-radius: 8px;
-  -webkit-padding-start: 12px;
-  padding-inline-start: 12px;
-  -webkit-padding-end: 12px;
-  padding-inline-end: 12px;
-  padding-top: 6px;
-  padding-bottom: 6px;
   -webkit-margin-start: 2px;
   margin-inline-start: 2px;
   -webkit-margin-end: 2px;
@@ -97,4 +91,13 @@
 
 :host(.datetime-button-disabled) button {
   opacity: 0.4;
+}
+
+:host button {
+  -webkit-padding-start: 12px;
+  padding-inline-start: 12px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }

package/dist/collection/components/datetime-button/test/basic/datetime-button.e2e.js

@@ -3,6 +3,18 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
+configs().forEach(({ config, screenshot, title }) => {
+    test.describe(title('datetime-button: basic'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
+      `, config);
+            const datetimeButton = page.locator('ion-datetime-button');
+            await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-basic`));
+        });
+    });
+});
 /**
  * The tested behavior does not
  * vary across modes/directions

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

@@ -334,10 +334,10 @@ ion-ripple-effect {
  * }
  */
 :host {
-  --background: var(--ion-color-primary, #0054e9);
-  --background-activated: var(--ion-color-primary-shade, #004acd);
-  --background-focused: var(--ion-color-primary-shade, #004acd);
-  --background-hover: var(--ion-color-primary-tint, #1a65eb);
+  --background: var(--ion-color-primary, #3880ff);
+  --background-activated: var(--ion-color-primary-shade, #3171e0);
+  --background-focused: var(--ion-color-primary-shade, #3171e0);
+  --background-hover: var(--ion-color-primary-tint, #4c8dff);
   --background-activated-opacity: 1;
   --background-focused-opacity: 1;
   --background-hover-opacity: 1;
@@ -358,10 +358,10 @@ ion-ripple-effect {
 }
 
 :host(.fab-button-in-list) {
-  --background: var(--ion-color-light, #f6f8fc);
-  --background-activated: var(--ion-color-light-shade, #d8dade);
+  --background: var(--ion-color-light, #f4f5f8);
+  --background-activated: var(--ion-color-light-shade, #d7d8da);
   --background-focused: var(--background-activated);
-  --background-hover: var(--ion-color-light-tint, #f7f9fc);
+  --background-hover: var(--ion-color-light-tint, #f5f6f9);
   --color: var(--ion-color-light-contrast, #000);
   --color-activated: var(--ion-color-light-contrast, #000);
   --color-focused: var(--color-activated);
@@ -395,15 +395,15 @@ ion-ripple-effect {
 }
 @supports (backdrop-filter: blur(0)) {
   :host(.fab-button-translucent) {
-    --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.9);
-    --background-hover: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.8);
-    --background-focused: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.82);
+    --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.9);
+    --background-hover: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.8);
+    --background-focused: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.82);
     --backdrop-filter: saturate(180%) blur(20px);
   }
   :host(.fab-button-translucent-in-list) {
-    --background: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.9);
-    --background-hover: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.8);
-    --background-focused: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.82);
+    --background: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.9);
+    --background-hover: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.8);
+    --background-focused: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.82);
   }
 }
 @supports (backdrop-filter: blur(0)) {

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

@@ -334,7 +334,7 @@ ion-ripple-effect {
  * }
  */
 :host {
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --background-activated: transparent;
   --background-focused: currentColor;
   --background-hover: currentColor;
@@ -359,10 +359,10 @@ ion-ripple-effect {
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
   --color-activated: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
   --color-focused: var(--color-activated);
-  --background: var(--ion-color-light, #f6f8fc);
+  --background: var(--ion-color-light, #f4f5f8);
   --background-activated: transparent;
-  --background-focused: var(--ion-color-light-shade, #d8dade);
-  --background-hover: var(--ion-color-light-tint, #f7f9fc);
+  --background-focused: var(--ion-color-light-shade, #d7d8da);
+  --background-hover: var(--ion-color-light-tint, #f5f6f9);
 }
 
 :host(.fab-button-in-list) ::slotted(ion-icon) {

package/dist/collection/components/fab-button/test/a11y/fab-button.e2e.js

@@ -1,58 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('fab-button: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-fab-button>FAB</ion-fab-button>
-        <ion-fab-button class="ion-activated">FAB</ion-fab-button>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-    test.describe(title('fab-list: contrast'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-fab activated="true">
-          <ion-fab-button>
-            Open
-          </ion-fab-button>
-          <ion-fab-list side="bottom">
-            <ion-fab-button>Down</ion-fab-button>
-            <ion-fab-button class="ion-activated">Down</ion-fab-button>
-            <ion-fab-button class="ion-focused">Down</ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-    test.describe(title('fab: translucent contrast'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-fab-button translucent="true">FAB</ion-fab-button>
-        <ion-fab-button class="ion-focused" translucent="true">FAB</ion-fab-button>
-        <ion-fab activated="true">
-          <ion-fab-button>
-            Open
-          </ion-fab-button>
-          <ion-fab-list side="bottom">
-            <ion-fab-button translucent="true">Down</ion-fab-button>
-            <ion-fab-button class="ion-focused" translucent="true">Down</ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('fab-button: aria attributes'), () => {
         test('should inherit aria attributes to inner button', async ({ page }) => {

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

@@ -89,9 +89,9 @@
   --background: transparent;
   --color: initial;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state

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

@@ -89,9 +89,9 @@
   --background: transparent;
   --color: initial;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state

package/dist/collection/components/input/test/a11y/input.e2e.js

@@ -4,52 +4,14 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('input: a11y'), () => {
-        test('default layout should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-input label="Label" placeholder="Placeholder"></ion-input>
-          <ion-input placeholder="Placeholder">
-            <div slot="label">Label"></div>
-          </ion-input>
-          <ion-input label="Label" value="My Text"></ion-input>
-          <ion-input aria-label="Label"></ion-input>
-          <ion-input label="Email" fill="solid" value="hi@ionic.io">
-            <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
-            <ion-button slot="end" aria-label="button">
-              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
-            </ion-button>
-          </ion-input>
-        </main>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-        test('focused state should not have accessibility violations', async ({ page }) => {
-            /**
-             * The primary color against the focus background
-             * when using fill="solid" does not meet AA
-             * contrast guidelines so it excluded from the test.
-             * The contrast here is a significant improvement
-             * over what Ionic has had in the past, so the team
-             * has decided that this tradeoff is acceptable since
-             * the scope of the problem is limited to the focus
-             * state with the primary color when fill="solid".
-             */
-            await page.setContent(`
-        <main>
-          <ion-input class="has-focus" label="Label" value="My Text"></ion-input>
-          <ion-input class="has-focus" label-placement="floating" label="Label" value="My Text"></ion-input>
-          <ion-input class="has-focus" fill="outline" label-placement="floating" label="Label" value="My Text"></ion-input>
-        </main>
-      `, config);
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.goto(`/src/components/input/test/a11y`, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
     });
-});
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('input: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {
             await page.setContent(`

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

@@ -700,9 +700,9 @@ ion-ripple-effect {
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
   --color: var(--ion-item-color, var(--ion-text-color, #000));
   --highlight-height: 0px;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   --bottom-padding-start: 0px;
   font-size: 1rem;
 }

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

@@ -800,9 +800,9 @@ ion-ripple-effect {
   --inner-padding-end: 16px;
   --inner-border-width: 0 0 1px 0;
   --highlight-height: 1px;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   font-size: 1rem;
   font-weight: normal;
   text-transform: none;
@@ -1100,7 +1100,7 @@ ion-ripple-effect {
 :host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.ion-color) {

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

@@ -58,7 +58,7 @@
    * @prop --background: Background of the item option
    * @prop --color: Color of the item option
    */
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
   background: var(--background);
   color: var(--color);
@@ -234,7 +234,7 @@
 }
 
 :host(.ion-activated) {
-  background: var(--ion-color-primary-shade, #004acd);
+  background: var(--ion-color-primary-shade, #3171e0);
 }
 
 :host(.ion-color.ion-activated) {

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

@@ -58,7 +58,7 @@
    * @prop --background: Background of the item option
    * @prop --color: Color of the item option
    */
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
   background: var(--background);
   color: var(--color);

package/dist/collection/components/item-sliding/animations/item-sliding-options.js

@@ -0,0 +1,59 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { createAnimation } from "../../../utils/animation/animation";
+/**
+ * Animates the opening and closing of a sliding item option.
+ * @param el The element to animate.
+ * @param viewportOffset The offset of the element on the x-axis to locate it off-screen.
+ * @param progress The progress of the animation (0 - 1).
+ * @param isFinal Whether the animation is in its final state (collapsed or expanded).
+ * @param isReset Whether to reset the element to its initial state.
+ * @param zIndex _Optional_ The z-index to apply to the element.
+ */
+export const slidingItemAnimation = (el, viewportOffset, progress, isFinal, isReset, zIndex) => {
+    const styles = zIndex !== undefined ? { zIndex: `${zIndex}` } : {};
+    const swipeAnimation = createAnimation()
+        .addElement(el)
+        /**
+         * The specific value here does not actually
+         * matter. We just need this to be a positive
+         * value so the animation does not jump
+         * to the end when the user begins to drag.
+         */
+        .duration(1)
+        .commitStyles()
+        .keyframes([
+        Object.assign({ offset: 0, transform: `translate3d(${viewportOffset}px,0,0)` }, styles),
+        Object.assign({ offset: 1, transform: `translate3d(0,0,0)` }, styles),
+    ]);
+    if (isReset) {
+        swipeAnimation.destroy();
+        const leaveAnimation = createAnimation()
+            .addElement(el)
+            .duration(300)
+            .easing('ease-out')
+            .beforeStyles({
+            zIndex: zIndex,
+        })
+            .fromTo('transform', el.style.transform, `translate3d(${viewportOffset}px,0,0)`)
+            .afterClearStyles(['z-index', 'transform']);
+        leaveAnimation.play().then(() => leaveAnimation.destroy());
+    }
+    if (!isFinal) {
+        swipeAnimation.progressStart(true, progress);
+    }
+    else {
+        swipeAnimation.destroy();
+        const expandAnimation = createAnimation()
+            .addElement(el)
+            .duration(300)
+            .easing('ease-out')
+            .beforeStyles({
+            zIndex: zIndex,
+        })
+            .fromTo('transform', el.style.transform, `translate3d(0,0,0)`)
+            .afterClearStyles(['z-index', 'transform']);
+        expandAnimation.play();
+    }
+};

package/dist/collection/components/item-sliding/item-sliding.css

@@ -79,11 +79,7 @@ ion-item-sliding .item {
 }
 
 .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
-  /* stylelint-disable-next-line property-disallowed-list */
-  padding-left: 100%;
   order: 1;
-  transition-duration: 0.6s;
-  transition-property: padding-left;
 }
 :host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
   order: -1;
@@ -99,6 +95,14 @@ ion-item-sliding .item {
   }
 }
 
+.item-sliding-animation-legacy.item-sliding-active-swipe-end .item-options-end .item-option-expandable,
+.item-sliding-animation-modern.item-sliding-active-swipe-end .item-options-end .item-option-expandable {
+  /* stylelint-disable-next-line property-disallowed-list */
+  padding-left: 100%;
+  transition-duration: 0.6s;
+  transition-property: padding-left;
+}
+
 .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
   /* stylelint-disable-next-line property-disallowed-list */
   padding-right: 100%;