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

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

@@ -22,13 +22,8 @@ export class SplitPane {
         this.when = QUERY['lg'];
     }
     visibleChanged(visible) {
-        this.ionSplitPaneVisible.emit({ visible });
-    }
-    /**
-     * @internal
-     */
-    async isVisible() {
-        return Promise.resolve(this.visible);
+        const detail = { visible, isPane: this.isPane.bind(this) };
+        this.ionSplitPaneVisible.emit(detail);
     }
     async connectedCallback() {
         // TODO: connectedCallback is fired in CE build
@@ -36,7 +31,7 @@ export class SplitPane {
         if (typeof customElements !== 'undefined' && customElements != null) {
             await customElements.whenDefined('ion-split-pane');
         }
-        this.styleMainElement();
+        this.styleChildren();
         this.updateState();
     }
     disconnectedCallback() {
@@ -81,16 +76,13 @@ export class SplitPane {
         this.rmL = () => mediaList.removeListener(callback);
         this.visible = mediaList.matches;
     }
-    /**
-     * 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() {
+    isPane(element) {
+        if (!this.visible) {
+            return false;
+        }
+        return element.parentElement === this.el && element.classList.contains(SPLIT_PANE_SIDE);
+    }
+    styleChildren() {
         if (!Build.isBrowser) {
             return;
         }
@@ -106,11 +98,9 @@ export class SplitPane {
                     console.warn('split pane cannot have more than one main node');
                     return;
                 }
-                else {
-                    setPaneClass(child, isMain);
-                    foundMain = true;
-                }
+                foundMain = true;
             }
+            setPaneClass(child, isMain);
         }
         if (!foundMain) {
             console.warn('split pane does not have a specified main node');
@@ -118,12 +108,12 @@ export class SplitPane {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '0db6318902ee7c95d5ded58299bb07a25388bf5c', class: {
+        return (h(Host, { key: '3efe241375d23ae12c47927aa1fc1f3f4b4e5807', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '504c0e4cc42840a4349c7a59eb111844d97d0bf2' })));
+            } }, h("slot", { key: 'd5c94319658e2291dcc356e6ed7a9abc1a48a8b9' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }
@@ -219,30 +209,6 @@ 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,14 +127,31 @@
   contain: strict;
 }
 
+/**
+ * Do not pass CSS Variables down on larger
+ * screens as we want them to affect the outer
+ * `ion-menu` rather than the inner content
+ */
+::slotted(ion-menu.menu-pane-visible) {
+  flex: 0 1 auto;
+  width: var(--side-width);
+  min-width: var(--side-min-width);
+  max-width: var(--side-max-width);
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-side),
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   position: relative;
-  flex: 1;
   box-shadow: none;
+  z-index: 0;
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-main) {
+  flex: 1;
   /**
    * Content can overflow outside of a router outlet
    * or a nav container to allow for the translucent
@@ -144,13 +161,26 @@
    * we disable the overflow when that is the case.
    */
   overflow: hidden;
-  z-index: 0;
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),
+:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled) {
+  display: flex;
+  flex-shrink: 0;
 }
 
 ::slotted(.split-pane-side:not(ion-menu)) {
   display: none;
 }
 
+:host(.split-pane-visible) ::slotted(.split-pane-side) {
+  order: -1;
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
+  order: 1;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -207,7 +237,29 @@
  * }
  */
 :host {
-  --border: 1px solid 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: 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/tab/tab.js

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

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

@@ -230,11 +230,11 @@
  * }
  */
 :host {
-  --background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));
+  --background: var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7));
   --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, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));
-  --color: var(--ion-tab-bar-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666)));
-  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));
+  --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));
   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: '8173f126d617337f8b46df105d0bce9ddc68b515', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'e2b4b50270f171ed251359df6c65c5e7e4d526a4', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '348c9126898f7403dee1fff6a63f7b8bebdea035' })));
+            }) }, h("slot", { key: '37495b2eddd01a758ceaeb36426abc9bd20bcca3' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -232,8 +232,8 @@
 :host {
   --background: var(--ion-tab-bar-background, var(--ion-background-color, #fff));
   --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, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07)))));
-  --color: var(--ion-tab-bar-color, var(--ion-color-step-650, var(--ion-text-color-step-350, #595959)));
-  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));
+  --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));
   height: 56px;
 }

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

@@ -301,14 +301,38 @@ ion-ripple-effect {
   font-size: 12px;
   line-height: 16px;
 }
-::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 6px);
+@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-icon) {
   margin-top: 2px;
   margin-bottom: 2px;
-  font-size: 24px;
+  font-size: 30px;
 }
 
 ::slotted(ion-icon::before) {
@@ -350,8 +374,27 @@ ion-ripple-effect {
   font-size: 24px;
 }
 
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 12px);
+@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-icon) {
@@ -367,18 +410,58 @@ ion-ripple-effect {
 :host(.tab-layout-icon-end) ::slotted(ion-badge) {
   top: 10px;
 }
-:host(.tab-layout-icon-start) ::slotted(ion-badge),
-:host(.tab-layout-icon-end) ::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 35px);
+@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-hide) ::slotted(ion-badge),
 :host(.tab-has-label-only) ::slotted(ion-badge) {
   top: 10px;
 }
-:host(.tab-layout-icon-hide) ::slotted(ion-badge),
-:host(.tab-has-label-only) ::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 30px);
+@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-label-hide) ::slotted(ion-badge),
@@ -391,9 +474,4 @@ 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: '1a3c381bb81e1c0dfcdfb2e58e1fe74c2c7a56ac', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '9926f9392e7910ff3159397e4f907e0d7d2cf5a0', 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: 'f12a66bc4f869a25d203a042757ecb331cb1598c' }, 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: 'e7a5bdec004ae80cc479911ad2aab1e4decff3bc', class: "button-inner" }, h("slot", { key: '07f1d1704fdf3ef45da4b698eaec1164b3fc0bf4' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            } }, 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" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -334,8 +334,32 @@ ion-ripple-effect {
   font-size: 8px;
   font-weight: normal;
 }
-::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 6px);
+@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:empty) {
@@ -357,8 +381,27 @@ ion-ripple-effect {
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
   top: 8px;
 }
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-  inset-inline-start: 70%;
+@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-icon) {
@@ -375,9 +418,29 @@ ion-ripple-effect {
 :host(.tab-layout-icon-end) ::slotted(ion-badge) {
   top: 16px;
 }
-:host(.tab-layout-icon-start) ::slotted(ion-badge),
-:host(.tab-layout-icon-end) ::slotted(ion-badge) {
-  inset-inline-start: 80%;
+@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-icon) {
@@ -394,9 +457,29 @@ ion-ripple-effect {
 :host(.tab-has-label-only) ::slotted(ion-badge) {
   top: 16px;
 }
-:host(.tab-layout-icon-hide) ::slotted(ion-badge),
-:host(.tab-has-label-only) ::slotted(ion-badge) {
-  inset-inline-start: 70%;
+@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-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: '27416d233c9b2b14498f7d77cd809b26a37da75b', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '19f237ba72e75f5bb7fbe35bee7e91a19566a724', name: "top" }), h("div", { key: '01143ca8a853eec525311c9f9fa521867f06f767', class: "tabs-inner" }, h("slot", { key: '790f8c417135a64e6ee4c8fa5ad309d6d0cd00de' })), h("slot", { key: '016959a52e07dcff0b86e7db0794e2d1747b3609', name: "bottom" })));
+        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" })));
     }
     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: '03c3424a63ff7c436d73f759c6e5a30133e1871f', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8922ebdd7486c9cb9f9b547a49e5be2261df4ba1', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '0c6c873cf28a093dd45441dff7c3a5b382bc2a9b' })));
+            }) }, h("slot", { key: '164cbd0f81a00adfac04f544524e905f721c121c' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,52 +4,14 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('textarea: a11y'), () => {
-        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);
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.goto(`/src/components/textarea/test/a11y`, 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(`

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

@@ -0,0 +1,31 @@
+/*!
+ * (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('textarea: a11y'), () => {
+        test('does not set a default aria-labelledby when there is not a neighboring ion-label', async ({ page }) => {
+            await page.setContent(`<ion-textarea></ion-textarea>`, config);
+            await page.setIonViewport();
+            const textarea = page.locator('ion-textarea textarea');
+            const ariaLabelledBy = await textarea.getAttribute('aria-labelledby');
+            expect(ariaLabelledBy).toBe(null);
+        });
+        test('set a default aria-labelledby when a neighboring ion-label exist', async ({ page }) => {
+            await page.setContent(`
+        <ion-item>
+          <ion-label>A11y Test</ion-label>
+          <ion-textarea></ion-textarea>
+        </ion-item>
+      `, config);
+            const label = page.locator('ion-label');
+            const textarea = page.locator('ion-textarea textarea');
+            const ariaLabelledBy = await textarea.getAttribute('aria-labelledby');
+            expect(ariaLabelledBy).toBe(await label.getAttribute('id'));
+        });
+    });
+});