From b78b454e089462afa866972b97bb06faa84bd319 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 30 Jan 2023 11:52:36 -0500
Subject: [PATCH] revert(): revert base components feature (#26692)

The Ionic Framework team would like to re-evaluate our approach to improving customization options when building mobile applications. We are looking at other solutions that a) make customizing an app UI easier and b) are applicable to a broader set of developers.
---
 .github/COMPONENT-GUIDE.md                    |   2 +-
 angular/src/directives/proxies.ts             | 234 ++++---
 angular/src/index.ts                          |   2 -
 core/api.txt                                  |  72 +--
 core/src/components.d.ts                      | 608 +-----------------
 .../accordion-group/accordion-group.tsx       |   6 +-
 core/src/components/accordion/accordion.tsx   |   6 +-
 .../components/action-sheet/action-sheet.scss |   1 -
 .../components/action-sheet/action-sheet.tsx  |   8 +-
 core/src/components/alert/alert.scss          |   1 -
 core/src/components/alert/alert.tsx           |  12 +-
 core/src/components/app/app.tsx               |   4 +-
 core/src/components/avatar/avatar.tsx         |   9 +-
 .../components/back-button/back-button.tsx    |  10 +-
 core/src/components/backdrop/backdrop.tsx     |   9 +-
 core/src/components/badge/badge.tsx           |   6 +-
 core/src/components/breadcrumb/breadcrumb.tsx |   6 +-
 .../components/breadcrumbs/breadcrumbs.tsx    |   6 +-
 core/src/components/button/button.tsx         |   6 +-
 core/src/components/buttons/buttons.tsx       |   9 +-
 .../components/card-content/card-content.tsx  |   6 +-
 .../components/card-header/card-header.tsx    |   6 +-
 .../card-subtitle/card-subtitle.tsx           |   6 +-
 core/src/components/card-title/card-title.tsx |   6 +-
 core/src/components/card/card.tsx             |   6 +-
 core/src/components/checkbox/checkbox.tsx     |   8 +-
 core/src/components/chip/chip.tsx             |   7 +-
 core/src/components/col/col.tsx               |   4 +-
 core/src/components/content/content.tsx       |   8 +-
 .../datetime-button/datetime-button.tsx       |   5 +-
 core/src/components/datetime/datetime.tsx     |  11 +-
 core/src/components/fab-button/fab-button.tsx |   6 +-
 core/src/components/fab-list/fab-list.tsx     |   4 +-
 core/src/components/fab/fab.tsx               |   4 +-
 core/src/components/footer/footer.tsx         |  12 +-
 core/src/components/grid/grid.tsx             |   4 +-
 core/src/components/header/header.tsx         |  10 +-
 core/src/components/img/img.tsx               |   4 +-
 .../infinite-scroll-content.tsx               |  13 +-
 .../infinite-scroll/infinite-scroll.tsx       |   4 +-
 core/src/components/input/input.tsx           |  12 +-
 .../components/item-divider/item-divider.tsx  |   6 +-
 core/src/components/item-group/item-group.tsx |   9 +-
 .../components/item-option/item-option.tsx    |   6 +-
 .../components/item-options/item-options.tsx  |   9 +-
 .../components/item-sliding/item-sliding.tsx  |   4 +-
 core/src/components/item/item.tsx             |   6 +-
 core/src/components/label/label.tsx           |   6 +-
 .../components/list-header/list-header.tsx    |   6 +-
 core/src/components/list/list.tsx             |   6 +-
 core/src/components/loading/loading.scss      |   1 -
 core/src/components/loading/loading.tsx       |  11 +-
 .../components/menu-button/menu-button.tsx    |   6 +-
 .../components/menu-toggle/menu-toggle.tsx    |   4 +-
 core/src/components/menu/menu.tsx             |  14 +-
 core/src/components/modal/modal.tsx           |  12 +-
 core/src/components/nav/nav.tsx               |   8 +-
 core/src/components/note/note.tsx             |   6 +-
 .../picker-column-internal.tsx                |   6 +-
 .../picker-column/picker-column.tsx           |  12 +-
 .../picker-internal/picker-internal.tsx       |   2 -
 core/src/components/picker/picker.scss        |   5 -
 core/src/components/picker/picker.tsx         |   6 +-
 core/src/components/picker/picker.vars.scss   |  14 -
 core/src/components/popover/popover.scss      |   1 -
 core/src/components/popover/popover.tsx       |   8 +-
 .../components/progress-bar/progress-bar.scss |   6 -
 .../components/progress-bar/progress-bar.tsx  |   6 +-
 .../components/radio-group/radio-group.tsx    |   4 +-
 core/src/components/radio/radio.tsx           |   8 +-
 core/src/components/range/range.tsx           |   8 +-
 .../refresher-content/refresher-content.tsx   |  12 +-
 core/src/components/refresher/refresher.tsx   |  17 +-
 .../reorder-group/reorder-group.tsx           |   4 +-
 core/src/components/reorder/reorder.tsx       |   8 +-
 .../ripple-effect/ripple-effect.tsx           |   4 +-
 .../components/router-link/router-link.tsx    |   4 +-
 .../components/router-outlet/route-outlet.tsx |   4 +-
 core/src/components/row/row.tsx               |   4 +-
 core/src/components/searchbar/searchbar.tsx   |   8 +-
 .../segment-button/segment-button.tsx         |   6 +-
 core/src/components/segment/segment.tsx       |   6 +-
 .../select-option/select-option.tsx           |   4 +-
 .../select-popover/select-popover.tsx         |   7 +-
 core/src/components/select/select.tsx         |  21 +-
 .../skeleton-text/skeleton-text.tsx           |   4 +-
 core/src/components/spinner/spinner.tsx       |   8 +-
 core/src/components/split-pane/split-pane.tsx |   9 +-
 core/src/components/tab-bar/tab-bar.scss      |   2 -
 core/src/components/tab-bar/tab-bar.tsx       |   6 +-
 core/src/components/tab-bar/tab-bar.vars.scss |   9 -
 core/src/components/tab-button/tab-button.tsx |   6 +-
 core/src/components/text/text.tsx             |   5 +-
 core/src/components/textarea/textarea.tsx     |  12 +-
 core/src/components/thumbnail/thumbnail.tsx   |   4 +-
 core/src/components/title/title.tsx           |   9 +-
 core/src/components/toast/toast.tsx           |   8 +-
 core/src/components/toggle/toggle.tsx         |  10 +-
 core/src/components/toolbar/toolbar.tsx       |   6 +-
 core/src/global/base-components.ts            | 115 ----
 core/src/global/config.ts                     |  20 -
 core/src/global/ionic-global.ts               |  73 +--
 core/src/global/test/base-components.spec.ts  |  79 ---
 .../src/global/test/config-controller.spec.ts |  13 +-
 core/src/global/test/platform.spec.ts         |  15 -
 core/src/index.ts                             |   2 +-
 core/src/utils/config.ts                      |  34 -
 .../menu-controller/animations/overlay.ts     |   6 +-
 .../utils/menu-controller/animations/push.ts  |   6 +-
 .../menu-controller/animations/reveal.ts      |   6 +-
 core/src/utils/overlays.ts                    |  10 +-
 packages/react/src/components/index.ts        |   3 -
 packages/vue/src/components/Overlays.ts       |  14 +-
 packages/vue/src/index.ts                     |   2 -
 114 files changed, 387 insertions(+), 1587 deletions(-)
 delete mode 100644 core/src/components/tab-bar/tab-bar.vars.scss
 delete mode 100644 core/src/global/base-components.ts
 delete mode 100644 core/src/global/test/base-components.spec.ts
 delete mode 100644 core/src/global/test/platform.spec.ts

diff --git a/.github/COMPONENT-GUIDE.md b/.github/COMPONENT-GUIDE.md
index 7a03ca0c7d..bc76084634 100644
--- a/.github/COMPONENT-GUIDE.md
+++ b/.github/COMPONENT-GUIDE.md
@@ -328,7 +328,7 @@ The ripple effect should be added to elements for Material Design. It *requires*
 
 ```jsx
  render() {
-  const mode = getIonStylesheet(this);
+  const mode = getIonMode(this);
 
 return (
   <Host
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 829d9b20e3..4d7c1e2a3a 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -12,13 +12,13 @@ export declare interface IonAccordion extends Components.IonAccordion {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'useBase', 'value']
+  inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value']
 })
 @Component({
   selector: 'ion-accordion',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'useBase', 'value']
+  inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value']
 })
 export class IonAccordion {
   protected el: HTMLElement;
@@ -42,13 +42,13 @@ the value property.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'useBase', 'value']
+  inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value']
 })
 @Component({
   selector: 'ion-accordion-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'useBase', 'value']
+  inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value']
 })
 export class IonAccordionGroup {
   protected el: HTMLElement;
@@ -102,14 +102,14 @@ Shorthand for ionActionSheetDidDismiss.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger', 'useBase'],
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger'],
   methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
 })
 @Component({
   selector: 'ion-action-sheet',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger', 'useBase']
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']
 })
 export class IonActionSheet {
   protected el: HTMLElement;
@@ -163,14 +163,14 @@ Shorthand for ionAlertDidDismiss.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger', 'useBase'],
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger'],
   methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
 })
 @Component({
   selector: 'ion-alert',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger', 'useBase']
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger']
 })
 export class IonAlert {
   protected el: HTMLElement;
@@ -204,14 +204,12 @@ export class IonApp {
 export declare interface IonAvatar extends Components.IonAvatar {}
 
 @ProxyCmp({
-  defineCustomElementFn: undefined,
-  inputs: ['mode', 'useBase']
+  defineCustomElementFn: undefined
 })
 @Component({
   selector: 'ion-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  inputs: ['mode', 'useBase']
+  template: '<ng-content></ng-content>'
 })
 export class IonAvatar {
   protected el: HTMLElement;
@@ -226,13 +224,13 @@ export declare interface IonBackButton extends Components.IonBackButton {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type', 'useBase']
+  inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type']
 })
 @Component({
   selector: 'ion-back-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type', 'useBase']
+  inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type']
 })
 export class IonBackButton {
   protected el: HTMLElement;
@@ -253,13 +251,13 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['mode', 'stopPropagation', 'tappable', 'useBase', 'visible']
+  inputs: ['stopPropagation', 'tappable', 'visible']
 })
 @Component({
   selector: 'ion-backdrop',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['mode', 'stopPropagation', 'tappable', 'useBase', 'visible']
+  inputs: ['stopPropagation', 'tappable', 'visible']
 })
 export class IonBackdrop {
   protected el: HTMLElement;
@@ -275,13 +273,13 @@ export declare interface IonBadge extends Components.IonBadge {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 @Component({
   selector: 'ion-badge',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 export class IonBadge {
   protected el: HTMLElement;
@@ -306,13 +304,13 @@ export declare interface IonBreadcrumb extends Components.IonBreadcrumb {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target', 'useBase']
+  inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target']
 })
 @Component({
   selector: 'ion-breadcrumb',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target', 'useBase']
+  inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target']
 })
 export class IonBreadcrumb {
   protected el: HTMLElement;
@@ -334,13 +332,13 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode', 'useBase']
+  inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode']
 })
 @Component({
   selector: 'ion-breadcrumbs',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode', 'useBase']
+  inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode']
 })
 export class IonBreadcrumbs {
   protected el: HTMLElement;
@@ -366,13 +364,13 @@ export declare interface IonButton extends Components.IonButton {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type', 'useBase']
+  inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']
 })
 @Component({
   selector: 'ion-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type', 'useBase']
+  inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']
 })
 export class IonButton {
   protected el: HTMLElement;
@@ -388,13 +386,13 @@ export declare interface IonButtons extends Components.IonButtons {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['collapse', 'mode', 'useBase']
+  inputs: ['collapse']
 })
 @Component({
   selector: 'ion-buttons',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['collapse', 'mode', 'useBase']
+  inputs: ['collapse']
 })
 export class IonButtons {
   protected el: HTMLElement;
@@ -409,13 +407,13 @@ export declare interface IonCard extends Components.IonCard {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type', 'useBase']
+  inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type']
 })
 @Component({
   selector: 'ion-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type', 'useBase']
+  inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type']
 })
 export class IonCard {
   protected el: HTMLElement;
@@ -430,13 +428,13 @@ export declare interface IonCardContent extends Components.IonCardContent {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['mode', 'useBase']
+  inputs: ['mode']
 })
 @Component({
   selector: 'ion-card-content',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['mode', 'useBase']
+  inputs: ['mode']
 })
 export class IonCardContent {
   protected el: HTMLElement;
@@ -451,13 +449,13 @@ export declare interface IonCardHeader extends Components.IonCardHeader {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'mode', 'translucent', 'useBase']
+  inputs: ['color', 'mode', 'translucent']
 })
 @Component({
   selector: 'ion-card-header',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'mode', 'translucent', 'useBase']
+  inputs: ['color', 'mode', 'translucent']
 })
 export class IonCardHeader {
   protected el: HTMLElement;
@@ -472,13 +470,13 @@ export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 @Component({
   selector: 'ion-card-subtitle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 export class IonCardSubtitle {
   protected el: HTMLElement;
@@ -493,13 +491,13 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 @Component({
   selector: 'ion-card-title',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 export class IonCardTitle {
   protected el: HTMLElement;
@@ -531,13 +529,13 @@ setting the checked property.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'useBase', 'value']
+  inputs: ['checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'useBase', 'value']
+  inputs: ['checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
 })
 export class IonCheckbox {
   protected el: HTMLElement;
@@ -553,13 +551,13 @@ export declare interface IonChip extends Components.IonChip {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'disabled', 'outline']
+  inputs: ['color', 'disabled', 'mode', 'outline']
 })
 @Component({
   selector: 'ion-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'disabled', 'outline']
+  inputs: ['color', 'disabled', 'mode', 'outline']
 })
 export class IonChip {
   protected el: HTMLElement;
@@ -654,14 +652,14 @@ export declare interface IonDatetime extends Components.IonDatetime {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'useBase', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
   methods: ['confirm', 'reset', 'cancel']
 })
 @Component({
   selector: 'ion-datetime',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'useBase', 'value', 'yearValues']
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues']
 })
 export class IonDatetime {
   protected el: HTMLElement;
@@ -677,13 +675,13 @@ export declare interface IonDatetimeButton extends Components.IonDatetimeButton
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'datetime', 'disabled', 'mode', 'useBase']
+  inputs: ['color', 'datetime', 'disabled', 'mode']
 })
 @Component({
   selector: 'ion-datetime-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'datetime', 'disabled', 'mode', 'useBase']
+  inputs: ['color', 'datetime', 'disabled', 'mode']
 })
 export class IonDatetimeButton {
   protected el: HTMLElement;
@@ -730,13 +728,13 @@ export declare interface IonFabButton extends Components.IonFabButton {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type', 'useBase']
+  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
 })
 @Component({
   selector: 'ion-fab-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type', 'useBase']
+  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
 })
 export class IonFabButton {
   protected el: HTMLElement;
@@ -773,13 +771,13 @@ export declare interface IonFooter extends Components.IonFooter {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['collapse', 'mode', 'translucent', 'useBase']
+  inputs: ['collapse', 'mode', 'translucent']
 })
 @Component({
   selector: 'ion-footer',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['collapse', 'mode', 'translucent', 'useBase']
+  inputs: ['collapse', 'mode', 'translucent']
 })
 export class IonFooter {
   protected el: HTMLElement;
@@ -815,13 +813,13 @@ export declare interface IonHeader extends Components.IonHeader {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['collapse', 'mode', 'translucent', 'useBase']
+  inputs: ['collapse', 'mode', 'translucent']
 })
 @Component({
   selector: 'ion-header',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['collapse', 'mode', 'translucent', 'useBase']
+  inputs: ['collapse', 'mode', 'translucent']
 })
 export class IonHeader {
   protected el: HTMLElement;
@@ -925,13 +923,13 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['loadingSpinner', 'loadingText', 'mode', 'useBase']
+  inputs: ['loadingSpinner', 'loadingText']
 })
 @Component({
   selector: 'ion-infinite-scroll-content',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['loadingSpinner', 'loadingText', 'mode', 'useBase']
+  inputs: ['loadingSpinner', 'loadingText']
 })
 export class IonInfiniteScrollContent {
   protected el: HTMLElement;
@@ -980,14 +978,14 @@ where the user's interaction is typing.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'useBase', 'value'],
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
   selector: 'ion-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'useBase', 'value']
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value']
 })
 export class IonInput {
   protected el: HTMLElement;
@@ -1003,13 +1001,13 @@ export declare interface IonItem extends Components.IonItem {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type', 'useBase']
+  inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type']
 })
 @Component({
   selector: 'ion-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type', 'useBase']
+  inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type']
 })
 export class IonItem {
   protected el: HTMLElement;
@@ -1024,13 +1022,13 @@ export declare interface IonItemDivider extends Components.IonItemDivider {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'mode', 'sticky', 'useBase']
+  inputs: ['color', 'mode', 'sticky']
 })
 @Component({
   selector: 'ion-item-divider',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'mode', 'sticky', 'useBase']
+  inputs: ['color', 'mode', 'sticky']
 })
 export class IonItemDivider {
   protected el: HTMLElement;
@@ -1044,14 +1042,12 @@ export class IonItemDivider {
 export declare interface IonItemGroup extends Components.IonItemGroup {}
 
 @ProxyCmp({
-  defineCustomElementFn: undefined,
-  inputs: ['mode', 'useBase']
+  defineCustomElementFn: undefined
 })
 @Component({
   selector: 'ion-item-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  inputs: ['mode', 'useBase']
+  template: '<ng-content></ng-content>'
 })
 export class IonItemGroup {
   protected el: HTMLElement;
@@ -1066,13 +1062,13 @@ export declare interface IonItemOption extends Components.IonItemOption {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type', 'useBase']
+  inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type']
 })
 @Component({
   selector: 'ion-item-option',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type', 'useBase']
+  inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type']
 })
 export class IonItemOption {
   protected el: HTMLElement;
@@ -1093,13 +1089,13 @@ export declare interface IonItemOptions extends Components.IonItemOptions {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['mode', 'side', 'useBase']
+  inputs: ['side']
 })
 @Component({
   selector: 'ion-item-options',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['mode', 'side', 'useBase']
+  inputs: ['side']
 })
 export class IonItemOptions {
   protected el: HTMLElement;
@@ -1144,13 +1140,13 @@ export declare interface IonLabel extends Components.IonLabel {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'mode', 'position', 'useBase']
+  inputs: ['color', 'mode', 'position']
 })
 @Component({
   selector: 'ion-label',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'mode', 'position', 'useBase']
+  inputs: ['color', 'mode', 'position']
 })
 export class IonLabel {
   protected el: HTMLElement;
@@ -1165,14 +1161,14 @@ export declare interface IonList extends Components.IonList {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['inset', 'lines', 'mode', 'useBase'],
+  inputs: ['inset', 'lines', 'mode'],
   methods: ['closeSlidingItems']
 })
 @Component({
   selector: 'ion-list',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['inset', 'lines', 'mode', 'useBase']
+  inputs: ['inset', 'lines', 'mode']
 })
 export class IonList {
   protected el: HTMLElement;
@@ -1187,13 +1183,13 @@ export declare interface IonListHeader extends Components.IonListHeader {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'lines', 'mode', 'useBase']
+  inputs: ['color', 'lines', 'mode']
 })
 @Component({
   selector: 'ion-list-header',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'lines', 'mode', 'useBase']
+  inputs: ['color', 'lines', 'mode']
 })
 export class IonListHeader {
   protected el: HTMLElement;
@@ -1246,14 +1242,14 @@ Shorthand for ionLoadingDidDismiss.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger', 'useBase'],
+  inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger'],
   methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
 })
 @Component({
   selector: 'ion-loading',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger', 'useBase']
+  inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']
 })
 export class IonLoading {
   protected el: HTMLElement;
@@ -1287,14 +1283,14 @@ export declare interface IonMenu extends Components.IonMenu {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'mode', 'side', 'swipeGesture', 'type', 'useBase'],
+  inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'],
   methods: ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen']
 })
 @Component({
   selector: 'ion-menu',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'mode', 'side', 'swipeGesture', 'type', 'useBase']
+  inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type']
 })
 export class IonMenu {
   protected el: HTMLElement;
@@ -1310,13 +1306,13 @@ export declare interface IonMenuButton extends Components.IonMenuButton {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type', 'useBase']
+  inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type']
 })
 @Component({
   selector: 'ion-menu-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type', 'useBase']
+  inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type']
 })
 export class IonMenuButton {
   protected el: HTMLElement;
@@ -1406,13 +1402,13 @@ export declare interface IonNote extends Components.IonNote {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 @Component({
   selector: 'ion-note',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 export class IonNote {
   protected el: HTMLElement;
@@ -1465,14 +1461,14 @@ Shorthand for ionPickerDidDismiss.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger', 'useBase'],
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
   methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'getColumn']
 })
 @Component({
   selector: 'ion-picker',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger', 'useBase']
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']
 })
 export class IonPicker {
   protected el: HTMLElement;
@@ -1488,13 +1484,13 @@ export declare interface IonProgressBar extends Components.IonProgressBar {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'useBase', 'value']
+  inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value']
 })
 @Component({
   selector: 'ion-progress-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'useBase', 'value']
+  inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value']
 })
 export class IonProgressBar {
   protected el: HTMLElement;
@@ -1519,13 +1515,13 @@ export declare interface IonRadio extends Components.IonRadio {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'useBase', 'value']
+  inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-radio',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'useBase', 'value']
+  inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
 })
 export class IonRadio {
   protected el: HTMLElement;
@@ -1606,13 +1602,13 @@ mouse drag, touch gesture, or keyboard interaction.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'useBase', 'value']
+  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
 })
 @Component({
   selector: 'ion-range',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'useBase', 'value']
+  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
 })
 export class IonRange {
   protected el: HTMLElement;
@@ -1645,14 +1641,14 @@ called when the async operation has completed.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['closeDuration', 'disabled', 'mode', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration', 'useBase'],
+  inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
   methods: ['complete', 'cancel', 'getProgress']
 })
 @Component({
   selector: 'ion-refresher',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['closeDuration', 'disabled', 'mode', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration', 'useBase']
+  inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration']
 })
 export class IonRefresher {
   protected el: HTMLElement;
@@ -1688,14 +1684,12 @@ export class IonRefresherContent {
 export declare interface IonReorder extends Components.IonReorder {}
 
 @ProxyCmp({
-  defineCustomElementFn: undefined,
-  inputs: ['mode', 'useBase']
+  defineCustomElementFn: undefined
 })
 @Component({
   selector: 'ion-reorder',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  inputs: ['mode', 'useBase']
+  template: '<ng-content></ng-content>'
 })
 export class IonReorder {
   protected el: HTMLElement;
@@ -1814,14 +1808,14 @@ or cancel buttons.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'useBase', 'value'],
+  inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
   selector: 'ion-searchbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'useBase', 'value']
+  inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value']
 })
 export class IonSearchbar {
   protected el: HTMLElement;
@@ -1844,13 +1838,13 @@ dragging pointer has been released from `ion-segment`.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'useBase', 'value']
+  inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value']
 })
 @Component({
   selector: 'ion-segment',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'useBase', 'value']
+  inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value']
 })
 export class IonSegment {
   protected el: HTMLElement;
@@ -1866,13 +1860,13 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['disabled', 'layout', 'mode', 'type', 'useBase', 'value']
+  inputs: ['disabled', 'layout', 'mode', 'type', 'value']
 })
 @Component({
   selector: 'ion-segment-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['disabled', 'layout', 'mode', 'type', 'useBase', 'value']
+  inputs: ['disabled', 'layout', 'mode', 'type', 'value']
 })
 export class IonSegmentButton {
   protected el: HTMLElement;
@@ -1909,14 +1903,14 @@ export declare interface IonSelect extends Components.IonSelect {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'useBase', 'value'],
+  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'value'],
   methods: ['open']
 })
 @Component({
   selector: 'ion-select',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'useBase', 'value']
+  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'value']
 })
 export class IonSelect {
   protected el: HTMLElement;
@@ -2001,13 +1995,13 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['contentId', 'disabled', 'mode', 'useBase', 'when']
+  inputs: ['contentId', 'disabled', 'when']
 })
 @Component({
   selector: 'ion-split-pane',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['contentId', 'disabled', 'mode', 'useBase', 'when']
+  inputs: ['contentId', 'disabled', 'when']
 })
 export class IonSplitPane {
   protected el: HTMLElement;
@@ -2023,13 +2017,13 @@ export declare interface IonTabBar extends Components.IonTabBar {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'mode', 'selectedTab', 'translucent', 'useBase']
+  inputs: ['color', 'mode', 'selectedTab', 'translucent']
 })
 @Component({
   selector: 'ion-tab-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'mode', 'selectedTab', 'translucent', 'useBase']
+  inputs: ['color', 'mode', 'selectedTab', 'translucent']
 })
 export class IonTabBar {
   protected el: HTMLElement;
@@ -2044,13 +2038,13 @@ export declare interface IonTabButton extends Components.IonTabButton {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target', 'useBase']
+  inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target']
 })
 @Component({
   selector: 'ion-tab-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target', 'useBase']
+  inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target']
 })
 export class IonTabButton {
   protected el: HTMLElement;
@@ -2065,13 +2059,13 @@ export declare interface IonText extends Components.IonText {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 @Component({
   selector: 'ion-text',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 export class IonText {
   protected el: HTMLElement;
@@ -2114,14 +2108,14 @@ the user clears the textarea by performing a keydown event.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'useBase', 'value', 'wrap'],
+  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
   selector: 'ion-textarea',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'useBase', 'value', 'wrap']
+  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap']
 })
 export class IonTextarea {
   protected el: HTMLElement;
@@ -2156,13 +2150,13 @@ export declare interface IonTitle extends Components.IonTitle {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'mode', 'size', 'useBase']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'ion-title',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'mode', 'size', 'useBase']
+  inputs: ['color', 'size']
 })
 export class IonTitle {
   protected el: HTMLElement;
@@ -2215,14 +2209,14 @@ Shorthand for ionToastDidDismiss.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger', 'useBase'],
+  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
   methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
 })
 @Component({
   selector: 'ion-toast',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger', 'useBase']
+  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger']
 })
 export class IonToast {
   protected el: HTMLElement;
@@ -2253,13 +2247,13 @@ when programmatically changing the value of the `checked` property.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'useBase', 'value']
+  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'useBase', 'value']
+  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
 })
 export class IonToggle {
   protected el: HTMLElement;
@@ -2275,13 +2269,13 @@ export declare interface IonToolbar extends Components.IonToolbar {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 @Component({
   selector: 'ion-toolbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'mode', 'useBase']
+  inputs: ['color', 'mode']
 })
 export class IonToolbar {
   protected el: HTMLElement;
diff --git a/angular/src/index.ts b/angular/src/index.ts
index f953e548b5..7c00685f72 100644
--- a/angular/src/index.ts
+++ b/angular/src/index.ts
@@ -69,7 +69,6 @@ export {
   SpinnerTypes,
   AccordionGroupCustomEvent,
   AccordionGroupChangeEventDetail,
-  BaseComponentsConfig,
   BreadcrumbCustomEvent,
   BreadcrumbCollapsedClickEventDetail,
   ActionSheetOptions,
@@ -88,7 +87,6 @@ export {
   ItemReorderEventDetail,
   ItemReorderCustomEvent,
   ItemSlidingCustomEvent,
-  IonicConfig,
   IonicSafeString,
   LoadingOptions,
   MenuCustomEvent,
diff --git a/core/api.txt b/core/api.txt
index 708527ad93..6f43a9fc1f 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -5,7 +5,6 @@ ion-accordion,prop,mode,"ios" | "md",undefined,false,false
 ion-accordion,prop,readonly,boolean,false,false,false
 ion-accordion,prop,toggleIcon,string,chevronDown,false,false
 ion-accordion,prop,toggleIconSlot,"end" | "start",'end',false,false
-ion-accordion,prop,useBase,true | false,undefined,false,false
 ion-accordion,prop,value,string,`ion-accordion-${accordionIds++}`,false,false
 ion-accordion,part,content
 ion-accordion,part,expanded
@@ -18,7 +17,6 @@ ion-accordion-group,prop,expand,"compact" | "inset",'compact',false,false
 ion-accordion-group,prop,mode,"ios" | "md",undefined,false,false
 ion-accordion-group,prop,multiple,boolean | undefined,undefined,false,false
 ion-accordion-group,prop,readonly,boolean,false,false,false
-ion-accordion-group,prop,useBase,true | false,undefined,false,false
 ion-accordion-group,prop,value,null | string | string[] | undefined,undefined,false,false
 ion-accordion-group,event,ionChange,AccordionGroupChangeEventDetail<any>,true
 
@@ -37,7 +35,6 @@ ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
 ion-action-sheet,prop,subHeader,string | undefined,undefined,false,false
 ion-action-sheet,prop,translucent,boolean,false,false,false
 ion-action-sheet,prop,trigger,string | undefined,undefined,false,false
-ion-action-sheet,prop,useBase,true | false,undefined,false,false
 ion-action-sheet,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-action-sheet,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-action-sheet,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
@@ -91,7 +88,6 @@ ion-alert,prop,mode,"ios" | "md",undefined,false,false
 ion-alert,prop,subHeader,string | undefined,undefined,false,false
 ion-alert,prop,translucent,boolean,false,false,false
 ion-alert,prop,trigger,string | undefined,undefined,false,false
-ion-alert,prop,useBase,true | false,undefined,false,false
 ion-alert,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-alert,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-alert,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
@@ -116,8 +112,6 @@ ion-alert,css-prop,--width
 ion-app,none
 
 ion-avatar,shadow
-ion-avatar,prop,mode,"ios" | "md",undefined,false,false
-ion-avatar,prop,useBase,true | false,undefined,false,false
 ion-avatar,css-prop,--border-radius
 
 ion-back-button,shadow
@@ -129,7 +123,6 @@ ion-back-button,prop,mode,"ios" | "md",undefined,false,false
 ion-back-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-back-button,prop,text,null | string | undefined,undefined,false,false
 ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-back-button,prop,useBase,true | false,undefined,false,false
 ion-back-button,css-prop,--background
 ion-back-button,css-prop,--background-focused
 ion-back-button,css-prop,--background-focused-opacity
@@ -167,17 +160,14 @@ ion-back-button,part,native
 ion-back-button,part,text
 
 ion-backdrop,shadow
-ion-backdrop,prop,mode,"ios" | "md",undefined,false,false
 ion-backdrop,prop,stopPropagation,boolean,true,false,false
 ion-backdrop,prop,tappable,boolean,true,false,false
-ion-backdrop,prop,useBase,true | false,undefined,false,false
 ion-backdrop,prop,visible,boolean,true,false,false
 ion-backdrop,event,ionBackdropTap,void,true
 
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
-ion-badge,prop,useBase,true | false,undefined,false,false
 ion-badge,css-prop,--background
 ion-badge,css-prop,--color
 ion-badge,css-prop,--padding-bottom
@@ -197,7 +187,6 @@ ion-breadcrumb,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | u
 ion-breadcrumb,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-breadcrumb,prop,separator,boolean | undefined,undefined,false,false
 ion-breadcrumb,prop,target,string | undefined,undefined,false,false
-ion-breadcrumb,prop,useBase,true | false,undefined,false,false
 ion-breadcrumb,event,ionBlur,void,true
 ion-breadcrumb,event,ionFocus,void,true
 ion-breadcrumb,css-prop,--background-focused
@@ -215,7 +204,6 @@ ion-breadcrumbs,prop,itemsAfterCollapse,number,1,false,false
 ion-breadcrumbs,prop,itemsBeforeCollapse,number,1,false,false
 ion-breadcrumbs,prop,maxItems,number | undefined,undefined,false,false
 ion-breadcrumbs,prop,mode,"ios" | "md",undefined,false,false
-ion-breadcrumbs,prop,useBase,true | false,undefined,false,false
 ion-breadcrumbs,event,ionCollapsedClick,BreadcrumbCollapsedClickEventDetail,true
 
 ion-button,shadow
@@ -236,7 +224,6 @@ ion-button,prop,size,"default" | "large" | "small" | undefined,undefined,false,t
 ion-button,prop,strong,boolean,false,false,false
 ion-button,prop,target,string | undefined,undefined,false,false
 ion-button,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-button,prop,useBase,true | false,undefined,false,false
 ion-button,event,ionBlur,void,true
 ion-button,event,ionFocus,void,true
 ion-button,css-prop,--background
@@ -266,8 +253,6 @@ ion-button,part,native
 
 ion-buttons,scoped
 ion-buttons,prop,collapse,boolean,false,false,false
-ion-buttons,prop,mode,"ios" | "md",undefined,false,false
-ion-buttons,prop,useBase,true | false,undefined,false,false
 
 ion-card,shadow
 ion-card,prop,button,boolean,false,false,false
@@ -281,31 +266,26 @@ ion-card,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefin
 ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-card,prop,target,string | undefined,undefined,false,false
 ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-card,prop,useBase,true | false,undefined,false,false
 ion-card,css-prop,--background
 ion-card,css-prop,--color
 ion-card,part,native
 
 ion-card-content,none
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
-ion-card-content,prop,useBase,true | false,undefined,false,false
 
 ion-card-header,shadow
 ion-card-header,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-header,prop,mode,"ios" | "md",undefined,false,false
 ion-card-header,prop,translucent,boolean,false,false,false
-ion-card-header,prop,useBase,true | false,undefined,false,false
 
 ion-card-subtitle,shadow
 ion-card-subtitle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-subtitle,prop,mode,"ios" | "md",undefined,false,false
-ion-card-subtitle,prop,useBase,true | false,undefined,false,false
 ion-card-subtitle,css-prop,--color
 
 ion-card-title,shadow
 ion-card-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-title,prop,mode,"ios" | "md",undefined,false,false
-ion-card-title,prop,useBase,true | false,undefined,false,false
 ion-card-title,css-prop,--color
 
 ion-checkbox,shadow
@@ -318,7 +298,6 @@ ion-checkbox,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
 ion-checkbox,prop,legacy,boolean | undefined,undefined,false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
-ion-checkbox,prop,useBase,true | false,undefined,false,false
 ion-checkbox,prop,value,any,'on',false,false
 ion-checkbox,event,ionBlur,void,true
 ion-checkbox,event,ionChange,CheckboxChangeEventDetail<any>,true
@@ -340,6 +319,7 @@ ion-checkbox,part,mark
 ion-chip,shadow
 ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-chip,prop,disabled,boolean,false,false,false
+ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
 ion-chip,css-prop,--background
 ion-chip,css-prop,--color
@@ -432,7 +412,6 @@ ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false
 ion-datetime,prop,showDefaultTitle,boolean,false,false,false
 ion-datetime,prop,size,"cover" | "fixed",'fixed',false,false
 ion-datetime,prop,titleSelectedDatesFormatter,((selectedDates: string[]) => string) | undefined,undefined,false,false
-ion-datetime,prop,useBase,true | false,undefined,false,false
 ion-datetime,prop,value,null | string | string[] | undefined,undefined,false,false
 ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,method,cancel,cancel(closeOverlay?: boolean) => Promise<void>
@@ -451,7 +430,6 @@ ion-datetime-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary
 ion-datetime-button,prop,datetime,string | undefined,undefined,false,false
 ion-datetime-button,prop,disabled,boolean,false,false,true
 ion-datetime-button,prop,mode,"ios" | "md",undefined,false,false
-ion-datetime-button,prop,useBase,true | false,undefined,false,false
 ion-datetime-button,part,native
 
 ion-fab,shadow
@@ -477,7 +455,6 @@ ion-fab-button,prop,size,"small" | undefined,undefined,false,false
 ion-fab-button,prop,target,string | undefined,undefined,false,false
 ion-fab-button,prop,translucent,boolean,false,false,false
 ion-fab-button,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-fab-button,prop,useBase,true | false,undefined,false,false
 ion-fab-button,event,ionBlur,void,true
 ion-fab-button,event,ionFocus,void,true
 ion-fab-button,css-prop,--background
@@ -514,7 +491,6 @@ ion-footer,none
 ion-footer,prop,collapse,"fade" | undefined,undefined,false,false
 ion-footer,prop,mode,"ios" | "md",undefined,false,false
 ion-footer,prop,translucent,boolean,false,false,false
-ion-footer,prop,useBase,true | false,undefined,false,false
 
 ion-grid,shadow
 ion-grid,prop,fixed,boolean,false,false,false
@@ -535,7 +511,6 @@ ion-header,none
 ion-header,prop,collapse,"condense" | "fade" | undefined,undefined,false,false
 ion-header,prop,mode,"ios" | "md",undefined,false,false
 ion-header,prop,translucent,boolean,false,false,false
-ion-header,prop,useBase,true | false,undefined,false,false
 
 ion-img,shadow
 ion-img,prop,alt,string | undefined,undefined,false,false
@@ -555,8 +530,6 @@ ion-infinite-scroll,event,ionInfinite,void,true
 ion-infinite-scroll-content,none
 ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
 ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefined,undefined,false,false
-ion-infinite-scroll-content,prop,mode,"ios" | "md",undefined,false,false
-ion-infinite-scroll-content,prop,useBase,true | false,undefined,false,false
 
 ion-input,scoped
 ion-input,prop,accept,string | undefined,undefined,false,false
@@ -595,7 +568,6 @@ ion-input,prop,size,number | undefined,undefined,false,false
 ion-input,prop,spellcheck,boolean,false,false,false
 ion-input,prop,step,string | undefined,undefined,false,false
 ion-input,prop,type,"date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week",'text',false,false
-ion-input,prop,useBase,true | false,undefined,false,false
 ion-input,prop,value,null | number | string | undefined,'',false,false
 ion-input,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
 ion-input,method,setFocus,setFocus() => Promise<void>
@@ -640,7 +612,6 @@ ion-item,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-item,prop,shape,"round" | undefined,undefined,false,false
 ion-item,prop,target,string | undefined,undefined,false,false
 ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-item,prop,useBase,true | false,undefined,false,false
 ion-item,css-prop,--background
 ion-item,css-prop,--background-activated
 ion-item,css-prop,--background-activated-opacity
@@ -683,7 +654,6 @@ ion-item-divider,shadow
 ion-item-divider,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item-divider,prop,mode,"ios" | "md",undefined,false,false
 ion-item-divider,prop,sticky,boolean,false,false,false
-ion-item-divider,prop,useBase,true | false,undefined,false,false
 ion-item-divider,css-prop,--background
 ion-item-divider,css-prop,--color
 ion-item-divider,css-prop,--inner-padding-bottom
@@ -696,8 +666,6 @@ ion-item-divider,css-prop,--padding-start
 ion-item-divider,css-prop,--padding-top
 
 ion-item-group,none
-ion-item-group,prop,mode,"ios" | "md",undefined,false,false
-ion-item-group,prop,useBase,true | false,undefined,false,false
 
 ion-item-option,shadow
 ion-item-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -709,15 +677,12 @@ ion-item-option,prop,mode,"ios" | "md",undefined,false,false
 ion-item-option,prop,rel,string | undefined,undefined,false,false
 ion-item-option,prop,target,string | undefined,undefined,false,false
 ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-item-option,prop,useBase,true | false,undefined,false,false
 ion-item-option,css-prop,--background
 ion-item-option,css-prop,--color
 ion-item-option,part,native
 
 ion-item-options,none
-ion-item-options,prop,mode,"ios" | "md",undefined,false,false
 ion-item-options,prop,side,"end" | "start",'end',false,false
-ion-item-options,prop,useBase,true | false,undefined,false,false
 ion-item-options,event,ionSwipe,any,true
 
 ion-item-sliding,none
@@ -733,21 +698,18 @@ ion-label,scoped
 ion-label,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-label,prop,mode,"ios" | "md",undefined,false,false
 ion-label,prop,position,"fixed" | "floating" | "stacked" | undefined,undefined,false,false
-ion-label,prop,useBase,true | false,undefined,false,false
 ion-label,css-prop,--color
 
 ion-list,none
 ion-list,prop,inset,boolean,false,false,false
 ion-list,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list,prop,mode,"ios" | "md",undefined,false,false
-ion-list,prop,useBase,true | false,undefined,false,false
 ion-list,method,closeSlidingItems,closeSlidingItems() => Promise<boolean>
 
 ion-list-header,shadow
 ion-list-header,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-list-header,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list-header,prop,mode,"ios" | "md",undefined,false,false
-ion-list-header,prop,useBase,true | false,undefined,false,false
 ion-list-header,css-prop,--background
 ion-list-header,css-prop,--border-color
 ion-list-header,css-prop,--border-style
@@ -771,7 +733,6 @@ ion-loading,prop,showBackdrop,boolean,true,false,false
 ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
 ion-loading,prop,translucent,boolean,false,false,false
 ion-loading,prop,trigger,string | undefined,undefined,false,false
-ion-loading,prop,useBase,true | false,undefined,false,false
 ion-loading,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-loading,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-loading,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
@@ -799,11 +760,9 @@ ion-menu,prop,contentId,string | undefined,undefined,false,true
 ion-menu,prop,disabled,boolean,false,false,false
 ion-menu,prop,maxEdgeStart,number,50,false,false
 ion-menu,prop,menuId,string | undefined,undefined,false,true
-ion-menu,prop,mode,"ios" | "md",undefined,false,false
 ion-menu,prop,side,"end" | "start",'start',false,true
 ion-menu,prop,swipeGesture,boolean,true,false,false
 ion-menu,prop,type,string | undefined,undefined,false,false
-ion-menu,prop,useBase,true | false,undefined,false,false
 ion-menu,method,close,close(animated?: boolean) => Promise<boolean>
 ion-menu,method,isActive,isActive() => Promise<boolean>
 ion-menu,method,isOpen,isOpen() => Promise<boolean>
@@ -831,7 +790,6 @@ ion-menu-button,prop,disabled,boolean,false,false,false
 ion-menu-button,prop,menu,string | undefined,undefined,false,false
 ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
 ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-menu-button,prop,useBase,true | false,undefined,false,false
 ion-menu-button,css-prop,--background
 ion-menu-button,css-prop,--background-focused
 ion-menu-button,css-prop,--background-focused-opacity
@@ -871,7 +829,6 @@ ion-modal,prop,mode,"ios" | "md",undefined,false,false
 ion-modal,prop,presentingElement,HTMLElement | undefined,undefined,false,false
 ion-modal,prop,showBackdrop,boolean,true,false,false
 ion-modal,prop,trigger,string | undefined,undefined,false,false
-ion-modal,prop,useBase,true | false,undefined,false,false
 ion-modal,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-modal,method,getCurrentBreakpoint,getCurrentBreakpoint() => Promise<number | undefined>
 ion-modal,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
@@ -934,7 +891,6 @@ ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,fa
 ion-note,shadow
 ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-note,prop,mode,"ios" | "md",undefined,false,false
-ion-note,prop,useBase,true | false,undefined,false,false
 ion-note,css-prop,--color
 
 ion-picker,scoped
@@ -952,7 +908,6 @@ ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefi
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
 ion-picker,prop,showBackdrop,boolean,true,false,false
 ion-picker,prop,trigger,string | undefined,undefined,false,false
-ion-picker,prop,useBase,true | false,undefined,false,false
 ion-picker,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-picker,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
 ion-picker,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
@@ -1003,7 +958,6 @@ ion-popover,prop,size,"auto" | "cover",'auto',false,false
 ion-popover,prop,translucent,boolean,false,false,false
 ion-popover,prop,trigger,string | undefined,undefined,false,false
 ion-popover,prop,triggerAction,"click" | "context-menu" | "hover",'click',false,false
-ion-popover,prop,useBase,true | false,undefined,false,false
 ion-popover,method,dismiss,dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>
 ion-popover,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-popover,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
@@ -1037,7 +991,6 @@ ion-progress-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" |
 ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-progress-bar,prop,reversed,boolean,false,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
-ion-progress-bar,prop,useBase,true | false,undefined,false,false
 ion-progress-bar,prop,value,number,0,false,false
 ion-progress-bar,css-prop,--background
 ion-progress-bar,css-prop,--buffer-background
@@ -1054,7 +1007,6 @@ ion-radio,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
 ion-radio,prop,legacy,boolean | undefined,undefined,false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
-ion-radio,prop,useBase,true | false,undefined,false,false
 ion-radio,prop,value,any,undefined,false,false
 ion-radio,event,ionBlur,void,true
 ion-radio,event,ionFocus,void,true
@@ -1088,7 +1040,6 @@ ion-range,prop,pinFormatter,(value: number) => string | number,(value: number):
 ion-range,prop,snaps,boolean,false,false,false
 ion-range,prop,step,number,1,false,false
 ion-range,prop,ticks,boolean,true,false,false
-ion-range,prop,useBase,true | false,undefined,false,false
 ion-range,prop,value,number | { lower: number; upper: number; },0,false,false
 ion-range,event,ionBlur,void,true
 ion-range,event,ionChange,RangeChangeEventDetail,true
@@ -1117,12 +1068,10 @@ ion-range,part,tick-active
 ion-refresher,none
 ion-refresher,prop,closeDuration,string,'280ms',false,false
 ion-refresher,prop,disabled,boolean,false,false,false
-ion-refresher,prop,mode,"ios" | "md",undefined,false,false
 ion-refresher,prop,pullFactor,number,1,false,false
 ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
 ion-refresher,prop,pullMin,number,60,false,false
 ion-refresher,prop,snapbackDuration,string,'280ms',false,false
-ion-refresher,prop,useBase,true | false,undefined,false,false
 ion-refresher,method,cancel,cancel() => Promise<void>
 ion-refresher,method,complete,complete() => Promise<void>
 ion-refresher,method,getProgress,getProgress() => Promise<number>
@@ -1137,8 +1086,6 @@ ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "circular"
 ion-refresher-content,prop,refreshingText,IonicSafeString | string | undefined,undefined,false,false
 
 ion-reorder,shadow
-ion-reorder,prop,mode,"ios" | "md",undefined,false,false
-ion-reorder,prop,useBase,true | false,undefined,false,false
 ion-reorder,part,icon
 
 ion-reorder-group,none
@@ -1184,7 +1131,7 @@ ion-router-link,css-prop,--color
 ion-router-outlet,shadow
 ion-router-outlet,prop,animated,boolean,true,false,false
 ion-router-outlet,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
-ion-router-outlet,prop,mode,"ios" | "md",getIonBehavior(this),false,false
+ion-router-outlet,prop,mode,"ios" | "md",getIonMode(this),false,false
 
 ion-row,shadow
 
@@ -1207,7 +1154,6 @@ ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,f
 ion-searchbar,prop,showClearButton,"always" | "focus" | "never",'always',false,false
 ion-searchbar,prop,spellcheck,boolean,false,false,false
 ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
-ion-searchbar,prop,useBase,true | false,undefined,false,false
 ion-searchbar,prop,value,null | string | undefined,'',false,false
 ion-searchbar,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
 ion-searchbar,method,setFocus,setFocus() => Promise<void>
@@ -1236,7 +1182,6 @@ ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
 ion-segment,prop,selectOnFocus,boolean,false,false,false
 ion-segment,prop,swipeGesture,boolean,true,false,false
-ion-segment,prop,useBase,true | false,undefined,false,false
 ion-segment,prop,value,string | undefined,undefined,false,false
 ion-segment,event,ionChange,SegmentChangeEventDetail,true
 ion-segment,css-prop,--background
@@ -1246,7 +1191,6 @@ ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
 ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-segment-button,prop,useBase,true | false,undefined,false,false
 ion-segment-button,prop,value,string,'ion-sb-' + ids++,false,false
 ion-segment-button,css-prop,--background
 ion-segment-button,css-prop,--background-checked
@@ -1299,7 +1243,6 @@ ion-select,prop,okText,string,'OK',false,false
 ion-select,prop,placeholder,string | undefined,undefined,false,false
 ion-select,prop,selectedText,null | string | undefined,undefined,false,false
 ion-select,prop,shape,"round" | undefined,undefined,false,false
-ion-select,prop,useBase,true | false,undefined,false,false
 ion-select,prop,value,any,undefined,false,false
 ion-select,method,open,open(event?: UIEvent) => Promise<any>
 ion-select,event,ionBlur,void,true
@@ -1346,8 +1289,6 @@ ion-spinner,css-prop,--color
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true
 ion-split-pane,prop,disabled,boolean,false,false,false
-ion-split-pane,prop,mode,"ios" | "md",undefined,false,false
-ion-split-pane,prop,useBase,true | false,undefined,false,false
 ion-split-pane,prop,when,boolean | string,QUERY['lg'],false,false
 ion-split-pane,event,ionSplitPaneVisible,{ visible: boolean; },true
 ion-split-pane,css-prop,--border
@@ -1365,7 +1306,6 @@ ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "sec
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
 ion-tab-bar,prop,translucent,boolean,false,false,false
-ion-tab-bar,prop,useBase,true | false,undefined,false,false
 ion-tab-bar,css-prop,--background
 ion-tab-bar,css-prop,--border
 ion-tab-bar,css-prop,--color
@@ -1380,7 +1320,6 @@ ion-tab-button,prop,rel,string | undefined,undefined,false,false
 ion-tab-button,prop,selected,boolean,false,false,false
 ion-tab-button,prop,tab,string | undefined,undefined,false,false
 ion-tab-button,prop,target,string | undefined,undefined,false,false
-ion-tab-button,prop,useBase,true | false,undefined,false,false
 ion-tab-button,css-prop,--background
 ion-tab-button,css-prop,--background-focused
 ion-tab-button,css-prop,--background-focused-opacity
@@ -1404,7 +1343,6 @@ ion-tabs,event,ionTabsWillChange,{ tab: string; },false
 ion-text,shadow
 ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-text,prop,mode,"ios" | "md",undefined,false,false
-ion-text,prop,useBase,true | false,undefined,false,false
 
 ion-textarea,scoped
 ion-textarea,prop,autoGrow,boolean,false,false,true
@@ -1434,7 +1372,6 @@ ion-textarea,prop,required,boolean,false,false,false
 ion-textarea,prop,rows,number | undefined,undefined,false,false
 ion-textarea,prop,shape,"round" | undefined,undefined,false,false
 ion-textarea,prop,spellcheck,boolean,false,false,false
-ion-textarea,prop,useBase,true | false,undefined,false,false
 ion-textarea,prop,value,null | string | undefined,'',false,false
 ion-textarea,prop,wrap,"hard" | "off" | "soft" | undefined,undefined,false,false
 ion-textarea,method,getInputElement,getInputElement() => Promise<HTMLTextAreaElement>
@@ -1467,9 +1404,7 @@ ion-thumbnail,css-prop,--size
 
 ion-title,shadow
 ion-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-title,prop,mode,"ios" | "md",undefined,false,false
 ion-title,prop,size,"large" | "small" | undefined,undefined,false,false
-ion-title,prop,useBase,true | false,undefined,false,false
 ion-title,css-prop,--color
 
 ion-toast,shadow
@@ -1490,7 +1425,6 @@ ion-toast,prop,mode,"ios" | "md",undefined,false,false
 ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
 ion-toast,prop,translucent,boolean,false,false,false
 ion-toast,prop,trigger,string | undefined,undefined,false,false
-ion-toast,prop,useBase,true | false,undefined,false,false
 ion-toast,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-toast,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-toast,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
@@ -1536,7 +1470,6 @@ ion-toggle,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
 ion-toggle,prop,legacy,boolean | undefined,undefined,false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
-ion-toggle,prop,useBase,true | false,undefined,false,false
 ion-toggle,prop,value,null | string | undefined,'on',false,false
 ion-toggle,event,ionBlur,void,true
 ion-toggle,event,ionChange,ToggleChangeEventDetail<any>,true
@@ -1559,7 +1492,6 @@ ion-toggle,part,track
 ion-toolbar,shadow
 ion-toolbar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toolbar,prop,mode,"ios" | "md",undefined,false,false
-ion-toolbar,prop,useBase,true | false,undefined,false,false
 ion-toolbar,css-prop,--background
 ion-toolbar,css-prop,--border-color
 ion-toolbar,css-prop,--border-style
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index a853016628..0808efebd8 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -35,10 +35,6 @@ export namespace Components {
           * The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`.
          */
         "toggleIconSlot": 'start' | 'end';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the accordion. Defaults to an autogenerated value.
          */
@@ -74,10 +70,6 @@ export namespace Components {
           * This method is used to ensure that the value of ion-accordion-group is being set in a valid way. This method should only be called in response to a user generated action.
          */
         "requestAccordionToggle": (accordionValue: string | undefined, accordionExpand: boolean) => Promise<void>;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the accordion group. This controls which accordions are expanded. This should be an array of strings only when `multiple="true"`
          */
@@ -161,10 +153,6 @@ export namespace Components {
           * An ID corresponding to the trigger element that causes the action sheet to open when clicked.
          */
         "trigger": string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonAlert {
         /**
@@ -252,23 +240,11 @@ export namespace Components {
           * An ID corresponding to the trigger element that causes the alert to open when clicked.
          */
         "trigger": string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonApp {
         "setFocus": (elements: HTMLElement[]) => Promise<void>;
     }
     interface IonAvatar {
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonBackButton {
         /**
@@ -303,16 +279,8 @@ export namespace Components {
           * The type of the button.
          */
         "type": 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonBackdrop {
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * If `true`, the backdrop will stop propagation on tap.
          */
@@ -321,10 +289,6 @@ export namespace Components {
           * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
          */
         "tappable": boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * If `true`, the backdrop will be visible.
          */
@@ -339,10 +303,6 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonBreadcrumb {
         /**
@@ -392,10 +352,6 @@ export namespace Components {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target": string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonBreadcrumbs {
         /**
@@ -418,10 +374,6 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonButton {
         /**
@@ -492,24 +444,12 @@ export namespace Components {
           * The type of the button.
          */
         "type": 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonButtons {
         /**
           * If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
          */
         "collapse": boolean;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCard {
         /**
@@ -556,20 +496,12 @@ export namespace Components {
           * The type of the button. Only used when an `onclick` or `button` property is present.
          */
         "type": 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCardContent {
         /**
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCardHeader {
         /**
@@ -584,10 +516,6 @@ export namespace Components {
           * If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent": boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCardSubtitle {
         /**
@@ -598,10 +526,6 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCardTitle {
         /**
@@ -612,10 +536,6 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCheckbox {
         /**
@@ -654,10 +574,6 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
@@ -672,6 +588,10 @@ export namespace Components {
           * If `true`, the user cannot interact with the chip.
          */
         "disabled": boolean;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Display an outline style button.
          */
@@ -954,10 +874,6 @@ export namespace Components {
           * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple="true"`.
          */
@@ -984,10 +900,6 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonFab {
         /**
@@ -1076,10 +988,6 @@ export namespace Components {
           * The type of the button.
          */
         "type": 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonFabList {
         /**
@@ -1104,10 +1012,6 @@ export namespace Components {
           * If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.
          */
         "translucent": boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonGrid {
         /**
@@ -1128,10 +1032,6 @@ export namespace Components {
           * If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
          */
         "translucent": boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonImg {
         /**
@@ -1170,14 +1070,6 @@ export namespace Components {
           * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
          */
         "loadingText"?: string | IonicSafeString;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonInput {
         /**
@@ -1333,10 +1225,6 @@ export namespace Components {
           * The type of control to display. The default type is text.
          */
         "type": TextFieldTypes;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the input.
          */
@@ -1417,10 +1305,6 @@ export namespace Components {
           * The type of the button. Only used when an `onclick` or `button` property is present.
          */
         "type": 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonItemDivider {
         /**
@@ -1435,20 +1319,8 @@ export namespace Components {
           * When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky
          */
         "sticky": boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonItemGroup {
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonItemOption {
         /**
@@ -1487,25 +1359,13 @@ export namespace Components {
           * The type of the button.
          */
         "type": 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonItemOptions {
         "fireSwipeEvent": () => Promise<void>;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
          */
         "side": Side;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonItemSliding {
         /**
@@ -1547,10 +1407,6 @@ export namespace Components {
           * The position determines where and how the label behaves inside an item.
          */
         "position"?: 'fixed' | 'stacked' | 'floating';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonList {
         /**
@@ -1569,10 +1425,6 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonListHeader {
         /**
@@ -1587,10 +1439,6 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonLoading {
         /**
@@ -1674,10 +1522,6 @@ export namespace Components {
           * An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
          */
         "trigger": string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonMenu {
         /**
@@ -1708,10 +1552,6 @@ export namespace Components {
           * An id for the menu.
          */
         "menuId"?: string;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * Opens the menu. If the menu is already open or it can't be opened, it returns `false`.
          */
@@ -1736,10 +1576,6 @@ export namespace Components {
           * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
          */
         "type"?: string;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonMenuButton {
         /**
@@ -1766,10 +1602,6 @@ export namespace Components {
           * The type of the button.
          */
         "type": 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonMenuToggle {
         /**
@@ -1895,10 +1727,6 @@ export namespace Components {
           * An ID corresponding to the trigger element that causes the modal to open when clicked.
          */
         "trigger": string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonNav {
         /**
@@ -2049,10 +1877,6 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonPicker {
         /**
@@ -2137,24 +1961,12 @@ export namespace Components {
           * An ID corresponding to the trigger element that causes the picker to open when clicked.
          */
         "trigger": string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonPickerColumn {
         /**
           * Picker column data
          */
         "col": PickerColumn;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonPickerColumnInternal {
         /**
@@ -2178,10 +1990,6 @@ export namespace Components {
           * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
          */
         "setValue": (value?: string | number) => Promise<void>;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The selected option in the picker.
          */
@@ -2193,10 +2001,6 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonPopover {
         /**
@@ -2319,10 +2123,6 @@ export namespace Components {
           * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `'click'`, the popover will be presented when the trigger is left clicked. If `'hover'`, the popover will be presented when a pointer hovers over the trigger. If `'context-menu'`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
          */
         "triggerAction": TriggerAction;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonProgressBar {
         /**
@@ -2345,10 +2145,6 @@ export namespace Components {
           * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
          */
         "type": 'determinate' | 'indeterminate';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1].
          */
@@ -2385,10 +2181,6 @@ export namespace Components {
         "name": string;
         "setButtonTabindex": (value: number) => Promise<void>;
         "setFocus": (ev: any) => Promise<void>;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * the value of the radio.
          */
@@ -2473,10 +2265,6 @@ export namespace Components {
           * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
          */
         "ticks": boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * the value of the range.
          */
@@ -2503,10 +2291,6 @@ export namespace Components {
           * A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position.
          */
         "getProgress": () => Promise<number>;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
          */
@@ -2523,10 +2307,6 @@ export namespace Components {
           * Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
          */
         "snapbackDuration": string;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonRefresherContent {
         /**
@@ -2547,14 +2327,6 @@ export namespace Components {
         "refreshingText"?: string | IonicSafeString;
     }
     interface IonReorder {
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonReorderGroup {
         /**
@@ -2762,10 +2534,6 @@ export namespace Components {
           * Set the type of the input.
          */
         "type": 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * the value of the searchbar.
          */
@@ -2796,10 +2564,6 @@ export namespace Components {
           * If `true`, users will be able to swipe between segment buttons to activate them.
          */
         "swipeGesture": boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * the value of the segment.
          */
@@ -2823,10 +2587,6 @@ export namespace Components {
           * The type of the button.
          */
         "type": 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the segment button.
          */
@@ -2910,10 +2670,6 @@ export namespace Components {
           * The shape of the select. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * the value of the select.
          */
@@ -2938,10 +2694,6 @@ export namespace Components {
           * The text content of the popover body
          */
         "message"?: string;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * If true, the select accepts multiple values
          */
@@ -2954,10 +2706,6 @@ export namespace Components {
           * The subheader text of the popover
          */
         "subHeader"?: string;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonSkeletonText {
         /**
@@ -2992,14 +2740,6 @@ export namespace Components {
           * If `true`, the split pane will be hidden.
          */
         "disabled": boolean;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
          */
@@ -3038,10 +2778,6 @@ export namespace Components {
           * If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent": boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonTabButton {
         /**
@@ -3080,10 +2816,6 @@ export namespace Components {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target": string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonTabs {
         "getRouteId": () => Promise<RouteID | undefined>;
@@ -3113,10 +2845,6 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonTextarea {
         /**
@@ -3235,10 +2963,6 @@ export namespace Components {
           * If `true`, the element will have its spelling and grammar checked.
          */
         "spellcheck": boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the textarea.
          */
@@ -3255,18 +2979,10 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * The size of the toolbar title.
          */
         "size"?: 'large' | 'small';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonToast {
         /**
@@ -3358,10 +3074,6 @@ export namespace Components {
           * An ID corresponding to the trigger element that causes the toast to open when clicked.
          */
         "trigger": string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonToggle {
         /**
@@ -3400,10 +3112,6 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */
@@ -3418,10 +3126,6 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
 }
 export interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {
@@ -4271,10 +3975,6 @@ declare namespace LocalJSX {
           * The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`.
          */
         "toggleIconSlot"?: 'start' | 'end';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the accordion. Defaults to an autogenerated value.
          */
@@ -4313,10 +4013,6 @@ declare namespace LocalJSX {
           * If `true`, the accordion group cannot be interacted with, but does not alter the opacity.
          */
         "readonly"?: boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the accordion group. This controls which accordions are expanded. This should be an array of strings only when `multiple="true"`
          */
@@ -4414,10 +4110,6 @@ declare namespace LocalJSX {
           * An ID corresponding to the trigger element that causes the action sheet to open when clicked.
          */
         "trigger"?: string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonAlert {
         /**
@@ -4519,22 +4211,10 @@ declare namespace LocalJSX {
           * An ID corresponding to the trigger element that causes the alert to open when clicked.
          */
         "trigger"?: string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonApp {
     }
     interface IonAvatar {
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonBackButton {
         /**
@@ -4569,16 +4249,8 @@ declare namespace LocalJSX {
           * The type of the button.
          */
         "type"?: 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonBackdrop {
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * Emitted when the backdrop is tapped.
          */
@@ -4591,10 +4263,6 @@ declare namespace LocalJSX {
           * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
          */
         "tappable"?: boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * If `true`, the backdrop will be visible.
          */
@@ -4609,10 +4277,6 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonBreadcrumb {
         /**
@@ -4674,10 +4338,6 @@ declare namespace LocalJSX {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target"?: string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonBreadcrumbs {
         /**
@@ -4704,10 +4364,6 @@ declare namespace LocalJSX {
           * Emitted when the collapsed indicator is clicked on.
          */
         "onIonCollapsedClick"?: (event: IonBreadcrumbsCustomEvent<BreadcrumbCollapsedClickEventDetail>) => void;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonButton {
         /**
@@ -4786,24 +4442,12 @@ declare namespace LocalJSX {
           * The type of the button.
          */
         "type"?: 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonButtons {
         /**
           * If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
          */
         "collapse"?: boolean;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCard {
         /**
@@ -4850,20 +4494,12 @@ declare namespace LocalJSX {
           * The type of the button. Only used when an `onclick` or `button` property is present.
          */
         "type"?: 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCardContent {
         /**
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCardHeader {
         /**
@@ -4878,10 +4514,6 @@ declare namespace LocalJSX {
           * If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent"?: boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCardSubtitle {
         /**
@@ -4892,10 +4524,6 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCardTitle {
         /**
@@ -4906,10 +4534,6 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonCheckbox {
         /**
@@ -4964,10 +4588,6 @@ declare namespace LocalJSX {
           * Emitted when the styles change.
          */
         "onIonStyle"?: (event: IonCheckboxCustomEvent<StyleEventDetail>) => void;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
@@ -4982,6 +4602,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the chip.
          */
         "disabled"?: boolean;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Display an outline style button.
          */
@@ -5260,10 +4884,6 @@ declare namespace LocalJSX {
           * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple="true"`.
          */
@@ -5290,10 +4910,6 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonFab {
         /**
@@ -5382,10 +4998,6 @@ declare namespace LocalJSX {
           * The type of the button.
          */
         "type"?: 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonFabList {
         /**
@@ -5410,10 +5022,6 @@ declare namespace LocalJSX {
           * If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.
          */
         "translucent"?: boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonGrid {
         /**
@@ -5434,10 +5042,6 @@ declare namespace LocalJSX {
           * If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
          */
         "translucent"?: boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonImg {
         /**
@@ -5488,14 +5092,6 @@ declare namespace LocalJSX {
           * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
          */
         "loadingText"?: string | IonicSafeString;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonInput {
         /**
@@ -5663,10 +5259,6 @@ declare namespace LocalJSX {
           * The type of control to display. The default type is text.
          */
         "type"?: TextFieldTypes;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the input.
          */
@@ -5747,10 +5339,6 @@ declare namespace LocalJSX {
           * The type of the button. Only used when an `onclick` or `button` property is present.
          */
         "type"?: 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonItemDivider {
         /**
@@ -5765,20 +5353,8 @@ declare namespace LocalJSX {
           * When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky
          */
         "sticky"?: boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonItemGroup {
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonItemOption {
         /**
@@ -5817,16 +5393,8 @@ declare namespace LocalJSX {
           * The type of the button.
          */
         "type"?: 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonItemOptions {
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * Emitted when the item has been fully swiped.
          */
@@ -5835,10 +5403,6 @@ declare namespace LocalJSX {
           * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
          */
         "side"?: Side;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonItemSliding {
         /**
@@ -5871,10 +5435,6 @@ declare namespace LocalJSX {
           * The position determines where and how the label behaves inside an item.
          */
         "position"?: 'fixed' | 'stacked' | 'floating';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonList {
         /**
@@ -5889,10 +5449,6 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonListHeader {
         /**
@@ -5907,10 +5463,6 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonLoading {
         /**
@@ -6008,10 +5560,6 @@ declare namespace LocalJSX {
           * An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
          */
         "trigger"?: string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonMenu {
         /**
@@ -6030,10 +5578,6 @@ declare namespace LocalJSX {
           * An id for the menu.
          */
         "menuId"?: string;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * Emitted when the menu is closed.
          */
@@ -6066,10 +5610,6 @@ declare namespace LocalJSX {
           * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
          */
         "type"?: string;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonMenuButton {
         /**
@@ -6096,10 +5636,6 @@ declare namespace LocalJSX {
           * The type of the button.
          */
         "type"?: 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonMenuToggle {
         /**
@@ -6235,10 +5771,6 @@ declare namespace LocalJSX {
           * An ID corresponding to the trigger element that causes the modal to open when clicked.
          */
         "trigger"?: string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonNav {
         /**
@@ -6302,10 +5834,6 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonPicker {
         /**
@@ -6399,28 +5927,16 @@ declare namespace LocalJSX {
           * An ID corresponding to the trigger element that causes the picker to open when clicked.
          */
         "trigger"?: string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonPickerColumn {
         /**
           * Picker column data
          */
         "col": PickerColumn;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * Emitted when the selected value has changed
          */
         "onIonPickerColChange"?: (event: IonPickerColumnCustomEvent<PickerColumn>) => void;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonPickerColumnInternal {
         /**
@@ -6443,10 +5959,6 @@ declare namespace LocalJSX {
           * Emitted when the value has changed.
          */
         "onIonChange"?: (event: IonPickerColumnInternalCustomEvent<PickerColumnItem>) => void;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The selected option in the picker.
          */
@@ -6458,10 +5970,6 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         "onIonInputModeChange"?: (event: IonPickerInternalCustomEvent<PickerInternalChangeEventDetail>) => void;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonPopover {
         /**
@@ -6596,10 +6104,6 @@ declare namespace LocalJSX {
           * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `'click'`, the popover will be presented when the trigger is left clicked. If `'hover'`, the popover will be presented when a pointer hovers over the trigger. If `'context-menu'`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
          */
         "triggerAction"?: TriggerAction;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonProgressBar {
         /**
@@ -6622,10 +6126,6 @@ declare namespace LocalJSX {
           * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
          */
         "type"?: 'determinate' | 'indeterminate';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1].
          */
@@ -6672,10 +6172,6 @@ declare namespace LocalJSX {
           * Emitted when the styles change.
          */
         "onIonStyle"?: (event: IonRadioCustomEvent<StyleEventDetail>) => void;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * the value of the radio.
          */
@@ -6796,10 +6292,6 @@ declare namespace LocalJSX {
           * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
          */
         "ticks"?: boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * the value of the range.
          */
@@ -6814,10 +6306,6 @@ declare namespace LocalJSX {
           * If `true`, the refresher will be hidden.
          */
         "disabled"?: boolean;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * Emitted while the user is pulling down the content and exposing the refresher.
          */
@@ -6846,10 +6334,6 @@ declare namespace LocalJSX {
           * Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
          */
         "snapbackDuration"?: string;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonRefresherContent {
         /**
@@ -6870,14 +6354,6 @@ declare namespace LocalJSX {
         "refreshingText"?: string | IonicSafeString;
     }
     interface IonReorder {
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonReorderGroup {
         /**
@@ -7101,10 +6577,6 @@ declare namespace LocalJSX {
           * Set the type of the input.
          */
         "type"?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * the value of the searchbar.
          */
@@ -7147,10 +6619,6 @@ declare namespace LocalJSX {
           * If `true`, users will be able to swipe between segment buttons to activate them.
          */
         "swipeGesture"?: boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * the value of the segment.
          */
@@ -7173,10 +6641,6 @@ declare namespace LocalJSX {
           * The type of the button.
          */
         "type"?: 'submit' | 'reset' | 'button';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the segment button.
          */
@@ -7279,10 +6743,6 @@ declare namespace LocalJSX {
           * The shape of the select. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * the value of the select.
          */
@@ -7307,10 +6767,6 @@ declare namespace LocalJSX {
           * The text content of the popover body
          */
         "message"?: string;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * If true, the select accepts multiple values
          */
@@ -7323,10 +6779,6 @@ declare namespace LocalJSX {
           * The subheader text of the popover
          */
         "subHeader"?: string;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonSkeletonText {
         /**
@@ -7361,18 +6813,10 @@ declare namespace LocalJSX {
           * If `true`, the split pane will be hidden.
          */
         "disabled"?: boolean;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * Expression to be called when the split-pane visibility has changed
          */
         "onIonSplitPaneVisible"?: (event: IonSplitPaneCustomEvent<{ visible: boolean }>) => void;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
          */
@@ -7408,10 +6852,6 @@ declare namespace LocalJSX {
           * If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent"?: boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonTabButton {
         /**
@@ -7454,10 +6894,6 @@ declare namespace LocalJSX {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target"?: string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonTabs {
         /**
@@ -7483,10 +6919,6 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonTextarea {
         /**
@@ -7617,10 +7049,6 @@ declare namespace LocalJSX {
           * If `true`, the element will have its spelling and grammar checked.
          */
         "spellcheck"?: boolean;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the textarea.
          */
@@ -7637,10 +7065,6 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
         /**
           * Emitted when the styles change.
          */
@@ -7649,10 +7073,6 @@ declare namespace LocalJSX {
           * The size of the toolbar title.
          */
         "size"?: 'large' | 'small';
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonToast {
         /**
@@ -7758,10 +7178,6 @@ declare namespace LocalJSX {
           * An ID corresponding to the trigger element that causes the toast to open when clicked.
          */
         "trigger"?: string | undefined;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IonToggle {
         /**
@@ -7816,10 +7232,6 @@ declare namespace LocalJSX {
           * Emitted when the styles change.
          */
         "onIonStyle"?: (event: IonToggleCustomEvent<StyleEventDetail>) => void;
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */
@@ -7834,10 +7246,6 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        /**
-          * useBase determines if base components is enabled.
-         */
-        "useBase"?: true | false;
     }
     interface IntrinsicElements {
         "ion-accordion": IonAccordion;
diff --git a/core/src/components/accordion-group/accordion-group.tsx b/core/src/components/accordion-group/accordion-group.tsx
index 7f50bd7428..4cd6935dc1 100644
--- a/core/src/components/accordion-group/accordion-group.tsx
+++ b/core/src/components/accordion-group/accordion-group.tsx
@@ -1,18 +1,16 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AccordionGroupChangeEventDetail } from '../../interface';
 import { printIonWarning } from '../../utils/logging';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-accordion-group',
   styleUrls: {
-    base: 'accordion-group.scss',
     ios: 'accordion-group.ios.scss',
     md: 'accordion-group.md.scss',
   },
@@ -270,7 +268,7 @@ export class AccordionGroup implements ComponentInterface {
 
   render() {
     const { disabled, readonly, expand } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     return (
       <Host
diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index 67c29dffe6..2d792c01f8 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -3,7 +3,7 @@ import { Component, Element, Host, Prop, State, h } from '@stencil/core';
 import { chevronDown } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '../../utils/helpers';
 
 const enum AccordionState {
@@ -14,7 +14,6 @@ const enum AccordionState {
 }
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot header - Content is placed at the top and is used to
@@ -30,7 +29,6 @@ const enum AccordionState {
 @Component({
   tag: 'ion-accordion',
   styleUrls: {
-    base: 'accordion.scss',
     ios: 'accordion.ios.scss',
     md: 'accordion.md.scss',
   },
@@ -397,7 +395,7 @@ export class Accordion implements ComponentInterface {
 
   render() {
     const { disabled, readonly } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const expanded = this.state === AccordionState.Expanded || this.state === AccordionState.Expanding;
     const headerPart = expanded ? 'header expanded' : 'header';
     const contentPart = expanded ? 'content expanded' : 'content';
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index b8e1585d11..41dd720bec 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -45,7 +45,6 @@
   --min-height: auto;
   --height: auto;
   --max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
-  --backdrop-opacity: 0;
 
   @include font-smoothing();
   @include position(0, 0, 0, 0);
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 309721c56b..9c03cf924f 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Watch, Component, Element, Event, Host, Method, Prop, h, readTask } from '@stencil/core';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   ActionSheetButton,
   AnimationBuilder,
@@ -31,13 +31,11 @@ import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-action-sheet',
   styleUrls: {
-    base: 'action-sheet.scss',
     ios: 'action-sheet.ios.scss',
     md: 'action-sheet.md.scss',
   },
@@ -326,7 +324,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
      * 3. A wrapper ref does not exist
      */
     const { groupEl, wrapperEl } = this;
-    if (this.gesture || getIonBehavior(this) === 'md' || !wrapperEl || !groupEl) {
+    if (this.gesture || getIonMode(this) === 'md' || !wrapperEl || !groupEl) {
       return;
     }
 
@@ -343,7 +341,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   render() {
     const { header, htmlAttributes, overlayIndex } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const allButtons = this.getButtons();
     const cancelButton = allButtons.find((b) => b.role === 'cancel');
     const buttons = allButtons.filter((b) => b.role !== 'cancel');
diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
index 0360ad1187..cdd191b2c2 100644
--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.scss
@@ -22,7 +22,6 @@
   --min-height: auto;
   --height: auto;
   --max-height: #{$alert-max-height};
-  --backdrop-opacity: 0;
 
   @include font-smoothing();
   @include position(0, 0, 0, 0);
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 57019ddeec..9dfc9046ec 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   AlertButton,
   AlertInput,
@@ -36,13 +36,11 @@ import { mdLeaveAnimation } from './animations/md.leave';
 // TODO(FW-2832): types
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-alert',
   styleUrls: {
-    base: 'alert.scss',
     ios: 'alert.ios.scss',
     md: 'alert.md.scss',
   },
@@ -350,7 +348,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
      * 2. App is running in MD mode
      * 3. A wrapper ref does not exist
      */
-    if (this.gesture || getIonBehavior(this) === 'md' || !this.wrapperEl) {
+    if (this.gesture || getIonMode(this) === 'md' || !this.wrapperEl) {
       return;
     }
 
@@ -507,7 +505,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   private renderCheckbox() {
     const inputs = this.processedInputs;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     if (inputs.length === 0) {
       return null;
@@ -656,7 +654,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   private renderAlertButtons() {
     const buttons = this.processedButtons;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const alertButtonGroupClass = {
       'alert-button-group': true,
       'alert-button-group-vertical': buttons.length > 2,
@@ -681,7 +679,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   render() {
     const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const hdrId = `alert-${overlayIndex}-hdr`;
     const subHdrId = `alert-${overlayIndex}-sub-hdr`;
     const msgId = `alert-${overlayIndex}-msg`;
diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx
index 7b297facdc..9c3ba928f3 100644
--- a/core/src/components/app/app.tsx
+++ b/core/src/components/app/app.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface } from '@stencil/core';
 import { Build, Component, Element, Host, Method, h } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import { isPlatform } from '../../utils/platform';
 
 @Component({
@@ -64,7 +64,7 @@ export class App implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx
index 28adbb0aa7..fcc9e7ced3 100644
--- a/core/src/components/avatar/avatar.tsx
+++ b/core/src/components/avatar/avatar.tsx
@@ -1,16 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
-/**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
 @Component({
   tag: 'ion-avatar',
   styleUrls: {
-    base: 'avatar.scss',
     ios: 'avatar.ios.scss',
     md: 'avatar.md.scss',
   },
@@ -19,7 +14,7 @@ import { getIonStylesheet } from '../../global/ionic-global';
 export class Avatar implements ComponentInterface {
   render() {
     return (
-      <Host class={getIonStylesheet(this)}>
+      <Host class={getIonMode(this)}>
         <slot></slot>
       </Host>
     );
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 539d7558f9..d7140f0811 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -3,7 +3,7 @@ import { Component, Element, Host, Prop, h } from '@stencil/core';
 import { arrowBackSharp, chevronBack } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
 import type { ButtonInterface } from '../../utils/element-interface';
 import type { Attributes } from '../../utils/helpers';
@@ -11,7 +11,6 @@ import { inheritAriaAttributes } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part native - The native HTML button element that wraps all child elements.
@@ -21,7 +20,6 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 @Component({
   tag: 'ion-back-button',
   styleUrls: {
-    base: 'back-button.scss',
     ios: 'back-button.ios.scss',
     md: 'back-button.md.scss',
   },
@@ -86,7 +84,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
       return icon;
     }
 
-    if (getIonBehavior(this) === 'ios') {
+    if (getIonMode(this) === 'ios') {
       // default ios back button icon
       return config.get('backButtonIcon', chevronBack);
     }
@@ -96,7 +94,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   }
 
   get backButtonText() {
-    const defaultBackButtonText = getIonBehavior(this) === 'ios' ? 'Back' : null;
+    const defaultBackButtonText = getIonMode(this) === 'ios' ? 'Back' : null;
     return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
   }
 
@@ -137,7 +135,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
       inheritedAttributes,
     } = this;
     const showBackButton = defaultHref !== undefined;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
 
     return (
diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx
index 6a136cea54..ae6930120a 100644
--- a/core/src/components/backdrop/backdrop.tsx
+++ b/core/src/components/backdrop/backdrop.tsx
@@ -1,17 +1,12 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Event, Host, Listen, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import { GESTURE_CONTROLLER } from '../../utils/gesture';
 
-/**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
 @Component({
   tag: 'ion-backdrop',
   styleUrls: {
-    base: 'backdrop.scss',
     ios: 'backdrop.ios.scss',
     md: 'backdrop.md.scss',
   },
@@ -68,7 +63,7 @@ export class Backdrop implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         tabindex="-1"
diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
index dbbd4f0114..92ffb9a047 100644
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -1,18 +1,16 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-badge',
   styleUrls: {
-    base: 'badge.scss',
     ios: 'badge.ios.scss',
     md: 'badge.md.scss',
   },
@@ -27,7 +25,7 @@ export class Badge implements ComponentInterface {
   @Prop({ reflect: true }) color?: Color;
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={createColorClasses(this.color, {
diff --git a/core/src/components/breadcrumb/breadcrumb.tsx b/core/src/components/breadcrumb/breadcrumb.tsx
index d0e14415ba..a0500a721a 100644
--- a/core/src/components/breadcrumb/breadcrumb.tsx
+++ b/core/src/components/breadcrumb/breadcrumb.tsx
@@ -2,14 +2,13 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import { chevronForwardOutline, ellipsisHorizontal } from 'ionicons/icons';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, BreadcrumbCollapsedClickEventDetail, Color, RouterDirection } from '../../interface';
 import type { Attributes } from '../../utils/helpers';
 import { inheritAriaAttributes } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part native - The native HTML anchor or div element that wraps all child elements.
@@ -19,7 +18,6 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 @Component({
   tag: 'ion-breadcrumb',
   styleUrls: {
-    base: 'breadcrumb.scss',
     ios: 'breadcrumb.ios.scss',
     md: 'breadcrumb.md.scss',
   },
@@ -167,7 +165,7 @@ export class Breadcrumb implements ComponentInterface {
     // Links can still be tabbed to when set to disabled if they have an href
     // in order to truly disable them we can keep it as an anchor but remove the href
     const href = disabled ? undefined : this.href;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const attrs =
       TagType === 'span'
         ? {}
diff --git a/core/src/components/breadcrumbs/breadcrumbs.tsx b/core/src/components/breadcrumbs/breadcrumbs.tsx
index 1a46299141..266d3ad7c4 100644
--- a/core/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/core/src/components/breadcrumbs/breadcrumbs.tsx
@@ -1,19 +1,17 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, State, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { BreadcrumbCollapsedClickEventDetail, Color } from '../../interface';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  */
 @Component({
   tag: 'ion-breadcrumbs',
   styleUrls: {
-    base: 'breadcrumbs.scss',
     ios: 'breadcrumbs.ios.scss',
     md: 'breadcrumbs.md.scss',
   },
@@ -171,7 +169,7 @@ export class Breadcrumbs implements ComponentInterface {
 
   render() {
     const { color, collapsed } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     return (
       <Host
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 89f1ae453c..6947efaa74 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, RouterDirection } from '../../interface';
 import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import type { Attributes } from '../../utils/helpers';
@@ -10,7 +10,6 @@ import { printIonWarning } from '../../utils/logging';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
@@ -23,7 +22,6 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 @Component({
   tag: 'ion-button',
   styleUrls: {
-    base: 'button.scss',
     ios: 'button.ios.scss',
     md: 'button.md.scss',
   },
@@ -246,7 +244,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   };
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const {
       buttonType,
       type,
diff --git a/core/src/components/buttons/buttons.tsx b/core/src/components/buttons/buttons.tsx
index aea82ced42..e826ec7633 100644
--- a/core/src/components/buttons/buttons.tsx
+++ b/core/src/components/buttons/buttons.tsx
@@ -1,16 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
-/**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
 @Component({
   tag: 'ion-buttons',
   styleUrls: {
-    base: 'buttons.scss',
     ios: 'buttons.ios.scss',
     md: 'buttons.md.scss',
   },
@@ -32,7 +27,7 @@ export class Buttons implements ComponentInterface {
   @Prop() collapse = false;
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx
index eb29f6e820..b21dd431a9 100644
--- a/core/src/components/card-content/card-content.tsx
+++ b/core/src/components/card-content/card-content.tsx
@@ -1,23 +1,21 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-card-content',
   styleUrls: {
-    base: 'card-content.scss',
     ios: 'card-content.ios.scss',
     md: 'card-content.md.scss',
   },
 })
 export class CardContent implements ComponentInterface {
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx
index 46e4729e56..d4b463451b 100644
--- a/core/src/components/card-header/card-header.tsx
+++ b/core/src/components/card-header/card-header.tsx
@@ -1,18 +1,16 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-card-header',
   styleUrls: {
-    base: 'card-header.scss',
     ios: 'card-header.ios.scss',
     md: 'card-header.md.scss',
   },
@@ -34,7 +32,7 @@ export class CardHeader implements ComponentInterface {
   @Prop() translucent = false;
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={createColorClasses(this.color, {
diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx
index 020eae99a9..4d00466435 100644
--- a/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/core/src/components/card-subtitle/card-subtitle.tsx
@@ -1,18 +1,16 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-card-subtitle',
   styleUrls: {
-    base: 'card-subtitle.scss',
     ios: 'card-subtitle.ios.scss',
     md: 'card-subtitle.md.scss',
   },
@@ -27,7 +25,7 @@ export class CardSubtitle implements ComponentInterface {
   @Prop({ reflect: true }) color?: Color;
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         role="heading"
diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx
index 9de31d0f4b..2afec8b259 100644
--- a/core/src/components/card-title/card-title.tsx
+++ b/core/src/components/card-title/card-title.tsx
@@ -1,18 +1,16 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-card-title',
   styleUrls: {
-    base: 'card-title.scss',
     ios: 'card-title.ios.scss',
     md: 'card-title.md.scss',
   },
@@ -27,7 +25,7 @@ export class CardTitle implements ComponentInterface {
   @Prop({ reflect: true }) color?: Color;
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         role="heading"
diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx
index 72f8d584d2..96bb8d2d78 100644
--- a/core/src/components/card/card.tsx
+++ b/core/src/components/card/card.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Element, Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, Mode, RouterDirection } from '../../interface';
 import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import type { Attributes } from '../../utils/helpers';
@@ -9,7 +9,6 @@ import { inheritAttributes } from '../../utils/helpers';
 import { createColorClasses, openURL } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part native - The native HTML button, anchor, or div element that wraps all child elements.
@@ -17,7 +16,6 @@ import { createColorClasses, openURL } from '../../utils/theme';
 @Component({
   tag: 'ion-card',
   styleUrls: {
-    base: 'card.scss',
     ios: 'card.ios.scss',
     md: 'card.md.scss',
   },
@@ -130,7 +128,7 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={createColorClasses(this.color, {
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index ae71cfbb6d..d69aa26727 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
 
 // TODO(FW-2845) - Use @utils/forms and @utils/logging when https://github.com/ionic-team/stencil/issues/3826 is resolved
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { CheckboxChangeEventDetail, Color, Mode, StyleEventDetail } from '../../interface';
 import type { LegacyFormController } from '../../utils/forms';
 import { createLegacyFormController } from '../../utils/forms';
@@ -12,7 +12,6 @@ import { printIonWarning } from '../../utils/logging';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
@@ -23,7 +22,6 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 @Component({
   tag: 'ion-checkbox',
   styleUrls: {
-    base: 'checkbox.scss',
     ios: 'checkbox.ios.scss',
     md: 'checkbox.md.scss',
   },
@@ -227,7 +225,7 @@ export class Checkbox implements ComponentInterface {
       name,
       value,
     } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
 
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
@@ -298,7 +296,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     }
 
     const { color, checked, disabled, el, getSVGPath, indeterminate, inputId, name, value } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const { label, labelId, labelText } = getAriaLabel(el, inputId);
     const path = getSVGPath(mode, indeterminate);
 
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index a487ed18c2..51100a992f 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -1,10 +1,13 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
 @Component({
   tag: 'ion-chip',
   styleUrl: 'chip.scss',
@@ -29,7 +32,7 @@ export class Chip implements ComponentInterface {
   @Prop() disabled = false;
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     return (
       <Host
diff --git a/core/src/components/col/col.tsx b/core/src/components/col/col.tsx
index 62ddf3742f..7bea442b76 100644
--- a/core/src/components/col/col.tsx
+++ b/core/src/components/col/col.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import { matchBreakpoint } from '../../utils/media';
 
 const win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;
@@ -249,7 +249,7 @@ export class Col implements ComponentInterface {
 
   render() {
     const isRTL = document.dir === 'rtl';
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 67e93fbfc4..99f50d5c89 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, ScrollBaseDetail, ScrollDetail } from '../../interface';
 import { componentOnReady } from '../../utils/helpers';
 import { isPlatform } from '../../utils/platform';
@@ -125,8 +125,8 @@ export class Content implements ComponentInterface {
 
   private shouldForceOverscroll() {
     const { forceOverscroll } = this;
-    const platform = getIonBehavior(this);
-    return forceOverscroll === undefined ? platform === 'ios' && isPlatform('ios') : forceOverscroll;
+    const mode = getIonMode(this);
+    return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
   }
 
   private resize() {
@@ -324,7 +324,7 @@ export class Content implements ComponentInterface {
   render() {
     const { isMainContent, scrollX, scrollY, el } = this;
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const forceOverscroll = this.shouldForceOverscroll();
     const transitionShadow = mode === 'ios';
     const TagType = isMainContent ? 'main' : ('div' as any);
diff --git a/core/src/components/datetime-button/datetime-button.tsx b/core/src/components/datetime-button/datetime-button.tsx
index 0bae2ff81e..532dd01481 100644
--- a/core/src/components/datetime-button/datetime-button.tsx
+++ b/core/src/components/datetime-button/datetime-button.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, DatetimePresentation } from '../../interface';
 import { componentOnReady, addEventListener } from '../../utils/helpers';
 import { printIonError } from '../../utils/logging';
@@ -11,7 +11,6 @@ import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalized
 import { is24Hour } from '../datetime/utils/helpers';
 import { parseDate } from '../datetime/utils/parse';
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot date-target - Content displayed inside of the date button.
@@ -397,7 +396,7 @@ export class DatetimeButton implements ComponentInterface {
   render() {
     const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
 
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     return (
       <Host
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 4441cc714a..f52878e528 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   Color,
   DatetimePresentation,
@@ -67,7 +67,6 @@ import {
 } from './utils/state';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot title - The title of the datetime.
@@ -77,7 +76,6 @@ import {
 @Component({
   tag: 'ion-datetime',
   styleUrls: {
-    base: 'datetime.scss',
     ios: 'datetime.ios.scss',
     md: 'datetime.md.scss',
   },
@@ -846,9 +844,8 @@ export class Datetime implements ComponentInterface {
     const startMonth = months[0] as HTMLElement;
     const workingMonth = months[1] as HTMLElement;
     const endMonth = months[2] as HTMLElement;
-    const platform = getIonBehavior(this);
-    const needsiOSRubberBandFix =
-      platform === 'ios' && typeof navigator !== 'undefined' && navigator.maxTouchPoints > 1;
+    const mode = getIonMode(this);
+    const needsiOSRubberBandFix = mode === 'ios' && typeof navigator !== 'undefined' && navigator.maxTouchPoints > 1;
 
     /**
      * Before setting up the scroll listener,
@@ -2289,7 +2286,7 @@ export class Datetime implements ComponentInterface {
       presentation,
       size,
     } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const isMonthAndYearPresentation =
       presentation === 'year' || presentation === 'month' || presentation === 'month-year';
     const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 72f4fd5d5d..b39d67c8dc 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import { close } from 'ionicons/icons';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, RouterDirection } from '../../interface';
 import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { inheritAriaAttributes } from '../../utils/helpers';
@@ -10,7 +10,6 @@ import type { Attributes } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part native - The native HTML button or anchor element that wraps all child elements.
@@ -19,7 +18,6 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 @Component({
   tag: 'ion-fab-button',
   styleUrls: {
-    base: 'fab-button.scss',
     ios: 'fab-button.ios.scss',
     md: 'fab-button.md.scss',
   },
@@ -154,7 +152,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
   render() {
     const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
     const inList = hostContext('ion-fab-list', el);
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const TagType = href === undefined ? 'button' : ('a' as any);
     const attrs =
       TagType === 'button'
diff --git a/core/src/components/fab-list/fab-list.tsx b/core/src/components/fab-list/fab-list.tsx
index e8aebcd075..1273673a91 100644
--- a/core/src/components/fab-list/fab-list.tsx
+++ b/core/src/components/fab-list/fab-list.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 @Component({
   tag: 'ion-fab-list',
@@ -33,7 +33,7 @@ export class FabList implements ComponentInterface {
   @Prop() side: 'start' | 'end' | 'top' | 'bottom' = 'bottom';
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx
index 0a36cbf22e..221335062e 100644
--- a/core/src/components/fab/fab.tsx
+++ b/core/src/components/fab/fab.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Method, Prop, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 @Component({
   tag: 'ion-fab',
@@ -76,7 +76,7 @@ export class Fab implements ComponentInterface {
 
   render() {
     const { horizontal, vertical, edge } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx
index f092a73c02..fcdb283c1b 100644
--- a/core/src/components/footer/footer.tsx
+++ b/core/src/components/footer/footer.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, h } from '@stencil/core';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from '../../utils/content';
 import type { KeyboardController } from '../../utils/keyboard/keyboard-controller';
 import { createKeyboardController } from '../../utils/keyboard/keyboard-controller';
@@ -9,13 +9,11 @@ import { createKeyboardController } from '../../utils/keyboard/keyboard-controll
 import { handleFooterFade } from './footer.utils';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-footer',
   styleUrls: {
-    base: 'footer.scss',
     ios: 'footer.ios.scss',
     md: 'footer.md.scss',
   },
@@ -66,8 +64,8 @@ export class Footer implements ComponentInterface {
   }
 
   private checkCollapsibleFooter = () => {
-    const platform = getIonBehavior(this);
-    if (platform !== 'ios') {
+    const mode = getIonMode(this);
+    if (mode !== 'ios') {
       return;
     }
 
@@ -112,7 +110,7 @@ export class Footer implements ComponentInterface {
 
   render() {
     const { translucent, collapse } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const tabs = this.el.closest('ion-tabs');
     const tabBar = tabs?.querySelector(':scope > ion-tab-bar');
 
@@ -132,7 +130,7 @@ export class Footer implements ComponentInterface {
           [`footer-collapse-${collapse}`]: collapse !== undefined,
         }}
       >
-        {getIonBehavior(this) === 'ios' && translucent && <div class="footer-background"></div>}
+        {mode === 'ios' && translucent && <div class="footer-background"></div>}
         <slot></slot>
       </Host>
     );
diff --git a/core/src/components/grid/grid.tsx b/core/src/components/grid/grid.tsx
index fd0dabd126..2588c067dc 100644
--- a/core/src/components/grid/grid.tsx
+++ b/core/src/components/grid/grid.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 @Component({
   tag: 'ion-grid',
@@ -15,7 +15,7 @@ export class Grid implements ComponentInterface {
   @Prop() fixed = false;
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx
index 25939cbc98..35b476d8fb 100644
--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h, writeTask } from '@stencil/core';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from '../../utils/content';
 import type { Attributes } from '../../utils/helpers';
 import { inheritAriaAttributes } from '../../utils/helpers';
@@ -18,13 +18,11 @@ import {
 } from './header.utils';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-header',
   styleUrls: {
-    base: 'header.scss',
     ios: 'header.ios.scss',
     md: 'header.md.scss',
   },
@@ -73,9 +71,9 @@ export class Header implements ComponentInterface {
   }
 
   private async checkCollapsibleHeader() {
-    const platform = getIonBehavior(this);
+    const mode = getIonMode(this);
 
-    if (platform !== 'ios') {
+    if (mode !== 'ios') {
       return;
     }
 
@@ -208,7 +206,7 @@ export class Header implements ComponentInterface {
 
   render() {
     const { translucent, inheritedAttributes } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const collapse = this.collapse || 'none';
 
     // banner role must be at top level, so remove role if inside a menu
diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx
index e94193908d..cee4c6f9fd 100644
--- a/core/src/components/img/img.tsx
+++ b/core/src/components/img/img.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Attributes } from '../../utils/helpers';
 import { inheritAttributes } from '../../utils/helpers';
 
@@ -111,7 +111,7 @@ export class Img implements ComponentInterface {
     const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
     const { draggable } = inheritedAttributes;
     return (
-      <Host class={getIonStylesheet(this)}>
+      <Host class={getIonMode(this)}>
         <img
           decoding="async"
           src={loadSrc}
diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 136a9884d4..10c2221575 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -2,19 +2,14 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { SpinnerTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 import { sanitizeDOMString } from '../../utils/sanitization';
 
-/**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
 @Component({
   tag: 'ion-infinite-scroll-content',
   styleUrls: {
-    base: 'infinite-scroll-content.scss',
     ios: 'infinite-scroll-content.ios.scss',
     md: 'infinite-scroll-content.md.scss',
   },
@@ -38,16 +33,16 @@ export class InfiniteScrollContent implements ComponentInterface {
 
   componentDidLoad() {
     if (this.loadingSpinner === undefined) {
-      const platform = getIonBehavior(this);
+      const mode = getIonMode(this);
       this.loadingSpinner = config.get(
         'infiniteLoadingSpinner',
-        config.get('spinner', platform === 'ios' ? 'lines' : 'crescent')
+        config.get('spinner', mode === 'ios' ? 'lines' : 'crescent')
       );
     }
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/infinite-scroll/infinite-scroll.tsx b/core/src/components/infinite-scroll/infinite-scroll.tsx
index 306c36b3a3..f2c04fab73 100644
--- a/core/src/components/infinite-scroll/infinite-scroll.tsx
+++ b/core/src/components/infinite-scroll/infinite-scroll.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from '../../utils/content';
 
 @Component({
@@ -212,7 +212,7 @@ export class InfiniteScroll implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const disabled = this.disabled;
     return (
       <Host
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index ff65bd5fa6..2a9a7c55cf 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -5,7 +5,7 @@ import type { LegacyFormController } from '@utils/forms';
 import { printIonWarning } from '@utils/logging';
 import { closeCircle, closeSharp } from 'ionicons/icons';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   AutocompleteTypes,
   Color,
@@ -21,13 +21,11 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 import { getCounterText } from './input.utils';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-input',
   styleUrls: {
-    base: 'input.scss',
     ios: 'input.ios.scss',
     md: 'input.md.scss',
   },
@@ -604,8 +602,8 @@ export class Input implements ComponentInterface {
    * when fill="outline".
    */
   private renderLabelContainer() {
-    const platform = getIonBehavior(this);
-    const hasOutlineFill = platform === 'md' && this.fill === 'outline';
+    const mode = getIonMode(this);
+    const hasOutlineFill = mode === 'md' && this.fill === 'outline';
 
     if (hasOutlineFill) {
       /**
@@ -638,7 +636,7 @@ export class Input implements ComponentInterface {
 
   private renderInput() {
     const { disabled, fill, readonly, shape, inputId, labelPlacement } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const value = this.getValue();
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
@@ -744,7 +742,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
       this.hasLoggedDeprecationWarning = true;
     }
 
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const value = this.getValue();
     const labelId = this.inputId + '-lbl';
     const label = findItemLabel(this.el);
diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx
index c9c96af863..92fc9e0338 100644
--- a/core/src/components/item-divider/item-divider.tsx
+++ b/core/src/components/item-divider/item-divider.tsx
@@ -1,12 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
@@ -16,7 +15,6 @@ import { createColorClasses } from '../../utils/theme';
 @Component({
   tag: 'ion-item-divider',
   styleUrls: {
-    base: 'item-divider.scss',
     ios: 'item-divider.ios.scss',
     md: 'item-divider.md.scss',
   },
@@ -42,7 +40,7 @@ export class ItemDivider implements ComponentInterface {
   @Prop() sticky = false;
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={createColorClasses(this.color, {
diff --git a/core/src/components/item-group/item-group.tsx b/core/src/components/item-group/item-group.tsx
index c229155fb0..ed99b31306 100644
--- a/core/src/components/item-group/item-group.tsx
+++ b/core/src/components/item-group/item-group.tsx
@@ -1,23 +1,18 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
-/**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
 @Component({
   tag: 'ion-item-group',
   styleUrls: {
-    base: 'item-group.scss',
     ios: 'item-group.ios.scss',
     md: 'item-group.md.scss',
   },
 })
 export class ItemGroup implements ComponentInterface {
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         role="group"
diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx
index 0cb32c4c7f..a62990f250 100644
--- a/core/src/components/item-option/item-option.tsx
+++ b/core/src/components/item-option/item-option.tsx
@@ -1,13 +1,12 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
@@ -22,7 +21,6 @@ import { createColorClasses } from '../../utils/theme';
 @Component({
   tag: 'ion-item-option',
   styleUrls: {
-    base: 'item-option.scss',
     ios: 'item-option.ios.scss',
     md: 'item-option.md.scss',
   },
@@ -90,7 +88,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
   render() {
     const { disabled, expandable, href } = this;
     const TagType = href === undefined ? 'button' : ('a' as any);
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const attrs =
       TagType === 'button'
         ? { type: this.type }
diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx
index ce6fb67bc8..2e40faf162 100644
--- a/core/src/components/item-options/item-options.tsx
+++ b/core/src/components/item-options/item-options.tsx
@@ -1,18 +1,13 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Side } from '../../interface';
 import { isEndSide } from '../../utils/helpers';
 
-/**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
 @Component({
   tag: 'ion-item-options',
   styleUrls: {
-    base: 'item-options.scss',
     ios: 'item-options.ios.scss',
     md: 'item-options.md.scss',
   },
@@ -40,7 +35,7 @@ export class ItemOptions implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const isEnd = isEndSide(this.side);
     return (
       <Host
diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx
index adc4e36d81..1c2a7c7548 100644
--- a/core/src/components/item-sliding/item-sliding.tsx
+++ b/core/src/components/item-sliding/item-sliding.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail, Side } from '../../interface';
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '../../utils/content';
 import { isEndSide } from '../../utils/helpers';
@@ -442,7 +442,7 @@ export class ItemSliding implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index d78c24138a..dffdc87fdb 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -3,7 +3,7 @@ import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h }
 import { printIonError, printIonWarning } from '@utils/logging';
 import { chevronForward } from 'ionicons/icons';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, CssClassMap, RouterDirection, StyleEventDetail } from '../../interface';
 import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import type { Attributes } from '../../utils/helpers';
@@ -14,7 +14,6 @@ import type { InputInputEventDetail } from '../input/input-interface';
 import type { CounterFormatter } from './item-interface';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
@@ -29,7 +28,6 @@ import type { CounterFormatter } from './item-interface';
 @Component({
   tag: 'ion-item',
   styleUrls: {
-    base: 'item.scss',
     ios: 'item.ios.scss',
     md: 'item.md.scss',
   },
@@ -367,7 +365,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
       inheritedAriaAttributes,
     } = this;
     const childStyles = {} as StyleEventDetail;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const clickable = this.isClickable();
     const canActivate = this.canActivate();
     const TagType = clickable ? (href === undefined ? 'button' : 'a') : ('div' as any);
diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
index 1ca13505e9..f916be213b 100644
--- a/core/src/components/label/label.tsx
+++ b/core/src/components/label/label.tsx
@@ -1,18 +1,16 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-label',
   styleUrls: {
-    base: 'label.scss',
     ios: 'label.ios.scss',
     md: 'label.md.scss',
   },
@@ -99,7 +97,7 @@ export class Label implements ComponentInterface {
 
   render() {
     const position = this.position;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={createColorClasses(this.color, {
diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx
index 2f501ddce1..647ddac343 100644
--- a/core/src/components/list-header/list-header.tsx
+++ b/core/src/components/list-header/list-header.tsx
@@ -1,18 +1,16 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-list-header',
   styleUrls: {
-    base: 'list-header.scss',
     ios: 'list-header.ios.scss',
     md: 'list-header.md.scss',
   },
@@ -33,7 +31,7 @@ export class ListHeader implements ComponentInterface {
 
   render() {
     const { lines } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     return (
       <Host
diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx
index b865b12bd8..11007ca269 100644
--- a/core/src/components/list/list.tsx
+++ b/core/src/components/list/list.tsx
@@ -1,16 +1,14 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Method, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-list',
   styleUrls: {
-    base: 'list.scss',
     ios: 'list.ios.scss',
     md: 'list.md.scss',
   },
@@ -44,7 +42,7 @@ export class List implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const { lines, inset } = this;
     return (
       <Host
diff --git a/core/src/components/loading/loading.scss b/core/src/components/loading/loading.scss
index d880a370cd..619e9f50b5 100644
--- a/core/src/components/loading/loading.scss
+++ b/core/src/components/loading/loading.scss
@@ -23,7 +23,6 @@
   --width: auto;
   --min-height: auto;
   --height: auto;
-  --backdrop-opacity: 0;
 
   @include font-smoothing();
   @include position(0, 0, 0, 0);
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index e34020e8b2..c0db007a52 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Watch, Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   AnimationBuilder,
   FrameworkDelegate,
@@ -32,13 +32,11 @@ import { mdLeaveAnimation } from './animations/md.leave';
 // TODO(FW-2832): types
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-loading',
   styleUrls: {
-    base: 'loading.scss',
     ios: 'loading.ios.scss',
     md: 'loading.md.scss',
   },
@@ -208,8 +206,8 @@ export class Loading implements ComponentInterface, OverlayInterface {
 
   componentWillLoad() {
     if (this.spinner === undefined) {
-      const platform = getIonBehavior(this);
-      this.spinner = config.get('loadingSpinner', config.get('spinner', platform === 'ios' ? 'lines' : 'crescent'));
+      const mode = getIonMode(this);
+      this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
     }
   }
 
@@ -304,13 +302,14 @@ export class Loading implements ComponentInterface, OverlayInterface {
 
   render() {
     const { message, spinner, htmlAttributes, overlayIndex } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const msgId = `loading-${overlayIndex}-msg`;
     /**
      * If the message is defined, use that as the label.
      * Otherwise, don't set aria-labelledby.
      */
     const ariaLabelledBy = message !== undefined ? msgId : null;
+
     return (
       <Host
         role="dialog"
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index 88f739bd49..fd7c60108d 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -3,7 +3,7 @@ import { Component, Element, Host, Listen, Prop, State, h } from '@stencil/core'
 import { menuOutline, menuSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import type { ButtonInterface } from '../../utils/element-interface';
 import type { Attributes } from '../../utils/helpers';
@@ -13,7 +13,6 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 import { updateVisibility } from '../menu-toggle/menu-toggle-util';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part native - The native HTML button element that wraps all child elements.
@@ -22,7 +21,6 @@ import { updateVisibility } from '../menu-toggle/menu-toggle-util';
 @Component({
   tag: 'ion-menu-button',
   styleUrls: {
-    base: 'menu-button.scss',
     ios: 'menu-button.ios.scss',
     md: 'menu-button.md.scss',
   },
@@ -82,7 +80,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
 
   render() {
     const { color, disabled, inheritedAttributes } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const menuIcon = config.get('menuIcon', mode === 'ios' ? menuOutline : menuSharp);
     const hidden = this.autoHide && !this.visible;
 
diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx
index 70da3e821e..09a55d422c 100644
--- a/core/src/components/menu-toggle/menu-toggle.tsx
+++ b/core/src/components/menu-toggle/menu-toggle.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Listen, Prop, State, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import { menuController } from '../../utils/menu-controller';
 
 import { updateVisibility } from './menu-toggle-util';
@@ -50,7 +50,7 @@ export class MenuToggle implements ComponentInterface {
   };
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const hidden = this.autoHide && !this.visible;
 
     return (
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index 33971acc50..178491bef9 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Animation, Gesture, GestureDetail, MenuChangeEventDetail, MenuI, Side } from '../../interface';
 import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
 import { GESTURE_CONTROLLER } from '../../utils/gesture';
@@ -19,16 +19,12 @@ const focusableQueryString =
   '[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .ion-focusable:not([tabindex^="-"])';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- *
  * @part container - The container for the menu content.
  * @part backdrop - The backdrop that appears over the main content when the menu is open.
  */
 @Component({
   tag: 'ion-menu',
   styleUrls: {
-    base: 'menu.scss',
     ios: 'menu.ios.scss',
     md: 'menu.md.scss',
   },
@@ -435,9 +431,9 @@ export class Menu implements ComponentInterface, MenuI {
 
   private async startAnimation(shouldOpen: boolean, animated: boolean): Promise<void> {
     const isReversed = !shouldOpen;
-    const platform = getIonBehavior(this);
-    const easing = platform === 'ios' ? iosEasing : mdEasing;
-    const easingReverse = platform === 'ios' ? iosEasingReverse : mdEasingReverse;
+    const mode = getIonMode(this);
+    const easing = mode === 'ios' ? iosEasing : mdEasing;
+    const easingReverse = mode === 'ios' ? iosEasingReverse : mdEasingReverse;
     const ani = (this.animation as Animation)!
       .direction(isReversed ? 'reverse' : 'normal')
       .easing(isReversed ? easingReverse : easing)
@@ -702,7 +698,7 @@ export class Menu implements ComponentInterface, MenuI {
 
   render() {
     const { isEndSide, type, disabled, isPaneVisible, inheritedAttributes } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     return (
       <Host
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 0024c10c64..d6251e652d 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   Animation,
   AnimationBuilder,
@@ -47,7 +47,6 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
 // TODO(FW-2832): types
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed inside of the `.modal-content` element.
@@ -59,7 +58,6 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
 @Component({
   tag: 'ion-modal',
   styleUrls: {
-    base: 'modal.scss',
     ios: 'modal.ios.scss',
     md: 'modal.md.scss',
   },
@@ -468,7 +466,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
      * start of the animation so that it completes
      * by the time the card animation is done.
      */
-    if (hasCardModal && getIonBehavior(this) === 'ios') {
+    if (hasCardModal && getIonMode(this) === 'ios') {
       // Cache the original status bar color before the modal is presented
       this.statusBarStyle = await StatusBar.getStyle();
       setCardStatusBarDark();
@@ -510,7 +508,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   }
 
   private initSwipeToClose() {
-    if (getIonBehavior(this) !== 'ios') {
+    if (getIonMode(this) !== 'ios') {
       return;
     }
 
@@ -639,7 +637,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
      * finishes when the dismiss animation does.
      */
     const hasCardModal = presentingElement !== undefined;
-    if (hasCardModal && getIonBehavior(this) === 'ios') {
+    if (hasCardModal && getIonMode(this) === 'ios') {
       setCardStatusBarDefault(this.statusBarStyle);
     }
 
@@ -826,7 +824,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
     const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes } = this;
 
     const showHandle = handle !== false && isSheetModal;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const { modalId } = this;
     const isCardModal = presentingElement !== undefined && mode === 'ios';
     const isHandleCycle = handleBehavior === 'cycle';
diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx
index b618e2590b..11ab62b1fd 100644
--- a/core/src/components/nav/nav.tsx
+++ b/core/src/components/nav/nav.tsx
@@ -2,7 +2,7 @@ import type { EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Method, Prop, Watch, h } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   Animation,
   AnimationBuilder,
@@ -111,8 +111,8 @@ export class Nav implements NavOutlet {
     this.useRouter = document.querySelector('ion-router') !== null && this.el.closest('[no-router]') === null;
 
     if (this.swipeGesture === undefined) {
-      const platform = getIonBehavior(this);
-      this.swipeGesture = config.getBoolean('swipeBackEnabled', platform === 'ios');
+      const mode = getIonMode(this);
+      this.swipeGesture = config.getBoolean('swipeBackEnabled', mode === 'ios');
     }
 
     this.ionNavWillLoad.emit();
@@ -859,7 +859,7 @@ export class Nav implements NavOutlet {
     const opts = ti.opts!;
 
     const progressCallback = opts.progressAnimation ? (ani: Animation | undefined) => (this.sbAni = ani) : undefined;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const enteringEl = enteringView.element!;
     const leavingEl = leavingView && leavingView.element!;
     const animationOpts: TransitionOptions = {
diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx
index 8614585304..7b2a46270e 100644
--- a/core/src/components/note/note.tsx
+++ b/core/src/components/note/note.tsx
@@ -1,18 +1,16 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-note',
   styleUrls: {
-    base: 'note.scss',
     ios: 'note.ios.scss',
     md: 'note.md.scss',
   },
@@ -27,7 +25,7 @@ export class Note implements ComponentInterface {
   @Prop({ reflect: true }) color?: Color;
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={createColorClasses(this.color, {
diff --git a/core/src/components/picker-column-internal/picker-column-internal.tsx b/core/src/components/picker-column-internal/picker-column-internal.tsx
index 2eb9c061d8..41ebbb613d 100644
--- a/core/src/components/picker-column-internal/picker-column-internal.tsx
+++ b/core/src/components/picker-column-internal/picker-column-internal.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 import { isPlatform } from '@utils/platform';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import { getElementRoot, raf } from '../../utils/helpers';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
@@ -12,14 +12,12 @@ import type { PickerInternalCustomEvent } from '../picker-internal/picker-intern
 import type { PickerColumnItem } from './picker-column-internal-interfaces';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  * @internal
  */
 @Component({
   tag: 'ion-picker-column-internal',
   styleUrls: {
-    base: 'picker-column-internal.scss',
     ios: 'picker-column-internal.ios.scss',
     md: 'picker-column-internal.md.scss',
   },
@@ -401,7 +399,7 @@ export class PickerColumnInternal implements ComponentInterface {
 
   render() {
     const { items, color, isActive, numericInput } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     return (
       <Host
diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index ce7ccafb52..d61e5b446f 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail, PickerColumn } from '../../interface';
 import { clamp } from '../../utils/helpers';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
@@ -9,14 +9,10 @@ import { getClassMap } from '../../utils/theme';
 
 /**
  * @internal
- *
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-picker-column',
   styleUrls: {
-    base: 'picker-column.scss',
     ios: 'picker-column.ios.scss',
     md: 'picker-column.md.scss',
   },
@@ -56,9 +52,9 @@ export class PickerColumnCmp implements ComponentInterface {
     let pickerRotateFactor = 0;
     let pickerScaleFactor = 0.81;
 
-    const platform = getIonBehavior(this);
+    const mode = getIonMode(this);
 
-    if (platform === 'ios') {
+    if (mode === 'ios') {
       pickerRotateFactor = -0.46;
       pickerScaleFactor = 1;
     }
@@ -367,7 +363,7 @@ export class PickerColumnCmp implements ComponentInterface {
   render() {
     const col = this.col;
     const Button = 'button' as any;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/picker-internal/picker-internal.tsx b/core/src/components/picker-internal/picker-internal.tsx
index 0b283267bf..080430cf63 100644
--- a/core/src/components/picker-internal/picker-internal.tsx
+++ b/core/src/components/picker-internal/picker-internal.tsx
@@ -6,14 +6,12 @@ import { getElementRoot } from '../../utils/helpers';
 import type { PickerInternalChangeEventDetail } from './picker-internal-interfaces';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  * @internal
  */
 @Component({
   tag: 'ion-picker-internal',
   styleUrls: {
-    base: 'picker-internal.scss',
     ios: 'picker-internal.ios.scss',
     md: 'picker-internal.md.scss',
   },
diff --git a/core/src/components/picker/picker.scss b/core/src/components/picker/picker.scss
index a3f50659bc..ea082b73b0 100644
--- a/core/src/components/picker/picker.scss
+++ b/core/src/components/picker/picker.scss
@@ -30,8 +30,6 @@
   --max-width: #{$picker-max-width};
   --min-height: auto;
   --max-height: auto;
-  --backdrop-opacity: 0;
-  --height: #{$picker-height};
 
   @include font-smoothing();
   @include position(0, null, null, 0);
@@ -90,7 +88,6 @@
 
 .picker-toolbar {
   width: 100%;
-  height: $picker-toolbar-height;
 
   background: transparent;
 
@@ -120,8 +117,6 @@
 
   justify-content: center;
 
-  height: $picker-height - $picker-toolbar-height;
-
   margin-bottom: var(--ion-safe-area-bottom, 0);
 
   contain: strict;
diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx
index 437e10dbc1..acab41bca8 100644
--- a/core/src/components/picker/picker.tsx
+++ b/core/src/components/picker/picker.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   AnimationBuilder,
   CssClassMap,
@@ -30,13 +30,11 @@ import { iosLeaveAnimation } from './animations/ios.leave';
 // TODO(FW-2832): types
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-picker',
   styleUrls: {
-    base: 'picker.scss',
     ios: 'picker.ios.scss',
     md: 'picker.md.scss',
   },
@@ -334,7 +332,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
 
   render() {
     const { htmlAttributes } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         aria-modal="true"
diff --git a/core/src/components/picker/picker.vars.scss b/core/src/components/picker/picker.vars.scss
index 1a052ccb21..31a7ffd2b8 100644
--- a/core/src/components/picker/picker.vars.scss
+++ b/core/src/components/picker/picker.vars.scss
@@ -8,17 +8,3 @@ $picker-width:                             100% !default;
 
 /// @prop - Max width of the picker
 $picker-max-width:                         500px !default;
-
-/// @prop - Height of the picker
-/**
- * We choose an explicit height otherwise the picker will
- * appear to be hidden when using base components.
- */
-$picker-height: 200px !default;
-
-/// @prop - Height of the picker button toolbar
-/**
- * We choose an explicit height otherwise the toolbar will
- * appear to be hidden when using base components.
- */
-$picker-toolbar-height: 50px !default;
diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss
index 6940772602..9468bc1020 100644
--- a/core/src/components/popover/popover.scss
+++ b/core/src/components/popover/popover.scss
@@ -28,7 +28,6 @@
   --height: auto;
   --offset-x: 0px;
   --offset-y: 0px;
-  --backdrop-opacity: 0;
 
   @include position(0, 0, 0, 0);
 
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index 57f94f8c89..f234dd385e 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 import { printIonWarning } from '@utils/logging';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   AnimationBuilder,
   ComponentProps,
@@ -32,7 +32,6 @@ import { configureDismissInteraction, configureKeyboardInteraction, configureTri
 // TODO(FW-2832): types
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed inside of the `.popover-content` element.
@@ -44,7 +43,6 @@ import { configureDismissInteraction, configureKeyboardInteraction, configureTri
 @Component({
   tag: 'ion-popover',
   styleUrls: {
-    base: 'popover.scss',
     ios: 'popover.ios.scss',
     md: 'popover.md.scss',
   },
@@ -352,7 +350,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
     this.parentPopover = this.el.closest(`ion-popover:not(#${this.popoverId})`) as HTMLIonPopoverElement | null;
 
     if (this.alignment === undefined) {
-      this.alignment = getIonBehavior(this) === 'ios' ? 'center' : 'start';
+      this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
     }
   }
 
@@ -665,7 +663,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
   };
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const { onLifecycle, popoverId, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
     const desktop = isPlatform('desktop');
     const enableArrow = arrow && !parentPopover;
diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index c032512315..0752c79d17 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -19,12 +19,6 @@
   position: relative;
 
   width: 100%;
-  /**
-   * This is set so the progress bar
-   * is still visible when using base components.
-   * The iOS/MD styles override this.
-   */
-  height: 4px;
 
   contain: strict;
 
diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
index 688125c6db..5b458d9a2c 100644
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -2,13 +2,12 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import { clamp } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part progress - The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.
@@ -19,7 +18,6 @@ import { createColorClasses } from '../../utils/theme';
 @Component({
   tag: 'ion-progress-bar',
   styleUrls: {
-    base: 'progress-bar.scss',
     ios: 'progress-bar.ios.scss',
     md: 'progress-bar.md.scss',
   },
@@ -60,7 +58,7 @@ export class ProgressBar implements ComponentInterface {
   render() {
     const { color, type, reversed, value, buffer } = this;
     const paused = config.getBoolean('_testing');
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         role="progressbar"
diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx
index e29cddedd7..7912fd10cf 100644
--- a/core/src/components/radio-group/radio-group.tsx
+++ b/core/src/components/radio-group/radio-group.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { RadioGroupChangeEventDetail } from '../../interface';
 
 @Component({
@@ -188,7 +188,7 @@ export class RadioGroup implements ComponentInterface {
 
   render() {
     const { label, labelId } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     return <Host role="radiogroup" aria-labelledby={label ? labelId : null} onClick={this.onClick} class={mode}></Host>;
   }
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index b071ebfe06..1e0168e471 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
 import type { LegacyFormController } from '../../utils/forms';
 import { createLegacyFormController } from '../../utils/forms';
@@ -11,7 +11,6 @@ import { printIonWarning } from '../../utils/logging';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - The label text to associate with the radio. Use the "labelPlacement" property to control where the label is placed relative to the radio.
@@ -22,7 +21,6 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 @Component({
   tag: 'ion-radio',
   styleUrls: {
-    base: 'radio.scss',
     ios: 'radio.ios.scss',
     md: 'radio.md.scss',
   },
@@ -217,7 +215,7 @@ export class Radio implements ComponentInterface {
 
   private renderRadio() {
     const { checked, disabled, inputId, color, el, justify, labelPlacement, inheritedAttributes, hasLabel } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const inItem = hostContext('ion-item', el);
 
     return (
@@ -280,7 +278,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     }
 
     const { inputId, disabled, checked, color, el, buttonTabindex } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const { label, labelId, labelText } = getAriaLabel(el, inputId);
 
     return (
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 72508de7d3..b2624a054f 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   Color,
   Gesture,
@@ -27,7 +27,6 @@ import type { PinFormatter } from './range-interface';
 // TODO(FW-2832): types
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the range. Use the "labelPlacement" property to control where the label is placed relative to the range.
@@ -44,7 +43,6 @@ import type { PinFormatter } from './range-interface';
 @Component({
   tag: 'ion-range',
   styleUrls: {
-    base: 'range.scss',
     ios: 'range.ios.scss',
     md: 'range.md.scss',
   },
@@ -580,7 +578,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
 
     const { el, pressedKnob, disabled, pin, rangeId } = this;
 
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
 
@@ -608,7 +606,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
   private renderRange() {
     const { disabled, el, rangeId, pin, pressedKnob, labelPlacement } = this;
 
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
 
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index b446fd0ca2..71602e0503 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -3,7 +3,7 @@ import { Component, Element, Host, Prop, h } from '@stencil/core';
 import { arrowDown, caretBackSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { SpinnerTypes } from '../../interface';
 import { isPlatform } from '../../utils/platform';
 import type { IonicSafeString } from '../../utils/sanitization';
@@ -52,18 +52,18 @@ export class RefresherContent implements ComponentInterface {
 
   componentWillLoad() {
     if (this.pullingIcon === undefined) {
-      const platform = getIonBehavior(this);
+      const mode = getIonMode(this);
       const overflowRefresher = (this.el.style as any).webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
       this.pullingIcon = config.get(
         'refreshingIcon',
-        platform === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular'
+        mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular'
       );
     }
     if (this.refreshingSpinner === undefined) {
-      const platform = getIonBehavior(this);
+      const mode = getIonMode(this);
       this.refreshingSpinner = config.get(
         'refreshingSpinner',
-        config.get('spinner', platform === 'ios' ? 'lines' : 'circular')
+        config.get('spinner', mode === 'ios' ? 'lines' : 'circular')
       );
     }
   }
@@ -71,7 +71,7 @@ export class RefresherContent implements ComponentInterface {
   render() {
     const pullingIcon = this.pullingIcon;
     const hasSpinner = pullingIcon != null && (SPINNERS[pullingIcon] as any) !== undefined;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     return (
       <Host class={mode}>
diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index 4a7af5ef04..1c18c8d55d 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Animation, Gesture, GestureDetail, RefresherEventDetail } from '../../interface';
 import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
 import {
@@ -24,14 +24,9 @@ import {
   translateElement,
 } from './refresher.utils';
 
-/**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
 @Component({
   tag: 'ion-refresher',
   styleUrls: {
-    base: 'refresher.scss',
     ios: 'refresher.ios.scss',
     md: 'refresher.md.scss',
   },
@@ -145,7 +140,7 @@ export class Refresher implements ComponentInterface {
   @Event() ionStart!: EventEmitter<void>;
 
   private async checkNativeRefresher() {
-    const useNativeRefresher = await shouldUseNativeRefresher(this.el, getIonStylesheet(this));
+    const useNativeRefresher = await shouldUseNativeRefresher(this.el, getIonMode(this));
     if (useNativeRefresher && !this.nativeRefresher) {
       const contentEl = this.el.closest('ion-content');
       this.setupNativeRefresher(contentEl);
@@ -166,7 +161,7 @@ export class Refresher implements ComponentInterface {
   private async resetNativeRefresher(el: HTMLElement | undefined, state: RefresherState) {
     this.state = state;
 
-    if (getIonBehavior(this) === 'ios') {
+    if (getIonMode(this) === 'ios') {
       await translateElement(el, undefined, 300);
     } else {
       await transitionEndAsync(this.el.querySelector('.refresher-refreshing-icon'), 200);
@@ -432,7 +427,7 @@ export class Refresher implements ComponentInterface {
       'ion-refresher-content .refresher-refreshing ion-spinner'
     ) as HTMLIonSpinnerElement;
 
-    if (getIonStylesheet(this) === 'ios') {
+    if (getIonMode(this) === 'ios') {
       this.setupiOSNativeRefresher(pullingSpinner, refreshingSpinner);
     } else {
       this.setupMDNativeRefresher(contentEl, pullingSpinner, refreshingSpinner);
@@ -471,7 +466,7 @@ export class Refresher implements ComponentInterface {
        */
       this.backgroundContentEl = await contentEl.getBackgroundElement();
 
-      if (await shouldUseNativeRefresher(this.el, getIonBehavior(this))) {
+      if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
         this.setupNativeRefresher(contentEl);
       } else {
         this.gesture = (await import('../../utils/gesture')).createGesture({
@@ -740,7 +735,7 @@ export class Refresher implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         slot="fixed"
diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx
index 22fa444b6e..5d898cfbfd 100644
--- a/core/src/components/reorder-group/reorder-group.tsx
+++ b/core/src/components/reorder-group/reorder-group.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail, ItemReorderEventDetail } from '../../interface';
 import { findClosestIonContent, getScrollElement } from '../../utils/content';
 import { raf } from '../../utils/helpers';
@@ -299,7 +299,7 @@ export class ReorderGroup implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/reorder/reorder.tsx b/core/src/components/reorder/reorder.tsx
index 22050c9abf..bb5a6dc569 100644
--- a/core/src/components/reorder/reorder.tsx
+++ b/core/src/components/reorder/reorder.tsx
@@ -2,18 +2,14 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, h } from '@stencil/core';
 import { reorderThreeOutline, reorderTwoSharp } from 'ionicons/icons';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- *
  * @part icon - The icon of the reorder handle (uses ion-icon).
  */
 @Component({
   tag: 'ion-reorder',
   styleUrls: {
-    base: 'reorder.scss',
     ios: 'reorder.ios.scss',
     md: 'reorder.md.scss',
   },
@@ -36,7 +32,7 @@ export class Reorder implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
     return (
       <Host class={mode}>
diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx
index 967a3e5038..c8c55d1625 100644
--- a/core/src/components/ripple-effect/ripple-effect.tsx
+++ b/core/src/components/ripple-effect/ripple-effect.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Method, Prop, h, readTask, writeTask } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 @Component({
   tag: 'ion-ripple-effect',
@@ -78,7 +78,7 @@ export class RippleEffect implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         role="presentation"
diff --git a/core/src/components/router-link/router-link.tsx b/core/src/components/router-link/router-link.tsx
index 32616b8846..6ffc127973 100644
--- a/core/src/components/router-link/router-link.tsx
+++ b/core/src/components/router-link/router-link.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, RouterDirection } from '../../interface';
 import { createColorClasses, openURL } from '../../utils/theme';
 
@@ -54,7 +54,7 @@ export class RouterLink implements ComponentInterface {
   };
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const attrs = {
       href: this.href,
       rel: this.rel,
diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
index 9466c2fac0..3cd9290e78 100644
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Method, Prop, Watch, h } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   Animation,
   AnimationBuilder,
@@ -42,7 +42,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
   /**
    * The mode determines which platform styles to use.
    */
-  @Prop({ mutable: true }) mode = getIonBehavior(this);
+  @Prop({ mutable: true }) mode = getIonMode(this);
 
   /** @internal */
   @Prop() delegate?: FrameworkDelegate;
diff --git a/core/src/components/row/row.tsx b/core/src/components/row/row.tsx
index 0a4bf8235c..9e9e541467 100644
--- a/core/src/components/row/row.tsx
+++ b/core/src/components/row/row.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 @Component({
   tag: 'ion-row',
@@ -11,7 +11,7 @@ import { getIonStylesheet } from '../../global/ionic-global';
 export class Row implements ComponentInterface {
   render() {
     return (
-      <Host class={getIonStylesheet(this)}>
+      <Host class={getIonMode(this)}>
         <slot></slot>
       </Host>
     );
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index c44e68cdca..c584ec43ca 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -3,20 +3,18 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdat
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AutocompleteTypes, Color, SearchbarChangeEventDetail, StyleEventDetail } from '../../interface';
 import { debounceEvent, raf } from '../../utils/helpers';
 import { isRTL } from '../../utils/rtl';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-searchbar',
   styleUrls: {
-    base: 'searchbar.scss',
     ios: 'searchbar.ios.scss',
     md: 'searchbar.md.scss',
   },
@@ -393,7 +391,7 @@ export class Searchbar implements ComponentInterface {
   private positionElements() {
     const value = this.getValue();
     const prevAlignLeft = this.shouldAlignLeft;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const shouldAlignLeft = !this.animated || value.trim() !== '' || !!this.focused;
     this.shouldAlignLeft = shouldAlignLeft;
 
@@ -523,7 +521,7 @@ export class Searchbar implements ComponentInterface {
   render() {
     const { cancelButtonText } = this;
     const animated = this.animated && config.getBoolean('animated', true);
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
     const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
     const shouldShowCancelButton = this.shouldShowCancelButton();
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index ce8fe40b08..710af58c3f 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, Method, State, forceUpdate, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { SegmentButtonLayout } from '../../interface';
 import type { ButtonInterface } from '../../utils/element-interface';
 import type { Attributes } from '../../utils/helpers';
@@ -11,7 +11,6 @@ import { hostContext } from '../../utils/theme';
 let ids = 0;
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part native - The native HTML button element that wraps all child elements.
@@ -21,7 +20,6 @@ let ids = 0;
 @Component({
   tag: 'ion-segment-button',
   styleUrls: {
-    base: 'segment-button.scss',
     ios: 'segment-button.ios.scss',
     md: 'segment-button.md.scss',
   },
@@ -114,7 +112,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
 
   render() {
     const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const hasSegmentColor = () => segmentEl?.color !== undefined;
     return (
       <Host
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 522c38b22f..daad9ef8fd 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, SegmentChangeEventDetail, StyleEventDetail } from '../../interface';
 import type { Gesture, GestureDetail } from '../../utils/gesture';
 import { pointerCoord } from '../../utils/helpers';
@@ -10,13 +10,11 @@ import { isRTL } from '../../utils/rtl';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-segment',
   styleUrls: {
-    base: 'segment.scss',
     ios: 'segment.ios.scss',
     md: 'segment.md.scss',
   },
@@ -542,7 +540,7 @@ export class Segment implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         role="tablist"
diff --git a/core/src/components/select-option/select-option.tsx b/core/src/components/select-option/select-option.tsx
index b63ef75dac..a3a69815d3 100644
--- a/core/src/components/select-option/select-option.tsx
+++ b/core/src/components/select-option/select-option.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 @Component({
   tag: 'ion-select-option',
@@ -24,7 +24,7 @@ export class SelectOption implements ComponentInterface {
   @Prop() value?: any | null;
 
   render() {
-    return <Host role="option" id={this.inputId} class={getIonStylesheet(this)}></Host>;
+    return <Host role="option" id={this.inputId} class={getIonMode(this)}></Host>;
   }
 }
 
diff --git a/core/src/components/select-popover/select-popover.tsx b/core/src/components/select-popover/select-popover.tsx
index 34ba9eeaf7..f9a0ca811a 100644
--- a/core/src/components/select-popover/select-popover.tsx
+++ b/core/src/components/select-popover/select-popover.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Listen, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { SelectPopoverOption } from '../../interface';
 import { safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
@@ -10,13 +10,10 @@ import { getClassMap } from '../../utils/theme';
 
 /**
  * @internal
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-select-popover',
   styleUrls: {
-    base: 'select-popover.scss',
     ios: 'select-popover.ios.scss',
     md: 'select-popover.md.scss',
   },
@@ -153,7 +150,7 @@ export class SelectPopover implements ComponentInterface {
     const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
 
     return (
-      <Host class={getIonStylesheet(this)}>
+      <Host class={getIonMode(this)}>
         <ion-list>
           {header !== undefined && <ion-list-header>{header}</ion-list-header>}
           {hasSubHeaderOrMessage && (
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 954d2ca7ea..7c9c58c97c 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -6,7 +6,7 @@ import { printIonWarning } from '@utils/logging';
 import { isRTL } from '@utils/rtl';
 import { caretDownSharp } from 'ionicons/icons';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   ActionSheetButton,
   ActionSheetOptions,
@@ -32,7 +32,6 @@ import type { SelectCompareFn } from './select-interface';
 // TODO(FW-2832): types
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part placeholder - The text displayed in the select when there is no value.
@@ -42,7 +41,6 @@ import type { SelectCompareFn } from './select-interface';
 @Component({
   tag: 'ion-select',
   styleUrls: {
-    base: 'select.scss',
     ios: 'select.ios.scss',
     md: 'select.md.scss',
   },
@@ -459,8 +457,7 @@ export class Select implements ComponentInterface {
   private async openPopover(ev: UIEvent) {
     const { fill } = this;
     const interfaceOptions = this.interfaceOptions;
-    const style = getIonStylesheet(this);
-    const mode = getIonBehavior(this);
+    const mode = getIonMode(this);
     const showBackdrop = mode === 'md' ? false : true;
     const multiple = this.multiple;
     const value = this.value;
@@ -486,9 +483,9 @@ export class Select implements ComponentInterface {
     } else {
       /**
        * The popover should take up the full width
-       * when using a fill in MD style.
+       * when using a fill in MD mode.
        */
-      if (style === 'md' && fill !== undefined) {
+      if (mode === 'md' && fill !== undefined) {
         size = 'cover';
 
         /**
@@ -543,7 +540,7 @@ export class Select implements ComponentInterface {
   }
 
   private async openActionSheet() {
-    const mode = getIonBehavior(this);
+    const mode = getIonMode(this);
     const interfaceOptions = this.interfaceOptions;
     const actionSheetOpts: ActionSheetOptions = {
       mode,
@@ -574,7 +571,7 @@ export class Select implements ComponentInterface {
 
     const interfaceOptions = this.interfaceOptions;
     const inputType = this.multiple ? 'checkbox' : 'radio';
-    const mode = getIonBehavior(this);
+    const mode = getIonMode(this);
 
     const alertOpts: AlertOptions = {
       mode,
@@ -700,7 +697,7 @@ export class Select implements ComponentInterface {
    * when fill="outline".
    */
   private renderLabelContainer() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const hasOutlineFill = mode === 'md' && this.fill === 'outline';
 
     if (hasOutlineFill) {
@@ -734,7 +731,7 @@ export class Select implements ComponentInterface {
 
   private renderSelect() {
     const { disabled, el, isExpanded, labelPlacement, justify, placeholder, fill, shape } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
     const justifyEnabled = !hasFloatingOrStackedLabel;
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
@@ -804,7 +801,7 @@ For inputs that do not have a visible label, developers should use "aria-label"
     }
 
     const { disabled, el, inputId, isExpanded, name, placeholder, value } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const { labelText, labelId } = getAriaLabel(el, inputId);
 
     renderHiddenInput(true, el, name, parseValue(value), disabled);
diff --git a/core/src/components/skeleton-text/skeleton-text.tsx b/core/src/components/skeleton-text/skeleton-text.tsx
index 550218211d..8ca8098232 100644
--- a/core/src/components/skeleton-text/skeleton-text.tsx
+++ b/core/src/components/skeleton-text/skeleton-text.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import { hostContext } from '../../utils/theme';
 
 @Component({
@@ -21,7 +21,7 @@ export class SkeletonText implements ComponentInterface {
   render() {
     const animated = this.animated && config.getBoolean('animated', true);
     const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     return (
       <Host
diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
index 68d1ce3912..90548e6b08 100644
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, SpinnerConfig, SpinnerTypes } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
@@ -39,16 +39,16 @@ export class Spinner implements ComponentInterface {
 
   private getName(): SpinnerTypes {
     const spinnerName = this.name || config.get('spinner');
-    const platform = getIonBehavior(this);
+    const mode = getIonMode(this);
     if (spinnerName) {
       return spinnerName;
     }
-    return platform === 'ios' ? 'lines' : 'circular';
+    return mode === 'ios' ? 'lines' : 'circular';
   }
 
   render() {
     const self = this;
-    const mode = getIonStylesheet(self);
+    const mode = getIonMode(self);
     const spinnerName = self.getName();
     const spinner = SPINNERS[spinnerName] ?? SPINNERS['lines'];
     const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx
index 542ef605b9..eebcfbfbba 100644
--- a/core/src/components/split-pane/split-pane.tsx
+++ b/core/src/components/split-pane/split-pane.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 // TODO(FW-2832): types
 
@@ -16,14 +16,9 @@ const QUERY: { [key: string]: string } = {
   never: '',
 };
 
-/**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
 @Component({
   tag: 'ion-split-pane',
   styleUrls: {
-    base: 'split-pane.scss',
     ios: 'split-pane.ios.scss',
     md: 'split-pane.md.scss',
   },
@@ -163,7 +158,7 @@ export class SplitPane implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={{
diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.scss
index 409f868396..a75892261c 100644
--- a/core/src/components/tab-bar/tab-bar.scss
+++ b/core/src/components/tab-bar/tab-bar.scss
@@ -1,5 +1,4 @@
 @import "../../themes/ionic.globals";
-@import "./tab-bar.vars.scss";
 
 :host {
   /**
@@ -16,7 +15,6 @@
   justify-content: center;
 
   width: auto;
-  height: $tab-bar-height;
 
   padding-bottom: var(--ion-safe-area-bottom, 0);
 
diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx
index baf1132a9f..0448d98ecd 100644
--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/core/src/components/tab-bar/tab-bar.tsx
@@ -1,20 +1,18 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, TabBarChangedEventDetail } from '../../interface';
 import type { KeyboardController } from '../../utils/keyboard/keyboard-controller';
 import { createKeyboardController } from '../../utils/keyboard/keyboard-controller';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-tab-bar',
   styleUrls: {
-    base: 'tab-bar.scss',
     ios: 'tab-bar.ios.scss',
     md: 'tab-bar.md.scss',
   },
@@ -75,7 +73,7 @@ export class TabBar implements ComponentInterface {
 
   render() {
     const { color, translucent, keyboardVisible } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
 
     return (
diff --git a/core/src/components/tab-bar/tab-bar.vars.scss b/core/src/components/tab-bar/tab-bar.vars.scss
deleted file mode 100644
index e56760a3a7..0000000000
--- a/core/src/components/tab-bar/tab-bar.vars.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Base Tab Bar
-// --------------------------------------------------
-
-/// @prop - Default height of the tab bar.
-/**
- * We choose an explicit height otherwise the tab bar will
- * appear to be hidden when using base components.
- */
-$tab-bar-height:    50px !default;
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index b6bc48b59b..b86b4f1def 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -2,14 +2,13 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, h } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from '../../interface';
 import type { AnchorInterface } from '../../utils/element-interface';
 import type { Attributes } from '../../utils/helpers';
 import { inheritAttributes } from '../../utils/helpers';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part native - The native HTML anchor element that wraps all child elements.
@@ -17,7 +16,6 @@ import { inheritAttributes } from '../../utils/helpers';
 @Component({
   tag: 'ion-tab-button',
   styleUrls: {
-    base: 'tab-button.scss',
     ios: 'tab-button.ios.scss',
     md: 'tab-button.md.scss',
   },
@@ -136,7 +134,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
 
   render() {
     const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const attrs = {
       download: this.download,
       href,
diff --git a/core/src/components/text/text.tsx b/core/src/components/text/text.tsx
index b0aa7d515c..25da475a78 100644
--- a/core/src/components/text/text.tsx
+++ b/core/src/components/text/text.tsx
@@ -1,12 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
@@ -23,7 +22,7 @@ export class Text implements ComponentInterface {
   @Prop({ reflect: true }) color?: Color;
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     return (
       <Host
         class={createColorClasses(this.color, {
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 9f63c02a11..092bfc2010 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
 
-import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail } from '../../interface';
 import type { LegacyFormController } from '../../utils/forms';
 import { createLegacyFormController } from '../../utils/forms';
@@ -12,13 +12,11 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 import { getCounterText } from '../input/input.utils';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-textarea',
   styleUrls: {
-    base: 'textarea.scss',
     ios: 'textarea.ios.scss',
     md: 'textarea.md.scss',
   },
@@ -461,7 +459,7 @@ For textareas that do not have a visible label, developers should use "aria-labe
       this.hasLoggedDeprecationWarning = true;
     }
 
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const value = this.getValue();
     const labelId = this.inputId + '-lbl';
     const label = findItemLabel(this.el);
@@ -528,8 +526,8 @@ For textareas that do not have a visible label, developers should use "aria-labe
    * Renders the border container when fill="outline".
    */
   private renderLabelContainer() {
-    const platform = getIonBehavior(this);
-    const hasOutlineFill = platform === 'md' && this.fill === 'outline';
+    const mode = getIonMode(this);
+    const hasOutlineFill = mode === 'md' && this.fill === 'outline';
 
     if (hasOutlineFill) {
       /**
@@ -601,7 +599,7 @@ For textareas that do not have a visible label, developers should use "aria-labe
 
   private renderTextarea() {
     const { inputId, disabled, fill, shape, labelPlacement } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const value = this.getValue();
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
diff --git a/core/src/components/thumbnail/thumbnail.tsx b/core/src/components/thumbnail/thumbnail.tsx
index 81f3b3c0fd..14f7d2b11d 100644
--- a/core/src/components/thumbnail/thumbnail.tsx
+++ b/core/src/components/thumbnail/thumbnail.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 @Component({
   tag: 'ion-thumbnail',
@@ -11,7 +11,7 @@ import { getIonStylesheet } from '../../global/ionic-global';
 export class Thumbnail implements ComponentInterface {
   render() {
     return (
-      <Host class={getIonStylesheet(this)}>
+      <Host class={getIonMode(this)}>
         <slot></slot>
       </Host>
     );
diff --git a/core/src/components/title/title.tsx b/core/src/components/title/title.tsx
index 7c9da4bae9..851cde5068 100644
--- a/core/src/components/title/title.tsx
+++ b/core/src/components/title/title.tsx
@@ -1,18 +1,13 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
-/**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
 @Component({
   tag: 'ion-title',
   styleUrls: {
-    base: 'title.scss',
     ios: 'title.ios.scss',
     md: 'title.md.scss',
   },
@@ -61,7 +56,7 @@ export class ToolbarTitle implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const size = this.getSize();
 
     return (
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 868383c750..5e2b89dd12 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Watch, Component, Element, Event, h, Host, Method, Prop } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type {
   AnimationBuilder,
   Color,
@@ -35,7 +35,6 @@ import { mdLeaveAnimation } from './animations/md.leave';
 // TODO(FW-2832): types
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part button - Any button element that is displayed inside of the toast.
@@ -47,7 +46,6 @@ import { mdLeaveAnimation } from './animations/md.leave';
 @Component({
   tag: 'ion-toast',
   styleUrls: {
-    base: 'toast.scss',
     ios: 'toast.ios.scss',
     md: 'toast.md.scss',
   },
@@ -369,7 +367,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
       return;
     }
 
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const buttonGroupsClasses = {
       'toast-button-group': true,
       [`toast-button-group-${side}`]: true,
@@ -403,7 +401,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
     const allButtons = this.getButtons();
     const startButtons = allButtons.filter((b) => b.side === 'start');
     const endButtons = allButtons.filter((b) => b.side !== 'start');
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const wrapperClass = {
       'toast-wrapper': true,
       [`toast-${this.position}`]: true,
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index a48b87c979..55e4be9e59 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -4,7 +4,7 @@ import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil
 import { checkmarkOutline, removeOutline, ellipseOutline } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, Gesture, GestureDetail, Mode, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
 import type { LegacyFormController } from '../../utils/forms';
 import { createLegacyFormController } from '../../utils/forms';
@@ -16,7 +16,6 @@ import { isRTL } from '../../utils/rtl';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle.
@@ -27,7 +26,6 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 @Component({
   tag: 'ion-toggle',
   styleUrls: {
-    base: 'toggle.scss',
     ios: 'toggle.ios.scss',
     md: 'toggle.md.scss',
   },
@@ -269,7 +267,7 @@ export class Toggle implements ComponentInterface {
   }
 
   private renderToggleControl() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
 
     const { enableOnOffLabels, checked } = this;
     return (
@@ -301,7 +299,7 @@ export class Toggle implements ComponentInterface {
   private renderToggle() {
     const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name } = this;
 
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const value = this.getValue();
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
@@ -371,7 +369,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     }
 
     const { activated, color, checked, disabled, el, inputId, name } = this;
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const { label, labelId, labelText } = getAriaLabel(el, inputId);
     const value = this.getValue();
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index 32f6103b23..4e5e3f3d06 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -1,12 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
 
-import { getIonStylesheet } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, CssClassMap, StyleEventDetail } from '../../interface';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
- * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
@@ -18,7 +17,6 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 @Component({
   tag: 'ion-toolbar',
   styleUrls: {
-    base: 'toolbar.scss',
     ios: 'toolbar.ios.scss',
     md: 'toolbar.md.scss',
   },
@@ -84,7 +82,7 @@ export class Toolbar implements ComponentInterface {
   }
 
   render() {
-    const mode = getIonStylesheet(this);
+    const mode = getIonMode(this);
     const childStyles = {};
     this.childrenStyles.forEach((value) => {
       Object.assign(childStyles, value);
diff --git a/core/src/global/base-components.ts b/core/src/global/base-components.ts
deleted file mode 100644
index 5676738611..0000000000
--- a/core/src/global/base-components.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import type { Config } from './config';
-
-let includeComponents: Map<string, boolean> | undefined;
-let excludeComponents: Map<string, boolean> | undefined;
-
-export const isIonicElement = (elm: HTMLElement) => elm.tagName?.startsWith('ION-');
-
-export const resetBaseComponentsCache = () => {
-  includeComponents = excludeComponents = undefined;
-};
-
-/**
- * This function initializes Maps for components that are
- * included or excluded from base components. This function gets called
- * for each instance of an Ionic component, so we use the Maps
- * to ensure a quick lookup time since we can avoid iterating
- * the initialize and excludes arrays each time.
- */
-const initializeBaseComponentsCache = (includeCmp?: string[], excludeCmp?: string[]) => {
-  /**
-   * If includeCmp is defined, create a Map
-   * and cache all the component tag names in it.
-   */
-  if (includeCmp !== undefined) {
-    includeComponents = new Map();
-
-    for (const tagName of includeCmp) {
-      includeComponents.set(tagName, true);
-    }
-  }
-
-  /**
-   * If excludeCmp is defined, create a Map
-   * and cache all the component tag names in it.
-   */
-  if (excludeCmp !== undefined) {
-    excludeComponents = new Map();
-
-    for (const tagName of excludeCmp) {
-      excludeComponents.set(tagName, true);
-    }
-  }
-};
-
-/**
- * Determines if a component is using base components.
- * This should be used when the component is created
- * for the first time.
- */
-export const isBaseComponent = (elm: HTMLElement, config: Config) => {
-  /**
-   * Only Ionic components can use
-   * base components.
-   */
-  if (!isIonicElement(elm)) {
-    return false;
-  }
-
-  /**
-   * If the component is not already initialized
-   * then we need to see if the developer has
-   * set use-base as an attribute on the element.
-   */
-  if (elm.hasAttribute('use-base')) {
-    return elm.getAttribute('use-base') === 'true';
-  }
-
-  const baseComponents = config.get('baseComponents');
-
-  /**
-   * If app has base components enabled
-   * for all components then return true.
-   */
-  if (baseComponents === true) {
-    return true;
-  }
-
-  /**
-   * If app has some components opted-in
-   * to base components then we need to check.
-   */
-  if (typeof baseComponents === 'object') {
-    /**
-     * Initialize the base components cache
-     * if we do not already have it.
-     */
-    if (includeComponents === undefined && excludeComponents === undefined) {
-      initializeBaseComponentsCache(baseComponents.includeComponents, baseComponents.excludeComponents);
-    }
-
-    /**
-     * If component is explicitly included
-     * then return true. Otherwise the
-     * component should not use base components.
-     */
-    if (includeComponents !== undefined) {
-      return includeComponents.has(elm.tagName.toLowerCase());
-    }
-
-    /**
-     * If component is explicitly included
-     * then return true. Otherwise the
-     * component should not use base components.
-     */
-    if (excludeComponents !== undefined) {
-      return !excludeComponents.has(elm.tagName.toLowerCase());
-    }
-  }
-
-  /**
-   * `baseComponents` config is either
-   * set to `false` or some non-valid value.
-   */
-  return false;
-};
diff --git a/core/src/global/config.ts b/core/src/global/config.ts
index 7363d25607..e79de89865 100644
--- a/core/src/global/config.ts
+++ b/core/src/global/config.ts
@@ -1,5 +1,4 @@
 import type { IonicConfig } from '../interface';
-import { printIonWarning } from '../utils/logging';
 
 // TODO(FW-2832): types
 
@@ -75,24 +74,5 @@ const startsWith = (input: string, search: string): boolean => {
   return input.substr(0, search.length) === search;
 };
 
-/**
- * Validates if the IonicConfig is
- * set correctly.
- */
-export const validateConfig = (config: IonicConfig) => {
-  const { baseComponents } = config;
-  if (typeof baseComponents === 'object') {
-    if (baseComponents.includeComponents !== undefined && baseComponents.excludeComponents !== undefined) {
-      printIonWarning(
-        'The `baseComponents` configuration in your Ionic config is invalid. `includeComponents` and `excludeComponents` cannot be used at the same time.',
-        baseComponents
-      );
-      return false;
-    }
-  }
-
-  return true;
-};
-
 const IONIC_PREFIX = 'ionic:';
 const IONIC_SESSION_KEY = 'ionic-persist-config';
diff --git a/core/src/global/ionic-global.ts b/core/src/global/ionic-global.ts
index 625f62ee43..13a269088b 100644
--- a/core/src/global/ionic-global.ts
+++ b/core/src/global/ionic-global.ts
@@ -3,8 +3,7 @@ import { getMode, setMode, setPlatformHelpers } from '@stencil/core';
 import type { IonicConfig, Mode } from '../interface';
 import { isPlatform, setupPlatforms } from '../utils/platform';
 
-import { isBaseComponent, isIonicElement, resetBaseComponentsCache } from './base-components';
-import { config, configFromSession, configFromURL, saveConfig, validateConfig } from './config';
+import { config, configFromSession, configFromURL, saveConfig } from './config';
 
 // TODO(FW-2832): types
 
@@ -12,35 +11,10 @@ declare const Context: any;
 
 let defaultMode: Mode;
 
-type Platform = 'ios' | 'md';
-
-/**
- * Given a Stencil component class, return the visual
- * styles associated with this instance. By default, the visual
- * styles are inherited from the platform. This can be further
- * customized using the "baseComponents" global config or the
- * "useBase" property on the component.
- */
-export const getIonStylesheet = (ref?: any): Mode => {
+export const getIonMode = (ref?: any): Mode => {
   return (ref && getMode(ref)) || defaultMode;
 };
 
-/**
- * Given a Stencil component class, return the
- * platform associated with this instance. The platform
- * is used to determine a component's capabilities
- * and does not impact the visual styles associated with
- * this instance. The capabilities can be set using the "mode"
- * global config or property on the component.
- *
- * If no platform is specified then we fallback to
- * using getIonStylesheet. This can happen when a component
- * has no per-mode stylesheets (such as ion-spinner).
- */
-export const getIonBehavior = (ref?: any): Platform => {
-  return ref?.el?.platform ?? getIonStylesheet(ref);
-};
-
 export const initialize = (userConfig: IonicConfig = {}) => {
   if (typeof (window as any) === 'undefined') {
     return;
@@ -65,7 +39,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
 
   // create the Ionic.config from raw config object (if it exists)
   // and convert Ionic.config into a ConfigApi that has a get() fn
-  const configObj: IonicConfig = {
+  const configObj = {
     ...configFromSession(win),
     persistConfig: false,
     ...Ionic.config,
@@ -73,14 +47,6 @@ export const initialize = (userConfig: IonicConfig = {}) => {
     ...userConfig,
   };
 
-  validateConfig(configObj);
-
-  /**
-   * Reset the base component look up table.
-   * This will be re-created when needed in setMode.
-   */
-  resetBaseComponentsCache();
-
   config.reset(configObj);
   if (config.getBoolean('persistConfig')) {
     saveConfig(win, configObj);
@@ -105,48 +71,23 @@ export const initialize = (userConfig: IonicConfig = {}) => {
     config.set('animated', false);
   }
 
+  const isIonicElement = (elm: any) => elm.tagName?.startsWith('ION-');
+
   const isAllowedIonicModeValue = (elmMode: string) => ['ios', 'md'].includes(elmMode);
 
   setMode((elm: any) => {
-    const baseEl = elm;
-
-    /**
-     * The useBase virtualProp only
-     * exists on Ionic components, so
-     * we do not need to track useBase
-     * on non-Ionic components.
-     */
-    let useBase = false;
-    if (isIonicElement(baseEl)) {
-      useBase = isBaseComponent(baseEl, config);
-      baseEl.useBase = useBase;
-    }
-
     while (elm) {
       const elmMode = (elm as any).mode || elm.getAttribute('mode');
       if (elmMode) {
         if (isAllowedIonicModeValue(elmMode)) {
-          /**
-           * The visual styles can deviate from the platform
-           * capabilities if base components are enabled, so we keep
-           * track of the platform separately.
-           */
-          baseEl.platform = elmMode;
-          return useBase ? 'base' : elmMode;
+          return elmMode;
         } else if (isIonicElement(elm)) {
           console.warn('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
         }
       }
       elm = elm.parentElement;
     }
-
-    /**
-     * The visual styles can deviate from the platform
-     * capabilities if base components are enabled, so we keep
-     * track of the platform separately.
-     */
-    baseEl.platform = defaultMode;
-    return useBase ? 'base' : defaultMode;
+    return defaultMode;
   });
 };
 
diff --git a/core/src/global/test/base-components.spec.ts b/core/src/global/test/base-components.spec.ts
deleted file mode 100644
index ffd95f65f9..0000000000
--- a/core/src/global/test/base-components.spec.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { isBaseComponent, resetBaseComponentsCache } from '../base-components';
-import { Config } from '../config';
-
-describe('isBaseComponent()', () => {
-  beforeEach(() => {
-    resetBaseComponentsCache();
-  });
-  describe('global config', () => {
-    it('should return true when baseComponents has been enabled globally', () => {
-      const config = new Config();
-      config.reset({ baseComponents: true });
-      const el = document.createElement('ion-badge');
-
-      expect(isBaseComponent(el, config)).toBe(true);
-    });
-    it('should return false when baseComponents has not been enabled globally', () => {
-      const config = new Config();
-      config.reset({});
-      const el = document.createElement('ion-badge');
-
-      expect(isBaseComponent(el, config)).toBe(false);
-    });
-    it('should return false when baseComponents has been disabled globally', () => {
-      const config = new Config();
-      config.reset({ baseComponents: false });
-      const el = document.createElement('ion-badge');
-
-      expect(isBaseComponent(el, config)).toBe(false);
-    });
-    it('should return true when component is included in includeComponents', () => {
-      const config = new Config();
-      config.reset({ baseComponents: { includeComponents: ['ion-badge'] } });
-      const el = document.createElement('ion-badge');
-
-      expect(isBaseComponent(el, config)).toBe(true);
-    });
-    it('should return false when component is not included in includeComponents', () => {
-      const config = new Config();
-      config.reset({ baseComponents: { includeComponents: ['ion-button'] } });
-      const el = document.createElement('ion-badge');
-
-      expect(isBaseComponent(el, config)).toBe(false);
-    });
-    it('should return false when component is included in excludeComponents', () => {
-      const config = new Config();
-      config.reset({ baseComponents: { excludeComponents: ['ion-badge'] } });
-      const el = document.createElement('ion-badge');
-
-      expect(isBaseComponent(el, config)).toBe(false);
-    });
-    it('should return true when component is not included in excludeComponents', () => {
-      const config = new Config();
-      config.reset({ baseComponents: { excludeComponents: ['ion-button'] } });
-      const el = document.createElement('ion-badge');
-
-      expect(isBaseComponent(el, config)).toBe(true);
-    });
-  });
-  describe('component instance', () => {
-    it('should return true when use-base attribute is set to "true" on the component instance', () => {
-      const config = new Config();
-      config.reset({});
-
-      const el = document.createElement('ion-badge');
-      el.setAttribute('use-base', 'true');
-
-      expect(isBaseComponent(el, config)).toBe(true);
-    });
-    it('should return false when use-base attribute is set to "false" on the component instance', () => {
-      const config = new Config();
-      config.reset({});
-
-      const el = document.createElement('ion-badge');
-      el.setAttribute('use-base', 'false');
-
-      expect(isBaseComponent(el, config)).toBe(false);
-    });
-  });
-});
diff --git a/core/src/global/test/config-controller.spec.ts b/core/src/global/test/config-controller.spec.ts
index 5497268a5e..1b43c1c368 100644
--- a/core/src/global/test/config-controller.spec.ts
+++ b/core/src/global/test/config-controller.spec.ts
@@ -1,4 +1,4 @@
-import { Config, validateConfig } from '../config';
+import { Config } from '../config';
 
 describe('Config', () => {
   it('should get a value from the config', () => {
@@ -82,14 +82,3 @@ describe('Config', () => {
     expect(config.get('text0', 'HEY')).toEqual('hola');
   });
 });
-
-describe('validateConfig()', () => {
-  it('should return true when base components is used correctly', () => {
-    expect(validateConfig({ baseComponents: true })).toEqual(true);
-    expect(validateConfig({ baseComponents: { includeComponents: [] } })).toEqual(true);
-    expect(validateConfig({ baseComponents: { excludeComponents: [] } })).toEqual(true);
-  });
-  it('should return false when base components is used correctly', () => {
-    expect(validateConfig({ baseComponents: { includeComponents: [], excludeComponents: [] } })).toEqual(false);
-  });
-});
diff --git a/core/src/global/test/platform.spec.ts b/core/src/global/test/platform.spec.ts
deleted file mode 100644
index f1893452de..0000000000
--- a/core/src/global/test/platform.spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { getIonBehavior } from '../ionic-global';
-
-describe('getIonBehavior()', () => {
-  it('should return the component platform', () => {
-    const iosEl = document.createElement('ion-badge');
-    iosEl.platform = 'ios';
-
-    expect(getIonBehavior({ el: iosEl })).toBe('ios');
-
-    const androidEl = document.createElement('ion-badge');
-    androidEl.platform = 'android';
-
-    expect(getIonBehavior({ el: androidEl })).toBe('android');
-  });
-});
diff --git a/core/src/index.ts b/core/src/index.ts
index a816b47393..6944306433 100644
--- a/core/src/index.ts
+++ b/core/src/index.ts
@@ -9,7 +9,7 @@ export { initialize } from './global/ionic-global';
 export { componentOnReady } from './utils/helpers';
 export { isPlatform, Platforms, PlatformConfig, getPlatforms } from './utils/platform';
 export { IonicSafeString } from './utils/sanitization';
-export { IonicConfig, BaseComponentsConfig, getMode, setupConfig } from './utils/config';
+export { IonicConfig, getMode, setupConfig } from './utils/config';
 export {
   LIFECYCLE_WILL_ENTER,
   LIFECYCLE_DID_ENTER,
diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts
index 7d11ddcb08..3069923b6b 100644
--- a/core/src/utils/config.ts
+++ b/core/src/utils/config.ts
@@ -2,26 +2,6 @@ import type { AnimationBuilder, Mode, SpinnerTypes, TabButtonLayout } from '../i
 
 import type { PlatformConfig } from './platform';
 
-export interface BaseComponentsConfig {
-  /**
-   * If provided, the specified components
-   * will be opted-in to base components. All
-   * other components will not be opted in.
-   * Developers should use either `includeComponents`
-   * or `excludeComponents` but not both.
-   */
-  includeComponents?: string[];
-
-  /**
-   * If provided, the specified components
-   * will not be opted-in to base components. All
-   * other components will be opted in.
-   * Developers should use either `includeComponents`
-   * or `excludeComponents` but not both.
-   */
-  excludeComponents?: string[];
-}
-
 export interface IonicConfig {
   /**
    * When it's set to `false`, disables all animation and transition across the app.
@@ -212,20 +192,6 @@ export interface IonicConfig {
    */
   platform?: PlatformConfig;
 
-  /**
-   * EXPERIMENTAL: Base Components is in developer preview.
-   * Breaking changes may happen at any time.
-   *
-   * When `true`, all components will be rendered without
-   * iOS or MD styles, providing only the structural styles.
-   * When `false`, all components will be rendered with iOS or
-   * MD styles.
-   * Developers can provide a BaseComponentsConfig object for more
-   * granularity.
-   * Defaults to `undefined` which has the same behavior as `false`.
-   */
-  baseComponents?: boolean | BaseComponentsConfig;
-
   // PRIVATE configs
   keyboardHeight?: number;
   inputShims?: boolean;
diff --git a/core/src/utils/menu-controller/animations/overlay.ts b/core/src/utils/menu-controller/animations/overlay.ts
index 73c5ca530b..16dd1c52b2 100644
--- a/core/src/utils/menu-controller/animations/overlay.ts
+++ b/core/src/utils/menu-controller/animations/overlay.ts
@@ -1,4 +1,4 @@
-import { getIonBehavior } from '../../../global/ionic-global';
+import { getIonMode } from '../../../global/ionic-global';
 import type { Animation, MenuI } from '../../../interface';
 import { createAnimation } from '../../animation/animation';
 
@@ -28,8 +28,8 @@ export const menuOverlayAnimation = (menu: MenuI): Animation => {
 
   menuAnimation.addElement(menu.menuInnerEl!).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
 
-  const platform = getIonBehavior(menu);
-  const isIos = platform === 'ios';
+  const mode = getIonMode(menu);
+  const isIos = mode === 'ios';
   const opacity = isIos ? 0.2 : 0.25;
 
   backdropAnimation.addElement(menu.backdropEl!).fromTo('opacity', 0.01, opacity);
diff --git a/core/src/utils/menu-controller/animations/push.ts b/core/src/utils/menu-controller/animations/push.ts
index 48987922b2..8e4a87335a 100644
--- a/core/src/utils/menu-controller/animations/push.ts
+++ b/core/src/utils/menu-controller/animations/push.ts
@@ -1,4 +1,4 @@
-import { getIonBehavior } from '../../../global/ionic-global';
+import { getIonMode } from '../../../global/ionic-global';
 import type { Animation, MenuI } from '../../../interface';
 import { createAnimation } from '../../animation/animation';
 
@@ -13,7 +13,7 @@ export const menuPushAnimation = (menu: MenuI): Animation => {
   let contentOpenedX: string;
   let menuClosedX: string;
 
-  const platform = getIonBehavior(menu);
+  const mode = getIonMode(menu);
   const width = menu.width;
 
   if (menu.isEndSide) {
@@ -34,5 +34,5 @@ export const menuPushAnimation = (menu: MenuI): Animation => {
 
   const backdropAnimation = createAnimation().addElement(menu.backdropEl!).fromTo('opacity', 0.01, 0.32);
 
-  return baseAnimation(platform === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+  return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };
diff --git a/core/src/utils/menu-controller/animations/reveal.ts b/core/src/utils/menu-controller/animations/reveal.ts
index a4c0213aef..e9622f72ff 100644
--- a/core/src/utils/menu-controller/animations/reveal.ts
+++ b/core/src/utils/menu-controller/animations/reveal.ts
@@ -1,4 +1,4 @@
-import { getIonBehavior } from '../../../global/ionic-global';
+import { getIonMode } from '../../../global/ionic-global';
 import type { Animation, MenuI } from '../../../interface';
 import { createAnimation } from '../../animation/animation';
 
@@ -10,11 +10,11 @@ import { baseAnimation } from './base';
  * The menu itself, which is under the content, does not move.
  */
 export const menuRevealAnimation = (menu: MenuI): Animation => {
-  const platform = getIonBehavior(menu);
+  const mode = getIonMode(menu);
   const openedX = menu.width * (menu.isEndSide ? -1 : 1) + 'px';
   const contentOpen = createAnimation()
     .addElement(menu.contentEl!) // REVIEW
     .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
 
-  return baseAnimation(platform === 'ios').addAnimation(contentOpen);
+  return baseAnimation(mode === 'ios').addAnimation(contentOpen);
 };
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 81a8e3a941..a8d2804a9f 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -1,7 +1,7 @@
 import { printIonWarning } from '@utils/logging';
 
 import { config } from '../global/config';
-import { getIonBehavior } from '../global/ionic-global';
+import { getIonMode } from '../global/ionic-global';
 import type {
   ActionSheetOptions,
   AlertOptions,
@@ -421,11 +421,11 @@ export const present = async <OverlayPresentOptions>(
   overlay.willPresent.emit();
   overlay.willPresentShorthand?.emit();
 
-  const platform = getIonBehavior(overlay);
+  const mode = getIonMode(overlay);
   // get the user's animation fn if one was provided
   const animationBuilder = overlay.enterAnimation
     ? overlay.enterAnimation
-    : config.get(name, platform === 'ios' ? iosEnterAnimation : mdEnterAnimation);
+    : config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
 
   const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
   if (completed) {
@@ -505,10 +505,10 @@ export const dismiss = async <OverlayDismissOptions>(
     overlay.willDismiss.emit({ data, role });
     overlay.willDismissShorthand?.emit({ data, role });
 
-    const platform = getIonBehavior(overlay);
+    const mode = getIonMode(overlay);
     const animationBuilder = overlay.leaveAnimation
       ? overlay.leaveAnimation
-      : config.get(name, platform === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
+      : config.get(name, mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
 
     // If dismissed via gesture, no need to play leaving animation again
     if (role !== GESTURE) {
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index f70278f0c2..8508fec79e 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -25,7 +25,6 @@ export {
   SpinnerTypes,
   AccordionGroupCustomEvent,
   AccordionGroupChangeEventDetail,
-  BaseComponentsConfig,
   BreadcrumbCustomEvent,
   BreadcrumbCollapsedClickEventDetail,
   ActionSheetOptions,
@@ -44,7 +43,6 @@ export {
   ItemReorderEventDetail,
   ItemReorderCustomEvent,
   ItemSlidingCustomEvent,
-  IonicConfig,
   IonicSafeString,
   LoadingOptions,
   MenuCustomEvent,
@@ -54,7 +52,6 @@ export {
   PickerButton,
   PickerColumn,
   PickerColumnOption,
-  PlatformConfig,
   PopoverOptions,
   RadioGroupCustomEvent,
   RadioGroupChangeEventDetail,
diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts
index 17360a66aa..c6f3676bd5 100644
--- a/packages/vue/src/components/Overlays.ts
+++ b/packages/vue/src/components/Overlays.ts
@@ -17,17 +17,17 @@ import { defineCustomElement as defineIonPopoverCustomElement } from '@ionic/cor
 
 import { defineOverlayContainer } from '../vue-component-lib/overlays';
 
-export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', defineIonActionSheetCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger', 'useBase']);
+export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', defineIonActionSheetCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']);
     
-export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger', 'useBase']);
+export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger']);
     
-export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger', 'useBase']);
+export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
     
-export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger', 'useBase']);
+export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
     
-export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger', 'useBase']);
+export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger']);
     
-export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger', 'useBase']);
+export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger']);
     
-export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction', 'useBase']);
+export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
     
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 4e7613cb25..91c3d1c94d 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -63,7 +63,6 @@ export {
   SpinnerTypes,
   AccordionGroupCustomEvent,
   AccordionGroupChangeEventDetail,
-  BaseComponentsConfig,
   BreadcrumbCustomEvent,
   BreadcrumbCollapsedClickEventDetail,
   ActionSheetOptions,
@@ -82,7 +81,6 @@ export {
   ItemReorderEventDetail,
   ItemReorderCustomEvent,
   ItemSlidingCustomEvent,
-  IonicConfig,
   IonicSafeString,
   LoadingOptions,
   MenuCustomEvent,