@ionic/core 8.6.0 → 8.6.1-dev.11749483665.140e610d

package/dist/cjs/ion-split-pane.cjs.entry.js

@@ -3,11 +3,13 @@
  */
 'use strict';
 
-var index = require('./index-DODXXb_r.js');
+var index = require('./index-CmckMMX1.js');
 
-const splitPaneIosCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host{--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%}";
+const ionicSplitPaneMdCss = ":host{--side-width:100%;right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){right:0;left:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}: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)))));--side-min-width:270px;--side-max-width:28%}";
 
-const splitPaneMdCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}: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)))));--side-min-width:270px;--side-max-width:28%}";
+const splitPaneIosCss = ":host{--side-width:100%;right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){right:0;left:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host{--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%}";
+
+const splitPaneMdCss = ":host{--side-width:100%;right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){right:0;left:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}: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)))));--side-min-width:270px;--side-max-width:28%}";
 
 // TODO(FW-2832): types
 const SPLIT_PANE_MAIN = 'split-pane-main';
@@ -126,13 +128,13 @@ const SplitPane = class {
         }
     }
     render() {
-        const mode = index.getIonMode(this);
-        return (index.h(index.Host, { key: 'd5e30df12f1f1f855da4c66f98076b9dce762c59', class: {
-                [mode]: true,
+        const theme = index.getIonTheme(this);
+        return (index.h(index.Host, { key: '9d0c67f1f81b09bb9a6f14a66053e5cc7431a286', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`split-pane-${mode}`]: true,
+                [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, index.h("slot", { key: '3e30d7cf3bc1cf434e16876a0cb2a36377b8e00f' })));
+            } }, index.h("slot", { key: 'ab7b3050d3c5484bd00949cf57efa4396b4d5bc3' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -157,6 +159,7 @@ const setPaneClass = (el, isMain) => {
     classList.remove(toRemove);
 };
 SplitPane.style = {
+    ionic: ionicSplitPaneMdCss,
     ios: splitPaneIosCss,
     md: splitPaneMdCss
 };

package/dist/cjs/ion-tab-bar_2.cjs.entry.js

@@ -3,17 +3,19 @@
  */
 'use strict';
 
-var index = require('./index-DODXXb_r.js');
-var keyboardController = require('./keyboard-controller-GXBiBRKS.js');
+var index = require('./index-CmckMMX1.js');
+var keyboardController = require('./keyboard-controller-yLvXRMuh.js');
 var theme = require('./theme-CeDs6Hcv.js');
-var helpers = require('./helpers-BITAzJfi.js');
-require('./index-DkNv4J_i.js');
-require('./keyboard-UuAS4D_9.js');
-require('./capacitor-DmA66EwP.js');
+var helpers = require('./helpers-DmAvmm2T.js');
+require('./keyboard-Chl5cusY.js');
+require('./capacitor-CzFst28-.js');
+require('./focus-visible-BIj-I3-C.js');
 
-const tabBarIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-right:var(--ion-safe-area-right);padding-bottom:var(--ion-safe-area-bottom, 0);padding-left:var(--ion-safe-area-left);border-top:var(--border);background:var(--background);color:var(--color);text-align:center;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){background:var(--ion-color-base)}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0;border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host{--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, 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}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.tab-bar-translucent){--background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(210%) blur(20px);backdrop-filter:saturate(210%) blur(20px)}:host(.ion-color.tab-bar-translucent){background:rgba(var(--ion-color-base-rgb), 0.8)}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.6)}}";
+const tabBarIonicCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-top:var(--border);background:var(--background);color:var(--color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host(.tab-bar-full){width:auto;contain:strict;padding-bottom:var(--ion-safe-area-bottom, 0);padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);}:host([slot=top].tab-bar-full){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0}:host{--background:var(--ion-tab-bar-background, var(--ion-primitives-base-white, #ffffff));--background-activated:var(--ion-tab-bar-background-activated, var(--ion-primitives-neutral-100, #f5f5f5));--background-focused:var(--ion-tab-bar-background-focused, transparent);--border:var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);--color:var(--ion-tab-bar-color, var(--ion-primitives-neutral-800, #626262));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));min-height:calc(var(--ion-scale-1400, 56px) - var(--ion-space-100, var(--ion-scale-100, 4px)) * 2);gap:var(--ion-space-300, var(--ion-scale-300, 12px));-webkit-box-shadow:var(--ion-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));box-shadow:var(--ion-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));z-index:10}:host(.tab-bar-full){padding-top:var(--ion-space-100, var(--ion-scale-100, 4px));padding-bottom:calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));padding-right:calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-right, 0));padding-left:calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-left, 0));}:host([slot=top].tab-bar-full){padding-top:calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-top, 0));padding-bottom:var(--ion-space-100, var(--ion-scale-100, 4px))}:host(.tab-bar-compact){-webkit-padding-start:var(--ion-space-400, var(--ion-scale-400, 16px));padding-inline-start:var(--ion-space-400, var(--ion-scale-400, 16px));-webkit-padding-end:var(--ion-space-400, var(--ion-scale-400, 16px));padding-inline-end:var(--ion-space-400, var(--ion-scale-400, 16px));padding-top:var(--ion-space-100, var(--ion-scale-100, 4px));padding-bottom:var(--ion-space-100, var(--ion-scale-100, 4px));position:absolute;-ms-flex-item-align:center;align-self:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;contain:content}:host([slot=top].tab-bar-compact){top:calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-top, 0))}:host([slot=bottom].tab-bar-compact){bottom:calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-bottom, 0))}:host(.tab-bar-soft){border-radius:var(--ion-border-radius-400, var(--ion-scale-400, 16px))}:host(.tab-bar-round){border-radius:var(--ion-border-radius-full, 999px)}:host(.tab-bar-rectangular){border-radius:var(--ion-border-radius-0, var(--ion-scale-0, 0px))}";
 
-const tabBarMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-right:var(--ion-safe-area-right);padding-bottom:var(--ion-safe-area-bottom, 0);padding-left:var(--ion-safe-area-left);border-top:var(--border);background:var(--background);color:var(--color);text-align:center;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){background:var(--ion-color-base)}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0;border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}: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));height:56px}";
+const tabBarIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-top:var(--border);background:var(--background);color:var(--color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host(.tab-bar-full){width:auto;contain:strict;padding-bottom:var(--ion-safe-area-bottom, 0);padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);}:host([slot=top].tab-bar-full){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0}:host{z-index:10}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){background:var(--ion-color-base)}:host{--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, 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}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.tab-bar-translucent){--background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(210%) blur(20px);backdrop-filter:saturate(210%) blur(20px)}:host(.ion-color.tab-bar-translucent){background:rgba(var(--ion-color-base-rgb), 0.8)}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.6)}}";
+
+const tabBarMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-top:var(--border);background:var(--background);color:var(--color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host(.tab-bar-full){width:auto;contain:strict;padding-bottom:var(--ion-safe-area-bottom, 0);padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);}:host([slot=top].tab-bar-full){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0}:host{z-index:10}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){background:var(--ion-color-base)}: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));height:56px}";
 
 const TabBar = class {
     constructor(hostRef) {
@@ -24,10 +26,20 @@ const TabBar = class {
         this.keyboardVisible = false;
         /**
          * If `true`, the tab bar will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         this.translucent = false;
+        /**
+         * Set to `"compact"` to display a width based on the items
+         * inside the tab bar. This value will only work for the
+         * `ionic` theme.
+         *
+         * Set to `"full"` to display a full width tab bar.
+         *
+         * Defaults to `"full"`.
+         */
+        this.expand = 'full';
     }
     selectedTabChanged() {
         if (this.selectedTab !== undefined) {
@@ -60,15 +72,30 @@ const TabBar = class {
     componentDidLoad() {
         this.ionTabBarLoaded.emit();
     }
+    getShape() {
+        const theme = index.getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11234): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     render() {
-        const { color, translucent, keyboardVisible } = this;
-        const mode = index.getIonMode(this);
+        const { color, translucent, keyboardVisible, expand } = this;
+        const theme$1 = index.getIonTheme(this);
+        const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (index.h(index.Host, { key: '275dc6c1b30f6928ce9039b2f445208bb3500ddc', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: theme.createColorClasses(color, {
-                [mode]: true,
+        return (index.h(index.Host, { key: '21c2a3f3a8ea77cc2c757c37bb8ccad2016c3c4c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: theme.createColorClasses(color, {
+                [theme$1]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, index.h("slot", { key: 'ceac20128d75c6a4a0f445f2df8deb8cc71fc4da' })));
+                [`tab-bar-${expand}`]: true,
+                [`tab-bar-${shape}`]: shape !== undefined,
+            }) }, index.h("slot", { key: '3b6784b6f6206efcd69327bd224e10ff6225222b' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -76,13 +103,16 @@ const TabBar = class {
     }; }
 };
 TabBar.style = {
+    ionic: tabBarIonicCss,
     ios: tabBarIosCss,
     md: tabBarMdCss
 };
 
-const tabButtonIosCss = ":host{--ripple-color:var(--color-selected);--background-focused-opacity:1;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;outline:none;background:var(--background);color:var(--color)}.button-native{border-radius:inherit;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-drag:none}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;z-index:1}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){a:hover{color:var(--color-selected)}}:host(.tab-selected){color:var(--color-selected)}:host(.tab-hidden){display:none !important}:host(.tab-disabled){pointer-events:none;opacity:0.4}::slotted(ion-label),::slotted(ion-icon){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(ion-label){-ms-flex-order:0;order:0}::slotted(ion-icon){-ms-flex-order:-1;order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){-ms-flex-direction:row;flex-direction:row}:host(.tab-layout-icon-end){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.tab-layout-icon-bottom){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.tab-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.tab-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color)}:host{--padding-top:0;--padding-end:2px;--padding-bottom:0;--padding-start:2px;max-width:240px;font-size:10px}::slotted(ion-badge){-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px;padding-top:1px;padding-bottom:1px;top:4px;height:auto;font-size:12px;line-height:16px}::slotted(ion-badge){inset-inline-start:calc(50% + 6px)}::slotted(ion-icon){margin-top:2px;margin-bottom:2px;font-size:24px}::slotted(ion-icon::before){vertical-align:top}::slotted(ion-label){margin-top:0;margin-bottom:1px;min-height:11px;font-weight:500}:host(.tab-has-label-only) ::slotted(ion-label){margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:12px;font-size:14px;line-height:1.1}:host(.tab-layout-icon-end) ::slotted(ion-label),:host(.tab-layout-icon-start) ::slotted(ion-label),:host(.tab-layout-icon-hide) ::slotted(ion-label){margin-top:2px;margin-bottom:2px;font-size:14px;line-height:1.1}:host(.tab-layout-icon-end) ::slotted(ion-icon),:host(.tab-layout-icon-start) ::slotted(ion-icon){min-width:24px;height:26px;margin-top:2px;margin-bottom:1px;font-size:24px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:calc(50% + 12px)}:host(.tab-layout-icon-bottom) ::slotted(ion-icon){margin-top:0;margin-bottom:1px}:host(.tab-layout-icon-bottom) ::slotted(ion-label){margin-top:4px}:host(.tab-layout-icon-start) ::slotted(ion-badge),: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)}: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)}:host(.tab-layout-label-hide) ::slotted(ion-badge),:host(.tab-has-icon-only) ::slotted(ion-badge){top:10px}:host(.tab-layout-label-hide) ::slotted(ion-icon){margin-left:0;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}";
+const tabButtonIonicCss = ":host{--ripple-color:var(--color-selected);--background-focused-opacity:1;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;outline:none;background:var(--background);color:var(--color)}.button-native{display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-drag:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;z-index:1}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){a:hover{color:var(--color-selected)}}:host(.tab-selected){color:var(--color-selected)}:host(.tab-hidden){display:none !important}::slotted(ion-label),::slotted(ion-icon){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(ion-label){-ms-flex-order:0;order:0}::slotted(ion-icon){-ms-flex-order:-1;order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){-ms-flex-direction:row;flex-direction:row}:host(.tab-layout-icon-end){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.tab-layout-icon-bottom){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.tab-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.tab-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color)}:host{--focus-ring-color:var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));--focus-ring-width:var(--ion-border-radius-025, var(--ion-scale-050, 2px));font-size:var(--ion-font-size-300, 0.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-1, 1%);line-height:var(--ion-font-line-height-500, var(--ion-scale-500, 20px));text-decoration:none;text-transform:none;position:relative;-ms-flex-line-pack:center;align-content:center;min-height:var(--ion-scale-1200, 48px);max-height:var(--ion-scale-1800, 72px)}.button-native{border-radius:inherit;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;overflow:visible}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.tab-disabled)::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ion-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none;z-index:1}.button-native{min-width:var(--ion-scale-1200, 48px);overflow:visible}.button-native::after{border-radius:inherit}:host(.ion-focused) .button-native::after{outline:var(--focus-ring-width) solid var(--focus-ring-color)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}::slotted(ion-icon){width:var(--ion-scale-600, 24px);height:var(--ion-scale-600, 24px)}:host(.tab-button-shape-soft){border-radius:var(--ion-border-radius-200, var(--ion-scale-200, 8px))}:host(.tab-button-shape-round){border-radius:var(--ion-border-radius-400, var(--ion-scale-400, 16px))}:host(.tab-button-shape-rectangular){border-radius:var(--ion-border-radius-0, var(--ion-scale-0, 0px))}:host ::slotted(ion-badge){inset-inline-start:calc(50% + var(--ion-scale-300, 12px))}:host ::slotted(ion-badge.badge-vertical-top){top:-2px}:host ::slotted(ion-badge.badge-vertical-top:empty){top:calc(var(--ion-scale-100, 4px) * -1)}:host ::slotted(ion-badge.badge-vertical-bottom){top:calc(50% - var(--ion-scale-200, 8px))}:host ::slotted(ion-badge.badge-vertical-bottom:empty){top:calc(50% - var(--ion-scale-100, 4px))}:host ::slotted(ion-badge[vertical]:not(:empty)){-webkit-padding-start:var(--ion-scale-100, 4px);padding-inline-start:var(--ion-scale-100, 4px);-webkit-padding-end:var(--ion-scale-100, 4px);padding-inline-end:var(--ion-scale-100, 4px);padding-top:var(--ion-scale-100, 4px);padding-bottom:var(--ion-scale-100, 4px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top){top:calc(50% - var(--ion-scale-100, 4px))}:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom){top:calc(50% + var(--ion-scale-100, 4px))}:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty){top:calc(50% + 14px)}";
+
+const tabButtonIosCss = ":host{--ripple-color:var(--color-selected);--background-focused-opacity:1;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;outline:none;background:var(--background);color:var(--color)}.button-native{display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-drag:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;z-index:1}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){a:hover{color:var(--color-selected)}}:host(.tab-selected){color:var(--color-selected)}:host(.tab-hidden){display:none !important}::slotted(ion-label),::slotted(ion-icon){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(ion-label){-ms-flex-order:0;order:0}::slotted(ion-icon){-ms-flex-order:-1;order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){-ms-flex-direction:row;flex-direction:row}:host(.tab-layout-icon-end){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.tab-layout-icon-bottom){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.tab-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.tab-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color)}.button-native{border-radius:inherit;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.tab-disabled){pointer-events:none;opacity:0.4}:host{--padding-top:0;--padding-end:2px;--padding-bottom:0;--padding-start:2px;max-width:240px;font-size:10px}::slotted(ion-badge:not([vertical])){-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px;padding-top:1px;padding-bottom:1px;top:4px;height:auto;font-size:12px;line-height:16px}::slotted(ion-badge:not([vertical])){inset-inline-start:calc(50% + 6px)}:host ::slotted(ion-badge:empty){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;width:8px;height:8px}:host ::slotted(ion-badge[vertical]){inset-inline-start:calc(50% + 12px)}:host ::slotted(ion-badge.badge-vertical-top){top:2px}:host ::slotted(ion-badge.badge-vertical-top:empty){top:4px}:host ::slotted(ion-badge.badge-vertical-bottom){top:calc(50% - 8px)}:host ::slotted(ion-badge.badge-vertical-bottom:empty){top:calc(50% - 2px)}:host ::slotted(ion-badge[vertical]:not(:empty)){-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:16px;height:16px;font-size:12px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top){top:calc(50% - 4px)}:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom){top:calc(50% + 4px)}:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty){top:calc(50% + 14px)}::slotted(ion-icon){margin-top:2px;margin-bottom:2px;font-size:24px}::slotted(ion-icon::before){vertical-align:top}::slotted(ion-label){margin-top:0;margin-bottom:1px;min-height:11px;font-weight:500}:host(.tab-has-label-only) ::slotted(ion-label){margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:12px;font-size:14px;line-height:1.1}:host(.tab-layout-icon-end) ::slotted(ion-label),:host(.tab-layout-icon-start) ::slotted(ion-label),:host(.tab-layout-icon-hide) ::slotted(ion-label){margin-top:2px;margin-bottom:2px;font-size:14px;line-height:1.1}:host(.tab-layout-icon-end) ::slotted(ion-icon),:host(.tab-layout-icon-start) ::slotted(ion-icon){min-width:24px;height:26px;margin-top:2px;margin-bottom:1px;font-size:24px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:calc(50% + 12px)}:host(.tab-layout-icon-bottom) ::slotted(ion-icon){margin-top:0;margin-bottom:1px}:host(.tab-layout-icon-bottom) ::slotted(ion-label){-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px;margin-top:4px;margin-bottom:4px}:host(.tab-layout-icon-start) ::slotted(ion-badge),: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)}: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)}:host(.tab-layout-label-hide) ::slotted(ion-badge),:host(.tab-has-icon-only) ::slotted(ion-badge){top:10px}:host(.tab-layout-label-hide) ::slotted(ion-icon){margin-left:0;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}";
 
-const tabButtonMdCss = ":host{--ripple-color:var(--color-selected);--background-focused-opacity:1;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;outline:none;background:var(--background);color:var(--color)}.button-native{border-radius:inherit;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-drag:none}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;z-index:1}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){a:hover{color:var(--color-selected)}}:host(.tab-selected){color:var(--color-selected)}:host(.tab-hidden){display:none !important}:host(.tab-disabled){pointer-events:none;opacity:0.4}::slotted(ion-label),::slotted(ion-icon){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(ion-label){-ms-flex-order:0;order:0}::slotted(ion-icon){-ms-flex-order:-1;order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){-ms-flex-direction:row;flex-direction:row}:host(.tab-layout-icon-end){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.tab-layout-icon-bottom){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.tab-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.tab-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color)}:host{--padding-top:0;--padding-end:12px;--padding-bottom:0;--padding-start:12px;max-width:168px;font-size:12px;font-weight:normal;letter-spacing:0.03em}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;text-transform:none}::slotted(ion-icon){margin-left:0;margin-right:0;margin-top:16px;margin-bottom:16px;-webkit-transform-origin:center center;transform-origin:center center;font-size:22px}:host-context([dir=rtl]) ::slotted(ion-icon){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] ::slotted(ion-icon){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){::slotted(ion-icon):dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}::slotted(ion-badge){border-radius:8px;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px;padding-top:3px;padding-bottom:2px;top:8px;min-width:12px;font-size:8px;font-weight:normal}::slotted(ion-badge){inset-inline-start:calc(50% + 6px)}::slotted(ion-badge:empty){display:block;min-width:8px;height:8px}:host(.tab-layout-icon-top) ::slotted(ion-icon){margin-top:6px;margin-bottom:2px}:host(.tab-layout-icon-top) ::slotted(ion-label){margin-top:0;margin-bottom:6px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){top:8px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:70%}:host(.tab-layout-icon-bottom) ::slotted(ion-icon){margin-top:0;margin-bottom:6px}:host(.tab-layout-icon-bottom) ::slotted(ion-label){margin-top:6px;margin-bottom:0}:host(.tab-layout-icon-start) ::slotted(ion-badge),: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%}:host(.tab-layout-icon-start) ::slotted(ion-icon){-webkit-margin-end:6px;margin-inline-end:6px}:host(.tab-layout-icon-end) ::slotted(ion-icon){-webkit-margin-start:6px;margin-inline-start:6px}:host(.tab-layout-icon-hide) ::slotted(ion-badge),: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%}:host(.tab-layout-icon-hide) ::slotted(ion-label),:host(.tab-has-label-only) ::slotted(ion-label){margin-top:0;margin-bottom:0}:host(.tab-layout-label-hide) ::slotted(ion-badge),:host(.tab-has-icon-only) ::slotted(ion-badge){top:16px}:host(.tab-layout-label-hide) ::slotted(ion-icon),:host(.tab-has-icon-only) ::slotted(ion-icon){margin-top:0;margin-bottom:0;font-size:24px}";
+const tabButtonMdCss = ":host{--ripple-color:var(--color-selected);--background-focused-opacity:1;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;outline:none;background:var(--background);color:var(--color)}.button-native{display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-drag:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;z-index:1}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){a:hover{color:var(--color-selected)}}:host(.tab-selected){color:var(--color-selected)}:host(.tab-hidden){display:none !important}::slotted(ion-label),::slotted(ion-icon){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(ion-label){-ms-flex-order:0;order:0}::slotted(ion-icon){-ms-flex-order:-1;order:-1;height:1em}:host(.tab-has-label-only) ::slotted(ion-label){white-space:normal}::slotted(ion-badge){-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){-ms-flex-direction:row;flex-direction:row}:host(.tab-layout-icon-end){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.tab-layout-icon-bottom){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.tab-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.tab-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color)}.button-native{border-radius:inherit;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.tab-disabled){pointer-events:none;opacity:0.4}:host{--padding-top:0;--padding-end:12px;--padding-bottom:0;--padding-start:12px;max-width:168px;font-size:12px;font-weight:normal;letter-spacing:0.03em}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;text-transform:none}::slotted(ion-icon){margin-left:0;margin-right:0;margin-top:16px;margin-bottom:16px;-webkit-transform-origin:center center;transform-origin:center center;font-size:22px}:host-context([dir=rtl]) ::slotted(ion-icon){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] ::slotted(ion-icon){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){::slotted(ion-icon):dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}::slotted(ion-badge){border-radius:8px;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px;padding-top:3px;padding-bottom:2px;top:8px;min-width:12px;font-size:8px;font-weight:normal}::slotted(ion-badge){inset-inline-start:calc(50% + 6px)}::slotted(ion-badge:empty){display:block;min-width:8px;height:8px}:host ::slotted(ion-badge[vertical=bottom]){top:calc(50% - 8px)}:host ::slotted(ion-badge[vertical=bottom]:empty){top:calc(50% - 4px)}:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=top]){top:calc(50% - 4px)}:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=top]){inset-inline-start:calc(50% + 6px)}:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]){top:calc(50% + 4px)}:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]){inset-inline-start:calc(50% + 6px)}:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]:empty){top:calc(50% + 12px)}:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]:empty){inset-inline-start:calc(50% + 6px)}:host(.tab-layout-icon-top) ::slotted(ion-icon){margin-top:6px;margin-bottom:2px}:host(.tab-layout-icon-top) ::slotted(ion-label){margin-top:0;margin-bottom:6px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){top:8px}:host(.tab-layout-icon-bottom) ::slotted(ion-badge){inset-inline-start:70%}:host(.tab-layout-icon-bottom) ::slotted(ion-icon){margin-top:0;margin-bottom:6px}:host(.tab-layout-icon-bottom) ::slotted(ion-label){margin-top:6px;margin-bottom:0}:host(.tab-layout-icon-start) ::slotted(ion-badge),: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%}:host(.tab-layout-icon-start) ::slotted(ion-icon){-webkit-margin-end:6px;margin-inline-end:6px}:host(.tab-layout-icon-end) ::slotted(ion-icon){-webkit-margin-start:6px;margin-inline-start:6px}:host(.tab-layout-icon-hide) ::slotted(ion-badge),: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%}:host(.tab-layout-icon-hide) ::slotted(ion-label),:host(.tab-has-label-only) ::slotted(ion-label){margin-top:0;margin-bottom:0}:host(.tab-layout-label-hide) ::slotted(ion-badge),:host(.tab-has-icon-only) ::slotted(ion-badge){top:16px}:host(.tab-layout-label-hide) ::slotted(ion-icon),:host(.tab-has-icon-only) ::slotted(ion-icon){margin-top:0;margin-bottom:0;font-size:24px}";
 
 const TabButton = class {
     constructor(hostRef) {
@@ -119,6 +149,18 @@ const TabButton = class {
             this.layout = index.config.get('tabButtonLayout', 'icon-top');
         }
     }
+    getShape() {
+        const theme = index.getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11436): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     selectTab(ev) {
         if (this.tab !== undefined) {
             if (!this.disabled) {
@@ -139,15 +181,16 @@ const TabButton = class {
     }
     render() {
         const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
-        const mode = index.getIonMode(this);
+        const theme = index.getIonTheme(this);
+        const shape = this.getShape();
         const attrs = {
             download: this.download,
             href,
             rel,
             target,
         };
-        return (index.h(index.Host, { key: 'ce9d29ced0c781d6b2fa62cd5feb801c11fc42e8', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
-                [mode]: true,
+        return (index.h(index.Host, { key: '848ea6fa1aff3e7ac9add43a6acb50759653c13b', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+                [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
                 'tab-has-label': hasLabel,
@@ -157,12 +200,14 @@ const TabButton = class {
                 [`tab-layout-${layout}`]: true,
                 'ion-activatable': true,
                 'ion-selectable': true,
+                [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, index.h("a", Object.assign({ key: '01cb0ed2e77c5c1a8abd48da1bb07ac1b305d0b6' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), index.h("span", { key: 'd0240c05f42217cfb186b86ff8a0c9cd70b9c8df', class: "button-inner" }, index.h("slot", { key: '0a20b84925037dbaa8bb4a495b813d3f7c2e58ac' })), mode === 'md' && index.h("ion-ripple-effect", { key: '4c92c27178cdac89d69cffef8d2c39c3644914e8', type: "unbounded" }))));
+            } }, index.h("a", Object.assign({ key: 'f6081f8ef0220a2b5e232f6b51da8538d68a3e80' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), index.h("span", { key: 'ed8af45092210cfd868adb4eb57dfc6e13a873a0', class: "button-inner" }, index.h("slot", { key: '253fcce3a920b9d2cae5af2a14872b1e127c7d62' })), theme === 'md' && index.h("ion-ripple-effect", { key: '5161991db4e08d16da5d0838fe2aee145afd91ad', type: "unbounded" }))));
     }
     get el() { return index.getElement(this); }
 };
 TabButton.style = {
+    ionic: tabButtonIonicCss,
     ios: tabButtonIosCss,
     md: tabButtonMdCss
 };

package/dist/cjs/ion-tab_2.cjs.entry.js

@@ -3,9 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-DODXXb_r.js');
-var frameworkDelegate = require('./framework-delegate-C7sIJyT5.js');
-require('./helpers-BITAzJfi.js');
+var index = require('./index-CmckMMX1.js');
+var frameworkDelegate = require('./framework-delegate-DfEY5uyC.js');
+require('./helpers-DmAvmm2T.js');
+require('./focus-visible-BIj-I3-C.js');
 
 const tabCss = ":host(.tab-hidden){display:none !important}";
 
@@ -45,10 +46,10 @@ const Tab = class {
     }
     render() {
         const { tab, active, component } = this;
-        return (index.h(index.Host, { key: 'dbad8fe9f1566277d14647626308eaf1601ab01f', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (index.h(index.Host, { key: 'b249545a5adfcef4616afe79aa0f215bab464d0a', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, index.h("slot", { key: '3be64f4e7161f6769aaf8e4dcb5293fcaa09af45' })));
+            } }, index.h("slot", { key: '19e2a406d96d20d8d4af8c3ff900e975d06021f6' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -57,7 +58,7 @@ const Tab = class {
 };
 Tab.style = tabCss;
 
-const tabsCss = ":host{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;contain:layout size style;z-index:0}.tabs-inner{position:relative;-ms-flex:1;flex:1;contain:layout size style}";
+const tabsCss = ":host{right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;contain:layout size style;z-index:0}.tabs-inner{position:relative;-ms-flex:1;flex:1;contain:layout size style}";
 
 const Tabs = class {
     constructor(hostRef) {
@@ -201,7 +202,7 @@ const Tabs = class {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (index.h(index.Host, { key: '73ecd3294ca6c78ce6d8b6a7e5b6ccb11d84ada4', onIonTabButtonClick: this.onTabClicked }, index.h("slot", { key: '09661b26f07a3069a58e76ea4dceb9a6acbf365d', name: "top" }), index.h("div", { key: 'db50d59fad8f9b11873b695fc548f3cfe4aceb6a', class: "tabs-inner" }, index.h("slot", { key: '02694dde2d8381f48fc06dd9e79798c4bd540ccd' })), index.h("slot", { key: '92c4661a5f3fa1c08c964fab7c422c1a2a03d3d8', name: "bottom" })));
+        return (index.h(index.Host, { key: 'aad72fc15c112c16104b33b8cff5e3edad505b95', onIonTabButtonClick: this.onTabClicked }, index.h("slot", { key: 'acc4061698896be4b18c707ecef0215dd3a0031a', name: "top" }), index.h("div", { key: '581c24339c596bd6b9dce41bb5375927cbba9ee5', class: "tabs-inner" }, index.h("slot", { key: '48b1189b32008cbf61feaafb770e2b903e27649e' })), index.h("slot", { key: 'a8ab727ed72a441de5a942eb4b8e343f3fbd95ea', name: "bottom" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ion-text.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DODXXb_r.js');
+var index = require('./index-CmckMMX1.js');
 var theme = require('./theme-CeDs6Hcv.js');
 
 const textCss = ":host(.ion-color){color:var(--ion-color-base)}";
@@ -13,10 +13,10 @@ const Text = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        const mode = index.getIonMode(this);
-        return (index.h(index.Host, { key: '361035eae7b92dc109794348d39bad2f596eb6be', class: theme.createColorClasses(this.color, {
-                [mode]: true,
-            }) }, index.h("slot", { key: 'c7b8835cf485ba9ecd73298f0529276ce1ea0852' })));
+        const theme$1 = index.getIonTheme(this);
+        return (index.h(index.Host, { key: '7a3f31d6e219207a1ff98ac441357caa512012e5', class: theme.createColorClasses(this.color, {
+                [theme$1]: true,
+            }) }, index.h("slot", { key: '392d48d6a5e0e5d1b44e762ec96fb8b53b3ebd49' })));
     }
 };
 Text.style = textCss;