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

package/dist/collection/components/badge/badge.css

@@ -0,0 +1,256 @@
+/**
+ * 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-badge-font-family: the font family of the badge text
+   *
+   * Bold
+   * @prop --ion-badge-hue-bold-default-background: Background color of the `bold` hue in default state
+   * @prop --ion-badge-hue-bold-default-color: Text color of the `bold` hue in default state
+   * @prop --ion-badge-hue-bold-semantic-default-background: Background color of the `bold` hue when a semantic color is applied
+   * @prop --ion-badge-hue-bold-semantic-default-color: Text color of the `bold` hue when a semantic color is applied
+   *
+   * Subtle
+   * @prop --ion-badge-hue-subtle-default-background: Background color of the `subtle` hue in default state
+   * @prop --ion-badge-hue-subtle-default-color: Text color of the `subtle` hue in default state
+   * @prop --ion-badge-hue-subtle-semantic-default-background: Background color of the `subtle` hue when a semantic color is applied
+   * @prop --ion-badge-hue-subtle-semantic-default-color: Text color of the `subtle` hue when a semantic color is applied
+   *
+   * Shapes
+   * @prop --ion-badge-shape-crisp-border-radius: Border radius of the `crisp` shape
+   * @prop --ion-badge-shape-soft-border-radius: Border radius of the `soft` shape
+   * @prop --ion-badge-shape-round-border-radius: Border radius of the `round` shape
+   * @prop --ion-badge-shape-rectangular-border-radius: Border radius of the `rectangular` shape
+   *
+   * Sizes: Content (with text or an icon)
+   * @prop --ion-badge-size-small-content-height: Height of the `small` size when badge has content
+   * @prop --ion-badge-size-small-content-min-height: Minimum height of the `small` size when badge has content
+   * @prop --ion-badge-size-small-content-min-width: Minimum width of the `small` size when badge has content
+   * @prop --ion-badge-size-small-content-padding-top: Top padding of the `small` size when badge has content
+   * @prop --ion-badge-size-small-content-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `small` size when badge has content
+   * @prop --ion-badge-size-small-content-padding-bottom: Bottom padding of the `small` size when badge has content
+   * @prop --ion-badge-size-small-content-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `small` size when badge has content
+   * @prop --ion-badge-size-small-content-letter-spacing: Letter spacing of the `small` size when badge has content
+   * @prop --ion-badge-size-small-content-font-size: Font size of the `small` size when badge has content
+   * @prop --ion-badge-size-small-content-font-weight: Font weight of the `small` size when badge has content
+   * @prop --ion-badge-size-small-content-line-height: Line height of the `small` size when badge has content
+   * @prop --ion-badge-size-small-content-icon-width: Width of the slotted `ion-icon` of the `small` size
+   * @prop --ion-badge-size-small-content-icon-height: Height of the slotted `ion-icon` of the `small` size
+   * @prop --ion-badge-size-medium-content-height: Height of the `medium` size when badge has content
+   * @prop --ion-badge-size-medium-content-min-height: Minimum height of the `medium` size when badge has content
+   * @prop --ion-badge-size-medium-content-min-width: Minimum width of the `medium` size when badge has content
+   * @prop --ion-badge-size-medium-content-padding-top: Top padding of the `medium` size when badge has content
+   * @prop --ion-badge-size-medium-content-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `medium` size when badge has content
+   * @prop --ion-badge-size-medium-content-padding-bottom: Bottom padding of the `medium` size when badge has content
+   * @prop --ion-badge-size-medium-content-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `medium` size when badge has content
+   * @prop --ion-badge-size-medium-content-letter-spacing: Letter spacing of the `medium` size when badge has content
+   * @prop --ion-badge-size-medium-content-font-size: Font size of the `medium` size when badge has content
+   * @prop --ion-badge-size-medium-content-font-weight: Font weight of the `medium` size when badge has content
+   * @prop --ion-badge-size-medium-content-line-height: Line height of the `medium` size when badge has content
+   * @prop --ion-badge-size-medium-content-icon-width: Width of the slotted `ion-icon` of the `medium` size
+   * @prop --ion-badge-size-medium-content-icon-height: Height of the slotted `ion-icon` of the `medium` size
+   * @prop --ion-badge-size-large-content-height: Height of the `large` size when badge has content
+   * @prop --ion-badge-size-large-content-min-height: Minimum height of the `large` size when badge has content
+   * @prop --ion-badge-size-large-content-min-width: Minimum width of the `large` size when badge has content
+   * @prop --ion-badge-size-large-content-padding-top: Top padding of the `large` size when badge has content
+   * @prop --ion-badge-size-large-content-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `large` size when badge has content
+   * @prop --ion-badge-size-large-content-padding-bottom: Bottom padding of the `large` size when badge has content
+   * @prop --ion-badge-size-large-content-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `large` size when badge has content
+   * @prop --ion-badge-size-large-content-letter-spacing: Letter spacing of the `large` size when badge has content
+   * @prop --ion-badge-size-large-content-font-size: Font size of the `large` size when badge has content
+   * @prop --ion-badge-size-large-content-font-weight: Font weight of the `large` size when badge has content
+   * @prop --ion-badge-size-large-content-line-height: Line height of the `large` size when badge has content
+   * @prop --ion-badge-size-large-content-icon-width: Width of the slotted `ion-icon` of the `large` size
+   * @prop --ion-badge-size-large-content-icon-height: Height of the slotted `ion-icon` of the `large` size
+   *
+   * Sizes: Dot (empty with no text or icon)
+   * @prop --ion-badge-size-small-dot-height: Height of the `small` size when badge is empty
+   * @prop --ion-badge-size-small-dot-min-width: Minimum width of the `small` size when badge is empty
+   * @prop --ion-badge-size-small-dot-padding-top: Top padding of the `small` size when badge is empty
+   * @prop --ion-badge-size-small-dot-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `small` size when badge is empty
+   * @prop --ion-badge-size-small-dot-padding-bottom: Bottom padding of the `small` size when badge is empty
+   * @prop --ion-badge-size-small-dot-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `small` size when badge is empty
+   * @prop --ion-badge-size-medium-dot-height: Height of the `medium` size when badge is empty
+   * @prop --ion-badge-size-medium-dot-min-width: Minimum width of the `medium` size when badge is empty
+   * @prop --ion-badge-size-medium-dot-padding-top: Top padding of the `medium` size when badge is empty
+   * @prop --ion-badge-size-medium-dot-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `medium` size when badge is empty
+   * @prop --ion-badge-size-medium-dot-padding-bottom: Bottom padding of the `medium` size when badge is empty
+   * @prop --ion-badge-size-medium-dot-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `medium` size when badge is empty
+   * @prop --ion-badge-size-large-dot-height: Height of the `large` size when badge is empty
+   * @prop --ion-badge-size-large-dot-min-width: Minimum width of the `large` size when badge is empty
+   * @prop --ion-badge-size-large-dot-padding-top: Top padding of the `large` size when badge is empty
+   * @prop --ion-badge-size-large-dot-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `large` size when badge is empty
+   * @prop --ion-badge-size-large-dot-padding-bottom: Bottom padding of the `large` size when badge is empty
+   * @prop --ion-badge-size-large-dot-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `large` size when badge is empty
+   */
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--ion-badge-font-family, inherit);
+  white-space: nowrap;
+  contain: content;
+  vertical-align: baseline;
+  box-sizing: border-box;
+}
+
+:host(.badge-hue-bold) {
+  background: var(--ion-badge-hue-bold-default-background);
+  color: var(--ion-badge-hue-bold-default-color);
+}
+
+:host(.badge-hue-bold.ion-color) {
+  background: var(--ion-badge-hue-bold-semantic-default-background);
+  color: var(--ion-badge-hue-bold-semantic-default-color);
+}
+
+:host(.badge-hue-subtle) {
+  background: var(--ion-badge-hue-subtle-default-background);
+  color: var(--ion-badge-hue-subtle-default-color);
+}
+
+:host(.badge-hue-subtle.ion-color) {
+  background: var(--ion-badge-hue-subtle-semantic-default-background);
+  color: var(--ion-badge-hue-subtle-semantic-default-color);
+}
+
+:host(.badge-shape-crisp) {
+  border-radius: var(--ion-badge-shape-crisp-border-radius);
+}
+
+:host(.badge-shape-soft) {
+  border-radius: var(--ion-badge-shape-soft-border-radius);
+}
+
+:host(.badge-shape-round) {
+  border-radius: var(--ion-badge-shape-round-border-radius);
+}
+
+:host(.badge-shape-rectangular) {
+  border-radius: var(--ion-badge-shape-rectangular-border-radius);
+}
+
+:host(.badge-size-small) {
+  -webkit-padding-start: var(--ion-badge-size-small-content-padding-start);
+  padding-inline-start: var(--ion-badge-size-small-content-padding-start);
+  -webkit-padding-end: var(--ion-badge-size-small-content-padding-end);
+  padding-inline-end: var(--ion-badge-size-small-content-padding-end);
+  padding-top: var(--ion-badge-size-small-content-padding-top);
+  padding-bottom: var(--ion-badge-size-small-content-padding-bottom);
+  min-width: var(--ion-badge-size-small-content-min-width);
+  height: var(--ion-badge-size-small-content-height);
+  min-height: var(--ion-badge-size-small-content-min-height);
+  font-size: var(--ion-badge-size-small-content-font-size);
+  font-weight: var(--ion-badge-size-small-content-font-weight);
+  letter-spacing: var(--ion-badge-size-small-content-letter-spacing);
+  line-height: var(--ion-badge-size-small-content-line-height);
+}
+
+:host(.badge-size-small) ::slotted(ion-icon) {
+  width: var(--ion-badge-size-small-content-icon-width, revert-layer);
+  height: var(--ion-badge-size-small-content-icon-height, revert-layer);
+}
+
+:host(.badge-size-medium) {
+  -webkit-padding-start: var(--ion-badge-size-medium-content-padding-start);
+  padding-inline-start: var(--ion-badge-size-medium-content-padding-start);
+  -webkit-padding-end: var(--ion-badge-size-medium-content-padding-end);
+  padding-inline-end: var(--ion-badge-size-medium-content-padding-end);
+  padding-top: var(--ion-badge-size-medium-content-padding-top);
+  padding-bottom: var(--ion-badge-size-medium-content-padding-bottom);
+  min-width: var(--ion-badge-size-medium-content-min-width);
+  height: var(--ion-badge-size-medium-content-height);
+  min-height: var(--ion-badge-size-medium-content-min-height);
+  font-size: var(--ion-badge-size-medium-content-font-size);
+  font-weight: var(--ion-badge-size-medium-content-font-weight);
+  letter-spacing: var(--ion-badge-size-medium-content-letter-spacing);
+  line-height: var(--ion-badge-size-medium-content-line-height);
+}
+
+:host(.badge-size-medium) ::slotted(ion-icon) {
+  width: var(--ion-badge-size-medium-content-icon-width, revert-layer);
+  height: var(--ion-badge-size-medium-content-icon-height, revert-layer);
+}
+
+:host(.badge-size-large) {
+  -webkit-padding-start: var(--ion-badge-size-large-content-padding-start);
+  padding-inline-start: var(--ion-badge-size-large-content-padding-start);
+  -webkit-padding-end: var(--ion-badge-size-large-content-padding-end);
+  padding-inline-end: var(--ion-badge-size-large-content-padding-end);
+  padding-top: var(--ion-badge-size-large-content-padding-top);
+  padding-bottom: var(--ion-badge-size-large-content-padding-bottom);
+  min-width: var(--ion-badge-size-large-content-min-width);
+  height: var(--ion-badge-size-large-content-height);
+  min-height: var(--ion-badge-size-large-content-min-height);
+  font-size: var(--ion-badge-size-large-content-font-size);
+  font-weight: var(--ion-badge-size-large-content-font-weight);
+  letter-spacing: var(--ion-badge-size-large-content-letter-spacing);
+  line-height: var(--ion-badge-size-large-content-line-height);
+}
+
+:host(.badge-size-large) ::slotted(ion-icon) {
+  width: var(--ion-badge-size-large-content-icon-width, revert-layer);
+  height: var(--ion-badge-size-large-content-icon-height, revert-layer);
+}
+
+:host(.badge-size-small:empty) {
+  -webkit-padding-start: var(--ion-badge-size-small-dot-padding-start);
+  padding-inline-start: var(--ion-badge-size-small-dot-padding-start);
+  -webkit-padding-end: var(--ion-badge-size-small-dot-padding-end);
+  padding-inline-end: var(--ion-badge-size-small-dot-padding-end);
+  padding-top: var(--ion-badge-size-small-dot-padding-top);
+  padding-bottom: var(--ion-badge-size-small-dot-padding-bottom);
+  min-width: var(--ion-badge-size-small-dot-min-width);
+  height: var(--ion-badge-size-small-dot-height);
+  min-height: unset;
+}
+
+:host(.badge-size-medium:empty) {
+  -webkit-padding-start: var(--ion-badge-size-medium-dot-padding-start);
+  padding-inline-start: var(--ion-badge-size-medium-dot-padding-start);
+  -webkit-padding-end: var(--ion-badge-size-medium-dot-padding-end);
+  padding-inline-end: var(--ion-badge-size-medium-dot-padding-end);
+  padding-top: var(--ion-badge-size-medium-dot-padding-top);
+  padding-bottom: var(--ion-badge-size-medium-dot-padding-bottom);
+  min-width: var(--ion-badge-size-medium-dot-min-width);
+  height: var(--ion-badge-size-medium-dot-height);
+  min-height: unset;
+}
+
+:host(.badge-size-large:empty) {
+  -webkit-padding-start: var(--ion-badge-size-large-dot-padding-start);
+  padding-inline-start: var(--ion-badge-size-large-dot-padding-start);
+  -webkit-padding-end: var(--ion-badge-size-large-dot-padding-end);
+  padding-inline-end: var(--ion-badge-size-large-dot-padding-end);
+  padding-top: var(--ion-badge-size-large-dot-padding-top);
+  padding-bottom: var(--ion-badge-size-large-dot-padding-bottom);
+  min-width: var(--ion-badge-size-large-dot-min-width);
+  height: var(--ion-badge-size-large-dot-height);
+  min-height: unset;
+}
+
+:host([vertical]) {
+  position: absolute;
+  z-index: 1;
+}

package/dist/collection/components/badge/badge.interfaces.js

@@ -0,0 +1,7 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+export const ION_BADGE_HUES = ['bold', 'subtle'];
+export const ION_BADGE_SHAPES = ['crisp', 'soft', 'round', 'rectangular'];
+export const ION_BADGE_SIZES = ['small', 'medium', 'large'];
+export const ION_BADGE_VERTICAL_POSITIONS = ['top', 'bottom'];

package/dist/collection/components/badge/badge.js

@@ -2,89 +2,57 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { createColorClasses } from "../../utils/theme";
+import { config } from "../../global/config";
 /**
  * @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 Badge {
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        // TODO(ROU-10777): Remove theme check when shapes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (shape === undefined) {
-            return 'round';
-        }
+    /**
+     * Gets the badge shape. Uses the `shape` property if set, otherwise
+     * checks the theme config and falls back to 'soft' if neither is provided.
+     */
+    get shapeValue() {
+        const shapeConfig = config.getObjectValue('IonBadge.shape', 'soft');
+        const shape = this.shape || shapeConfig;
         return shape;
     }
-    getSize() {
-        const theme = getIonTheme(this);
-        const { size } = this;
-        // TODO(FW-6355): Remove theme check when sizes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (size === undefined) {
-            return 'small';
-        }
+    /**
+     * Gets the badge size. Uses the `size` property if set, otherwise
+     * checks the theme config and falls back to 'small' if neither is provided.
+     */
+    get sizeValue() {
+        const sizeConfig = config.getObjectValue('IonBadge.size', 'small');
+        const size = this.size || sizeConfig;
         return size;
     }
-    // The 'subtle' hue is the default for badges containing text or icons
-    // The 'bold' hue is used when inside of an avatar, button, tab button,
-    // or when the badge is empty (no text or icon).
-    getHue() {
-        var _a;
-        const { hue } = this;
-        if (hue !== undefined) {
-            return hue;
-        }
-        const inAvatar = hostContext('ion-avatar', this.el);
-        const inButton = hostContext('ion-button', this.el);
-        const inTabButton = hostContext('ion-tab-button', this.el);
-        const hasContent = ((_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '' || this.el.querySelector('ion-icon') !== null;
-        // Return 'bold' if the badge is inside an avatar, button, tab button,
-        // or has no content
-        if (inAvatar || inButton || inTabButton || !hasContent) {
-            return 'bold';
-        }
-        // Return 'subtle' if the badge contains visible text or an icon
-        return 'subtle';
+    /**
+     * Gets the badge hue. Uses the `hue` property if set, otherwise
+     * checks the theme config and falls back to 'bold' if neither is provided.
+     */
+    get hueValue() {
+        const hueConfig = config.getObjectValue('IonBadge.hue', 'bold');
+        const hue = this.hue || hueConfig;
+        return hue;
     }
     render() {
-        var _a, _b;
-        const hue = this.getHue();
-        const shape = this.getShape();
-        const size = this.getSize();
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '4a447df7171ebcf4a649ebde14f0275b26c39c32', class: createColorClasses(this.color, {
-                [theme]: true,
-                [`badge-${hue}`]: hue !== undefined,
-                [`badge-${shape}`]: shape !== undefined,
-                [`badge-${size}`]: size !== undefined,
-                [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
-                'in-button': hostContext('ion-button', this.el),
-                'in-tab-button': hostContext('ion-tab-button', this.el),
-                'long-badge': ((_b = (_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) !== null && _b !== void 0 ? _b : 0) > 2,
-            }) }, h("slot", { key: '37d692d72315e305b656bb1b7bf44438da2704f7' })));
+        const { hueValue, shapeValue, sizeValue, color } = this;
+        return (h(Host, { key: '6b5d50508acbfa71db1bc0ce0722b137ddb92264', class: createColorClasses(color, {
+                [`badge-hue-${hueValue}`]: true,
+                [`badge-shape-${shapeValue}`]: true,
+                [`badge-size-${sizeValue}`]: true,
+            }) }, h("slot", { key: '21fafcef6d88a83bf345fdac5826055df8196a84' })));
     }
     static get is() { return "ion-badge"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["badge.ios.scss"],
-            "md": ["badge.md.scss"],
-            "ionic": ["badge.ionic.scss"]
+            "$": ["badge.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["badge.ios.css"],
-            "md": ["badge.md.css"],
-            "ionic": ["badge.ionic.css"]
+            "$": ["badge.css"]
         };
     }
     static get properties() {
@@ -119,15 +87,22 @@ export class Badge {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'bold' | 'subtle'",
+                    "original": "IonBadgeHue",
                     "resolved": "\"bold\" | \"subtle\" | undefined",
-                    "references": {}
+                    "references": {
+                        "IonBadgeHue": {
+                            "location": "import",
+                            "path": "./badge.interfaces",
+                            "id": "src/components/badge/badge.interfaces.ts::IonBadgeHue",
+                            "referenceLocation": "IonBadgeHue"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"bold\"` for a badge with vibrant, bold colors or to `\"subtle\"` for\na badge with muted, subtle colors.\n\nOnly applies to the `ionic` theme."
+                    "text": "Set to `\"bold\"` for a badge with vibrant, bold colors or to `\"subtle\"` for\na badge with muted, subtle colors.\n\nDefaults to `\"bold\"` if both the hue property and theme config are unset."
                 },
                 "getter": false,
                 "setter": false,
@@ -138,15 +113,22 @@ export class Badge {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'soft' | 'round | rectangular'",
-                    "resolved": "\"round | rectangular\" | \"soft\" | undefined",
-                    "references": {}
+                    "original": "IonBadgeShape",
+                    "resolved": "\"crisp\" | \"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {
+                        "IonBadgeShape": {
+                            "location": "import",
+                            "path": "./badge.interfaces",
+                            "id": "src/components/badge/badge.interfaces.ts::IonBadgeShape",
+                            "referenceLocation": "IonBadgeShape"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"rectangular\"` for non-rounded corners.\nSet to `\"soft\"` for slightly rounded corners.\nSet to `\"round\"` for fully rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
+                    "text": "Set to `\"crisp\"` for a badge with even slightly rounded corners,\n`\"soft\"` for a badge with slightly rounded corners,\n`\"round\"` for a badge with fully rounded corners,\nor `\"rectangular\"` for a badge without rounded corners.\n\nDefaults to `\"soft\"` if both the shape property and theme config are unset."
                 },
                 "getter": false,
                 "setter": false,
@@ -157,15 +139,22 @@ export class Badge {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
+                    "original": "IonBadgeSize",
                     "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
-                    "references": {}
+                    "references": {
+                        "IonBadgeSize": {
+                            "location": "import",
+                            "path": "./badge.interfaces",
+                            "id": "src/components/badge/badge.interfaces.ts::IonBadgeSize",
+                            "referenceLocation": "IonBadgeSize"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"small\"` for a small badge.\nSet to `\"medium\"` for a medium badge.\nSet to `\"large\"` for a large badge, when it is empty (no text or icon).\n\nDefaults to `\"small\"` for the `ionic` theme, undefined for all other themes."
+                    "text": "Set to `\"small\"` for a smaller size.\nSet to `\"medium\"` for a medium size.\nSet to `\"large\"` for a larger size.\n\nDefaults to `\"small\"` if both the size property and theme config are unset."
                 },
                 "getter": false,
                 "setter": false,
@@ -176,9 +165,16 @@ export class Badge {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'top' | 'bottom'",
+                    "original": "IonBadgeVerticalPosition",
                     "resolved": "\"bottom\" | \"top\" | undefined",
-                    "references": {}
+                    "references": {
+                        "IonBadgeVerticalPosition": {
+                            "location": "import",
+                            "path": "./badge.interfaces",
+                            "id": "src/components/badge/badge.interfaces.ts::IonBadgeVerticalPosition",
+                            "referenceLocation": "IonBadgeVerticalPosition"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

package/dist/collection/components/breadcrumb/breadcrumb.ios.css

@@ -251,11 +251,11 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665));
+  --color: var(--ion-text-color-step-150, #2d4665);
   --color-active: var(--ion-text-color, #03060b);
   --color-hover: var(--ion-text-color, #03060b);
   --color-focused: var(--color-active);
-  --background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7)));
+  --background-focused: var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7));
   /**
    * Main content should be prioritized
    * on iOS, so we set max font size for breadcrumbs.
@@ -293,15 +293,15 @@
 :host(.ion-focused) ::slotted(ion-icon),
 :host(.in-breadcrumbs-color.ion-focused) ::slotted(ion-icon),
 :host(.ion-color.ion-focused) ::slotted(ion-icon) {
-  color: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78));
+  color: var(--ion-text-color-step-250, #445b78);
 }
 
 .breadcrumb-separator {
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
+  color: var(--ion-text-color-step-450, #73849a);
 }
 
 ::slotted(ion-icon) {
-  color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3));
+  color: var(--ion-text-color-step-600, #92a0b3);
   font-size: min(1.125rem, 21.6px);
 }
 
@@ -316,13 +316,13 @@
 }
 
 :host(.breadcrumb-active) ::slotted(ion-icon) {
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39));
+  color: var(--ion-text-color-step-150, #242d39);
 }
 
 .breadcrumbs-collapsed-indicator {
   border-radius: 4px;
-  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3));
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
+  background: var(--ion-background-color-step-100, #e9edf3);
+  color: var(--ion-text-color-step-450, #73849a);
 }
 
 .breadcrumbs-collapsed-indicator:hover {
@@ -330,7 +330,7 @@
 }
 
 .breadcrumbs-collapsed-indicator:focus {
-  background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea));
+  background: var(--ion-background-color-step-150, #d9e0ea);
 }
 
 .breadcrumbs-collapsed-indicator ion-icon {

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -4,8 +4,8 @@
 import caretRightRegular from "@phosphor-icons/core/assets/regular/caret-right.svg";
 import dotsThreeRegular from "@phosphor-icons/core/assets/regular/dots-three.svg";
 import { Host, h } from "@stencil/core";
-import { inheritAriaAttributes } from "../../utils/helpers";
-import { createColorClasses, hostContext, openURL } from "../../utils/theme";
+import { inheritAriaAttributes, openURL } from "../../utils/helpers";
+import { createColorClasses, hostContext } from "../../utils/theme";
 import { chevronForwardOutline, ellipsisHorizontal } from "ionicons/icons";
 import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";

package/dist/collection/components/breadcrumb/breadcrumb.md.css

@@ -251,11 +251,11 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483));
+  --color: var(--ion-text-color-step-400, #677483);
   --color-active: var(--ion-text-color, #03060b);
   --color-hover: var(--ion-text-color, #03060b);
-  --color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e));
-  --background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff));
+  --color-focused: var(--ion-text-color-step-200, #35404e);
+  --background-focused: var(--ion-background-color-step-50, #fff);
 }
 
 :host(.breadcrumb-active) {
@@ -285,11 +285,11 @@
 }
 
 .breadcrumb-separator {
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
+  color: var(--ion-text-color-step-450, #73849a);
 }
 
 ::slotted(ion-icon) {
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894));
+  color: var(--ion-text-color-step-450, #7d8894);
   font-size: 1.125rem;
 }
 
@@ -304,13 +304,13 @@
 }
 
 :host(.breadcrumb-active) ::slotted(ion-icon) {
-  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a));
+  color: var(--ion-text-color-step-150, #222d3a);
 }
 
 .breadcrumbs-collapsed-indicator {
   border-radius: 2px;
-  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3));
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
+  background: var(--ion-background-color-step-100, #eef1f3);
+  color: var(--ion-text-color-step-450, #73849a);
 }
 
 .breadcrumbs-collapsed-indicator:hover {
@@ -318,5 +318,5 @@
 }
 
 .breadcrumbs-collapsed-indicator:focus {
-  background: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8));
+  background: var(--ion-background-color-step-150, #dfe5e8);
 }