@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

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

@@ -4,74 +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 }) => {
-    test.describe(title('textarea: a11y'), () => {
-        test('default layout should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-select label="Label" placeholder="Placeholder"></ion-select>
-          <ion-select placeholder="Placeholder">
-            <div slot="label">Label</div>
-          </ion-select>
-          <ion-select label="Label" value="a">
-            <ion-select-option value="a">Apple</ion-select-option>
-          </ion-select>
-          <ion-select aria-label="Label"></ion-select>
-          <ion-item>
-            <ion-select label="My Label" value="apples">
-              <ion-select-option value="apples">Apples</ion-select-option>
-              <ion-select-option value="bananas">Bananas</ion-select-option>
-              <ion-select-option value="oranges">Oranges</ion-select-option>
-            </ion-select>
-          </ion-item>
-          <ion-select id="multiple" multiple="true" label="My Label">
-            <ion-select-option value="apples">Apples</ion-select-option>
-            <ion-select-option value="bananas">Bananas</ion-select-option>
-            <ion-select-option value="oranges">Oranges</ion-select-option>
-          </ion-select>
-          <ion-select label="My Label" label-placement="floating">
-            <ion-icon slot="start" name="pizza" aria-hidden="true"></ion-icon>
-            <ion-select-option value="apples">Apples</ion-select-option>
-            <ion-select-option value="bananas">Bananas</ion-select-option>
-            <ion-select-option value="oranges">Oranges</ion-select-option>
-            <ion-button slot="end" aria-label="button">
-              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
-            </ion-button>
-          </ion-select>
-
-          <script>
-            const multiple = document.querySelector('#multiple');
-            multiple.value = ['apples', 'bananas'];
-          </script>
-        </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-select class="has-focus" label="Label" value="a">
-            <ion-select-option value="a">Apple</ion-select-option>
-          </ion-select>
-          <ion-select class="has-focus" label-placement="floating" label="Label" value="a">
-            <ion-select-option value="a">Apple</ion-select-option>
-          </ion-select>
-          <ion-select class="has-focus" fill="outline" label-placement="floating" label="Label" value="a">
-            <ion-select-option value="a">Apple</ion-select-option>
-          </ion-select>
-        </main>
-      `, config);
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('select: a11y'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.goto(`/src/components/select/test/a11y`, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });

package/dist/collection/components/select/test/legacy/async/select.e2e.js

@@ -0,0 +1,19 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+/**
+ * This is checking internal logic. RTL tests are not needed
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe.skip(title('select: async'), () => {
+        test('should correctly set the value after a delay', async ({ page }) => {
+            await page.goto(`/src/components/select/test/legacy/async`, config);
+            const selectValueSet = await page.spyOnEvent('selectValueSet');
+            const select = page.locator('#default');
+            await selectValueSet.next();
+            await expect(select).toHaveJSProperty('value', 'bird');
+        });
+    });
+});

package/dist/collection/components/select/test/legacy/basic/select.e2e.js

@@ -0,0 +1,145 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('select: basic'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/select/test/legacy/basic', config);
+        });
+        test.describe('select: alert', () => {
+            test('it should open an alert select', async ({ page }) => {
+                const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+                await page.click('#customAlertSelect');
+                await ionAlertDidPresent.next();
+                await expect(page.locator('ion-alert')).toBeVisible();
+            });
+        });
+        test.describe('select: action sheet', () => {
+            test('it should open an action sheet select', async ({ page }) => {
+                const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+                await page.click('#customActionSheetSelect');
+                await ionActionSheetDidPresent.next();
+                await expect(page.locator('ion-action-sheet')).toBeVisible();
+            });
+        });
+        test.describe('select: popover', () => {
+            test('it should open a popover select', async ({ page, browserName, skip }) => {
+                // TODO (FW-2979)
+                skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
+                const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+                await page.click('#customPopoverSelect');
+                await ionPopoverDidPresent.next();
+                const popover = page.locator('ion-popover');
+                // TODO(FW-1436)
+                if (browserName !== 'firefox') {
+                    // select has no value, so first option should be focused by default
+                    const popoverOption1 = await popover.locator('.select-interface-option:first-of-type ion-radio');
+                    await expect(popoverOption1).toBeFocused();
+                }
+                await expect(popover).toBeVisible();
+            });
+        });
+    });
+});
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('select: multiple selects'), () => {
+        test('should not open multiple alert windows when clicked multiple times', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/25126',
+            });
+            await page.goto('/src/components/select/test/legacy/basic', config);
+            const select = page.locator('#gender');
+            await select.evaluate((el) => {
+                /*
+                 * Playwright's click() method attempts to scroll to the handle
+                 * to perform the action. That is problematic when the overlay
+                 * is already visible. We manually click() the element instead
+                 * to avoid flaky tests.
+                 */
+                el.click();
+                el.click();
+                el.click();
+            });
+            const alerts = await page.$$('ion-alert');
+            expect(alerts.length).toBe(1);
+        });
+    });
+});
+/**
+ * ionChange has a consistent behavior across modes
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('select: ionChange'), () => {
+        test('should fire ionChange when confirming a value from an alert', async ({ page }) => {
+            await page.setContent(`
+        <ion-select interface="alert">
+          <ion-select-option value="apple">Apple</ion-select-option>
+          <ion-select-option value="banana">Banana</ion-select-option>
+        </ion-select>
+      `, config);
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const ionChange = await page.spyOnEvent('ionChange');
+            const select = page.locator('ion-select');
+            await select.click();
+            await ionAlertDidPresent.next();
+            const alert = page.locator('ion-alert');
+            const radioButtons = alert.locator('.alert-radio-button');
+            const confirmButton = alert.locator('.alert-button:not(.alert-button-role-cancel)');
+            await radioButtons.nth(0).click();
+            await confirmButton.click();
+            await ionChange.next();
+            expect(ionChange).toHaveReceivedEventDetail({ value: 'apple' });
+        });
+        test('should fire ionChange when confirming a value from a popover', async ({ page }) => {
+            await page.setContent(`
+        <ion-select interface="popover">
+          <ion-select-option value="apple">Apple</ion-select-option>
+          <ion-select-option value="banana">Banana</ion-select-option>
+        </ion-select>
+      `, config);
+            const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+            const ionChange = await page.spyOnEvent('ionChange');
+            const select = page.locator('ion-select');
+            await select.click();
+            await ionPopoverDidPresent.next();
+            const popover = page.locator('ion-popover');
+            const radioButtons = popover.locator('ion-radio');
+            await radioButtons.nth(0).click();
+            await ionChange.next();
+            expect(ionChange).toHaveReceivedEventDetail({ value: 'apple', event: { isTrusted: true } });
+        });
+        test('should fire ionChange when confirming a value from an action sheet', async ({ page }) => {
+            await page.setContent(`
+        <ion-select interface="action-sheet">
+          <ion-select-option value="apple">Apple</ion-select-option>
+          <ion-select-option value="banana">Banana</ion-select-option>
+        </ion-select>
+      `, config);
+            const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+            const ionChange = await page.spyOnEvent('ionChange');
+            const select = page.locator('ion-select');
+            await select.click();
+            await ionActionSheetDidPresent.next();
+            const actionSheet = page.locator('ion-action-sheet');
+            const buttons = actionSheet.locator('.action-sheet-button');
+            await buttons.nth(0).click();
+            await ionChange.next();
+            expect(ionChange).toHaveReceivedEventDetail({ value: 'apple' });
+        });
+        test('should not fire when programmatically setting a valid value', async ({ page }) => {
+            await page.setContent(`
+        <ion-select>
+          <ion-select-option value="apple">Apple</ion-select-option>
+          <ion-select-option value="banana">Banana</ion-select-option>
+        </ion-select>
+      `, config);
+            const ionChange = await page.spyOnEvent('ionChange');
+            const select = page.locator('ion-select');
+            await select.evaluate((el) => (el.value = 'banana'));
+            await expect(ionChange).not.toHaveReceivedEvent();
+        });
+    });
+});

package/dist/collection/components/select/test/legacy/compare-with/select.e2e.js

@@ -0,0 +1,67 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('select: compare-with'), () => {
+        test('should correctly set value when using compareWith property', async ({ page }) => {
+            await page.goto('/src/components/select/test/legacy/compare-with', config);
+            const multipleSelect = page.locator('#multiple');
+            const singleSelect = page.locator('#single');
+            await expect(multipleSelect).toHaveJSProperty('value', [
+                {
+                    label: 'selected by default',
+                    value: '1',
+                },
+            ]);
+            await expect(singleSelect).toHaveJSProperty('value', {
+                label: 'selected by default',
+                value: '1',
+            });
+        });
+        test('should work with different parameter types', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/25759',
+            });
+            await page.setContent(`
+        <ion-select value="3" placeholder="Please select"></ion-select>
+
+        <script>
+          const data = [
+            { id: 1, name: 'Option #1' },
+            { id: 2, name: 'Option #2' },
+            { id: 3, name: 'Option #3' },
+          ]
+          const select = document.querySelector('ion-select');
+          select.compareWith = (val1, val2) => {
+            // convert val1 to a number
+            return +val1 === val2;
+          }
+
+          data.forEach((d) => {
+            const el = document.createElement('ion-select-option');
+            el.value = d.id;
+            el.innerText = d.name;
+
+            select.appendChild(el);
+          });
+        </script>
+      `, config);
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const select = page.locator('ion-select');
+            const selectLabel = select.locator('[part="text"]');
+            await expect(selectLabel).toHaveText('Option #3');
+            await select.click();
+            await ionAlertDidPresent.next();
+            const selectRadios = page.locator('ion-alert button.alert-radio');
+            await expect(selectRadios.nth(0)).toHaveAttribute('aria-checked', 'false');
+            await expect(selectRadios.nth(1)).toHaveAttribute('aria-checked', 'false');
+            await expect(selectRadios.nth(2)).toHaveAttribute('aria-checked', 'true');
+        });
+    });
+});

package/dist/collection/components/select/test/legacy/custom/custom.e2e.js

@@ -0,0 +1,13 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs().forEach(({ title, screenshot, config }) => {
+    test.describe(title('select: custom'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/components/select/test/legacy/custom`, config);
+            await expect(page).toHaveScreenshot(screenshot(`select-custom-diff`));
+        });
+    });
+});

package/dist/collection/components/select/test/legacy/single-value/select.e2e.js

@@ -0,0 +1,16 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('select: single-value'), () => {
+        test('should open single value select', async ({ page }) => {
+            await page.goto(`/src/components/select/test/legacy/single-value`, config);
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            await page.click('#gender');
+            await ionAlertDidPresent.next();
+            await expect(page).toHaveScreenshot(screenshot(`select-single-value-diff`));
+        });
+    });
+});

package/dist/collection/components/select/test/legacy/spec/select.e2e.js

@@ -0,0 +1,14 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs().forEach(({ title, screenshot, config }) => {
+    test.describe(title('select: spec'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/components/select/test/legacy/spec`, config);
+            await page.setIonViewport();
+            await expect(page).toHaveScreenshot(screenshot(`select-spec-diff`));
+        });
+    });
+});

package/dist/collection/components/select/test/legacy/standalone/select.e2e.js

@@ -0,0 +1,18 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('select: standalone'), () => {
+        test('should open an overlay without ion-app', async ({ page }) => {
+            await page.goto(`/src/components/select/test/legacy/standalone`, config);
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+            await page.click('#gender');
+            await ionAlertDidPresent.next();
+            const alert = page.locator('ion-alert');
+            await alert.evaluate((el) => el.dismiss());
+            await ionAlertDidDismiss.next();
+        });
+    });
+});

package/dist/collection/components/select/test/legacy/wrapping/select.e2e.js

@@ -0,0 +1,39 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('select: wrapping'), () => {
+        test('should not wrap text by default', async ({ page }) => {
+            await page.setContent(`
+        <ion-select value="nowrap" legacy="true">
+          <ion-select-option value="nowrap">Should not wrap when no label exists and no class is added to make the text wrap</ion-select-option>
+        </ion-select>
+      `, config);
+            const select = page.locator('ion-select');
+            await expect(select).toHaveScreenshot(screenshot(`select-nowrap`));
+        });
+        test('should wrap text with class', async ({ page }) => {
+            await page.setContent(`
+        <ion-select value="wrap" legacy="true" class="ion-text-wrap">
+          <ion-select-option value="wrap">Should wrap when no label exists and really long text exists to make it wrap the text</ion-select-option>
+        </ion-select>
+      `, config);
+            const select = page.locator('ion-select');
+            await expect(select).toHaveScreenshot(screenshot(`select-wrap`));
+        });
+        test('should not wrap label while wrapping text with class', async ({ page }) => {
+            await page.setContent(`
+        <ion-item>
+          <ion-label>Really long label should not wrap</ion-label>
+          <ion-select value="wrap" legacy="true" class="ion-text-wrap">
+            <ion-select-option value="wrap">Should wrap value only when label exists and really long text exists to make it wrap the text</ion-select-option>
+          </ion-select>
+        </ion-item>
+      `, config);
+            const select = page.locator('ion-item');
+            await expect(select).toHaveScreenshot(screenshot(`select-wrap-with-label`));
+        });
+    });
+});

package/dist/collection/components/select-option/select-option.js

@@ -10,7 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: '6edad0b52da16621ce55335d732bac1e27e485dc', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: 'fe62f2d62ede6866e20969a2e7ae25453648fcef', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-popover/select-popover.js

@@ -102,7 +102,7 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: '4ef1871f74e2ba6a5bd16d2c407d73edffb87f1f', class: getIonMode(this) }, h("ion-list", { key: '7e8e5f1e129be79f0bcd09bcaca6c09606ea0195' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '9d3995131364d4f1d282e0a1fc34e778e94c9f98', class: getIonMode(this) }, h("ion-list", { key: '14244dcd6375eb61d65f3a9450d42a5d7b2d6541' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

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

@@ -197,10 +197,10 @@ ion-item {
 }
 
 .item-radio-checked {
-  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
-  --background-focused: var(--ion-color-primary, #0054e9);
+  --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08);
+  --background-focused: var(--ion-color-primary, #3880ff);
   --background-focused-opacity: 0.2;
-  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-hover: var(--ion-color-primary, #3880ff);
   --background-hover-opacity: 0.12;
 }
 
@@ -208,5 +208,5 @@ ion-item {
   --background-activated: var(--ion-item-color, var(--ion-text-color, #000));
   --background-focused: var(--ion-item-color, var(--ion-text-color, #000));
   --background-hover: var(--ion-item-color, var(--ion-text-color, #000));
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -25,11 +25,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: '8e398fb1d49ec076737c3c7cac58765fee3267b1', class: {
+        return (h(Host, { key: 'ee3cd9a5448fb69c8ddfc88a993f9968e1a381ff', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '1fff010f1dfdc2c0985f419299a89cd4d498c340' }, "\u00A0")));
+            } }, h("span", { key: '8aa792724a3b77877062e9aae838d9e1572b576f' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -39,7 +39,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '93010f0f8636c369faa896a36b47779c7f9aa363', class: createColorClasses(self.color, {
+        return (h(Host, { key: '47cd6cd98e36e5b99fbe263a6a102610cae240c3', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/collection/components/split-pane/split-pane.ios.css

@@ -127,14 +127,31 @@
   contain: strict;
 }
 
+/**
+ * Do not pass CSS Variables down on larger
+ * screens as we want them to affect the outer
+ * `ion-menu` rather than the inner content
+ */
+::slotted(ion-menu.menu-pane-visible) {
+  flex: 0 1 auto;
+  width: var(--side-width);
+  min-width: var(--side-min-width);
+  max-width: var(--side-max-width);
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-side),
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   position: relative;
-  flex: 1;
   box-shadow: none;
+  z-index: 0;
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-main) {
+  flex: 1;
   /**
    * Content can overflow outside of a router outlet
    * or a nav container to allow for the translucent
@@ -144,13 +161,26 @@
    * we disable the overflow when that is the case.
    */
   overflow: hidden;
-  z-index: 0;
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),
+:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled) {
+  display: flex;
+  flex-shrink: 0;
 }
 
 ::slotted(.split-pane-side:not(ion-menu)) {
   display: none;
 }
 
+:host(.split-pane-visible) ::slotted(.split-pane-side) {
+  order: -1;
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
+  order: 1;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -207,7 +237,29 @@
  * }
  */
 :host {
-  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
   --side-min-width: 270px;
   --side-max-width: 28%;
+}
+
+:host(.split-pane-visible) ::slotted(.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(.split-pane-visible) ::slotted(.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);
 }