@ionic/core 8.8.7-dev.11779400352.127ba526 → 8.8.7-dev.11779921691.1777274a

package/dist/collection/components/spinner/spinner.css

@@ -0,0 +1,248 @@
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --ion-spinner-color: Color of the spinner
+   *
+   * @prop --ion-spinner-lines-stroke-width: Stroke width of the `lines` spinner
+   * @prop --ion-spinner-lines-small-stroke-width: Stroke width of the `lines-small` spinner
+   * @prop --ion-spinner-lines-sharp-stroke-width: Stroke width of the `lines-sharp` spinner
+   * @prop --ion-spinner-lines-sharp-small-stroke-width: Stroke width of the `lines-sharp-small` spinner
+   * @prop --ion-spinner-crescent-stroke-width: Stroke width of the `crescent` spinner
+   * @prop --ion-spinner-dots-stroke-width: Stroke width of the `dots` spinner
+   * @prop --ion-spinner-circular-stroke-width: Stroke width of the `circular` spinner
+   *
+   * Sizes
+   * @prop --ion-spinner-size-xsmall-width: Width of the `xsmall` spinner
+   * @prop --ion-spinner-size-xsmall-height: Height of the `xsmall` spinner
+   * @prop --ion-spinner-size-small-width: Width of the `small` spinner
+   * @prop --ion-spinner-size-small-height: Height of the `small` spinner
+   * @prop --ion-spinner-size-medium-width: Width of the `medium` spinner
+   * @prop --ion-spinner-size-medium-height: Height of the `medium` spinner
+   * @prop --ion-spinner-size-large-width: Width of the `large` spinner
+   * @prop --ion-spinner-size-large-height: Height of the `large` spinner
+   * @prop --ion-spinner-size-xlarge-width: Width of the `xlarge` spinner
+   * @prop --ion-spinner-size-xlarge-height: Height of the `xlarge` spinner
+   */
+  display: inline-block;
+  position: relative;
+  color: var(--ion-spinner-color);
+  user-select: none;
+}
+
+:host(.ion-color) {
+  color: var(--ion-color-base);
+}
+
+svg {
+  transform-origin: center;
+  position: absolute;
+  /**
+   * Do not use @include position
+   * as the alignment of the elements with
+   * a spinner should not be RTL aware.
+   */
+  top: 0;
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateZ(0);
+}
+:host-context([dir=rtl]) svg {
+  transform-origin: calc(100% - center);
+}
+
+[dir=rtl] svg {
+  transform-origin: calc(100% - center);
+}
+
+@supports selector(:dir(rtl)) {
+  svg:dir(rtl) {
+    transform-origin: calc(100% - center);
+  }
+}
+
+:host(.spinner-name-lines) line,
+:host(.spinner-name-lines-small) line,
+:host(.spinner-name-lines-sharp) line,
+:host(.spinner-name-lines-sharp-small) line {
+  stroke-linecap: round;
+  stroke: currentColor;
+}
+
+:host(.spinner-name-lines) svg,
+:host(.spinner-name-lines-small) svg,
+:host(.spinner-name-lines-sharp) svg,
+:host(.spinner-name-lines-sharp-small) svg {
+  animation: spinner-fade-out 1s linear infinite;
+}
+
+:host(.spinner-name-lines) line {
+  stroke-width: var(--ion-spinner-lines-stroke-width);
+}
+
+:host(.spinner-name-lines-small) line {
+  stroke-width: var(--ion-spinner-lines-small-stroke-width);
+}
+
+:host(.spinner-name-lines-sharp) line {
+  stroke-width: var(--ion-spinner-lines-sharp-stroke-width);
+}
+
+:host(.spinner-name-lines-sharp-small) line {
+  stroke-width: var(--ion-spinner-lines-sharp-small-stroke-width);
+}
+
+:host(.spinner-name-bubbles) svg {
+  animation: spinner-scale-out 1s linear infinite;
+  fill: currentColor;
+}
+
+:host(.spinner-name-circles) svg {
+  animation: spinner-fade-out 1s linear infinite;
+  fill: currentColor;
+}
+
+:host(.spinner-name-crescent) circle {
+  fill: transparent;
+  stroke-width: var(--ion-spinner-crescent-stroke-width);
+  stroke-dasharray: 128px;
+  stroke-dashoffset: 82px;
+  stroke: currentColor;
+}
+
+:host(.spinner-name-crescent) svg {
+  animation: spinner-rotate 1s linear infinite;
+}
+
+:host(.spinner-name-dots) circle {
+  stroke-width: var(--ion-spinner-dots-stroke-width);
+  fill: currentColor;
+}
+
+:host(.spinner-name-dots) svg {
+  animation: spinner-dots 1s linear infinite;
+}
+
+:host(.spinner-name-circular) svg {
+  animation: spinner-circular linear infinite;
+}
+
+:host(.spinner-name-circular) circle {
+  animation: spinner-circular-inner ease-in-out infinite;
+  stroke: currentColor;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0px;
+  stroke-width: var(--ion-spinner-circular-stroke-width);
+  fill: none;
+}
+
+:host(.spinner-size-xsmall) {
+  width: var(--ion-spinner-size-xsmall-width);
+  height: var(--ion-spinner-size-xsmall-height);
+}
+
+:host(.spinner-size-small) {
+  width: var(--ion-spinner-size-small-width);
+  height: var(--ion-spinner-size-small-height);
+}
+
+:host(.spinner-size-medium) {
+  width: var(--ion-spinner-size-medium-width);
+  height: var(--ion-spinner-size-medium-height);
+}
+
+:host(.spinner-size-large) {
+  width: var(--ion-spinner-size-large-width);
+  height: var(--ion-spinner-size-large-height);
+}
+
+:host(.spinner-size-xlarge) {
+  width: var(--ion-spinner-size-xlarge-width);
+  height: var(--ion-spinner-size-xlarge-height);
+}
+
+:host(.spinner-paused),
+:host(.spinner-paused) svg,
+:host(.spinner-paused) circle {
+  animation-play-state: paused;
+}
+
+@keyframes spinner-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes spinner-scale-out {
+  0% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(0, 0);
+  }
+}
+@keyframes spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-dots {
+  0% {
+    transform: scale(1, 1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(0.4, 0.4);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 0.9;
+  }
+}
+@keyframes spinner-circular {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-circular-inner {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0px;
+  }
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+}

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

@@ -4,11 +4,10 @@
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme, getIonMode } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { SPINNERS } from "./spinner-configs";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class Spinner {
     constructor() {
@@ -25,26 +24,21 @@ export class Spinner {
         }
         return mode === 'ios' ? 'lines' : 'circular';
     }
-    getSize() {
-        const theme = getIonTheme(this);
-        const { size } = this;
-        // TODO(ROU-10912): Remove theme check when sizes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (size === undefined) {
-            return 'xsmall';
-        }
+    /**
+     * Gets the spinner size. Uses the `size` property if set, otherwise
+     * checks the theme config. Defaults to `medium` if neither is set.
+     */
+    get sizeValue() {
+        const sizeConfig = config.getObjectValue('IonSpinner.size', 'medium');
+        const size = this.size || sizeConfig;
         return size;
     }
     render() {
         var _a;
-        const self = this;
-        const theme = getIonTheme(self);
-        const spinnerName = self.getName();
-        const size = this.getSize();
+        const { duration: animatedDuration, color, paused, sizeValue } = this;
+        const spinnerName = this.getName();
         const spinner = (_a = SPINNERS[spinnerName]) !== null && _a !== void 0 ? _a : SPINNERS['lines'];
-        const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
+        const duration = typeof animatedDuration === 'number' && animatedDuration > 10 ? animatedDuration : spinner.dur;
         const svgs = [];
         if (spinner.circles !== undefined) {
             for (let i = 0; i < spinner.circles; i++) {
@@ -56,27 +50,22 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: 'b6559d1626b56a1c63580862263a15798f7d3f71', class: createColorClasses(self.color, {
-                [theme]: true,
-                [`spinner-${spinnerName}`]: true,
-                'spinner-paused': self.paused || config.getBoolean('_testing'),
-                [`spinner-${size}`]: size !== undefined,
+        return (h(Host, { key: 'ee1db5906987021357eb0ff06ec966353d21a8a5', class: createColorClasses(color, {
+                [`spinner-name-${spinnerName}`]: true,
+                'spinner-paused': paused || config.getBoolean('_testing'),
+                [`spinner-size-${sizeValue}`]: true,
             }), role: "progressbar", style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} }, svgs));
     }
     static get is() { return "ion-spinner"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["spinner.native.scss"],
-            "md": ["spinner.native.scss"],
-            "ionic": ["spinner.ionic.scss"]
+            "$": ["spinner.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["spinner.native.css"],
-            "md": ["spinner.native.css"],
-            "ionic": ["spinner.ionic.css"]
+            "$": ["spinner.css"]
         };
     }
     static get properties() {
@@ -176,15 +165,22 @@ export class Spinner {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
+                    "original": "SpinnerSize",
                     "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | undefined",
-                    "references": {}
+                    "references": {
+                        "SpinnerSize": {
+                            "location": "import",
+                            "path": "./spinner.interfaces",
+                            "id": "src/components/spinner/spinner.interfaces.ts::SpinnerSize",
+                            "referenceLocation": "SpinnerSize"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"xsmall\"` for the smallest size.\nSet to `\"small\"` for a smaller size.\nSet to `\"medium\"` for a medium size.\nSet to `\"large\"` for a large size.\nSet to `\"xlarge\"` for the largest size.\n\nDefaults to `\"xsmall\"` for the `ionic` theme, undefined for all other themes."
+                    "text": "Set to `\"xsmall\"` for the smallest size.\nSet to `\"small\"` for a smaller size.\nSet to `\"medium\"` for a medium size.\nSet to `\"large\"` for a large size.\nSet to `\"xlarge\"` for the largest size.\n\nDefaults to `\"medium\"` if both the size property and theme config are unset."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/split-pane/split-pane.ios.css

@@ -225,7 +225,7 @@
  * }
  */
 :host {
-  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-250, #c8c7cc)));
   --side-min-width: 270px;
   --side-max-width: 28%;
 }

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

@@ -7,7 +7,6 @@ import { getIonTheme } from "../../global/ionic-global";
 // TODO(FW-2832): types
 const SPLIT_PANE_MAIN = 'split-pane-main';
 const SPLIT_PANE_SIDE = 'split-pane-side';
-// TODO(FW-7285): Replace with global breakpoints
 const QUERY = {
     xs: '(min-width: 0px)',
     sm: '(min-width: 576px)',
@@ -131,12 +130,12 @@ export class SplitPane {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'b933156f8f9d8ce418ff0d39526967f9653d6639', class: {
+        return (h(Host, { key: '9d0c67f1f81b09bb9a6f14a66053e5cc7431a286', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '3ec0a11e5506386747dc972ccb094359ca975bae' })));
+            } }, h("slot", { key: 'ab7b3050d3c5484bd00949cf57efa4396b4d5bc3' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/split-pane/split-pane.md.css

@@ -225,7 +225,7 @@
  * }
  */
 :host {
-  --border: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  --border: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13))));
   --side-min-width: 270px;
   --side-max-width: 28%;
 }

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

@@ -6,7 +6,6 @@ import { attachComponent } from "../../utils/framework-delegate";
 import { printIonError } from "../../utils/logging/index";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class Tab {
     constructor() {
@@ -37,6 +36,7 @@ export class Tab {
             this.prepareLazyLoaded();
         }
     }
+    // TODO(FW-7296): Failed first attach locks the tab forever — needs async/await + retry on rejection.
     prepareLazyLoaded() {
         if (!this.loaded && this.component != null) {
             this.loaded = true;
@@ -51,10 +51,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '8b978f848d43898feafa7daa3e3d9819be833038', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '88caf91959acd53f4afcb527a4bfff5e2b88e389', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '96a92d86cecc8c9ef4f11d310f7f87bb99ce4e50' })));
+            } }, h("slot", { key: '4776f5a60196dc366811a6917765f8b7d3dbe060' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -258,11 +258,11 @@
  * }
  */
 :host {
-  --background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));
+  --background: var(--ion-tab-bar-background, var(--ion-background-color-step-50, #f7f7f7));
   --background-focused: var(--ion-tab-bar-background-focused, #e0e0e0);
-  --border: 0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));
-  --color: var(--ion-tab-bar-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666)));
-  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));
+  --border: 0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2))));
+  --color: var(--ion-tab-bar-color, var(--ion-text-color-step-400, #666666));
+  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, var(--ion-color-primary-bold)));
   height: 50px;
 }
 

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

@@ -179,7 +179,7 @@ export class TabBar {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '16cd11a815d777a7517150b49b57a204c83c3c37', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '7a91bb00ad289d94d34271bdecefb7221c093fd6', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
@@ -187,7 +187,7 @@ export class TabBar {
                 'tab-bar-scroll-hidden': scrollHidden,
                 [`tab-bar-${expand}`]: true,
                 [`tab-bar-${shape}`]: shape !== undefined,
-            }) }, h("slot", { key: 'dfdff308f24b3addaf18528a8d869b3fc64306d1' })));
+            }) }, h("slot", { key: '96ad10c451a6ae1e2b7c48d94d0f158fb8cde1dc' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -260,8 +260,8 @@
 :host {
   --background: var(--ion-tab-bar-background, var(--ion-background-color, #fff));
   --background-focused: var(--ion-tab-bar-background-focused, #e0e0e0);
-  --border: 1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07)))));
-  --color: var(--ion-tab-bar-color, var(--ion-color-step-650, var(--ion-text-color-step-350, #595959)));
-  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));
+  --border: 1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07))));
+  --color: var(--ion-tab-bar-color, var(--ion-text-color-step-350, #595959));
+  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, var(--ion-color-primary-bold)));
   height: 56px;
 }

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

@@ -163,12 +163,6 @@
   white-space: normal;
 }
 
-::slotted(ion-badge) {
-  box-sizing: border-box;
-  position: absolute;
-  z-index: 1;
-}
-
 :host(.tab-layout-icon-start) {
   flex-direction: row;
 }
@@ -290,59 +284,4 @@ ion-ripple-effect {
 
 :host(.tab-button-shape-rectangular) {
   border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
-}
-
-:host ::slotted(ion-badge) {
-  top: calc(var(--token-scale-100, 4px) * -2);
-  transform: translateX(-50%);
-}
-:host ::slotted(ion-badge) {
-  inset-inline-start: calc(50% + var(--token-scale-300, 12px));
-}
-
-:host ::slotted(ion-badge:empty) {
-  top: calc(var(--token-scale-100, 4px) * -1);
-}
-:host ::slotted(ion-badge:empty) {
-  inset-inline-start: calc(50% + var(--token-scale-250, 10px));
-}
-
-:host ::slotted(ion-badge.badge-vertical-top) {
-  top: -2px;
-}
-
-:host ::slotted(ion-badge.badge-vertical-top:empty) {
-  top: calc(var(--token-scale-100, 4px) * -1);
-}
-
-:host ::slotted(ion-badge.badge-vertical-bottom) {
-  top: calc(50% - var(--token-scale-200, 8px));
-}
-
-:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  top: calc(50% - var(--token-scale-100, 4px));
-}
-
-:host ::slotted(ion-badge[vertical]:not(:empty)) {
-  -webkit-padding-start: var(--token-scale-100, 4px);
-  padding-inline-start: var(--token-scale-100, 4px);
-  -webkit-padding-end: var(--token-scale-100, 4px);
-  padding-inline-end: var(--token-scale-100, 4px);
-  padding-top: var(--token-scale-100, 4px);
-  padding-bottom: var(--token-scale-100, 4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) {
-  top: calc(50% - var(--token-scale-100, 4px));
-}
-
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) {
-  top: calc(50% + var(--token-scale-100, 4px));
-}
-
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  top: calc(50% + 14px);
 }

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

@@ -102,12 +102,6 @@
   white-space: normal;
 }
 
-::slotted(ion-badge) {
-  box-sizing: border-box;
-  position: absolute;
-  z-index: 1;
-}
-
 :host(.tab-layout-icon-start) {
   flex-direction: row;
 }
@@ -304,78 +298,6 @@ ion-ripple-effect {
   font-size: 10px;
 }
 
-::slotted(ion-badge:not([vertical])) {
-  -webkit-padding-start: 6px;
-  padding-inline-start: 6px;
-  -webkit-padding-end: 6px;
-  padding-inline-end: 6px;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  top: 4px;
-  height: auto;
-  font-size: 12px;
-  line-height: 16px;
-}
-::slotted(ion-badge:not([vertical])) {
-  inset-inline-start: calc(50% + 6px);
-}
-
-:host ::slotted(ion-badge:empty) {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  width: 8px;
-  height: 8px;
-}
-
-:host ::slotted(ion-badge[vertical]) {
-  inset-inline-start: calc(50% + 12px);
-}
-
-:host ::slotted(ion-badge.badge-vertical-top) {
-  top: 2px;
-}
-
-:host ::slotted(ion-badge.badge-vertical-top:empty) {
-  top: 4px;
-}
-
-:host ::slotted(ion-badge.badge-vertical-bottom) {
-  top: calc(50% - 8px);
-}
-
-:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  top: calc(50% - 2px);
-}
-
-:host ::slotted(ion-badge[vertical]:not(:empty)) {
-  -webkit-padding-start: 4px;
-  padding-inline-start: 4px;
-  -webkit-padding-end: 4px;
-  padding-inline-end: 4px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  font-size: 12px;
-}
-
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) {
-  top: calc(50% - 4px);
-}
-
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) {
-  top: calc(50% + 4px);
-}
-
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  top: calc(50% + 14px);
-}
-
 ::slotted(ion-icon) {
   margin-top: 2px;
   margin-bottom: 2px;
@@ -421,10 +343,6 @@ ion-ripple-effect {
   font-size: 24px;
 }
 
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 12px);
-}
-
 :host(.tab-layout-icon-bottom) ::slotted(ion-icon) {
   margin-top: 0;
   margin-bottom: 1px;
@@ -439,29 +357,6 @@ ion-ripple-effect {
   margin-bottom: 4px;
 }
 
-:host(.tab-layout-icon-start) ::slotted(ion-badge),
-:host(.tab-layout-icon-end) ::slotted(ion-badge) {
-  top: 10px;
-}
-:host(.tab-layout-icon-start) ::slotted(ion-badge),
-:host(.tab-layout-icon-end) ::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 35px);
-}
-
-:host(.tab-layout-icon-hide) ::slotted(ion-badge),
-:host(.tab-has-label-only) ::slotted(ion-badge) {
-  top: 10px;
-}
-:host(.tab-layout-icon-hide) ::slotted(ion-badge),
-:host(.tab-has-label-only) ::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 30px);
-}
-
-:host(.tab-layout-label-hide) ::slotted(ion-badge),
-:host(.tab-has-icon-only) ::slotted(ion-badge) {
-  top: 10px;
-}
-
 :host(.tab-layout-label-hide) ::slotted(ion-icon) {
   margin-left: 0;
   margin-right: 0;