@ionic/core 8.0.0-dev.11711035263.183d2423 → 8.0.0-dev.11711408410.14d71406

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

@@ -5,9 +5,10 @@ import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes, hasShadowDom } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot icon-only - Should be used on an icon in a button that has no text.
@@ -39,6 +40,18 @@ export class Button {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
+        this.slotChanged = () => {
+            /**
+             * Ensures that the 'has-icon-only' class is properly added
+             * or removed from `ion-button` when manipulating the
+             * `icon-only` slot.
+             *
+             * Without this, the 'has-icon-only' class is only checked
+             * or added when `ion-button` component first renders.
+             */
+            this.isCircle = this.hasIconOnly;
+        };
+        this.isCircle = false;
         this.color = undefined;
         this.buttonType = 'button';
         this.disabled = false;
@@ -169,8 +182,8 @@ export class Button {
         }
     }
     render() {
-        const mode = getIonMode(this);
         const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;
+        const theme = getIonTheme(this);
         const finalSize = size === undefined && this.inItem ? 'small' : size;
         const TagType = href === undefined ? 'button' : 'a';
         const attrs = TagType === 'button'
@@ -199,8 +212,8 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: 'cb5af107c877f0c1926045acfd4f6922f7dbcb8d', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '8747e78e8ed107ee28ce351c5937613705dc4d7e', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+                [theme]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
                 [`${buttonType}-${finalSize}`]: finalSize !== undefined,
@@ -214,20 +227,22 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: 'bc4c5e6a17fa90e172e56bd481ba24c69419dd1a' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'f1eac679bcdf2b40177f920025a49705f726bf0c', class: "button-inner" }, h("slot", { key: '19aa897289923c8e7d16a354f9acac312f0641ea', name: "icon-only" }), h("slot", { key: '0a321ca359f631a2c8708566b3f1b936fe9a4d00', name: "start" }), h("slot", { key: '9ec1b7197ec1b4d858338f45433f6bfa46b81a3d' }), h("slot", { key: 'e632fd3b918ec94e119a5e766371886072292d75', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: '4db8bfcb127a3a8eb70ee0dc075a181f6af59635' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'cdb4ff90e0163f9fc557957bef1a2e95d1aa4acf', class: "button-inner" }, h("slot", { key: '3c57a70645a1818dc2cd8887dbf98448c757b399', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: 'c5edf0cf141395cb9587f3dd8cd39240e38d8100', name: "start" }), h("slot", { key: 'be7ad33a9d0a50db11a33fdb33dbd03fb71b50ce' }), h("slot", { key: 'e7fb30ccdeb8a3231ef8432c65921209b3325ce4', name: "end" })), theme === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["button.ios.scss"],
-            "md": ["button.md.scss"]
+            "md": ["button.md.scss"],
+            "ionic": ["button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["button.ios.css"],
-            "md": ["button.md.css"]
+            "md": ["button.md.css"],
+            "ionic": ["button.md.css"]
         };
     }
     static get properties() {
@@ -532,6 +547,11 @@ export class Button {
             }
         };
     }
+    static get states() {
+        return {
+            "isCircle": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "ionFocus",

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

@@ -256,10 +256,6 @@
   margin-bottom: 0;
 }
 
-::slotted(ion-icon[slot=icon-only]) {
-  font-size: 1.8em;
-}
-
 ion-ripple-effect {
   color: var(--ripple-color);
 }
@@ -452,7 +448,7 @@ ion-ripple-effect {
 }
 
 :host(.button-round) {
-  --border-radius: 64px;
+  --border-radius: 999px;
   --padding-top: 0;
   --padding-start: 26px;
   --padding-end: 26px;
@@ -477,20 +473,39 @@ ion-ripple-effect {
   font-size: 0.8125rem;
 }
 
+:host(.button-strong) {
+  font-weight: bold;
+}
+
 :host(.button-has-icon-only) {
   --padding-top: 0;
-  --padding-bottom: 0;
+  --padding-bottom: var(--padding-top);
+  --padding-end: var(--padding-top);
+  --padding-start: var(--padding-end);
+  min-width: clamp(30px, 2.86em, 60px);
+  min-height: clamp(30px, 2.86em, 60px);
 }
 
-:host(.button-strong) {
-  font-weight: bold;
+::slotted(ion-icon[slot=icon-only]) {
+  font-size: 1.6em;
 }
 
-::slotted(ion-icon[slot=icon-only]) {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+:host(.button-small.button-has-icon-only) {
+  min-width: clamp(23px, 2.16em, 54px);
+  min-height: clamp(23px, 2.16em, 54px);
+}
+
+:host(.button-small) ::slotted(ion-icon[slot=icon-only]) {
+  font-size: 1.23em;
+}
+
+:host(.button-large.button-has-icon-only) {
+  min-width: clamp(46px, 2.5em, 78px);
+  min-height: clamp(46px, 2.5em, 78px);
+}
+
+:host(.button-large) ::slotted(ion-icon[slot=icon-only]) {
+  font-size: 1.4em;
 }
 
 /**

package/dist/collection/components/button/test/round/button.e2e.js

@@ -8,10 +8,45 @@ import { configs, test } from "../../../../utils/test/playwright/index";
  */
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('button: round'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.goto(`/src/components/button/test/round`, config);
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`button-round`));
+        test.describe('default', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.goto(`/src/components/button/test/round`, config);
+                await page.setIonViewport();
+                const container = page.locator('#default');
+                await expect(container).toHaveScreenshot(screenshot(`button-round`));
+            });
+        });
+        test.describe('outline', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.goto(`/src/components/button/test/round`, config);
+                await page.setIonViewport();
+                const container = page.locator('#outline');
+                await expect(container).toHaveScreenshot(screenshot(`button-outline-round`));
+            });
+        });
+        test.describe('clear', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.goto(`/src/components/button/test/round`, config);
+                await page.setIonViewport();
+                const container = page.locator('#clear');
+                await expect(container).toHaveScreenshot(screenshot(`button-clear-round`));
+            });
+        });
+        test.describe('color', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.goto(`/src/components/button/test/round`, config);
+                await page.setIonViewport();
+                const container = page.locator('#color');
+                await expect(container).toHaveScreenshot(screenshot(`button-color-round`));
+            });
+        });
+        test.describe('expand', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.goto(`/src/components/button/test/round`, config);
+                await page.setIonViewport();
+                const container = page.locator('#expand');
+                await expect(container).toHaveScreenshot(screenshot(`button-expand-round`));
+            });
         });
     });
 });

package/dist/collection/components/buttons/buttons.js

@@ -2,30 +2,36 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class Buttons {
     constructor() {
         this.collapse = false;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '3b78d2f2ebdc2a1720edb570270dd0228eef6ae5', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '4894da99d311fd26fdedc64d7db023de4d0c7857', class: {
+                [theme]: true,
                 ['buttons-collapse']: this.collapse,
-            } }, h("slot", { key: 'a48e728d5d5ecb29965c3a2c9ffa9516b5da5309' })));
+            } }, h("slot", { key: '493d3423fc2dbb636e6cb9ca4e33b3be78ab14d3' })));
     }
     static get is() { return "ion-buttons"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["buttons.ios.scss"],
-            "md": ["buttons.md.scss"]
+            "md": ["buttons.md.scss"],
+            "ionic": ["buttons.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["buttons.ios.css"],
-            "md": ["buttons.md.css"]
+            "md": ["buttons.md.css"],
+            "ionic": ["buttons.md.css"]
         };
     }
     static get properties() {
@@ -42,7 +48,7 @@ export class Buttons {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
+                    "text": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in the `ios` theme with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
                 },
                 "attribute": "collapse",
                 "reflect": false,

package/dist/collection/components/card/card.js

@@ -4,9 +4,10 @@
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
 import { createColorClasses, openURL } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @part native - The native HTML button, anchor, or div element that wraps all child elements.
  */
@@ -30,7 +31,7 @@ export class Card {
     isClickable() {
         return this.href !== undefined || this.button;
     }
-    renderCard(mode) {
+    renderCard(theme) {
         const clickable = this.isClickable();
         if (!clickable) {
             return [h("slot", null)];
@@ -45,28 +46,30 @@ export class Card {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation) }), h("slot", null), clickable && mode === 'md' && h("ion-ripple-effect", null)));
+        return (h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation) }), h("slot", null), clickable && theme === 'md' && h("ion-ripple-effect", null)));
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '20989b44d99554e110bd2b41dca7f989f038dc5b', class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '6c0f544aa392df25aca0af25549169377251d371', class: createColorClasses(this.color, {
+                [theme]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),
-            }) }, this.renderCard(mode)));
+            }) }, this.renderCard(theme)));
     }
     static get is() { return "ion-card"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card.ios.scss"],
-            "md": ["card.md.scss"]
+            "md": ["card.md.scss"],
+            "ionic": ["card.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["card.ios.css"],
-            "md": ["card.md.css"]
+            "md": ["card.md.css"],
+            "ionic": ["card.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/card-content/card-content.js

@@ -2,30 +2,33 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 CardContent {
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'c2146c75bb2e20dd975b144dd7a99c122d420aab', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '923eae2e57e0fdadd9b389fc986e5ec711cb1ad8', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`card-content-${mode}`]: true,
+                [`card-content-${theme}`]: true,
             } }));
     }
     static get is() { return "ion-card-content"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card-content.ios.scss"],
-            "md": ["card-content.md.scss"]
+            "md": ["card-content.md.scss"],
+            "ionic": ["card-content.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["card-content.ios.css"],
-            "md": ["card-content.md.css"]
+            "md": ["card-content.md.css"],
+            "ionic": ["card-content.md.css"]
         };
     }
 }

package/dist/collection/components/card-header/card-header.js

@@ -3,9 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 CardHeader {
     constructor() {
@@ -13,25 +14,27 @@ export class CardHeader {
         this.translucent = false;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '05a406ae897dd0d1564bb9d0e213c5c2c21445fa', class: createColorClasses(this.color, {
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'ff96ee33852d6736ba8d0bcf290a59f5bebab112', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
-                [mode]: true,
-            }) }, h("slot", { key: '505a74bfb528182bad69d519b848ac2060f4552f' })));
+                [theme]: true,
+            }) }, h("slot", { key: '6746c3bd519e2e9618101c648c057237439d6b96' })));
     }
     static get is() { return "ion-card-header"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card-header.ios.scss"],
-            "md": ["card-header.md.scss"]
+            "md": ["card-header.md.scss"],
+            "ionic": ["card-header.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["card-header.ios.css"],
-            "md": ["card-header.md.css"]
+            "md": ["card-header.md.css"],
+            "ionic": ["card-header.md.css"]
         };
     }
     static get properties() {
@@ -71,7 +74,7 @@ export class CardHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the card header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the card header will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/card-subtitle/card-subtitle.js

@@ -3,33 +3,36 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 CardSubtitle {
     constructor() {
         this.color = undefined;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '4494e715bdff695b17df995bca3c9924cc9dec6c', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'be9eb1d1b9cdb5ebd8d0ebf14f0d9f4ff302ccb8', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
-                [mode]: true,
-            }) }, h("slot", { key: '717e7f2b865b7bb6ae570922eb740c4ae731d85d' })));
+                [theme]: true,
+            }) }, h("slot", { key: 'c009367fedb7fb8b4abe871c179d25d0161f3b81' })));
     }
     static get is() { return "ion-card-subtitle"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card-subtitle.ios.scss"],
-            "md": ["card-subtitle.md.scss"]
+            "md": ["card-subtitle.md.scss"],
+            "ionic": ["card-subtitle.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["card-subtitle.ios.css"],
-            "md": ["card-subtitle.md.css"]
+            "md": ["card-subtitle.md.css"],
+            "ionic": ["card-subtitle.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/card-title/card-title.js

@@ -3,33 +3,36 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 CardTitle {
     constructor() {
         this.color = undefined;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '1f26cd9bd47f87540dfaff6ac8150a80bcf14475', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '9eb214dcdabd925db621af6cd9d5ccfaf0e244a0', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
-                [mode]: true,
-            }) }, h("slot", { key: 'b2d51db6dc9284e17cb900af557b36ef866cdc3c' })));
+                [theme]: true,
+            }) }, h("slot", { key: '7cf3e81bd73437192c10d7db5ab3650791e0052a' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card-title.ios.scss"],
-            "md": ["card-title.md.scss"]
+            "md": ["card-title.md.scss"],
+            "ionic": ["card-title.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["card-title.ios.css"],
-            "md": ["card-title.md.css"]
+            "md": ["card-title.md.css"],
+            "ionic": ["card-title.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/checkbox/checkbox.js

@@ -4,9 +4,10 @@
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes, renderHiddenInput } from "../../utils/helpers";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @slot - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
  *
@@ -69,11 +70,11 @@ export class Checkbox {
     }
     render() {
         const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
-        const mode = getIonMode(this);
-        const path = getSVGPath(mode, indeterminate);
+        const theme = getIonTheme(this);
+        const path = getSVGPath(theme, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '93550068abf4a5103a5d7f06e88e8d004382c203', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '6e4534d29c4c82a0ea67fd5d8a56701edeb7ca0d', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
+                [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
                 'checkbox-disabled': disabled,
@@ -82,14 +83,14 @@ export class Checkbox {
                 [`checkbox-justify-${justify}`]: true,
                 [`checkbox-alignment-${alignment}`]: true,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, h("label", { key: '43c0a59f152c8b836fcfcefd29db16962568b1e1', class: "checkbox-wrapper" }, h("input", Object.assign({ key: '7dc4216a96c001216a99349290d7615032952aee', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { key: 'a7454e4c99eb6ea3fe4db171c0071b803949c4d0', class: {
+            }), onClick: this.onClick }, h("label", { key: '742803cfb62dc87c4bc913c5f843cbdc4023cbd3', class: "checkbox-wrapper" }, h("input", Object.assign({ key: '77bd025023ab1f79946c2decc8883ebec58395be', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { key: 'f15fbf5f980d42de935c8ba089b08fdee531f64e', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, h("slot", { key: '41741533b49c0281d8ff496c7b5eeccd944d2b2a' })), h("div", { key: 'e3b43df785386c2cd87fb3a38777c34a7d9b32e0', class: "native-wrapper" }, h("svg", { key: 'd3cfb07ec4c7b3e45b9cf5a049fcc841fdb4e2c3', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label" }, h("slot", { key: 'cdba1f2d91806d6bdda003b04cbd822b85f5f8e1' })), h("div", { key: '27516f998d990f805b52a59780b976f7127c772f', class: "native-wrapper" }, h("svg", { key: '1f216b57e65e4f5c2bb2c3cdfadd66daff458482', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
-    getSVGPath(mode, indeterminate) {
+    getSVGPath(theme, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
-        if (mode === 'md') {
+        if (theme === 'md') {
             path = indeterminate ? (h("path", { d: "M2 12H22", part: "mark" })) : (h("path", { d: "M1.73,12.91 8.1,19.28 22.79,4.59", part: "mark" }));
         }
         return path;
@@ -99,13 +100,15 @@ export class Checkbox {
     static get originalStyleUrls() {
         return {
             "ios": ["checkbox.ios.scss"],
-            "md": ["checkbox.md.scss"]
+            "md": ["checkbox.md.scss"],
+            "ionic": ["checkbox.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["checkbox.ios.css"],
-            "md": ["checkbox.md.css"]
+            "md": ["checkbox.md.css"],
+            "ionic": ["checkbox.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/chip/chip.js

@@ -3,9 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 Chip {
     constructor() {
@@ -14,26 +15,28 @@ export class Chip {
         this.disabled = false;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '6c6497d9397407443784f1b79df0b58d6d24eed2', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'b7a15e5b772a86bb0c1460a33e1a679ccf6dbd76', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+                [theme]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, h("slot", { key: 'a4d431e3b066420890fcaa30bbc99f1240dff11c' }), mode === 'md' && h("ion-ripple-effect", null)));
+            }) }, h("slot", { key: '12b6cd62ac9c33d98ab45528449162dd7dce5c30' }), theme === 'md' && h("ion-ripple-effect", null)));
     }
     static get is() { return "ion-chip"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["chip.ios.scss"],
-            "md": ["chip.md.scss"]
+            "md": ["chip.md.scss"],
+            "ionic": ["chip.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["chip.ios.css"],
-            "md": ["chip.md.css"]
+            "md": ["chip.md.css"],
+            "ionic": ["chip.md.css"]
         };
     }
     static get properties() {