@ionic/core 8.7.11-dev.11763677588.1682e25d → 8.7.11-dev.11763980773.157a1e20

package/components/ion-tab-button.js

@@ -4,7 +4,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as inheritAttributes } from './helpers.js';
 import { c as config } from './index4.js';
-import { b as getIonTheme } from './ionic-global.js';
+import { b as getIonTheme, c as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './ripple-effect.js';
 
 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(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));--focus-ring-width:var(--token-border-radius-025, var(--token-scale-050, 2px));font-size:var(--token-font-size-300, 12px);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-1, 1%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;position:relative;-ms-flex-line-pack:center;align-content:center;min-width:var(--token-scale-1200, 48px);min-height:var(--token-scale-1200, 48px);max-height:var(--token-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(--token-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none;z-index:1}.button-native{min-width:var(--token-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(--token-scale-600, 24px);height:var(--token-scale-600, 24px)}:host(.tab-button-shape-soft){border-radius:var(--token-border-radius-200, var(--token-scale-200, 8px))}:host(.tab-button-shape-round){border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}:host(.tab-button-shape-rectangular){border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}:host ::slotted(ion-badge){inset-inline-start:calc(50% + var(--token-scale-300, 12px))}:host ::slotted(ion-badge.badge-vertical-top){top:-2px}:host ::slotted(ion-badge.badge-vertical-top:empty){top:calc(var(--token-scale-100, 4px) * -1)}:host ::slotted(ion-badge.badge-vertical-bottom){top:calc(50% - var(--token-scale-200, 8px))}:host ::slotted(ion-badge.badge-vertical-bottom:empty){top:calc(50% - var(--token-scale-100, 4px))}:host ::slotted(ion-badge[vertical]:not(:empty)){-webkit-padding-start:var(--token-scale-100, 4px);padding-inline-start:var(--token-scale-100, 4px);-webkit-padding-end:var(--token-scale-100, 4px);padding-inline-end:var(--token-scale-100, 4px);padding-top:var(--token-scale-100, 4px);padding-bottom:var(--token-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(--token-scale-100, 4px))}:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom){top:calc(50% + var(--token-scale-100, 4px))}:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty){top:calc(50% + 14px)}";
@@ -82,17 +82,26 @@ const TabButton = /*@__PURE__*/ proxyCustomElement(class TabButton extends HTMLE
     get hasIcon() {
         return !!this.el.querySelector('ion-icon');
     }
+    canActivate() {
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
+        if (theme !== 'ionic') {
+            return true;
+        }
+        return mode === 'md';
+    }
     render() {
         const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
         const theme = getIonTheme(this);
         const shape = this.getShape();
+        const canActivate = this.canActivate();
         const attrs = {
             download: this.download,
             href,
             rel,
             target,
         };
-        return (h(Host, { key: '848ea6fa1aff3e7ac9add43a6acb50759653c13b', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '5a32785eaf0570cdc3444d52ce8bba8174c3e0b9', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -101,11 +110,11 @@ const TabButton = /*@__PURE__*/ proxyCustomElement(class TabButton extends HTMLE
                 'tab-has-label-only': hasLabel && !hasIcon,
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
-                'ion-activatable': true,
+                'ion-activatable': canActivate,
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, 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), h("span", { key: 'ed8af45092210cfd868adb4eb57dfc6e13a873a0', class: "button-inner" }, h("slot", { key: '253fcce3a920b9d2cae5af2a14872b1e127c7d62' })), theme === 'md' && h("ion-ripple-effect", { key: '5161991db4e08d16da5d0838fe2aee145afd91ad', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '1441f409b4a60823a57f27b90f6840b557b7d65a' }, 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: '1566ca0af66b6e51068aca221a89133d2af061ed', class: "button-inner" }, h("slot", { key: '757878091cfe3768107eb0a53b8d1c895ce43399' })), theme === 'md' && h("ion-ripple-effect", { key: '28dde3e7127bdc9d5e1477b47458a5a4ab71328e', type: "unbounded" }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/item.js

@@ -7,7 +7,7 @@ import { d as inheritAttributes, r as raf } from './helpers.js';
 import { h as hostContext, c as createColorClasses, o as openURL } from './theme.js';
 import { f as chevronForward } from './index6.js';
 import { c as config } from './index4.js';
-import { b as getIonTheme } from './ionic-global.js';
+import { b as getIonTheme, c as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './ripple-effect.js';
 
@@ -149,7 +149,13 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
         return this.href !== undefined || this.button;
     }
     canActivate() {
-        return this.isClickable() || this.hasCover();
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
+        const shouldActivate = this.isClickable() || this.hasCover();
+        if (theme !== 'ionic') {
+            return shouldActivate;
+        }
+        return mode === 'md' && shouldActivate;
     }
     isFocusable() {
         const focusableChild = this.el.querySelector('.ion-focusable');
@@ -260,7 +266,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (h(Host, { key: '8d9ebb0abbf431db0584ce12d5ae9b1044b90e55', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '9bb45fbe33fab3adb57da6c5fe3ab4b4f85b2fdb', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [theme]: true,
                 'item-lines-default': lines === undefined,
@@ -273,7 +279,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'eb4e11d09f180aa9ff79f9a3f6fe56d8b1706640' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'a29ad22da5c8925b81abbe2abd91817d3bd412e7', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '1d501a275bd58831ce09eb5e1615bad58e351190', class: "item-inner" }, h("div", { key: '3e3b4bf4859704b228cbd867c47caea5bdb92e96', class: "input-wrapper" }, h("slot", { key: '663305e080b0fd69e3bd2a56d49762dcc6a388f7', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: '1e21ac996c488cc7839b3849ad34ef4371836d2d', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'b718235562f563d742927004c0a53a4925d7ea5e', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: '221ea4d68352d8f3184d3d0381b78180a0000793' }))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '0118a0b7bc4b78b210ae03981c03a7ede170333b' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '0b4891b9334172929cd5a3f361b33f0f9e830c9e', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '16128a1269cf59dedce8a5c66a4f9062e2ce23a2', class: "item-inner" }, h("div", { key: '53ae7202232d7145b4d81fdc8c1fff0a13e92e8b', class: "input-wrapper" }, h("slot", { key: '6726b19a45bea9c76b3429b97091c3467f34ee7b', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: '07825d01d5e1ed427bc58c4367f05b14dc670f22', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '7d044035b257dbcecbc0c150e512a6570a48c871', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: 'f7578981817b9244b9445c562e0f3d1148e2b455' }))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -145,7 +145,13 @@ const Item = class {
         return this.href !== undefined || this.button;
     }
     canActivate() {
-        return this.isClickable() || this.hasCover();
+        const theme = ionicGlobal.getIonTheme(this);
+        const mode = ionicGlobal.getIonMode(this);
+        const shouldActivate = this.isClickable() || this.hasCover();
+        if (theme !== 'ionic') {
+            return shouldActivate;
+        }
+        return mode === 'md' && shouldActivate;
     }
     isFocusable() {
         const focusableChild = this.el.querySelector('.ion-focusable');
@@ -256,7 +262,7 @@ const Item = class {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (index.h(index.Host, { key: '8d9ebb0abbf431db0584ce12d5ae9b1044b90e55', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '9bb45fbe33fab3adb57da6c5fe3ab4b4f85b2fdb', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), theme.createColorClasses(this.color, {
                 item: true,
                 [theme$1]: true,
                 'item-lines-default': lines === undefined,
@@ -269,7 +275,7 @@ const Item = class {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, index.h(TagType, Object.assign({ key: 'eb4e11d09f180aa9ff79f9a3f6fe56d8b1706640' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), index.h("slot", { key: 'a29ad22da5c8925b81abbe2abd91817d3bd412e7', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), index.h("div", { key: '1d501a275bd58831ce09eb5e1615bad58e351190', class: "item-inner" }, index.h("div", { key: '3e3b4bf4859704b228cbd867c47caea5bdb92e96', class: "input-wrapper" }, index.h("slot", { key: '663305e080b0fd69e3bd2a56d49762dcc6a388f7', onSlotchange: this.updateInteractivityOnSlotChange })), index.h("slot", { key: '1e21ac996c488cc7839b3849ad34ef4371836d2d', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (index.h("ion-icon", { key: 'b718235562f563d742927004c0a53a4925d7ea5e', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme$1 === 'md' && index.h("ion-ripple-effect", { key: '221ea4d68352d8f3184d3d0381b78180a0000793' }))));
+            })), role: inList ? 'listitem' : null }, index.h(TagType, Object.assign({ key: '0118a0b7bc4b78b210ae03981c03a7ede170333b' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), index.h("slot", { key: '0b4891b9334172929cd5a3f361b33f0f9e830c9e', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), index.h("div", { key: '16128a1269cf59dedce8a5c66a4f9062e2ce23a2', class: "item-inner" }, index.h("div", { key: '53ae7202232d7145b4d81fdc8c1fff0a13e92e8b', class: "input-wrapper" }, index.h("slot", { key: '6726b19a45bea9c76b3429b97091c3467f34ee7b', onSlotchange: this.updateInteractivityOnSlotChange })), index.h("slot", { key: '07825d01d5e1ed427bc58c4367f05b14dc670f22', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (index.h("ion-icon", { key: '7d044035b257dbcecbc0c150e512a6570a48c871', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme$1 === 'md' && index.h("ion-ripple-effect", { key: 'f7578981817b9244b9445c562e0f3d1148e2b455' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -193,17 +193,26 @@ const TabButton = class {
     get hasIcon() {
         return !!this.el.querySelector('ion-icon');
     }
+    canActivate() {
+        const theme = ionicGlobal.getIonTheme(this);
+        const mode = ionicGlobal.getIonMode(this);
+        if (theme !== 'ionic') {
+            return true;
+        }
+        return mode === 'md';
+    }
     render() {
         const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
         const theme = ionicGlobal.getIonTheme(this);
         const shape = this.getShape();
+        const canActivate = this.canActivate();
         const attrs = {
             download: this.download,
             href,
             rel,
             target,
         };
-        return (index.h(index.Host, { key: '848ea6fa1aff3e7ac9add43a6acb50759653c13b', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (index.h(index.Host, { key: '5a32785eaf0570cdc3444d52ce8bba8174c3e0b9', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -212,11 +221,11 @@ const TabButton = class {
                 'tab-has-label-only': hasLabel && !hasIcon,
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
-                'ion-activatable': true,
+                'ion-activatable': canActivate,
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, 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" }))));
+            } }, index.h("a", Object.assign({ key: '1441f409b4a60823a57f27b90f6840b557b7d65a' }, 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: '1566ca0af66b6e51068aca221a89133d2af061ed', class: "button-inner" }, index.h("slot", { key: '757878091cfe3768107eb0a53b8d1c895ce43399' })), theme === 'md' && index.h("ion-ripple-effect", { key: '28dde3e7127bdc9d5e1477b47458a5a4ab71328e', type: "unbounded" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/components/item/item.js

@@ -7,7 +7,7 @@ import { inheritAttributes, raf } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { chevronForward } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
@@ -146,7 +146,13 @@ export class Item {
         return this.href !== undefined || this.button;
     }
     canActivate() {
-        return this.isClickable() || this.hasCover();
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
+        const shouldActivate = this.isClickable() || this.hasCover();
+        if (theme !== 'ionic') {
+            return shouldActivate;
+        }
+        return mode === 'md' && shouldActivate;
     }
     isFocusable() {
         const focusableChild = this.el.querySelector('.ion-focusable');
@@ -257,7 +263,7 @@ export class Item {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (h(Host, { key: '8d9ebb0abbf431db0584ce12d5ae9b1044b90e55', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '9bb45fbe33fab3adb57da6c5fe3ab4b4f85b2fdb', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [theme]: true,
                 'item-lines-default': lines === undefined,
@@ -270,7 +276,7 @@ export class Item {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'eb4e11d09f180aa9ff79f9a3f6fe56d8b1706640' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'a29ad22da5c8925b81abbe2abd91817d3bd412e7', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '1d501a275bd58831ce09eb5e1615bad58e351190', class: "item-inner" }, h("div", { key: '3e3b4bf4859704b228cbd867c47caea5bdb92e96', class: "input-wrapper" }, h("slot", { key: '663305e080b0fd69e3bd2a56d49762dcc6a388f7', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: '1e21ac996c488cc7839b3849ad34ef4371836d2d', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'b718235562f563d742927004c0a53a4925d7ea5e', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: '221ea4d68352d8f3184d3d0381b78180a0000793' }))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '0118a0b7bc4b78b210ae03981c03a7ede170333b' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '0b4891b9334172929cd5a3f361b33f0f9e830c9e', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '16128a1269cf59dedce8a5c66a4f9062e2ce23a2', class: "item-inner" }, h("div", { key: '53ae7202232d7145b4d81fdc8c1fff0a13e92e8b', class: "input-wrapper" }, h("slot", { key: '6726b19a45bea9c76b3429b97091c3467f34ee7b', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: '07825d01d5e1ed427bc58c4367f05b14dc670f22', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '7d044035b257dbcecbc0c150e512a6570a48c871', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: 'f7578981817b9244b9445c562e0f3d1148e2b455' }))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
@@ -74,17 +74,26 @@ export class TabButton {
     get hasIcon() {
         return !!this.el.querySelector('ion-icon');
     }
+    canActivate() {
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
+        if (theme !== 'ionic') {
+            return true;
+        }
+        return mode === 'md';
+    }
     render() {
         const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
         const theme = getIonTheme(this);
         const shape = this.getShape();
+        const canActivate = this.canActivate();
         const attrs = {
             download: this.download,
             href,
             rel,
             target,
         };
-        return (h(Host, { key: '848ea6fa1aff3e7ac9add43a6acb50759653c13b', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '5a32785eaf0570cdc3444d52ce8bba8174c3e0b9', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -93,11 +102,11 @@ export class TabButton {
                 'tab-has-label-only': hasLabel && !hasIcon,
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
-                'ion-activatable': true,
+                'ion-activatable': canActivate,
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, 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), h("span", { key: 'ed8af45092210cfd868adb4eb57dfc6e13a873a0', class: "button-inner" }, h("slot", { key: '253fcce3a920b9d2cae5af2a14872b1e127c7d62' })), theme === 'md' && h("ion-ripple-effect", { key: '5161991db4e08d16da5d0838fe2aee145afd91ad', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '1441f409b4a60823a57f27b90f6840b557b7d65a' }, 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: '1566ca0af66b6e51068aca221a89133d2af061ed', class: "button-inner" }, h("slot", { key: '757878091cfe3768107eb0a53b8d1c895ce43399' })), theme === 'md' && h("ion-ripple-effect", { key: '28dde3e7127bdc9d5e1477b47458a5a4ab71328e', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-11-20T22:28:43",
+  "timestamp": "2025-11-24T10:41:49",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",

package/dist/esm/ion-item_8.entry.js

@@ -6,7 +6,7 @@ import { c as caretRightSvg } from './caret-right-BYSs-jZz.js';
 import { b as inheritAttributes, r as raf } from './helpers-Bsml3FcE.js';
 import { h as hostContext, c as createColorClasses, o as openURL } from './theme-DiVJyqlX.js';
 import { o as chevronForward } from './index-COG0_eom.js';
-import { c as getIonTheme } from './ionic-global-2R0iPB51.js';
+import { c as getIonTheme, b as getIonMode } from './ionic-global-2R0iPB51.js';
 import './focus-visible-vXpMhGrs.js';
 
 const itemIonicCss = ":host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;outline:none;color:var(--color);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;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;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:inherit;overflow:inherit;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;-webkit-transition:var(--transition);transition:var(--transition);z-index:-1}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);-webkit-box-shadow:var(--inner-box-shadow);box-shadow:var(--inner-box-shadow);overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){-ms-flex:1;flex:1;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-width:100%}:host(.item-input){-ms-flex-align:center;align-items:center}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;text-overflow:ellipsis;overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){-ms-flex-align:start;align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){-ms-flex-align:stretch;align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--background-activated:var(--token-bg-select-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc)));--border-color:var(--token-primitives-neutral-300, #e0e0e0);--border-style:var(--token-border-style-solid, solid);--border-width:0 0 var(--token-border-size-025, var(--token-scale-025, 1px)) 0;--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--detail-icon-font-size:var(--token-scale-600, 24px);--detail-icon-opacity:1;--min-height:var(--token-scale-1800, 72px);--padding-top:var(--token-space-200, var(--token-scale-200, 8px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px));--padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));--padding-start:var(--token-space-400, var(--token-scale-400, 16px));font-size:var(--token-font-size-400, 16px);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none}.item-inner{min-height:initial}.item-detail-icon{-webkit-margin-end:0;margin-inline-end:0}slot[name=start]::slotted(*){-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px))}slot[name=end]::slotted(*){-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px))}::slotted(ion-icon:not(.item-detail-icon)){color:var(--token-primitives-neutral-1000, #3b3b3b);font-size:var(--token-scale-1000, 40px)}:host(.item-disabled) .item-native::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none}:host(.ion-activated) .item-native{background:var(--background-activated)}:host(.ion-focused) .item-native::after{border-radius:inherit;right:0;left:0;top:0;bottom:0;position:absolute;border-width:var(--token-border-size-050, var(--token-scale-050, 2px));border-style:var(--token-border-style-solid, solid);border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));content:\"\"}:host(.item-lines-full){--border-width:var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-size-0, var(--token-scale-0, 0px))}:host(.item-lines-inset){--inner-border-width:var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-size-0, var(--token-scale-0, 0px))}:host(.item-lines-inset),:host(.item-lines-none){--border-width:var(--token-border-size-0, var(--token-scale-0, 0px))}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:var(--token-border-size-0, var(--token-scale-0, 0px))}:host(.in-select-modal){--background-focused:var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));--background-focused-opacity:0}:host(.in-select-modal.ion-focused) .item-native{--border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}";
@@ -143,7 +143,13 @@ const Item = class {
         return this.href !== undefined || this.button;
     }
     canActivate() {
-        return this.isClickable() || this.hasCover();
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
+        const shouldActivate = this.isClickable() || this.hasCover();
+        if (theme !== 'ionic') {
+            return shouldActivate;
+        }
+        return mode === 'md' && shouldActivate;
     }
     isFocusable() {
         const focusableChild = this.el.querySelector('.ion-focusable');
@@ -254,7 +260,7 @@ const Item = class {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (h(Host, { key: '8d9ebb0abbf431db0584ce12d5ae9b1044b90e55', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '9bb45fbe33fab3adb57da6c5fe3ab4b4f85b2fdb', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [theme]: true,
                 'item-lines-default': lines === undefined,
@@ -267,7 +273,7 @@ const Item = class {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'eb4e11d09f180aa9ff79f9a3f6fe56d8b1706640' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'a29ad22da5c8925b81abbe2abd91817d3bd412e7', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '1d501a275bd58831ce09eb5e1615bad58e351190', class: "item-inner" }, h("div", { key: '3e3b4bf4859704b228cbd867c47caea5bdb92e96', class: "input-wrapper" }, h("slot", { key: '663305e080b0fd69e3bd2a56d49762dcc6a388f7', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: '1e21ac996c488cc7839b3849ad34ef4371836d2d', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'b718235562f563d742927004c0a53a4925d7ea5e', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: '221ea4d68352d8f3184d3d0381b78180a0000793' }))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '0118a0b7bc4b78b210ae03981c03a7ede170333b' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '0b4891b9334172929cd5a3f361b33f0f9e830c9e', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '16128a1269cf59dedce8a5c66a4f9062e2ce23a2', class: "item-inner" }, h("div", { key: '53ae7202232d7145b4d81fdc8c1fff0a13e92e8b', class: "input-wrapper" }, h("slot", { key: '6726b19a45bea9c76b3429b97091c3467f34ee7b', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: '07825d01d5e1ed427bc58c4367f05b14dc670f22', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '7d044035b257dbcecbc0c150e512a6570a48c871', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: 'f7578981817b9244b9445c562e0f3d1148e2b455' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -4,7 +4,7 @@
 import { r as registerInstance, c as createEvent, h, d as Host, g as getElement, e as config } from './index-C8IsBmNU.js';
 import { c as createKeyboardController } from './keyboard-controller-Bc4alOiF.js';
 import { c as createColorClasses } from './theme-DiVJyqlX.js';
-import { c as getIonTheme } from './ionic-global-2R0iPB51.js';
+import { c as getIonTheme, b as getIonMode } from './ionic-global-2R0iPB51.js';
 import { b as inheritAttributes } from './helpers-Bsml3FcE.js';
 import './keyboard-WCK1pWfR.js';
 import './capacitor-CiBLEyrT.js';
@@ -191,17 +191,26 @@ const TabButton = class {
     get hasIcon() {
         return !!this.el.querySelector('ion-icon');
     }
+    canActivate() {
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
+        if (theme !== 'ionic') {
+            return true;
+        }
+        return mode === 'md';
+    }
     render() {
         const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
         const theme = getIonTheme(this);
         const shape = this.getShape();
+        const canActivate = this.canActivate();
         const attrs = {
             download: this.download,
             href,
             rel,
             target,
         };
-        return (h(Host, { key: '848ea6fa1aff3e7ac9add43a6acb50759653c13b', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '5a32785eaf0570cdc3444d52ce8bba8174c3e0b9', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -210,11 +219,11 @@ const TabButton = class {
                 'tab-has-label-only': hasLabel && !hasIcon,
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
-                'ion-activatable': true,
+                'ion-activatable': canActivate,
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, 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), h("span", { key: 'ed8af45092210cfd868adb4eb57dfc6e13a873a0', class: "button-inner" }, h("slot", { key: '253fcce3a920b9d2cae5af2a14872b1e127c7d62' })), theme === 'md' && h("ion-ripple-effect", { key: '5161991db4e08d16da5d0838fe2aee145afd91ad', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '1441f409b4a60823a57f27b90f6840b557b7d65a' }, 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: '1566ca0af66b6e51068aca221a89133d2af061ed', class: "button-inner" }, h("slot", { key: '757878091cfe3768107eb0a53b8d1c895ce43399' })), theme === 'md' && h("ion-ripple-effect", { key: '28dde3e7127bdc9d5e1477b47458a5a4ab71328e', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
 };