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

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

@@ -0,0 +1,181 @@
+/*!
+ * (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('input: basic'), () => {
+        test.describe('input with overflow', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+          <ion-content>
+            <ion-list>
+              <ion-item>
+                <ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges" legacy="true"></ion-input>
+              </ion-item>
+            </ion-list>
+          </ion-content>
+        `, config);
+                const item = page.locator('ion-item');
+                // Validates the display of an input where text extends off the edge of the component.
+                await expect(item).toHaveScreenshot(screenshot(`input-with-text-overflow`));
+            });
+        });
+        test.describe('input with placeholder', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+        <ion-content>
+          <ion-list>
+            <ion-item>
+              <ion-input placeholder="Placeholder" legacy="true"></ion-input>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+        `, config);
+                const item = page.locator('ion-item');
+                // Validates the display of an input with a placeholder.
+                await expect(item).toHaveScreenshot(screenshot(`input-with-placeholder`));
+            });
+        });
+        test.describe('input disabled', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+        <ion-content>
+          <ion-list>
+            <ion-item>
+              <ion-input value="Input disabled" disabled legacy="true"></ion-input>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+        `, config);
+                const item = page.locator('ion-item');
+                // Validates the display of an input in a disabled state.
+                await expect(item).toHaveScreenshot(screenshot(`input-disabled`));
+            });
+        });
+        test.describe('input with lines="full"', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+        <ion-content>
+          <ion-list>
+            <ion-item lines="full">
+              <ion-input placeholder="Full" legacy="true"></ion-input>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+        `, config);
+                const item = page.locator('ion-item');
+                const input = page.locator('ion-input');
+                // Validates the display of an input with an ion-item using lines="full".
+                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-full`));
+                await input.click();
+                // Verifies that the parent item receives .item-has-focus when the input is focused.
+                await expect(item).toHaveClass(/item-has-focus/);
+                // Validates the display of an input with an ion-item using lines="full" when focused.
+                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-full-focused`));
+            });
+        });
+        test.describe('input with lines="inset"', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+        <ion-content>
+          <ion-list>
+            <ion-item lines="inset">
+              <ion-input placeholder="Inset" legacy="true"></ion-input>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+        `, config);
+                const item = page.locator('ion-item');
+                const input = page.locator('ion-input');
+                // Validates the display of an input with an ion-item using lines="inset".
+                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-inset`));
+                await input.click();
+                // Verifies that the parent item receives .item-has-focus when the input is focused.
+                await expect(item).toHaveClass(/item-has-focus/);
+                // Validates the display of an input with an ion-item using lines="inset" when focused.
+                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-inset-focused`));
+            });
+        });
+        test.describe('input with lines="none"', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+        <ion-content>
+          <ion-list>
+            <ion-item lines="none">
+              <ion-input placeholder="None" legacy="true"></ion-input>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+        `, config);
+                const item = page.locator('ion-item');
+                const input = page.locator('ion-input');
+                // Validates the display of an input with an ion-item using lines="none".
+                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-none`));
+                await input.click();
+                // Verifies that the parent item receives .item-has-focus when the input is focused.
+                await expect(item).toHaveClass(/item-has-focus/);
+                // Validates the display of an input with an ion-item using lines="none" when focused.
+                await expect(item).toHaveScreenshot(screenshot(`input-with-lines-none-focused`));
+            });
+        });
+        test.describe('input with clear button', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+        <ion-content>
+          <ion-list>
+            <ion-item>
+              <ion-label>Clear Input</ion-label>
+              <ion-input
+                clear-input
+                value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"
+                legacy="true"
+              ></ion-input>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+        `, config);
+                const item = page.locator('ion-item');
+                // Validates the display of an input with a clear button.
+                await expect(item).toHaveScreenshot(screenshot(`input-with-clear-button`));
+            });
+        });
+    });
+});
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('input: clear button'), () => {
+        test('should clear the input when pressed', async ({ page }) => {
+            await page.setContent(`
+        <ion-input value="abc" clear-input="true" legacy="true"></ion-input>
+      `, config);
+            const input = page.locator('ion-input');
+            const clearButton = input.locator('.input-clear-icon');
+            await expect(input).toHaveJSProperty('value', 'abc');
+            await clearButton.click();
+            await page.waitForChanges();
+            await expect(input).toHaveJSProperty('value', '');
+        });
+        /**
+         * Note: This only tests the desktop focus behavior.
+         * Mobile browsers have different restrictions around
+         * focusing inputs, so these platforms should always
+         * be tested when making changes to the focus behavior.
+         */
+        test('should keep the input focused when the clear button is pressed', async ({ page }) => {
+            await page.setContent(`
+        <ion-input value="abc" clear-input="true" legacy="true"></ion-input>
+      `, config);
+            const input = page.locator('ion-input');
+            const nativeInput = input.locator('input');
+            const clearButton = input.locator('.input-clear-icon');
+            await input.click();
+            await expect(nativeInput).toBeFocused();
+            await clearButton.click();
+            await page.waitForChanges();
+            await expect(nativeInput).toBeFocused();
+        });
+    });
+});

package/dist/collection/components/input/test/legacy/clear-on-edit/input.e2e.js

@@ -0,0 +1,55 @@
+/*!
+ * (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: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('input: clearOnEdit'), () => {
+        test('should clear the input on first keystroke of input being focused', async ({ page }) => {
+            await page.setContent(`<ion-input value="some value" clear-on-edit="true"></ion-input>`, config);
+            const input = page.locator('ion-input');
+            await input.click();
+            await input.type('h');
+            expect(await input.evaluate((el) => el.value)).toBe('h');
+            await input.type('ello world');
+            expect(await input.evaluate((el) => el.value)).toBe('hello world');
+        });
+        test('should not clear the input when pressing Enter', async ({ page }) => {
+            await page.setContent(`<ion-input value="some value" clear-on-edit="true"></ion-input>`, config);
+            const input = page.locator('ion-input');
+            await input.click();
+            await page.keyboard.press('Enter');
+            expect(await input.evaluate((el) => el.value)).toBe('some value');
+        });
+        test('should not clear the input if it does not have an initial value when typing', async ({ page }) => {
+            await page.setContent(`<ion-input value="" clear-on-edit="true"></ion-input>`, config);
+            const input = page.locator('ion-input');
+            await input.click();
+            await input.type('hello world');
+            expect(await input.evaluate((el) => el.value)).toBe('hello world');
+        });
+        test('should emit ionChange once on blur', async ({ page }, testInfo) => {
+            testInfo.annotations.push({
+                type: 'issue',
+                description: 'https://ionic-cloud.atlassian.net/browse/FW-2315',
+            });
+            await page.setContent(`<ion-input placeholder="input" clear-on-edit="true"></ion-input>`, config);
+            const ionChangeSpy = await page.spyOnEvent('ionChange');
+            const ionInputSpy = await page.spyOnEvent('ionInput');
+            const input = page.locator('ion-input');
+            const nativeInput = input.locator('input');
+            await nativeInput.type('123', { delay: 100 });
+            expect(ionInputSpy).toHaveReceivedEventTimes(3);
+            await nativeInput.evaluate((el) => el.blur());
+            expect(ionChangeSpy).toHaveReceivedEventTimes(1);
+            await nativeInput.type('a');
+            expect(await input.evaluate((el) => el.value)).toBe('a');
+            await nativeInput.evaluate((el) => el.blur());
+            expect(ionInputSpy).toHaveReceivedEventTimes(5);
+            expect(ionChangeSpy).toHaveReceivedEventTimes(2);
+        });
+    });
+});

package/dist/collection/components/input/test/legacy/input-events.e2e.js

@@ -0,0 +1,71 @@
+/*!
+ * (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('input: events: ionChange'), () => {
+        test.describe('when the input is blurred', () => {
+            test.describe('should emit', () => {
+                test('if the value has changed', async ({ page }) => {
+                    await page.setContent(`<ion-input></ion-input>`, config);
+                    const nativeInput = page.locator('ion-input input');
+                    const ionChangeSpy = await page.spyOnEvent('ionChange');
+                    await nativeInput.type('new value', { delay: 100 });
+                    // Value change is not emitted until the control is blurred.
+                    await nativeInput.evaluate((e) => e.blur());
+                    await ionChangeSpy.next();
+                    expect(ionChangeSpy).toHaveReceivedEventDetail({ value: 'new value', event: { isTrusted: true } });
+                });
+            });
+            test.describe('should not emit', () => {
+                test('if the value has not changed', async ({ page }) => {
+                    await page.setContent(`<ion-input value="" clear-input="true"></ion-input>`, config);
+                    const ionChangeSpy = await page.spyOnEvent('ionChange');
+                    const nativeInput = page.locator('ion-input input');
+                    await nativeInput.type('new value', { delay: 100 });
+                    await page.click('ion-input .input-clear-icon');
+                    await nativeInput.evaluate((e) => e.blur());
+                    expect(ionChangeSpy.events.length).toBe(0);
+                });
+                test('if the value is set programmatically', async ({ page }) => {
+                    await page.setContent(`<ion-input></ion-input>`, config);
+                    const input = page.locator('ion-input');
+                    const ionChangeSpy = await page.spyOnEvent('ionChange');
+                    await input.evaluate((el) => {
+                        el.value = 'new value';
+                    });
+                    expect(ionChangeSpy.events.length).toBe(0);
+                    // Update the value again to make sure it doesn't emit a second time
+                    await input.evaluate((el) => {
+                        el.value = 'new value 2';
+                    });
+                    expect(ionChangeSpy.events.length).toBe(0);
+                });
+            });
+        });
+    });
+});
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('input: events: ionInput'), () => {
+        test('should emit when the input is cleared', async ({ page }) => {
+            await page.setContent(`<ion-input value="some value" clear-input="true"></ion-input>`, config);
+            const ionInputSpy = await page.spyOnEvent('ionInput');
+            await page.click('ion-input .input-clear-icon');
+            expect(ionInputSpy).toHaveReceivedEventDetail({ value: '', event: { isTrusted: true } });
+        });
+        test('should emit when the input is cleared from the keyboard', async ({ page }) => {
+            await page.setContent(`<ion-input value="some value" clear-on-edit="true"></ion-input>`, config);
+            const input = page.locator('ion-input');
+            const ionInputSpy = await page.spyOnEvent('ionInput');
+            await input.click();
+            await page.keyboard.press('Backspace');
+            expect(await input.evaluate((el) => el.value)).toBe('');
+            expect(ionInputSpy).toHaveReceivedEventTimes(1);
+            expect(ionInputSpy).toHaveReceivedEventDetail({ value: '', event: { isTrusted: true } });
+        });
+    });
+});

package/dist/collection/components/input/test/legacy/masking/input.e2e.js

@@ -0,0 +1,26 @@
+/*!
+ * (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: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('input: masking'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/input/test/legacy/masking', config);
+        });
+        test('should filter out spaces', async ({ page }) => {
+            const ionInput = await page.spyOnEvent('ionInput');
+            const input = page.locator('#inputTrimmed');
+            await input.click();
+            // Playwright types this in one character at a time.
+            await page.keyboard.type('A B C', { delay: 100 });
+            await ionInput.next();
+            // ionInput is called for each character.
+            await expect(ionInput).toHaveReceivedEventTimes(5);
+            await expect(input).toHaveJSProperty('value', 'ABC');
+        });
+    });
+});

package/dist/collection/components/input/test/legacy/spec/input.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().forEach(({ title, screenshot, config }) => {
+    test.describe(title('input: spec'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/input/test/legacy/spec', config);
+        });
+        test('should not have visual regressions', async ({ page }) => {
+            await page.setIonViewport();
+            await expect(page).toHaveScreenshot(screenshot(`input-spec-diff`));
+        });
+    });
+});

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

@@ -508,6 +508,21 @@ button, a {
   display: block;
 }
 
+:host(:not(.item-label)) ::slotted(ion-select.legacy-select) {
+  --padding-start: 0;
+  max-width: none;
+}
+
+:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
+:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --padding-start: 0;
+  align-self: stretch;
+  width: 100%;
+  max-width: 100%;
+}
+
 :host(:not(.item-label)) ::slotted(ion-datetime) {
   --padding-start: 0;
 }
@@ -520,7 +535,8 @@ button, a {
 
 :host(.item-multiple-inputs) ::slotted(ion-checkbox),
 :host(.item-multiple-inputs) ::slotted(ion-datetime),
-:host(.item-multiple-inputs) ::slotted(ion-radio) {
+:host(.item-multiple-inputs) ::slotted(ion-radio),
+:host(.item-multiple-inputs) ::slotted(ion-select.legacy-select) {
   position: relative;
 }
 
@@ -555,7 +571,7 @@ ion-ripple-effect {
 .item-counter {
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -644,12 +660,12 @@ ion-ripple-effect {
   --background-activated-opacity: .12;
   --background-focused-opacity: .15;
   --background-hover-opacity: .04;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --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;
 }
@@ -786,6 +802,14 @@ ion-ripple-effect {
   --min-height: 68px;
 }
 
+:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
+:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --padding-start: 0px;
+}
+
+:host(.item-label-fixed) ::slotted(ion-select.legacy-select),
 :host(.item-label-fixed) ::slotted(ion-datetime) {
   --padding-start: 0;
 }

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

@@ -508,6 +508,21 @@ button, a {
   display: block;
 }
 
+:host(:not(.item-label)) ::slotted(ion-select.legacy-select) {
+  --padding-start: 0;
+  max-width: none;
+}
+
+:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
+:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --padding-start: 0;
+  align-self: stretch;
+  width: 100%;
+  max-width: 100%;
+}
+
 :host(:not(.item-label)) ::slotted(ion-datetime) {
   --padding-start: 0;
 }
@@ -520,7 +535,8 @@ button, a {
 
 :host(.item-multiple-inputs) ::slotted(ion-checkbox),
 :host(.item-multiple-inputs) ::slotted(ion-datetime),
-:host(.item-multiple-inputs) ::slotted(ion-radio) {
+:host(.item-multiple-inputs) ::slotted(ion-radio),
+:host(.item-multiple-inputs) ::slotted(ion-select.legacy-select) {
   position: relative;
 }
 
@@ -555,7 +571,7 @@ ion-ripple-effect {
 .item-counter {
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -740,16 +756,16 @@ ion-ripple-effect {
   --background-activated-opacity: 0;
   --background-focused-opacity: .12;
   --background-hover-opacity: .04;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
   --color: var(--ion-item-color, var(--ion-text-color, #000));
   --transition: opacity 15ms linear, background-color 15ms linear;
   --padding-start: 16px;
   --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;
@@ -855,8 +871,27 @@ ion-ripple-effect {
   height: calc(100% + 2 * var(--border-width));
   transition: none;
 }
-:host(.item-fill-outline) .item-highlight {
-  inset-inline-start: var(--position-offset);
+@supports (inset-inline-start: 0) {
+  :host(.item-fill-outline) .item-highlight {
+    inset-inline-start: var(--position-offset);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.item-fill-outline) .item-highlight {
+    left: var(--position-offset);
+  }
+  :host-context([dir=rtl]):host(.item-fill-outline) .item-highlight, :host-context([dir=rtl]).item-fill-outline .item-highlight {
+    left: unset;
+    right: unset;
+    right: var(--position-offset);
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.item-fill-outline:dir(rtl)) .item-highlight {
+      left: unset;
+      right: unset;
+      right: var(--position-offset);
+    }
+  }
 }
 
 :host(.item-fill-outline.ion-focused) .item-native,
@@ -992,6 +1027,7 @@ ion-ripple-effect {
   margin-bottom: 7px;
 }
 
+:host(.item-label-fixed) ::slotted(ion-select.legacy-select),
 :host(.item-label-fixed) ::slotted(ion-datetime) {
   --padding-start: 8px;
 }
@@ -1016,11 +1052,18 @@ ion-ripple-effect {
   --min-height: 55px;
 }
 
+:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
+:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --padding-start: 0;
+}
+
 :host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),
 :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) {
@@ -1037,19 +1080,34 @@ ion-ripple-effect {
 }
 
 :host(.item-fill-solid) {
-  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
-  --background-hover: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
-  --background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  --background: var(--ion-color-step-50, #f2f2f2);
+  --background-hover: var(--ion-color-step-100, #e6e6e6);
+  --background-focused: var(--ion-color-step-150, #d9d9d9);
   --border-width: 0 0 1px 0;
   --inner-border-width: 0;
-  border-start-start-radius: 4px;
-  border-start-end-radius: 4px;
-  border-end-end-radius: 0;
-  border-end-start-radius: 0;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+:host-context([dir=rtl]):host(.item-fill-solid), :host-context([dir=rtl]).item-fill-solid {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.item-fill-solid:dir(rtl)) {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
 }
 
 :host(.item-fill-solid) .item-native {
-  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
+  --border-color: var(--ion-color-step-500, gray);
 }
 
 :host(.item-fill-solid.ion-focused) .item-native,
@@ -1058,23 +1116,38 @@ ion-ripple-effect {
 }
 
 :host(.item-fill-solid.item-shape-round) {
-  border-start-start-radius: 16px;
-  border-start-end-radius: 16px;
-  border-end-end-radius: 0;
-  border-end-start-radius: 0;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+:host-context([dir=rtl]):host(.item-fill-solid.item-shape-round), :host-context([dir=rtl]).item-fill-solid.item-shape-round {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+@supports selector(: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;
+    border-bottom-left-radius: 0;
+  }
 }
 
 @media (any-hover: hover) {
   :host(.item-fill-solid:hover) .item-native {
     --background: var(--background-hover);
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 :host(.item-fill-outline) {
   --ripple-color: transparent;
   --background-focused: transparent;
   --background-hover: transparent;
-  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
+  --border-color: var(--ion-color-step-500, gray);
   --border-width: 1px;
   border: none;
   overflow: visible;
@@ -1106,7 +1179,7 @@ ion-ripple-effect {
 
 @media (any-hover: hover) {
   :host(.item-fill-outline:hover) .item-native {
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 .item-counter {