@ionic/core 7.7.1 → 7.7.2-dev.11707425083.192d8103

package/dist/collection/components/split-pane/split-pane.js

@@ -22,8 +22,13 @@ export class SplitPane {
         this.when = QUERY['lg'];
     }
     visibleChanged(visible) {
-        const detail = { visible, isPane: this.isPane.bind(this) };
-        this.ionSplitPaneVisible.emit(detail);
+        this.ionSplitPaneVisible.emit({ visible });
+    }
+    /**
+     * @internal
+     */
+    async isVisible() {
+        return Promise.resolve(this.visible);
     }
     async connectedCallback() {
         // TODO: connectedCallback is fired in CE build
@@ -31,7 +36,7 @@ export class SplitPane {
         if (typeof customElements !== 'undefined' && customElements != null) {
             await customElements.whenDefined('ion-split-pane');
         }
-        this.styleChildren();
+        this.styleMainElement();
         this.updateState();
     }
     disconnectedCallback() {
@@ -76,13 +81,16 @@ export class SplitPane {
         this.rmL = () => mediaList.removeListener(callback);
         this.visible = mediaList.matches;
     }
-    isPane(element) {
-        if (!this.visible) {
-            return false;
-        }
-        return element.parentElement === this.el && element.classList.contains(SPLIT_PANE_SIDE);
-    }
-    styleChildren() {
+    /**
+     * Attempt to find the main content
+     * element inside of the split pane.
+     * If found, set it as the main node.
+     *
+     * We assume that the main node
+     * is available in the DOM on split
+     * pane load.
+     */
+    styleMainElement() {
         if (!Build.isBrowser) {
             return;
         }
@@ -98,9 +106,11 @@ export class SplitPane {
                     console.warn('split pane cannot have more than one main node');
                     return;
                 }
-                foundMain = true;
+                else {
+                    setPaneClass(child, isMain);
+                    foundMain = true;
+                }
             }
-            setPaneClass(child, isMain);
         }
         if (!foundMain) {
             console.warn('split pane does not have a specified main node');
@@ -108,12 +118,12 @@ export class SplitPane {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '3efe241375d23ae12c47927aa1fc1f3f4b4e5807', class: {
+        return (h(Host, { key: 'c89daae42e3020875aad5c314926be76601c55ce', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'd5c94319658e2291dcc356e6ed7a9abc1a48a8b9' })));
+            } }, h("slot", { key: '17ae3001a74357b6747ba55ddba8aa72538e4f27' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }
@@ -209,6 +219,30 @@ export class SplitPane {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "isVisible": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

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

@@ -127,31 +127,14 @@
   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;
-  box-shadow: none;
-  z-index: 0;
-}
-
-:host(.split-pane-visible) ::slotted(.split-pane-main) {
   flex: 1;
+  box-shadow: none;
   /**
    * Content can overflow outside of a router outlet
    * or a nav container to allow for the translucent
@@ -161,26 +144,13 @@
    * we disable the overflow when that is the case.
    */
   overflow: hidden;
-}
-
-: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;
+  z-index: 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
@@ -240,26 +210,4 @@
   --border: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
   --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);
 }

package/dist/collection/components/split-pane/test/wrapped-menu/split-pane.e2e.js

@@ -0,0 +1,41 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test, Viewports } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => {
+    test.describe(title('split-pane: functionality'), () => {
+        test('should be visible on larger viewports', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/16304',
+            });
+            await page.setViewportSize(Viewports.large);
+            await page.goto(`/src/components/split-pane/test/wrapped-menu`, config);
+            const menu = page.locator('ion-menu');
+            await expect(menu).toBeVisible();
+        });
+        test('should be visible on larger viewports when added async', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/16304',
+            });
+            await page.setViewportSize(Viewports.large);
+            await page.goto(`/src/components/split-pane/test/wrapped-menu`, config);
+            // Asynchronously add a second menu
+            await page.evaluate(() => {
+                const menu = document.createElement('app-menu');
+                menu.setAttribute('side', 'end');
+                const splitPane = document.querySelector('ion-split-pane');
+                splitPane.appendChild(menu);
+            });
+            const menus = page.locator('ion-menu');
+            const menuButton = page.locator('ion-menu-button');
+            await expect(menus).toHaveCount(2);
+            await expect(menus.nth(0)).toBeVisible();
+            await expect(menus.nth(1)).toBeVisible();
+            // Menu button should be hidden because menus are visible
+            await expect(menuButton).toBeHidden();
+        });
+    });
+});

package/dist/collection/components/tab/tab.js

@@ -48,10 +48,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '0f4b90f0b1027e89bd447ace17af31c8e155a827', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '369dd8d5dc5619d2d9d78b3743c5b8420ff1e13e', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'ec3eaacf8b7085510e89273aa8373805ee98a381' })));
+            } }, h("slot", { key: 'e8d13f9312fcc5d0d0c758407c1705c6cf19cae7' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -234,7 +234,7 @@
   --background-focused: var(--ion-tab-bar-background-focused, #e0e0e0);
   --border: 0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));
   --color: var(--ion-tab-bar-color, var(--ion-color-step-600, #666666));
-  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #3880ff));
+  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));
   height: 50px;
 }
 

package/dist/collection/components/tab-bar/tab-bar.js

@@ -51,11 +51,11 @@ export class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: 'e2b4b50270f171ed251359df6c65c5e7e4d526a4', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '8afabb5bcd2eefdf42cffb618cced86cb8977f8c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '37495b2eddd01a758ceaeb36426abc9bd20bcca3' })));
+            }) }, h("slot", { key: '1d672d4291a1df5397febc91f90846db73bb4a37' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -234,6 +234,6 @@
   --background-focused: var(--ion-tab-bar-background-focused, #e0e0e0);
   --border: 1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.07))));
   --color: var(--ion-tab-bar-color, var(--ion-color-step-650, #595959));
-  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #3880ff));
+  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));
   height: 56px;
 }

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

@@ -301,38 +301,14 @@ ion-ripple-effect {
   font-size: 12px;
   line-height: 16px;
 }
-@supports (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 6px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    left: calc(50% + 6px);
-  }
-  :host-context([dir=rtl]) ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  [dir=rtl] ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  @supports selector(:dir(rtl)) {
-    ::slotted(ion-badge):dir(rtl) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 6px);
-    }
-  }
+::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 6px);
 }
 
 ::slotted(ion-icon) {
   margin-top: 2px;
   margin-bottom: 2px;
-  font-size: 30px;
+  font-size: 24px;
 }
 
 ::slotted(ion-icon::before) {
@@ -374,27 +350,8 @@ ion-ripple-effect {
   font-size: 24px;
 }
 
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 12px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    left: calc(50% + 12px);
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 12px);
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 12px);
-    }
-  }
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 12px);
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-icon) {
@@ -410,58 +367,18 @@ ion-ripple-effect {
 :host(.tab-layout-icon-end) ::slotted(ion-badge) {
   top: 10px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 35px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    left: calc(50% + 35px);
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 35px);
-  }
-  @supports selector(: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);
-    }
-  }
+:host(.tab-layout-icon-start) ::slotted(ion-badge),
+:host(.tab-layout-icon-end) ::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 35px);
 }
 
 :host(.tab-layout-icon-hide) ::slotted(ion-badge),
 :host(.tab-has-label-only) ::slotted(ion-badge) {
   top: 10px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 30px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    left: calc(50% + 30px);
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge), :host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 30px);
-  }
-  @supports selector(: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);
-    }
-  }
+:host(.tab-layout-icon-hide) ::slotted(ion-badge),
+:host(.tab-has-label-only) ::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 30px);
 }
 
 :host(.tab-layout-label-hide) ::slotted(ion-badge),
@@ -474,4 +391,9 @@ ion-ripple-effect {
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
+}
+
+:host(.tab-layout-label-hide) ::slotted(ion-icon),
+:host(.tab-has-icon-only) ::slotted(ion-icon) {
+  font-size: 30px;
 }

package/dist/collection/components/tab-button/tab-button.js

@@ -70,7 +70,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '9926f9392e7910ff3159397e4f907e0d7d2cf5a0', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'eff59816bdb4fa3d7a27635d22e0d8ce4c145776', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -82,7 +82,7 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: '4b3ace749583a5502e94462f9a70c5158fe0194a' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'a2a30c02fbd5052da12586a5ab00a45f3bf53b88', class: "button-inner" }, h("slot", { key: '3fb22ffbb09000d99537b531220c029330ae6940' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '83190250ab39acf0a5b4a4f03c7cae760760a3f9' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'd50819d232ccb2d4f0d9d6267cbd667acb41e45b', class: "button-inner" }, h("slot", { key: '4d43a0ba6177ac0f76717996d3a7122655a0e106' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -334,32 +334,8 @@ ion-ripple-effect {
   font-size: 8px;
   font-weight: normal;
 }
-@supports (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 6px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    left: calc(50% + 6px);
-  }
-  :host-context([dir=rtl]) ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  [dir=rtl] ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  @supports selector(:dir(rtl)) {
-    ::slotted(ion-badge):dir(rtl) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 6px);
-    }
-  }
+::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 6px);
 }
 
 ::slotted(ion-badge:empty) {
@@ -381,27 +357,8 @@ ion-ripple-effect {
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
   top: 8px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    inset-inline-start: 70%;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    left: 70%;
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: 70%;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: 70%;
-    }
-  }
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
+  inset-inline-start: 70%;
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-icon) {
@@ -418,29 +375,9 @@ ion-ripple-effect {
 :host(.tab-layout-icon-end) ::slotted(ion-badge) {
   top: 16px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    inset-inline-start: 80%;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    left: 80%;
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: 80%;
-  }
-  @supports selector(: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%;
-    }
-  }
+:host(.tab-layout-icon-start) ::slotted(ion-badge),
+:host(.tab-layout-icon-end) ::slotted(ion-badge) {
+  inset-inline-start: 80%;
 }
 
 :host(.tab-layout-icon-start) ::slotted(ion-icon) {
@@ -457,29 +394,9 @@ ion-ripple-effect {
 :host(.tab-has-label-only) ::slotted(ion-badge) {
   top: 16px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    inset-inline-start: 70%;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    left: 70%;
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge), :host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: 70%;
-  }
-  @supports selector(: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%;
-    }
-  }
+:host(.tab-layout-icon-hide) ::slotted(ion-badge),
+:host(.tab-has-label-only) ::slotted(ion-badge) {
+  inset-inline-start: 70%;
 }
 
 :host(.tab-layout-icon-hide) ::slotted(ion-label),

package/dist/collection/components/tabs/tabs.js

@@ -135,7 +135,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '9044f05f4716fd9c158864175290dfb044e63539', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '178492f52f15a042e47531007a3564a935847818', name: "top" }), h("div", { key: 'b3affaaeb7752194acde36d9de74dbe2b3280cd1', class: "tabs-inner" }, h("slot", { key: '98f0f4e2903f1a6cec041e06b75073c57960a912' })), h("slot", { key: '0899482561bdaf35e97e5a40860c40978daca03a', name: "bottom" })));
+        return (h(Host, { key: 'f134d00f78bb3c565790e132e053155352995f7a', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '720ce0c78267afc3acfa77cf45587d111f8fce4c', name: "top" }), h("div", { key: 'a362d57e3aeb5443b091c6e3f4cc7b36ebd194ee', class: "tabs-inner" }, h("slot", { key: '9781b2af7c172f42fd6788d9c36f2718815c610e' })), h("slot", { key: 'd0e005504797010087119b7b1b9fb55360a1b39d', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,9 +13,9 @@ export class Text {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8922ebdd7486c9cb9f9b547a49e5be2261df4ba1', class: createColorClasses(this.color, {
+        return (h(Host, { key: '3ee88809943d32e69c9cc0813fa981d218b28b82', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '164cbd0f81a00adfac04f544524e905f721c121c' })));
+            }) }, h("slot", { key: '2e8e0c60773ea905deb9295a424402edd07217d9' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,14 +4,52 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('textarea: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/textarea/test/a11y`, config);
+        test('default layout should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <main>
+          <ion-textarea label="Label" placeholder="Placeholder"></ion-textarea>
+          <ion-textarea placeholder="Placeholder">
+            <div slot="label">Label"></div>
+          </ion-textarea>
+          <ion-textarea label="Label" value="My Text"></ion-textarea>
+          <ion-textarea aria-label="Label"></ion-textarea>
+          <ion-textarea label="Email" label-placement="floating" fill="solid" value="hi@ionic.io">
+            <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
+            <ion-button slot="end" aria-label="button">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
+          </ion-textarea>
+        </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-textarea class="has-focus" label="Label" value="My Text"></ion-textarea>
+          <ion-textarea class="has-focus" label-placement="floating" label="Label" value="My Text"></ion-textarea>
+          <ion-textarea class="has-focus" fill="outline" label-placement="floating" label="Label" value="My Text"></ion-textarea>
+        </main>
+      `, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
     });
+});
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('textarea: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {
             await page.setContent(`