voyager-ionic-core 7.5.1 → 7.5.5

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

@@ -26,3 +26,69 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: a11y'), () => {
+    test('datetime should be keyboard navigable', async ({ page, browserName }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-22T16:30:00"></ion-datetime>
+    `, config);
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+      const datetime = page.locator('ion-datetime');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
+      const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
+      await page.keyboard.press(tabKey);
+      await expect(monthYearButton).toBeFocused();
+      await page.keyboard.press(tabKey);
+      await expect(prevButton).toBeFocused();
+      await page.keyboard.press(tabKey);
+      await expect(nextButton).toBeFocused();
+      // check value before & after selecting via keyboard
+      const initialValue = await datetime.evaluate((el) => el.value);
+      expect(initialValue).toBe('2022-02-22T16:30:00');
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+      await page.keyboard.press('ArrowLeft');
+      await page.waitForChanges();
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      const newValue = await datetime.evaluate((el) => el.value);
+      expect(newValue).not.toBe('2022-02-22T16:30:00');
+    });
+    test('buttons should be keyboard navigable', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true"></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const clearButton = page.locator('#clear-button button');
+      const selectedDay = page.locator('.calendar-day-active');
+      await expect(selectedDay).toHaveText('22');
+      await clearButton.focus();
+      await page.waitForChanges();
+      await expect(clearButton).toBeFocused();
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      await expect(selectedDay).toHaveCount(0);
+    });
+    test('should navigate through months via right arrow key', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-datetime value="2022-02-28"></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const calendarBody = page.locator('.calendar-body');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await calendarBody.focus();
+      await page.waitForChanges();
+      await page.keyboard.press('ArrowRight');
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('March 2022');
+    });
+  });
+});

package/dist/collection/components/datetime/test/disabled/datetime.e2e.js

@@ -0,0 +1,68 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('datetime: disabled'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-05T00:00:00" min="2022-01-01T00:00:00" max="2022-02-20T23:59:59" day-values="5,6,10,11,15,16,20" show-default-buttons disabled></ion-datetime>
+    `, config);
+      const datetime = page.locator('ion-datetime');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-disabled`));
+    });
+    test('date should be disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
+      await expect(febFirstButton).toBeDisabled();
+    });
+    test('month-year button should be disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await expect(calendarMonthYear.locator('button')).toBeDisabled();
+    });
+    test('next and prev buttons should be disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:first-of-type button');
+      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:last-of-type button');
+      await expect(prevMonthButton).toBeDisabled();
+      await expect(nextMonthButton).toBeDisabled();
+    });
+    test('clear button should be disabled', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const clearButton = page.locator('#clear-button button');
+      await expect(clearButton).toBeDisabled();
+    });
+    test('should not navigate through months via right arrow key', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const calendarBody = page.locator('.calendar-body');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await calendarBody.focus();
+      await page.waitForChanges();
+      await page.keyboard.press('ArrowRight');
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('February 2022');
+    });
+  });
+});

package/dist/collection/components/datetime/test/readonly/datetime.e2e.js

@@ -0,0 +1,113 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('datetime: readonly'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-05T00:00:00" min="2022-01-01T00:00:00" max="2022-02-20T23:59:59" day-values="5,6,10,11,15,16,20" show-default-buttons readonly></ion-datetime>
+    `, config);
+      const datetime = page.locator('ion-datetime');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-readonly`));
+    });
+    test('date should be disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" readonly></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
+      await expect(febFirstButton).toBeDisabled();
+    });
+    test('should navigate months via month-year button', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `, config);
+      const ionChange = await page.spyOnEvent('ionChange');
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await calendarMonthYear.click();
+      await page.waitForChanges();
+      await page.locator('.month-column .picker-item[data-value="3"]').click();
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('March 2022');
+      await expect(ionChange).not.toHaveReceivedEvent();
+    });
+    test('should open picker using keyboard navigation', async ({ page, browserName }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `, config);
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await page.keyboard.press(tabKey);
+      await expect(monthYearButton).toBeFocused();
+      await page.waitForChanges();
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      const marchPickerItem = page.locator('.month-column .picker-item[data-value="3"]');
+      await expect(marchPickerItem).toBeVisible();
+    });
+    test('should view next month via next button', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `, config);
+      const ionChange = await page.spyOnEvent('ionChange');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button + ion-button');
+      await nextMonthButton.click();
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('March 2022');
+      await expect(ionChange).not.toHaveReceivedEvent();
+    });
+    test('should not change value when the month is changed via keyboard navigation', async ({ page, browserName }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `, config);
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+      const datetime = page.locator('ion-datetime');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
+      const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await page.keyboard.press(tabKey);
+      await expect(monthYearButton).toBeFocused();
+      await page.keyboard.press(tabKey);
+      await expect(prevButton).toBeFocused();
+      await page.keyboard.press(tabKey);
+      await expect(nextButton).toBeFocused();
+      // check value before & after selecting via keyboard
+      const initialValue = await datetime.evaluate((el) => el.value);
+      expect(initialValue).toBe('2022-02-22T16:30:00');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+      await page.keyboard.press('ArrowLeft');
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('January 2022');
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      const newValue = await datetime.evaluate((el) => el.value);
+      // should not have changed
+      expect(newValue).toBe('2022-02-22T16:30:00');
+    });
+    test('clear button should be disabled', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" readonly></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const clearButton = page.locator('#clear-button button');
+      await expect(clearButton).toBeDisabled();
+    });
+  });
+});

package/dist/collection/components/fab/fab.css

@@ -146,49 +146,37 @@
   margin-inline-end: auto;
 }
 
-@supports (inset-inline-start: 0) {
-  :host(.fab-horizontal-start) {
-    inset-inline-start: calc(10px + var(--ion-safe-area-left, 0px));
-  }
+:host(.fab-horizontal-start) {
+  /* stylelint-disable */
+  left: calc(10px + var(--ion-safe-area-left, 0px));
+  /* stylelint-enable */
 }
-@supports not (inset-inline-start: 0) {
-  :host(.fab-horizontal-start) {
-    left: calc(10px + var(--ion-safe-area-left, 0px));
-  }
-  :host-context([dir=rtl]):host(.fab-horizontal-start), :host-context([dir=rtl]).fab-horizontal-start {
+:host-context([dir=rtl]):host(.fab-horizontal-start), :host-context([dir=rtl]).fab-horizontal-start {
+  right: calc(10px + var(--ion-safe-area-right, 0px));
+  left: unset;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.fab-horizontal-start:dir(rtl)) {
+    right: calc(10px + var(--ion-safe-area-right, 0px));
     left: unset;
-    right: unset;
-    right: calc(10px + var(--ion-safe-area-left, 0px));
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.fab-horizontal-start):dir(rtl) {
-      left: unset;
-      right: unset;
-      right: calc(10px + var(--ion-safe-area-left, 0px));
-    }
   }
 }
 
-@supports (inset-inline-start: 0) {
-  :host(.fab-horizontal-end) {
-    inset-inline-end: calc(10px + var(--ion-safe-area-right, 0px));
-  }
+:host(.fab-horizontal-end) {
+  /* stylelint-disable */
+  right: calc(10px + var(--ion-safe-area-right, 0px));
+  /* stylelint-enable */
 }
-@supports not (inset-inline-start: 0) {
-  :host(.fab-horizontal-end) {
-    right: calc(10px + var(--ion-safe-area-right, 0px));
-  }
-  :host-context([dir=rtl]):host(.fab-horizontal-end), :host-context([dir=rtl]).fab-horizontal-end {
-    left: unset;
+:host-context([dir=rtl]):host(.fab-horizontal-end), :host-context([dir=rtl]).fab-horizontal-end {
+  left: calc(10px + var(--ion-safe-area-left, 0px));
+  right: unset;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.fab-horizontal-end:dir(rtl)) {
+    left: calc(10px + var(--ion-safe-area-left, 0px));
     right: unset;
-    left: calc(10px + var(--ion-safe-area-right, 0px));
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.fab-horizontal-end):dir(rtl) {
-      left: unset;
-      right: unset;
-      left: calc(10px + var(--ion-safe-area-right, 0px));
-    }
   }
 }
 

package/dist/collection/components/fab/test/safe-area/fab.e2e.js

@@ -0,0 +1,63 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('fab: safe area'), () => {
+    test('should ignore document direction in safe area positioning for start-positioned fab', async ({ page }) => {
+      await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-content>
+            <ion-fab vertical="center" horizontal="start">
+              <ion-fab-button>
+                <ion-icon name="add"></ion-icon>
+              </ion-fab-button>
+            </ion-fab>
+          </ion-content>
+        `, config);
+      /**
+       * We need to capture the entire page to check the fab's position,
+       * but we don't need much extra white space.
+       */
+      await page.setViewportSize({
+        width: 200,
+        height: 200,
+      });
+      await expect(page).toHaveScreenshot(screenshot('fab-safe-area-horizontal-start'));
+    });
+    test('should ignore document direction in safe area positioning for end-positioned fab', async ({ page }) => {
+      await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-content>
+            <ion-fab vertical="center" horizontal="end">
+              <ion-fab-button>
+                <ion-icon name="add"></ion-icon>
+              </ion-fab-button>
+            </ion-fab>
+          </ion-content>
+        `, config);
+      /**
+       * We need to capture the entire page to check the fab's position,
+       * but we don't need much extra white space.
+       */
+      await page.setViewportSize({
+        width: 200,
+        height: 200,
+      });
+      await expect(page).toHaveScreenshot(screenshot('fab-safe-area-horizontal-end'));
+    });
+  });
+});

package/dist/collection/components/fab-list/fab-list.css

@@ -155,7 +155,7 @@
     left: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.fab-list-side-start):dir(rtl) {
+    :host(.fab-list-side-start:dir(rtl)) {
       left: unset;
       right: unset;
       left: 0;
@@ -187,7 +187,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.fab-list-side-end):dir(rtl) {
+    :host(.fab-list-side-end:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

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

@@ -194,7 +194,10 @@ ion-header ion-toolbar:first-of-type {
  * 2. This will only apply when that content has a collapse header (ion-header[collapse="condense"])
  *
  * We use opacity: 0 to avoid a layout shift.
+ * We target both the attribute and the class in the event that the attribute
+ * is not reflected on the host in some frameworks.
  */
-ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse=condense]) {
+ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse=condense],
+~ ion-content ion-header.header-collapse-condense) {
   opacity: 0;
 }

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

@@ -121,6 +121,20 @@
   --highlight-color-focused: var(--ion-color-base);
 }
 
+:host(:not(.legacy-input)) {
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the input text.
+ */
+:host(.input-label-placement-floating),
+:host(.input-label-placement-stacked) {
+  min-height: 56px;
+}
+
 .native-input {
   padding-left: 0;
   padding-right: 0;
@@ -576,7 +590,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.input-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.input-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.input-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.input-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -720,20 +734,6 @@
   height: 18px;
 }
 
-:host(:not(.legacy-input)) {
-  min-height: 44px;
-}
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the input text.
- */
-:host(.input-label-placement-floating),
-:host(.input-label-placement-stacked) {
-  min-height: 56px;
-}
-
 :host(.legacy-input) .native-input[disabled],
 :host(.input-disabled) {
   opacity: 0.3;

package/dist/collection/components/input/input.js

@@ -3,7 +3,7 @@
  */
 import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from "../../utils/helpers";
+import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes, componentOnReady, } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -207,7 +207,14 @@ export class Input {
   /**
    * Returns the native `<input>` element used under the hood.
    */
-  getInputElement() {
+  async getInputElement() {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.nativeInput) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
     return Promise.resolve(this.nativeInput);
   }
   /**

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

@@ -121,6 +121,20 @@
   --highlight-color-focused: var(--ion-color-base);
 }
 
+:host(:not(.legacy-input)) {
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the input text.
+ */
+:host(.input-label-placement-floating),
+:host(.input-label-placement-stacked) {
+  min-height: 56px;
+}
+
 .native-input {
   padding-left: 0;
   padding-right: 0;
@@ -576,7 +590,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.input-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.input-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.input-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.input-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -734,6 +748,7 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 /**
@@ -796,7 +811,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.input-fill-solid) .input-wrapper:dir(rtl) {
+  :host(.input-fill-solid:dir(rtl)) .input-wrapper {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0px;
@@ -852,6 +867,7 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 :host(.input-fill-outline.input-shape-round) {
@@ -920,7 +936,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.input-fill-outline.input-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.input-fill-outline.input-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -1057,7 +1073,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.input-fill-outline) .input-outline-start:dir(rtl) {
+  :host(.input-fill-outline:dir(rtl)) .input-outline-start {
     border-top-left-radius: 0px;
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
@@ -1086,7 +1102,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.input-fill-outline) .input-outline-end:dir(rtl) {
+  :host(.input-fill-outline:dir(rtl)) .input-outline-end {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
@@ -1182,10 +1198,6 @@
   letter-spacing: 0.0333333333em;
 }
 
-:host(:not(.legacy-input)) {
-  min-height: 56px;
-}
-
 /**
  * When the input is focused the label should
  * take on the highlight color. This should
@@ -1267,7 +1279,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.in-item) .input-highlight:dir(rtl) {
+    :host(.in-item:dir(rtl)) .input-highlight {
       left: unset;
       right: unset;
       right: 0;