@ionic/core 7.6.2-dev.11705694334.11b34c62 → 7.6.2-dev.11706202387.1dfcd9b8

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

@@ -4,14 +4,52 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('input: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/input/test/a11y`, config);
+        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);
             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, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   --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, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   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, #3880ff);
+  color: var(--ion-color-primary, #0054e9);
 }
 
 :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, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --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, #3171e0);
+  background: var(--ion-color-primary-shade, #004acd);
 }
 
 :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, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --color: var(--ion-color-primary-contrast, #fff);
   background: var(--background);
   color: var(--color);

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

@@ -79,7 +79,11 @@ 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;
@@ -95,14 +99,6 @@ 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%;

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

@@ -2,14 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { supportsWebAnimations } from "../../utils/animation/animation";
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../utils/content/index";
 import { isEndSide } from "../../utils/helpers";
-import { printIonWarning } from "../../utils/logging/index";
-import { isRTL } from "../../utils/rtl/index";
 import { watchForOptions } from "../../utils/watch-options";
 import { getIonMode } from "../../global/ionic-global";
-import { slidingItemAnimation } from "./animations/item-sliding-options";
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
 let openSlidingItem;
@@ -26,7 +22,6 @@ export class ItemSliding {
         this.initialContentScrollY = true;
         this.state = 2 /* SlidingState.Disabled */;
         this.disabled = false;
-        this.animationType = 'legacy';
     }
     disabledChanged() {
         if (this.gesture) {
@@ -75,12 +70,6 @@ export class ItemSliding {
             this.mutationObserver = undefined;
         }
     }
-    componentWillLoad() {
-        if (!supportsWebAnimations && this.animationType === 'modern') {
-            printIonWarning('Animation type "modern" needs Web Animations API support. Falling back to "legacy".');
-            this.animationType = 'legacy';
-        }
-    }
     /**
      * Get the amount the item is open in pixels.
      */
@@ -185,20 +174,6 @@ export class ItemSliding {
             return this.rightOptions;
         }
     }
-    /**
-     * Given a side, return the width of the options on that side.
-     *
-     * @param side The side of the options to get the width for.
-     */
-    getOptionsWidth(side) {
-        if (side === 'start') {
-            return this.optsWidthLeftSide;
-        }
-        else if (side === 'end') {
-            return this.optsWidthRightSide;
-        }
-        return 0;
-    }
     async updateOptions() {
         const options = this.el.querySelectorAll('ion-item-options');
         let sides = 0;
@@ -346,8 +321,7 @@ export class ItemSliding {
         if (!this.item) {
             return;
         }
-        const { el, animationType } = this;
-        const rtl = isRTL(el);
+        const { el } = this;
         const style = this.item.style;
         this.openAmount = openAmount;
         if (isFinal) {
@@ -391,51 +365,14 @@ export class ItemSliding {
             }, 600);
             openSlidingItem = undefined;
             style.transform = '';
-            if (animationType === 'modern') {
-                this.animateSlidingItemOptions(0, rtl);
-            }
             return;
         }
         style.transform = `translate3d(${-openAmount}px,0,0)`;
-        if (animationType === 'modern') {
-            this.animateSlidingItemOptions(openAmount, rtl);
-        }
         this.ionDrag.emit({
             amount: openAmount,
             ratio: this.getSlidingRatioSync(),
         });
     }
-    animateSlidingItemOptions(openAmount, isRTL) {
-        var _a;
-        /**
-         * The total width of the 'processed' options.
-         * Used to calculate the offset to move each option off the
-         * screen, on top of each other.
-         */
-        let optionWidthOffset = 0;
-        const side = this.state === 16 /* SlidingState.Start */ ? 'start' : 'end';
-        const options = Array.from(((_a = this.getOptions(side)) === null || _a === void 0 ? void 0 : _a.querySelectorAll('ion-item-option')) || []);
-        const optsWidth = this.getOptionsWidth(side);
-        const progress = Math.abs(openAmount / optsWidth);
-        options.forEach((option, index) => {
-            let isFinal = false;
-            let zIndex;
-            let viewportOffset = 0;
-            const isReset = openAmount === 0;
-            if (side === 'start') {
-                viewportOffset = isRTL ? -1 * (optsWidth - optionWidthOffset) : -1 * (option.clientWidth + optionWidthOffset);
-                isFinal = openAmount <= -optsWidth;
-                zIndex = isRTL ? undefined : options.length - index;
-            }
-            else {
-                viewportOffset = isRTL ? optionWidthOffset + option.clientWidth : optsWidth - optionWidthOffset;
-                isFinal = openAmount >= optsWidth;
-                zIndex = isRTL ? options.length - index : undefined;
-            }
-            slidingItemAnimation(option, viewportOffset, progress, isFinal, isReset, zIndex);
-            optionWidthOffset += option.clientWidth;
-        });
-    }
     getSlidingRatioSync() {
         if (this.openAmount > 0) {
             return this.openAmount / this.optsWidthRightSide;
@@ -449,15 +386,13 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
-        const { state, animationType } = this;
         return (h(Host, { class: {
                 [mode]: true,
-                [`item-sliding-animation-${animationType}`]: true,
-                'item-sliding-active-slide': state !== 2 /* SlidingState.Disabled */,
-                'item-sliding-active-options-end': (state & 8 /* SlidingState.End */) !== 0,
-                'item-sliding-active-options-start': (state & 16 /* SlidingState.Start */) !== 0,
-                'item-sliding-active-swipe-end': (state & 32 /* SlidingState.SwipeEnd */) !== 0,
-                'item-sliding-active-swipe-start': (state & 64 /* SlidingState.SwipeStart */) !== 0,
+                'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
+                'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
+                'item-sliding-active-options-start': (this.state & 16 /* SlidingState.Start */) !== 0,
+                'item-sliding-active-swipe-end': (this.state & 32 /* SlidingState.SwipeEnd */) !== 0,
+                'item-sliding-active-swipe-start': (this.state & 64 /* SlidingState.SwipeStart */) !== 0,
             } }));
     }
     static get is() { return "ion-item-sliding"; }
@@ -490,24 +425,6 @@ export class ItemSliding {
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "animationType": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'modern' | 'legacy'",
-                    "resolved": "\"legacy\" | \"modern\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the animation behavior for sliding item options.\nYou can choose between two available options: \"modern\" and \"legacy\".\n\n- \"legacy\": The item will be swiped to reveal the option buttons beneath it.\n- \"modern\": As the item is swiped, all item options will smoothly and gradually reveal themselves.\n\nThe \"modern\" animation type requires the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\nCheck [Browser Support](https://caniuse.com/web-animation) for more information."
-                },
-                "attribute": "animation-type",
-                "reflect": false,
-                "defaultValue": "'legacy'"
             }
         };
     }

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

@@ -1,8 +1,36 @@
 /*!
  * (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";
 import { testSlidingItem } from "../test.utils";
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+    test.describe(title('item-sliding: a11y for ion-color()'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <main>
+          <ion-item-sliding id="axe">
+            <ion-item>
+              <ion-label>Sliding Item with End Options</ion-label>
+            </ion-item>
+
+            <ion-item-options>
+              <ion-item-option>Favorite</ion-item-option>
+              <ion-item-option class="ion-activated">Activated</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </main>
+      `, config);
+            await page.locator(`#axe`).evaluate(async (el) => {
+                await el.open('end');
+            });
+            await page.waitForChanges();
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 /**
  * This behavior does not vary across directions
  */

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

@@ -15,70 +15,33 @@ configs().forEach(({ title, screenshot, config }) => {
         test.beforeEach(async ({ page }) => {
             await page.goto(`/src/components/item-sliding/test/basic`, config);
         });
-        test.describe('legacy animation', () => {
-            test.describe('start options', () => {
-                test('should not have visual regressions', async ({ page }) => {
-                    const item = page.locator('#item2');
-                    /**
-                     * Negative dragByX value to drag element from the right to the left
-                     * to reveal the options on the right side.
-                     * Positive dragByX value to drag element from the left to the right
-                     * to reveal the options on the left side.
-                     */
-                    const dragByX = config.direction === 'rtl' ? -150 : 150;
-                    await dragElementBy(item, page, dragByX);
-                    await page.waitForChanges();
-                    await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
-                });
-            });
-            test.describe('end options', () => {
-                test('should not have visual regressions', async ({ page }) => {
-                    const item = page.locator('#item2');
-                    /**
-                     * Negative dragByX value to drag element from the right to the left
-                     * to reveal the options on the right side.
-                     * Positive dragByX value to drag element from the left to the right
-                     * to reveal the options on the left side.
-                     */
-                    const dragByX = config.direction === 'rtl' ? 150 : -150;
-                    await dragElementBy(item, page, dragByX);
-                    await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
-                });
+        test.describe('start options', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                const item = page.locator('#item2');
+                /**
+                 * Negative dragByX value to drag element from the right to the left
+                 * to reveal the options on the right side.
+                 * Positive dragByX value to drag element from the left to the right
+                 * to reveal the options on the left side.
+                 */
+                const dragByX = config.direction === 'rtl' ? -150 : 150;
+                await dragElementBy(item, page, dragByX);
+                await page.waitForChanges();
+                await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
             });
         });
-        test.describe('modern animation', () => {
-            test.describe('start options', () => {
-                test('should not have visual regressions', async ({ page }) => {
-                    const useModernAnimationBtn = page.locator('#useModernAnimation');
-                    await useModernAnimationBtn.click();
-                    const item = page.locator('#item2');
-                    /**
-                     * Negative dragByX value to drag element from the right to the left
-                     * to reveal the options on the right side.
-                     * Positive dragByX value to drag element from the left to the right
-                     * to reveal the options on the left side.
-                     */
-                    const dragByX = config.direction === 'rtl' ? -150 : 150;
-                    await dragElementBy(item, page, dragByX);
-                    await page.waitForChanges();
-                    await expect(item).toHaveScreenshot(screenshot('modern-item-sliding-start'));
-                });
-            });
-            test.describe('end options', () => {
-                test('should not have visual regressions', async ({ page }) => {
-                    const useModernAnimationBtn = page.locator('#useModernAnimation');
-                    await useModernAnimationBtn.click();
-                    const item = page.locator('#item2');
-                    /**
-                     * Negative dragByX value to drag element from the right to the left
-                     * to reveal the options on the right side.
-                     * Positive dragByX value to drag element from the left to the right
-                     * to reveal the options on the left side.
-                     */
-                    const dragByX = config.direction === 'rtl' ? 150 : -150;
-                    await dragElementBy(item, page, dragByX);
-                    await expect(item).toHaveScreenshot(screenshot('modern-item-sliding-end'));
-                });
+        test.describe('end options', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                const item = page.locator('#item2');
+                /**
+                 * Negative dragByX value to drag element from the right to the left
+                 * to reveal the options on the right side.
+                 * Positive dragByX value to drag element from the left to the right
+                 * to reveal the options on the left side.
+                 */
+                const dragByX = config.direction === 'rtl' ? 150 : -150;
+                await dragElementBy(item, page, dragByX);
+                await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
             });
         });
     });

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

@@ -348,7 +348,7 @@
 :host-context(.ion-focused).label-floating:not(.ion-color),
 :host-context(.item-has-focus).label-stacked:not(.ion-color),
 :host-context(.item-has-focus).label-floating:not(.ion-color) {
-  color: var(--ion-color-primary, #3880ff);
+  color: var(--ion-color-primary, #0054e9);
 }
 
 :host-context(.ion-focused.ion-color).label-stacked:not(.ion-color),

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

@@ -1,6 +1,7 @@
 /*!
  * (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'] }).forEach(({ title, screenshot, config }) => {
@@ -64,6 +65,25 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
+configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+    test.describe(title('label: a11y for ion-color()'), () => {
+        test('should not have accessibility violations when focused', async ({ page }) => {
+            /**
+             * All page content should be contained by landmarks (main, nav, etc.)
+             * By containing the badge in a main element, we can avoid this violation.
+             */
+            await page.setContent(`
+          <main>
+            <div class="ion-focused">
+              <ion-label position="stacked">Default Label</ion-label>
+            </div>
+          </main>
+        `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('label: text wrapping in item'), () => {
         test('long text should not cause label to expand infinitely', async ({ page }) => {

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

@@ -173,7 +173,7 @@ ion-spinner {
   --background: var(--ion-color-step-50, #f2f2f2);
   --max-width: 280px;
   --max-height: 90%;
-  --spinner-color: var(--ion-color-primary, #3880ff);
+  --spinner-color: var(--ion-color-primary, #0054e9);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
   color: var(--ion-color-step-850, #262626);
   font-size: 0.875rem;

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

@@ -4,20 +4,36 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('loading: a11y'), () => {
         test('should set aria-labelledby with a message', async ({ page }) => {
-            await page.goto('/src/components/loading/test/a11y', config);
+            await page.setContent(`
+          <ion-loading></ion-loading>
+
+          <script>
+            const loading = document.querySelector('ion-loading');
+            loading.message = 'Loading';
+          </script>
+        `, config);
             const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-            await page.click('#open-message-loading');
+            const loading = page.locator('ion-loading');
+            await loading.evaluate((el) => el.present());
             await ionLoadingDidPresent.next();
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
         test('should set aria-labelledby with a label', async ({ page }) => {
-            await page.goto('/src/components/loading/test/a11y', config);
+            await page.setContent(`
+          <ion-loading aria-label="Loading"></ion-loading>
+
+          <script>
+            const loading = document.querySelector('ion-loading');
+            loading.spinner = 'bubbles';
+          </script>
+        `, config);
             const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-            await page.click('#open-label-loading');
+            const loading = page.locator('ion-loading');
+            await loading.evaluate((el) => el.present());
             await ionLoadingDidPresent.next();
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);

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

@@ -295,10 +295,49 @@ ion-backdrop {
   cursor: pointer;
 }
 
+/**
+ * The split pane styles for menu are defined
+ * in the menu stylesheets instead in the split pane
+ * stylesheets with ::slotted to allow for menus
+ * to be wrapped in custom components.
+ * If we used ::slotted to target the menu
+ * then menus wrapped in components would never
+ * receive these styles because they are not
+ * children of the split pane.
+ */
+/**
+ * Do not pass CSS Variables down on larger
+ * screens as we want them to affect the outer
+ * `ion-menu` rather than the inner content
+ */
 :host(.menu-pane-visible) {
-  width: var(--width);
-  min-width: var(--min-width);
-  max-width: var(--max-width);
+  flex: 0 1 auto;
+  width: var(--side-width, var(--width));
+  min-width: var(--side-min-width, var(--min-width));
+  max-width: var(--side-max-width, var(--max-width));
+}
+
+:host(.menu-pane-visible.split-pane-side) {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: relative;
+  box-shadow: none;
+  z-index: 0;
+}
+
+:host(.menu-pane-visible.split-pane-side.menu-enabled) {
+  display: flex;
+  flex-shrink: 0;
+}
+
+:host(.menu-pane-visible.split-pane-side) {
+  order: -1;
+}
+
+:host(.menu-pane-visible.split-pane-side[side=end]) {
+  order: 1;
 }
 
 :host(.menu-pane-visible) .menu-inner {
@@ -314,6 +353,28 @@ ion-backdrop {
   display: hidden !important;
 }
 
+:host(.menu-pane-visible.split-pane-side) {
+  -webkit-border-start: 0;
+  border-inline-start: 0;
+  -webkit-border-end: var(--border);
+  border-inline-end: var(--border);
+  border-top: 0;
+  border-bottom: 0;
+  min-width: var(--side-min-width);
+  max-width: var(--side-max-width);
+}
+
+:host(.menu-pane-visible.split-pane-side[side=end]) {
+  -webkit-border-start: var(--border);
+  border-inline-start: var(--border);
+  -webkit-border-end: 0;
+  border-inline-end: 0;
+  border-top: 0;
+  border-bottom: 0;
+  min-width: var(--side-min-width);
+  max-width: var(--side-max-width);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use