voyager-ionic-core 7.7.3 → 8.0.0-beta.2

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

@@ -25,11 +25,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ee3cd9a5448fb69c8ddfc88a993f9968e1a381ff', class: {
+        return (h(Host, { key: 'f6b1a1888a3cac52acbeb4957ca32befd6bc52f8', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '8aa792724a3b77877062e9aae838d9e1572b576f' }, "\u00A0")));
+            } }, h("span", { key: '1e61b9d249f8e3bcb55c06de8311c224866b9632' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -39,7 +39,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '47cd6cd98e36e5b99fbe263a6a102610cae240c3', class: createColorClasses(self.color, {
+        return (h(Host, { key: 'd33d08486ee9d9069abbe37b17e58fc2c321a414', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/collection/components/split-pane/split-pane.ios.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
@@ -237,29 +207,7 @@
  * }
  */
 :host {
-  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
+  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
   --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/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: '0f83e45ded140540bf43da4c5ff2c3540cc3b74b', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'd5c94319658e2291dcc356e6ed7a9abc1a48a8b9' })));
+            } }, h("slot", { key: '77ff2487fa265f9f5e96fdffad80dc9c417f896a' })));
     }
     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
@@ -237,29 +207,7 @@
  * }
  */
 :host {
-  --border: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-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, var(--ion-background-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: '4892bdb4aab5f2e2bb08e78fd7f67b3902ada693', 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: 'd919df91de8fd547581329e566bddacac64509a0' })));
     }
     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, #f7f7f7));
+  --background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-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, 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));
+  --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));
   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: 'cbebdd59017a50a71e4e9e6ae831f4ca6eb64884', 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: 'b58c66562e91f3584a270c4c755c6bd8c165e634' })));
     }
     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, 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));
+  --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));
   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: '6cbc09067f12f3b643f2bfc3bdc1eddf81b00daa', 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: '5626f8bf8ddb30fb03773d816ec5fd6417d59391' }, 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: 'ad789c6d82860eed68fc6c56d15143f989756ba3', class: "button-inner" }, h("slot", { key: '1cf17817e025e371664bedcfd8268b452674159d' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }