@ionic/core 8.0.0-dev.11709632212.139b6f63 → 8.0.0-dev.11711408410.14d71406

package/dist/collection/components/alert/test/basic/alert.e2e.js

@@ -77,7 +77,7 @@ configs().forEach(({ config, screenshot, title }) => {
         });
     });
 });
-configs({ themes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
+configs({ palettes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
     test.describe(title('should not have visual regressions'), () => {
         test('more than two buttons', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/app/app.js

@@ -2,11 +2,15 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, h } from "@stencil/core";
-import { shoudUseCloseWatcher } from "../../utils/hardware-back-button";
+import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
 import { printIonWarning } from "../../utils/logging/index";
 import { isPlatform } from "../../utils/platform";
 import { config } from "../../global/config";
-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 App {
     componentDidLoad() {
         if (Build.isBrowser) {
@@ -27,7 +31,7 @@ export class App {
                     import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
                 }
                 const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
-                const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
+                const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
                 if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
                     hardwareBackButtonModule.startHardwareBackButton();
                 }
@@ -36,7 +40,7 @@ export class App {
                      * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
                      * then the close watcher will not be used.
                      */
-                    if (shoudUseCloseWatcher()) {
+                    if (shouldUseCloseWatcher()) {
                         printIonWarning('experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
                     }
                     hardwareBackButtonModule.blockHardwareBackButton();
@@ -64,9 +68,9 @@ export class App {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '3535eb5c0dab78a78011e552524a98599b2b650f', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '71b18fe6774029ab0fc53ebab579064f7a2fb908', class: {
+                [theme]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));

package/dist/collection/components/avatar/avatar.js

@@ -2,23 +2,32 @@
  * (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 Avatar {
     render() {
-        return (h(Host, { key: '95d7ca334f9b66e0983cbc1b782ded0b9a54eaa9', class: getIonMode(this) }, h("slot", { key: '011d20189acdb03bee328aa4fa0511826a0b3a36' })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'da2881ad023aa8ae16c3caf5e18070eddf4cb48c', class: {
+                [theme]: true,
+            } }, h("slot", { key: '5d1f0a5b8260169a2bafa4838f37cd3203bf8605' })));
     }
     static get is() { return "ion-avatar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["avatar.ios.scss"],
-            "md": ["avatar.md.scss"]
+            "md": ["avatar.md.scss"],
+            "ionic": ["avatar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["avatar.ios.css"],
-            "md": ["avatar.md.css"]
+            "md": ["avatar.md.css"],
+            "ionic": ["avatar.md.css"]
         };
     }
 }

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

@@ -6,9 +6,10 @@ import { inheritAriaAttributes } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { arrowBackSharp, chevronBack } from "ionicons/icons";
 import { config } from "../../global/config";
-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 element that wraps all child elements.
  * @part icon - The back button icon (uses ion-icon).
@@ -45,7 +46,7 @@ export class BackButton {
             // icon is set on the component or by the config
             return icon;
         }
-        if (getIonMode(this) === 'ios') {
+        if (getIonTheme(this) === 'ios') {
             // default ios back button icon
             return config.get('backButtonIcon', chevronBack);
         }
@@ -53,7 +54,7 @@ export class BackButton {
         return config.get('backButtonIcon', arrowBackSharp);
     }
     get backButtonText() {
-        const defaultBackButtonText = getIonMode(this) === 'ios' ? 'Back' : null;
+        const defaultBackButtonText = getIonTheme(this) === 'ios' ? 'Back' : null;
         return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
     }
     get hasIconOnly() {
@@ -70,10 +71,10 @@ export class BackButton {
     render() {
         const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, icon, inheritedAttributes, } = this;
         const showBackButton = defaultHref !== undefined;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '175fff2d7a41d2deaaf7b781c5ba2aac9311ebf4', onClick: this.onClick, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '01d115b1203a256e0cbd75bb982fd7ef310917ba', onClick: this.onClick, class: createColorClasses(color, {
+                [theme]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
                 'back-button-has-icon-only': hasIconOnly,
@@ -82,20 +83,22 @@ export class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: '59fe30c167ea82e2431e45d46060a01bcb2aea77', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '3d704fb7ef001446361e7a09d43763a771b242b9', class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h("button", { key: 'e37e1c79da8337ad4f04cf6e4edd51ad7d4c0d69', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '7cfeae53736e5fbe4c5c31d259d0eb3ec0664643', class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["back-button.ios.scss"],
-            "md": ["back-button.md.scss"]
+            "md": ["back-button.md.scss"],
+            "ionic": ["back-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["back-button.ios.css"],
-            "md": ["back-button.md.css"]
+            "md": ["back-button.md.css"],
+            "ionic": ["back-button.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/back-button/test/a11y/back-button.e2e.js

@@ -7,7 +7,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * Only ios mode uses ion-color() for the back button
  */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('back-button: a11y for ion-color()'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/backdrop/backdrop.js

@@ -2,7 +2,11 @@
  * (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 Backdrop {
     constructor() {
         this.visible = true;
@@ -22,9 +26,9 @@ export class Backdrop {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'e512499f1aa0cdb70cdabf300cf69f1062dc7c48', tabindex: "-1", "aria-hidden": "true", class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'a4300590abd1a003aedad6bb5c7a90d3ef09731a', tabindex: "-1", "aria-hidden": "true", class: {
+                [theme]: true,
                 'backdrop-hide': !this.visible,
                 'backdrop-no-tappable': !this.tappable,
             } }));
@@ -34,13 +38,15 @@ export class Backdrop {
     static get originalStyleUrls() {
         return {
             "ios": ["backdrop.ios.scss"],
-            "md": ["backdrop.md.scss"]
+            "md": ["backdrop.md.scss"],
+            "ionic": ["backdrop.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["backdrop.ios.css"],
-            "md": ["backdrop.md.css"]
+            "md": ["backdrop.md.css"],
+            "ionic": ["backdrop.md.css"]
         };
     }
     static get properties() {

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

@@ -3,32 +3,35 @@
  */
 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 Badge {
     constructor() {
         this.color = undefined;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '043eea016721e53f0af1cbf1371bc08694281204', class: createColorClasses(this.color, {
-                [mode]: true,
-            }) }, h("slot", { key: 'bd510450d6b60f2794491244e68a83049a5ef6dd' })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '0834ff32b44532d37e4821e3a324ca7693ff1a99', class: createColorClasses(this.color, {
+                [theme]: true,
+            }) }, h("slot", { key: '8d8a1f093861fa92ebe44af0f24333c732128e92' })));
     }
     static get is() { return "ion-badge"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["badge.ios.scss"],
-            "md": ["badge.md.scss"]
+            "md": ["badge.md.scss"],
+            "ionic": ["badge.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["badge.ios.css"],
-            "md": ["badge.md.css"]
+            "md": ["badge.md.css"],
+            "ionic": ["badge.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/badge/test/a11y/badge.e2e.js

@@ -21,7 +21,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
     test.describe(title('badge: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             /**

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

@@ -5,9 +5,10 @@ import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { chevronForwardOutline, ellipsisHorizontal } from "ionicons/icons";
-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 anchor or div element that wraps all child elements.
  * @part separator - The separator element between each breadcrumb.
@@ -52,7 +53,7 @@ export class Breadcrumb {
         // 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 = getIonMode(this);
+        const theme = getIonTheme(this);
         const attrs = TagType === 'span'
             ? {}
             : {
@@ -64,8 +65,8 @@ export class Breadcrumb {
         // to show the separator as long as it isn't also the last breadcrumb
         // otherwise if not collapsed use the value in separator
         const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
-        return (h(Host, { key: '632efa1bc6dc446e81efe8cd7763cb9b16466563', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: 'f8c8ff8902c58b20290366f1a6c2dc4539c090e4', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+                [theme]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
                 'breadcrumb-disabled': disabled,
@@ -74,7 +75,7 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, Object.assign({ key: '6f232cfc590b2e2a23a2e1ee40d6658e7d8b4953' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: 'fec56c6f92c147fbd6273d3efb82b1a6c944699c', name: "start" }), h("slot", { key: '80aa33cdcaab810f544803c6105b489172542846' }), h("slot", { key: '6e1d3f332ae35f5061204bece9756a9bac4aaf4a', name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, Object.assign({ key: 'c33298acb311f76f1f268c3b9fa7a5f1d51de81d' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '8a85ec300027360b65d957a47a405ebcc622682e', name: "start" }), h("slot", { key: 'c1040ad6ecebfc3dd16bdcb8932f3aea1602c46c' }), h("slot", { key: '5da8aebb66302508c1eac199789ad3c01560f9a9', name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
             } }, h("ion-icon", { "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**
@@ -82,20 +83,22 @@ export class Breadcrumb {
          * We add aria-hidden on the span so that this applies
          * to any custom separators too.
          */
-        h("span", { class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { name: "separator" }, mode === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
+        h("span", { class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { name: "separator" }, theme === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
     }
     static get is() { return "ion-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["breadcrumb.ios.scss"],
-            "md": ["breadcrumb.md.scss"]
+            "md": ["breadcrumb.md.scss"],
+            "ionic": ["breadcrumb.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["breadcrumb.ios.css"],
-            "md": ["breadcrumb.md.css"]
+            "md": ["breadcrumb.md.css"],
+            "ionic": ["breadcrumb.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -3,10 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 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.
  */
 export class Breadcrumbs {
     constructor() {
@@ -104,26 +104,28 @@ export class Breadcrumbs {
     }
     render() {
         const { color, collapsed } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '35f8a2bffdd85ba6dc31834ebef69602a5a7cca1', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '7c9cd12e9ea20f10ce6f9d1fed9d38c97478dc4f', class: createColorClasses(color, {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'breadcrumbs-collapsed': collapsed,
-            }) }, h("slot", { key: 'ada062b5d17380d311861d1cf1a22dd62bac5497', onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: '20017edb9e4484eac37c93d78e7770b7f8e72e69', onSlotchange: this.slotChanged })));
     }
     static get is() { return "ion-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["breadcrumbs.ios.scss"],
-            "md": ["breadcrumbs.md.scss"]
+            "md": ["breadcrumbs.md.scss"],
+            "ionic": ["breadcrumbs.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["breadcrumbs.ios.css"],
-            "md": ["breadcrumbs.md.css"]
+            "md": ["breadcrumbs.md.css"],
+            "ionic": ["breadcrumbs.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/button/button.ios.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);
 }
@@ -529,13 +525,8 @@ ion-ripple-effect {
   font-size: min(0.8125rem, 39px);
 }
 
-:host(.button-has-icon-only) {
-  --padding-top: 0;
-  --padding-bottom: 0;
-}
-
 :host(.button-round) {
-  --border-radius: 64px;
+  --border-radius: 999px;
   --padding-top: 0;
   --padding-start: 26px;
   --padding-end: 26px;
@@ -546,6 +537,37 @@ ion-ripple-effect {
   font-weight: 600;
 }
 
+:host(.button-has-icon-only) {
+  --padding-top: 0;
+  --padding-bottom: var(--padding-top);
+  --padding-end: var(--padding-top);
+  --padding-start: var(--padding-end);
+  min-width: clamp(30px, 2.125em, 60px);
+  min-height: clamp(30px, 2.125em, 60px);
+}
+
+::slotted(ion-icon[slot=icon-only]) {
+  font-size: 1.125em;
+}
+
+: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.4em;
+}
+
+: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: 1em;
+}
+
 :host(.button-outline.ion-focused.ion-color) .button-native,
 :host(.button-clear.ion-focused.ion-color) .button-native {
   color: var(--ion-color-base);

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: '8533314504b286ec10e26722f93376d86a7ca1c9', 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: '79bf020fdac0c2ceb2b05547b3e5a9a11e60abb4' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '109481ba86102647023b746b054b2718d3c9d92a', class: "button-inner" }, h("slot", { key: 'f824ddd9f988b9bd33136555b16aa790d9291b49', name: "icon-only" }), h("slot", { key: 'd614f4e430792c5f93be4b3a8c57a826d74b9cfd', name: "start" }), h("slot", { key: '95d00c8a980c31cc7f84732f51a17a0cd285a7cb' }), h("slot", { key: 'a228ff52cbe04dc9d2e22bb66611ecc96d130e6f', 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/a11y/button.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('button: a11y for ion-color()'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             await page.setContent(`
@@ -39,7 +39,7 @@ configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, co
 /**
  * Only ios mode uses ion-color() for the activated button state
  */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('button: ios contrast'), () => {
         test('activated state should not have accessibility violations', async ({ page }) => {
             await page.setContent(`