voyager-ionic-core 8.0.0-rc.0 → 8.0.1

package/dist/collection/components/action-sheet/action-sheet.js

@@ -191,12 +191,12 @@ export class ActionSheet {
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (h(Host, Object.assign({ key: 'b81b5301c2544d6474561047fa8f3cf1b27882fb', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'b640e9730af4bd9ec569884cf203c63102e0ea59', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'b98bfa2ed6b6c8f5648f5fe52968c7f79fd3557b', tappable: this.backdropDismiss }), h("div", { key: '15354a41ab7eb1014bb65638dad9daa7c8bf8167', tabindex: "0" }), h("div", { key: 'dff2e93f5f44b5f6488cf2a7da55563ce9a9cfdb', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '25981afc3a174fb44a6d97b4118b3a39792211c8', class: "action-sheet-container" }, h("div", { key: '5a9d5174b3fe7b59e08f8022df8ead909650da53', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'bcfa5b7ffb5c265ef54caa114e697ada11f20c12', tappable: this.backdropDismiss }), h("div", { key: '207ae95b5365ce1d76170a05bdf8c83c3ba5de42', tabindex: "0" }), h("div", { key: 'bf2b4e8d57c822a4ea2bbe6c34b1b2f2067e4c02', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '9c4841eb03ca1378c5abc1e3aafbbcfaaa43c345', class: "action-sheet-container" }, h("div", { key: 'fa438b8663f5d30852e5967da0471489efa783b2', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '2c600f1cd8314d65137fb1bfa180312b4791121a', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { key: 'b1891248a8269c9077f48cd4af210072daf7c119', tabindex: "0" })));
+            } }, header, this.subHeader && h("div", { key: 'a98d6a3f7948733de22a07432e56255f11243b7b', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '5c5abd0e0b3d486ba2bfe437e28a23b2c7c4c955', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '520a23bbbe6c7436f5bc58bad162d7894b870e54' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '28c90f66786ee82316adc6cfd68d322d2038357d', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'fd49fcea260c7addc9b07718eeb02d4fa6e4d900', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'c83f636e171fe77635a4fce2b97161447e10546a' })))))), h("div", { key: 'd304920fc7cb006b87542183a3224a7e460abd3d', tabindex: "0" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/alert/alert.js

@@ -391,9 +391,9 @@ export class Alert {
          * If neither is defined, don't set aria-labelledby.
          */
         const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, Object.assign({ key: 'fe991967332781c792690760d63857f28e20e928', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'b1875ea565c40a25915e26e61864f8c61d840ccc', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'd2cf69281264c779cd583acc6466b67bbeffff77', tappable: this.backdropDismiss }), h("div", { key: 'cf1613444b085bf41326703a8ee39a0e7da4fbbd', tabindex: "0" }), h("div", { key: 'da4106c5da97987844b9404d968e895d3399d09b', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '0880f30325c25f08a27f5feaf44c497c64318819', class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '20c5e7f555e64750e5043aa62a511f2b56cc9e42', tabindex: "0" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '37d9d7d1a47bfa23c3bb8d8d9805f52a5bbedf61', tappable: this.backdropDismiss }), h("div", { key: '0134cc90b7f02dcdd13dfdc39a72f2259182de90', tabindex: "0" }), h("div", { key: 'ed054b063ec2d1847b3234d5bdf3e66054784ed7', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'fb81befae081424f03c64b434ffdd79bb1b00d0c', class: "alert-head" }, header && (h("h2", { key: '92596dfdd92c4f63c82ed86b4a2473b3110daae3', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: 'ba7a0734cf818224f453604ec638770ca61bfef6', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '41a2619836a4af5d158216ef14b49985c7941b78', tabindex: "0" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }

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

@@ -65,7 +65,7 @@ export class App {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '02e6722398cfde7275ab9abdcce0f53a98f6b10f', class: {
+        return (h(Host, { key: 'a562850f242d9d45573e35efdd4bd178254677ef', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),

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

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Avatar {
     render() {
-        return (h(Host, { key: 'b40a506a0beeaea226fd92e420655a3d840fafa6', class: getIonMode(this) }, h("slot", { key: '185c90b5d7f790ca8e39907c4da6fa7aa532a837' })));
+        return (h(Host, { key: 'dc1e3cd535e419eebe5599574fd2393ebfde8bbc', class: getIonMode(this) }, h("slot", { key: 'edb8441c063ea592b41345ea97d88ecd90cb3052' })));
     }
     static get is() { return "ion-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,7 +72,7 @@ export class BackButton {
         const showBackButton = defaultHref !== undefined;
         const mode = getIonMode(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: 'e233c0ccdeefd85b4e7170ca28beb2d528706db5', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '8351c93a1812c94c979fb115f07a9ad7b3152188', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -82,7 +82,7 @@ export class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: 'a48e4ca9c1afefacc60766f910ea8349cdd3cce6', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '60bcc5fa226861b03b83a2b6fbad51284c295d4b', 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: '991b8baa784dbfbdf8d3581cbbf6a858ac1f1e6e', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '929fcd83a4fdb00cf97ca803f234719171602a5e', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '0c10d412ae8342d96f221e626b421c9abadac748', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '96f505880a80f36ee8b8c78268b450f3629ee613', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { key: '0aecf5d415c608069eb1a10043530bd0929b6383', type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class Backdrop {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'edc9b82940adbb5fa740107bd2d12d02955606fa', tabindex: "-1", "aria-hidden": "true", class: {
+        return (h(Host, { key: 'c803b4302c8e722064feb03dafe3cb6e190b4f2b', tabindex: "-1", "aria-hidden": "true", class: {
                 [mode]: true,
                 'backdrop-hide': !this.visible,
                 'backdrop-no-tappable': !this.tappable,

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

@@ -13,9 +13,9 @@ export class Badge {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'cd1425d016a570b34dd42044fe79b42e6c984e86', class: createColorClasses(this.color, {
+        return (h(Host, { key: '1253618692342bcf9487188402dc3d49ae0de480', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '29d2258c9e242f5fc1d85e2df5288edcfb038c8b' })));
+            }) }, h("slot", { key: '71d65e203965ea37b94504a8a0a96beb52d4e356' })));
     }
     static get is() { return "ion-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,7 +64,7 @@ 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: '7f6db640a81d6c44e22f5d7980b7e3c111c695f0', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'dfe55ad57f23e5da5f2e2c51fea99964812472e3', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
@@ -74,15 +74,15 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, Object.assign({ key: '897cbb8e7632ce86de24e71916392a6fecf40d6b' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '8b420722f1cacc771903abb4bf86d7375cb60698', name: "start" }), h("slot", { key: '6945b283fbac7ca799de48938379c6f7b1926735' }), h("slot", { key: 'f27519c372bf6ab37d766ae945e3600baa3d2831', 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: 'e361b1f0e7de6dd5c5dd4f6deae72c2c8210466d' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '9daeb45a8a28c89f3ad5751f71b8412197846371', name: "start" }), h("slot", { key: '4849e63cdffd6c712292745138b68730442c8b0d' }), h("slot", { key: '6edf9bac5aec06ccec2844efac2d9afa1d24cf57', name: "end" })), showCollapsedIndicator && (h("button", { key: 'de7f5faea75b44011b289d259265e2435a65874f', 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 && (
+            } }, h("ion-icon", { key: '957d8851af9c99dda263f34eff0b35a0fc212c32', "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**
          * Separators should not be announced by narrators.
          * 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", { key: '97d646c37c4c41ad6b12c3a543d1146fde06fc9a', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: '0429f671a986f2d7be1b1b69fc879e80806d2916', name: "separator" }, mode === '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"; }

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

@@ -105,12 +105,12 @@ export class Breadcrumbs {
     render() {
         const { color, collapsed } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '9cef93113d7c0d0bcab67d7790d8df915236dd59', class: createColorClasses(color, {
+        return (h(Host, { key: '18ffba1642f10cc2bc31440e84f23aa6f042e501', class: createColorClasses(color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'breadcrumbs-collapsed': collapsed,
-            }) }, h("slot", { key: '6e6b0e0a3297de16bf08ec107bbce4bb5f00b28c', onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: '3db6d31590e3047889ce554d57d155c8ea2e1455', onSlotchange: this.slotChanged })));
     }
     static get is() { return "ion-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -326,11 +326,6 @@ ion-ripple-effect {
   color: var(--ion-toolbar-background, var(--color));
 }
 
-:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-toolbar-color, var(--color));
-  color: var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff));
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -547,7 +542,20 @@ ion-ripple-effect {
 }
 
 ::slotted(ion-icon[slot=icon-only]) {
-  font-size: 1.125em;
+  /**
+    * The values were provided through a native iOS app.
+    * min font size: 15px, default font size: 18px, max font size: 43px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 16px
+    * (derived from rem), then the base size can use the default font
+    * size of the icon.
+    */
+  font-size: clamp(15.12px, 1.125em, 43.02px);
 }
 
 :host(.button-small.button-has-icon-only) {
@@ -556,7 +564,20 @@ ion-ripple-effect {
 }
 
 :host(.button-small) ::slotted(ion-icon[slot=icon-only]) {
-  font-size: 1.4em;
+  /**
+    * The values were provided through a native iOS app.
+    * min font size: 12px, default font size: 17px, max font size: 40px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 13px
+    * (derived from rem) and the default font size of the icon is
+    * 17px, then the base size would need to be increased.
+    */
+  font-size: clamp(12.1394px, 1.308125em, 40.1856px);
 }
 
 :host(.button-large.button-has-icon-only) {
@@ -565,7 +586,20 @@ ion-ripple-effect {
 }
 
 :host(.button-large) ::slotted(ion-icon[slot=icon-only]) {
-  font-size: 1em;
+  /**
+    * The values were provided through a native iOS app.
+    * min font size: 15px, default font size: 18px, max font size: 43px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 20px
+    * (derived from rem) and the default font size of the icon is
+    * 18px, then the base size would need to be decreased.
+    */
+  font-size: clamp(15.12px, 0.9em, 43.056px);
 }
 
 :host(.button-outline.ion-focused.ion-color) .button-native,
@@ -615,4 +649,9 @@ ion-ripple-effect {
 
 :host(.button-solid.ion-color.ion-activated) .button-native::after {
   background: var(--ion-color-shade);
+}
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-color, var(--color));
+  color: var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff));
 }

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

@@ -211,7 +211,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: 'e926c8ca019c15a5fdf5ac95632f78d8b791fba0', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '8f3a0363d46ef888d22b0b0812c70cb4f79e6efa', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -226,7 +226,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: 'e964fd7945ff046464a98e6148256b8bb12b07a8' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '5eac1c991616ead47b6b7f5ab095dc25831633ad', class: "button-inner" }, h("slot", { key: '8383cfaa82e50dddff7dfe82ca6e1bcb3328871b', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '423445d26533850b86171095f431caab437ff4f3', name: "start" }), h("slot", { key: 'dcbdc7c3f827e01b8e3792272b72a13e2d99c179' }), h("slot", { key: '9c345224e1d415cfa96460f94626d9bcf49d3829', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: 'a517c7d06aab15ad4c2a51b8ec224c1aeb4ed565' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '127c26dd97c0bf5097433df77df7313d59784899', class: "button-inner" }, h("slot", { key: '39d9a9cad8e1addbe63406062e555e05c2cb541b', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: 'cfdebdd89155c6c21eb80e51e06456a3a6d877e0', name: "start" }), h("slot", { key: 'eac497e0f97ab55baa834ae23155d89b0f7069c6' }), h("slot", { key: 'c99f7900f8856b32a0b4ac11092d461f5e9a1109', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: 'c681edb0480879fbd801575f2233f6e118898638', type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -326,11 +326,6 @@ ion-ripple-effect {
   color: var(--ion-toolbar-background, var(--color));
 }
 
-:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-toolbar-color, var(--color));
-  color: var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff));
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -487,7 +482,21 @@ ion-ripple-effect {
 }
 
 ::slotted(ion-icon[slot=icon-only]) {
-  font-size: 1.6em;
+  /**
+    * The values were provided through MD design,
+    * large and small are based on the iOS sizes.
+    * min font size: 15px, default font size: 22.4px, max font size: 43px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 14px
+    * (derived from rem) and the default font size of the icon is
+    * 22.4px, then the base size would need to be increased.
+    */
+  font-size: clamp(15.104px, 1.6em, 43.008px);
 }
 
 :host(.button-small.button-has-icon-only) {
@@ -496,7 +505,21 @@ ion-ripple-effect {
 }
 
 :host(.button-small) ::slotted(ion-icon[slot=icon-only]) {
-  font-size: 1.23em;
+  /**
+    * The values were provided through MD design,
+    * large and small are based on the iOS sizes.
+    * min font size: 12px, default font size: 16px, max font size: 40px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 13px
+    * (derived from rem) and the default font size of the icon is
+    * 16px, then the base size would need to be increased.
+    */
+  font-size: clamp(13.002px, 1.23125em, 40.385px);
 }
 
 :host(.button-large.button-has-icon-only) {
@@ -505,7 +528,21 @@ ion-ripple-effect {
 }
 
 :host(.button-large) ::slotted(ion-icon[slot=icon-only]) {
-  font-size: 1.4em;
+  /**
+    * The values were provided through MD design,
+    * large and small are based on the iOS sizes.
+    * min font size: 15px, default font size: 28px, max font size: 43px
+    *
+    * Since the `ion-button` uses `rem` for the font size, we can't
+    * just pass the desired icon font size in `em` to the `
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * to account for the ion-button` font size.
+    *
+    * For example, if the default font size of `ion-button` is 20px
+    * (derived from rem) and the default font size of the icon is
+    * 28px, then the base size would need to be increased.
+    */
+  font-size: clamp(15.008px, 1.4em, 43.008px);
 }
 
 /**
@@ -530,4 +567,8 @@ ion-ripple-effect {
   :host(.button-outline.ion-color:hover) .button-native::after {
     background: var(--ion-color-base);
   }
+}
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-background, var(--color));
+  color: var(--ion-toolbar-color, var(--background), var(--ion-color-primary-contrast, #fff));
 }

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

@@ -9,10 +9,10 @@ export class Buttons {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '3b78d2f2ebdc2a1720edb570270dd0228eef6ae5', class: {
+        return (h(Host, { key: '4e5ce9abb3f56e8c91e3eb58c2819300e61eba24', class: {
                 [mode]: true,
                 ['buttons-collapse']: this.collapse,
-            } }, h("slot", { key: 'a48e728d5d5ecb29965c3a2c9ffa9516b5da5309' })));
+            } }, h("slot", { key: 'f2f360ec888b6e946b512fed07431fab47c61482' })));
     }
     static get is() { return "ion-buttons"; }
     static get encapsulation() { return "scoped"; }

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

@@ -49,7 +49,7 @@ export class Card {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '20989b44d99554e110bd2b41dca7f989f038dc5b', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8584300522f382ee8891c039d71da82533dfa36a', class: createColorClasses(this.color, {
                 [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),

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

@@ -9,7 +9,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class CardContent {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'c2146c75bb2e20dd975b144dd7a99c122d420aab', class: {
+        return (h(Host, { key: '2a2d0b48aad4b83990a1748fce60e772514eb223', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`card-content-${mode}`]: true,

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

@@ -14,11 +14,11 @@ export class CardHeader {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '05a406ae897dd0d1564bb9d0e213c5c2c21445fa', class: createColorClasses(this.color, {
+        return (h(Host, { key: '18d12507ec6e650a72d721e9d0f4128b5e86df1d', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: '505a74bfb528182bad69d519b848ac2060f4552f' })));
+            }) }, h("slot", { key: '3374c087d8c3f014082787e255432e7a335ef44f' })));
     }
     static get is() { return "ion-card-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,10 +13,10 @@ export class CardSubtitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '4494e715bdff695b17df995bca3c9924cc9dec6c', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        return (h(Host, { key: 'cbcb01bd01cf6de64a0b04fb626e42b07ceb8f53', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: '717e7f2b865b7bb6ae570922eb740c4ae731d85d' })));
+            }) }, h("slot", { key: 'cbcaa73aa5799882c48d6c0aabfb13651bcc91c0' })));
     }
     static get is() { return "ion-card-subtitle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,10 +13,10 @@ export class CardTitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '1f26cd9bd47f87540dfaff6ac8150a80bcf14475', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f904a0ca6489f147d03c9c5f9f2c5549cdb38d1a', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'b2d51db6dc9284e17cb900af557b36ef866cdc3c' })));
+            }) }, h("slot", { key: 'effb921de4ad8dfbbe318b3f692f4005812da7b1' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,6 +83,7 @@
 }
 
 :host(.in-item) {
+  flex: 1 1 0;
   width: 100%;
   height: 100%;
 }

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

@@ -72,7 +72,7 @@ export class Checkbox {
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '93550068abf4a5103a5d7f06e88e8d004382c203', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
+        return (h(Host, { key: '52064869f18f6762802a783ba9ee37433d2a2981', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -82,10 +82,10 @@ 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: '800b3521fe809423b9eee7ab9d220255cc6ffdff', class: "checkbox-wrapper" }, h("input", Object.assign({ key: '3e254b29bb1fc3951691a255a20cfd65360be510', 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: '19ff4b1115c3bc9c2ceed045fbc4e970f77d9e0d', 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: 'e4f07b55826fb1b3a80e0428873fbdf06bf92978' })), h("div", { key: '5134cf088c93f36b00d3848b573a148f2d9fb806', class: "native-wrapper" }, h("svg", { key: 'd00733f071d6da47e1a6e5c89cb6aab1a7b0ef74', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, 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" }));

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

@@ -83,6 +83,7 @@
 }
 
 :host(.in-item) {
+  flex: 1 1 0;
   width: 100%;
   height: 100%;
 }

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

@@ -15,12 +15,12 @@ export class Chip {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '6c6497d9397407443784f1b79df0b58d6d24eed2', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        return (h(Host, { key: '7dd923c1b28d1eb1efa348f66f49cec067645af9', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: 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: '7ede838bf109dc27a898ee2dcdeabc3f439c8e6f' }), mode === 'md' && h("ion-ripple-effect", { key: '5acb073029544e73fcc0db4cc4e661ec1df4d231' })));
     }
     static get is() { return "ion-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/col/col.js

@@ -111,9 +111,9 @@ export class Col {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode(this);
-        return (h(Host, { key: 'af31133e071846ac6609a46eabe59cc481dafdb7', class: {
+        return (h(Host, { key: 'c37fa4c4c993385ccbb6f4e89b2f390b140507a0', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: 'd11a95925819a0e2dc69966b7893f0d3efc62eb9' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '6a5296ff0b9dee6600c2dafe7363a065d053bac2' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

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

@@ -335,7 +335,7 @@ export class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, { key: '133795359748c29c2f26f2c4b05315c1ee2ebf14', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, { key: '98e9658e69c0bbe0113e4c1b89dd7b240334c039', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -343,12 +343,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { key: 'cec324eeb397b9947b48706a726a71c0a338c47b', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h("div", { key: 'da55ddf94fe7fba83e3625f08ce0561136911828', class: {
+            } }, h("div", { key: 'e89aa6ea09625846db52d63bdbf06c3c279a5ba4', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h("div", { key: '37925cf9d898ede58d5ac7b5a650c648033602a3', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '5277456fa0cca2680fbb3ae48f90100ba16bf90d' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: 'e3dfb4aa64d29e5cc24e8b0cd75a7eb1e0d6954c', name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: 'a40f964cacf0c2e2bdcf962791aaadb386d44323' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: 'd21886cff0bc417e1f5e3a436dddc079e967579b', name: "fixed" })));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/datetime/datetime.js

@@ -1556,7 +1556,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '79357d753d003539aaadbc30aa0ca7e2ab97415d', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'f1f8ca52cdd9cfc8394b0365c89c0d30cd7316e7', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1566,7 +1566,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '18b6631ffcf028c5062659e75be5d6712ac30402', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '480068aa8072b60ac521646dfa82480c5f6ce6ef', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/datetime/test/color/datetime.e2e.js

@@ -6,15 +6,22 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across directions
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('datetime: color'), () => {
         test('should not have visual regressions', async ({ page }) => {
-            await page.goto('/src/components/datetime/test/color', config);
-            const datetime = page.locator('#color-datetime');
-            await expect(datetime).toHaveScreenshot(screenshot(`datetime-color`));
-            await page.evaluate(() => document.body.classList.toggle('dark'));
-            await page.waitForChanges();
-            await expect(datetime).toHaveScreenshot(screenshot(`datetime-color-dark`));
+            await page.setContent(`
+        <div id="container" style="width: 250px;">
+          <ion-datetime
+            color="danger"
+            value="2022-05-03"
+            show-default-title="true"
+            show-default-buttons="true"
+          ></ion-datetime>
+        </div>
+      `, config);
+            const container = page.locator('#container');
+            await page.locator('.datetime-ready').waitFor();
+            await expect(container).toHaveScreenshot(screenshot(`datetime-color`));
         });
     });
 });

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

@@ -337,11 +337,11 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f0ee6b859ad193be78cfc49d4d66373adfdbd618', class: createColorClasses(color, {
+        return (h(Host, { key: '26e606af6f067a5774db37ed41387ffebb941777', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", null))), timeText && (h("button", { class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", null)))));
+            }) }, dateText && (h("button", { key: '6b7aa66a15b4a6d89d411e40586de28a2ac9f343', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'd42f34fd167be34386319e7ea788c2ab03c90b87', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '47dd34f3c2799064cac7a5fe25440ecc043950f0' }))), timeText && (h("button", { key: 'd77424a20fae320654774c7bfc8a8e2369d3afe3', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: 'ac088a78141bb53f2efd48dd7745f8954c92378b', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: 'b3a58ddfd28b9396e2518ffd62a045ec13d8b9d0' })))));
     }
     static get is() { return "ion-datetime-button"; }
     static get encapsulation() { return "shadow"; }