@ionic/core 7.5.1 → 7.5.2-nightly.20231019

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

@@ -43,16 +43,6 @@
   font-family: var(--ion-font-family, inherit);
 }
 
-:host(.in-list.item-options-end:last-child) {
-  -webkit-padding-end: calc(0.7em + var(--ion-safe-area-right));
-  padding-inline-end: calc(0.7em + var(--ion-safe-area-right));
-}
-
-:host(.in-list.item-options-start:first-child) {
-  -webkit-padding-start: calc(0.7em + var(--ion-safe-area-left));
-  padding-inline-start: calc(0.7em + var(--ion-safe-area-left));
-}
-
 :host(.ion-color) {
   background: var(--ion-color-base);
   color: var(--ion-color-contrast);

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

@@ -83,3 +83,80 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
     });
   });
 });
+/**
+ * This behavior needs to be tested in both modes and directions to
+ * make sure the safe area padding is applied only to that side
+ * regardless of direction
+ */
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('item-sliding: basic'), () => {
+    test.describe('safe area left', () => {
+      test('should have padding on the left only', async ({ page }) => {
+        await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+            }
+          </style>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="primary">
+                Archive
+              </ion-item-option>
+              <ion-item-option color="danger">
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>
+                Sliding Item
+              </ion-label>
+            </ion-item>
+          </ion-item-sliding>
+        `, config);
+        const direction = config.direction;
+        const item = page.locator('ion-item-sliding');
+        const dragByX = direction == 'rtl' ? -150 : 150;
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-left`));
+      });
+    });
+    test.describe('safe area right', () => {
+      test('should have padding on the right only', async ({ page }) => {
+        await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-right: 40px;
+            }
+          </style>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>
+                Sliding Item
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options side="end">
+              <ion-item-option color="primary">
+                Archive
+              </ion-item-option>
+              <ion-item-option color="danger">
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        `, config);
+        const direction = config.direction;
+        const item = page.locator('ion-item-sliding');
+        const dragByX = direction == 'rtl' ? 150 : -150;
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-right`));
+      });
+    });
+  });
+});

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

@@ -186,7 +186,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.label-floating):dir(rtl) {
+  :host(.label-floating:dir(rtl)) {
     transform-origin: right top;
   }
 }

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

@@ -114,7 +114,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-start) .menu-inner:dir(rtl) {
+    :host(.menu-side-start:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: auto;
@@ -142,7 +142,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-start) .menu-inner:dir(rtl) {
+  :host(.menu-side-start:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it
@@ -197,7 +197,7 @@
     right: auto;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-end) .menu-inner:dir(rtl) {
+    :host(.menu-side-end:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: 0;
@@ -225,7 +225,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-end) .menu-inner:dir(rtl) {
+  :host(.menu-side-end:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it

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

@@ -114,7 +114,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-start) .menu-inner:dir(rtl) {
+    :host(.menu-side-start:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: auto;
@@ -142,7 +142,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-start) .menu-inner:dir(rtl) {
+  :host(.menu-side-start:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it
@@ -197,7 +197,7 @@
     right: auto;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-end) .menu-inner:dir(rtl) {
+    :host(.menu-side-end:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: 0;
@@ -225,7 +225,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-end) .menu-inner:dir(rtl) {
+  :host(.menu-side-end:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it

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

@@ -254,7 +254,7 @@ ion-backdrop {
     border-bottom-left-radius: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.modal-card) .modal-wrapper:dir(rtl) {
+    :host(.modal-card:dir(rtl)) .modal-wrapper {
       border-top-left-radius: var(--border-radius);
       border-top-right-radius: var(--border-radius);
       border-bottom-right-radius: 0;
@@ -304,7 +304,7 @@ ion-backdrop {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.modal-sheet) .modal-wrapper:dir(rtl) {
+  :host(.modal-sheet:dir(rtl)) .modal-wrapper {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0;

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

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

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

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

package/dist/collection/components/picker-internal/picker-internal.ios.css

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-before:dir(rtl) {
+    :host(:dir(rtl)) .picker-before {
       left: unset;
       right: unset;
       right: 0;
@@ -113,7 +113,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-after:dir(rtl) {
+    :host(:dir(rtl)) .picker-after {
       left: unset;
       right: unset;
       right: 0;

package/dist/collection/components/picker-internal/picker-internal.md.css

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-before:dir(rtl) {
+    :host(:dir(rtl)) .picker-before {
       left: unset;
       right: unset;
       right: 0;
@@ -113,7 +113,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-after:dir(rtl) {
+    :host(:dir(rtl)) .picker-after {
       left: unset;
       right: unset;
       right: 0;

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

@@ -138,7 +138,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-start):dir(rtl) {
+  :host(.popover-nested.popover-side-start:dir(rtl)) {
     --offset-x: -5px;
   }
 }
@@ -151,7 +151,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-end):dir(rtl) {
+  :host(.popover-nested.popover-side-end:dir(rtl)) {
     --offset-x: 5px;
   }
 }
@@ -284,7 +284,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-side-start) .popover-arrow:dir(rtl) {
+  :host(.popover-side-start:dir(rtl)) .popover-arrow {
     transform: rotate(-90deg);
   }
 }
@@ -297,7 +297,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-side-end) .popover-arrow:dir(rtl) {
+  :host(.popover-side-end:dir(rtl)) .popover-arrow {
     transform: rotate(90deg);
   }
 }

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

@@ -138,7 +138,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-start):dir(rtl) {
+  :host(.popover-nested.popover-side-start:dir(rtl)) {
     --offset-x: -5px;
   }
 }
@@ -151,7 +151,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-end):dir(rtl) {
+  :host(.popover-nested.popover-side-end:dir(rtl)) {
     --offset-x: 5px;
   }
 }

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

@@ -103,7 +103,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-radio) label:dir(rtl) {
+    :host(.legacy-radio:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -317,7 +317,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -330,7 +330,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }
@@ -463,7 +463,7 @@ input {
     right: -9px;
   }
   @supports selector(:dir(rtl)) {
-    :host(.ion-focused) .radio-icon::after:dir(rtl) {
+    :host(.ion-focused:dir(rtl)) .radio-icon::after {
       left: unset;
       right: unset;
       right: -9px;

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

@@ -103,7 +103,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-radio) label:dir(rtl) {
+    :host(.legacy-radio:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -317,7 +317,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -330,7 +330,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }
@@ -477,7 +477,7 @@ input {
     right: -12px;
   }
   @supports selector(:dir(rtl)) {
-    :host(.ion-focused.legacy-radio) .radio-icon::after:dir(rtl) {
+    :host(.ion-focused.legacy-radio:dir(rtl)) .radio-icon::after {
       left: unset;
       right: unset;
       right: -12px;

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

@@ -428,7 +428,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.range-label-placement-stacked) .label-text-wrapper:dir(rtl) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }

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

@@ -428,7 +428,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.range-label-placement-stacked) .label-text-wrapper:dir(rtl) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }

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

@@ -161,7 +161,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-select) label:dir(rtl) {
+    :host(.legacy-select:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;

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

@@ -161,7 +161,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-select) label:dir(rtl) {
+    :host(.legacy-select:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -716,7 +716,7 @@ button {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.select-fill-solid) .select-wrapper:dir(rtl) {
+  :host(.select-fill-solid:dir(rtl)) .select-wrapper {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0px;
@@ -1121,7 +1121,7 @@ button {
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.in-item) .select-highlight:dir(rtl) {
+    :host(.in-item:dir(rtl)) .select-highlight {
       left: unset;
       right: unset;
       right: 0;

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

@@ -345,7 +345,7 @@ ion-ripple-effect {
     right: calc(50% + 12px);
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-bottom) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: calc(50% + 12px);
@@ -383,7 +383,7 @@ ion-ripple-effect {
     right: calc(50% + 35px);
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-start) ::slotted(ion-badge):dir(rtl), :host(.tab-layout-icon-end) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge), :host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: calc(50% + 35px);
@@ -412,7 +412,7 @@ ion-ripple-effect {
     right: calc(50% + 30px);
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-hide) ::slotted(ion-badge):dir(rtl), :host(.tab-has-label-only) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge), :host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: calc(50% + 30px);

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

@@ -352,7 +352,7 @@ ion-ripple-effect {
     right: 70%;
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-bottom) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: 70%;
@@ -391,7 +391,7 @@ ion-ripple-effect {
     right: 80%;
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-start) ::slotted(ion-badge):dir(rtl), :host(.tab-layout-icon-end) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge), :host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: 80%;
@@ -430,7 +430,7 @@ ion-ripple-effect {
     right: 70%;
   }
   @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-hide) ::slotted(ion-badge):dir(rtl), :host(.tab-has-label-only) ::slotted(ion-badge):dir(rtl) {
+    :host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge), :host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge) {
       left: unset;
       right: unset;
       right: 70%;

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

@@ -643,7 +643,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.textarea-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }

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

@@ -643,7 +643,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.textarea-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -900,7 +900,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-solid) .textarea-wrapper:dir(rtl) {
+  :host(.textarea-fill-solid:dir(rtl)) .textarea-wrapper {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0px;
@@ -1024,7 +1024,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.textarea-fill-outline.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.textarea-fill-outline.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -1167,7 +1167,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline) .textarea-outline-start:dir(rtl) {
+  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-start {
     border-top-left-radius: 0px;
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
@@ -1196,7 +1196,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline) .textarea-outline-end:dir(rtl) {
+  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-end {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
@@ -1348,7 +1348,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.in-item) .textarea-highlight:dir(rtl) {
+    :host(.in-item:dir(rtl)) .textarea-highlight {
       left: unset;
       right: unset;
       right: 0;

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

@@ -93,7 +93,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;
@@ -155,7 +155,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.title-large) .toolbar-title:dir(rtl) {
+  :host(.title-large:dir(rtl)) .toolbar-title {
     transform-origin: calc(100% - inherit);
   }
 }

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

@@ -95,7 +95,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

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

@@ -95,7 +95,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

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

@@ -122,7 +122,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-toggle) label:dir(rtl) {
+    :host(.legacy-toggle:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -316,7 +316,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -329,7 +329,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }

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

@@ -122,7 +122,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-toggle) label:dir(rtl) {
+    :host(.legacy-toggle:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -316,7 +316,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -329,7 +329,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-10-18T13:21:21",
+  "timestamp": "2023-10-19T06:06:06",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.5.0",