voyager-ionic-core 7.7.3 → 7.8.6

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: '4b7f7880dc5f39aa9b61981af0a821ac0350af7f', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd623baf94bddc6b1932f128f6a605c6232b37fb5', 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: '961a2684013ac61d59882914fd8d759ddb542fe7', tappable: this.backdropDismiss }), h("div", { key: '2ec08c3719b3cd8a4cae09d2c6ac778ffad5f940', tabindex: "0" }), h("div", { key: 'ee543683d20693c9a9497aca4d41f032aa580c9c', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '55015102b67d080249a8859fc8788f3a82d5ead9', 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: 'df7bcfb0cb41965f169de05edd631a050d5ce648', 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: 'a594ba787a73a33ba10e7a32ca863bd610730cb6', tappable: this.backdropDismiss }), h("div", { key: 'c95ef8332f46ce93fb8d3b7f0168ae5b939c52fd', tabindex: "0" }), h("div", { key: '1895ea338a8e446d01c6151552af658e1e1c841d', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '5156393eb8a8f3e60e7d4bce20b0b85196141b0e', class: "alert-head" }, header && (h("h2", { key: '72ba8253644adfeeb8472531234d3572af28b473', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: 'eb8d2443170fbea182199bb3b3f5446c98f1c17e', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '13c6fac1a58574156951ae2dfdd24790c0812e11', tabindex: "0" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }

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

@@ -222,6 +222,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
             await alert.evaluate((el) => el.present());
             await ionAlertDidPresent.next();
+            /**
+             * The borders on the text fields may not be visible in the screenshot
+             * when using Safari, this is due to a WebKit rendering quirk.
+             */
             await expect(page).toHaveScreenshot(screenshot(`alert-text-fields-scale`));
         });
     });

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

@@ -2,7 +2,7 @@
  * (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";
@@ -27,7 +27,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 +36,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();
@@ -65,7 +65,7 @@ export class App {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '3535eb5c0dab78a78011e552524a98599b2b650f', class: {
+        return (h(Host, { key: '6d7c57453b4be454690e8f1a0721f1e3da8f92aa', 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: '95d7ca334f9b66e0983cbc1b782ded0b9a54eaa9', class: getIonMode(this) }, h("slot", { key: '011d20189acdb03bee328aa4fa0511826a0b3a36' })));
+        return (h(Host, { key: 'f6014b524497bb18ae919ba6f6928407310d6870', class: getIonMode(this) }, h("slot", { key: '192ff4a8e10c0b0a4a2ed795ff2675afa8b23449' })));
     }
     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: '175fff2d7a41d2deaaf7b781c5ba2aac9311ebf4', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '9e837be314ee8ea487ba2771d36668ef58442faa', 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: '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: 'c4531348bd80cf6163931c5fb432526aa8127043', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: 'aab8c6d5f0a84aed9f4e4a2532a239b28c7d5589', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '121eae10947b46a3d109709b79f4126b1c40ade4', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '11c28875cc52b99470525d18c1f88f27c390a75a', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { key: '804bf8a06cd033c99d61ec2665c842b3b25945fa', type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,7 @@ export class Backdrop {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'b2adb9dabef01fa49388d67d9e8a4a370931f633', tabindex: "-1", "aria-hidden": "true", class: {
+        return (h(Host, { key: '16b1328f4a058b8d3752e58dc56c44bed556c425', 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: '043eea016721e53f0af1cbf1371bc08694281204', class: createColorClasses(this.color, {
+        return (h(Host, { key: '22d41ceefb76f40dfbf739fd71483f1272a45858', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'bd510450d6b60f2794491244e68a83049a5ef6dd' })));
+            }) }, h("slot", { key: 'e7e65463bac5903971a8f9f6be55515f42b81a83' })));
     }
     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: '632efa1bc6dc446e81efe8cd7763cb9b16466563', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '6d354439f90ec3cfab9fbf93cb17a67fb9ca6034', 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: '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: '4782977969bd84af02b1834573a6e51069b798ae' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '7d5fb845e463b8195142099773e7f258fc8ed31d', name: "start" }), h("slot", { key: '6b642ccb9101c12f72124fed5dd0f6362345fb41' }), h("slot", { key: '9fb0841fed712e21d1e84b187e1bc9159cf80b56', name: "end" })), showCollapsedIndicator && (h("button", { key: '4b64544d879224d491447a79da8f8672b994af0b', 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: '5a2511b237aa8c401f416e967a831f8315423949', "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: '348952855dd79eb92f8d370e5839a8d09aff4097', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: '0120f416edb1d776fa6900b5986b2b57eef554b3', 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: '35f8a2bffdd85ba6dc31834ebef69602a5a7cca1', class: createColorClasses(color, {
+        return (h(Host, { key: 'cd288d4bf5498f86d086eb999b506993818642f3', 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: 'ada062b5d17380d311861d1cf1a22dd62bac5497', onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: '73c802065511dbebef3867b01ce929313d24cba2', onSlotchange: this.slotChanged })));
     }
     static get is() { return "ion-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -330,11 +330,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
@@ -593,4 +588,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

@@ -199,7 +199,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: '8533314504b286ec10e26722f93376d86a7ca1c9', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '54569350aae49882123f0e22a720956eddee33f5', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -214,7 +214,7 @@ 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: '95c196fc5bf080ef308532c3627e2a9d68f24996' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'e247013b847158187258d28f37ab23905fe49110', class: "button-inner" }, h("slot", { key: '58ac0bd8f643f4392ddbe465fab26eedffe02b7a', name: "icon-only" }), h("slot", { key: '2289d37a37a64472ffe818b3b1126945cebf101e', name: "start" }), h("slot", { key: 'b69a915dff465d251f0466449b91450d4a4048a9' }), h("slot", { key: '594a80d6707fd5edabc03e467f7aae3011d020f6', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: 'b034770cadefe74922ed6564a17147ddc6c9fdb1', type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -330,11 +330,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
@@ -515,4 +510,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,7 +9,7 @@ export class Buttons {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '52c0c5535f5688a481746fe8fd92b6c02941526f', class: {
+        return (h(Host, { key: '2929fd8c4469bab2953c23d47f601706acb104f1', class: {
                 [mode]: true,
                 ['buttons-collapse']: this.collapse,
             } }));

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

@@ -49,7 +49,7 @@ export class Card {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9e35c114ce466623024b94dd6797118ad027417d', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b92792294360fd974324b31ed2d3db00d3e2f8cd', 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: 'd4da147bb0b0b14684b54d37d04ba5a8f7a7d71d', class: {
+        return (h(Host, { key: 'dd95806f042fcd124b18126679f671be6e32a021', 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: '070294064c4b17c941961c9cccf1ae6592b385b6', class: createColorClasses(this.color, {
+        return (h(Host, { key: '44077ad8e3edf7726d0f7a039046e32dc56a83c9', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'adac918d5e93bf69b07c5bda329ebf8c719bd623' })));
+            }) }, h("slot", { key: '51b6f4048d25521ece18d79e5361c762af41cae7' })));
     }
     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: 'ae115cf349cd13f88d20b1fbab6b8a813a87b925', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        return (h(Host, { key: '6f94c9ced239cc945a148e0ecc7ab848fa70d8e3', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'f5dd779b34b5c5c541cbbe56cc8a877e50513252' })));
+            }) }, h("slot", { key: '445f81155799be5e81baa571bd16d57e5149df62' })));
     }
     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: '432d7bf971fda63c30c748986143ec2a8be9e4af', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a9e4190346e7d0a8e6089ec1fe01bca0f5f7200d', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: '3c5dcf6ac1bf981c6c0488f0027765269c80db5a' })));
+            }) }, h("slot", { key: '8d87636ad703545b6d2297629205a5a8616eb94e' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -105,7 +105,7 @@ export class Checkbox {
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { class: createColorClasses(color, {
+        return (h(Host, { "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,

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

@@ -32,3 +32,15 @@ describe('ion-checkbox: disabled', () => {
         expect(checkbox.checked).toBe(false);
     });
 });
+describe('ion-checkbox: indeterminate', () => {
+    it('should have a mixed value for aria-checked', async () => {
+        const page = await newSpecPage({
+            components: [Checkbox],
+            html: `
+        <ion-checkbox indeterminate="true">Checkbox</ion-checkbox>
+      `,
+        });
+        const checkbox = page.body.querySelector('ion-checkbox');
+        expect(checkbox.getAttribute('aria-checked')).toBe('mixed');
+    });
+});

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

@@ -15,12 +15,12 @@ export class Chip {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'eca7cc616c0c9dd2ab28efd41e203fa094880e9e', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        return (h(Host, { key: '886c26b6e7b3e3ca8622a4a0926bdf6dea0a71d4', "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: 'b64c9067132791f73a8434c37d5a335fb2d96f74' }), mode === 'md' && h("ion-ripple-effect", null)));
+            }) }, h("slot", { key: 'd24353e79ac84013758cee1acb1b0f9b2ebb4d67' }), mode === 'md' && h("ion-ripple-effect", { key: 'b69bb3ce3d464251d5e11ba6a5240e4567f72f05' })));
     }
     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: 'c186972dd12d10a4600975c326f20666fed96abf', class: {
+        return (h(Host, { key: '56ecf3b3f2be05d5f179f2d136d4ab05a4525da9', 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: '54cc8bd92f94cfd30d9f3e8e59e0f0dc38abfd63' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '8f1113d39dcb709300ebbeaf81bc092c1dd8da3e' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

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

@@ -336,7 +336,7 @@ export class Content {
         const transitionShadow = mode === 'ios';
         const TagType = isMainContent ? 'main' : 'div';
         this.resize();
-        return (h(Host, { key: '65d85e1f7f85876a76eec79addc4bd9f697a5d84', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e13815c0e6f6095150b112d3a1aaf2f509aa0d0b', class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -344,12 +344,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { key: 'e2ac474a62cbc864772c497469100436f41289ff', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { key: '567a4bc2bcb13adfd987b088f95ac4b20b789f2c', class: {
+            } }, h("div", { key: '8006c4a10d8f7dc83c646246961d018a8097236e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { key: '4dd2f58421493f7a4ca42f8f5d7b85cda8e320ea', 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: '13909f87dd9f49bf1664ad95038499da376b9480' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: '05b56c139e203cfd1e3dd08054e99328e97e9243', name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '37904f8f1d8319156cd901feb21930ef674fe0f7' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: '8f696583903af0548d064dca1a6bae060e127485', name: "fixed" })));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,11 +11,12 @@ import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward
 import { getIonMode } from "../../global/ionic-global";
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from "./utils/comparison";
 import { generateMonths, getDaysOfMonth, getDaysOfWeek, getToday, getMonthColumnData, getDayColumnData, getYearColumnData, getTimeColumnsData, getCombinedDateColumnData, } from "./utils/data";
-import { formatValue, getLocalizedTime, getMonthAndDay, getMonthAndYear } from "./utils/format";
+import { formatValue, getLocalizedDateTime, getLocalizedTime, getMonthAndYear } from "./utils/format";
 import { isLocaleDayPeriodRTL, isMonthFirstLocale, getNumDaysInMonth, getHourCycle } from "./utils/helpers";
 import { calculateHourFromAMPM, convertDataToISO, getClosestValidDate, getEndOfWeek, getNextDay, getNextMonth, getNextWeek, getNextYear, getPreviousDay, getPreviousMonth, getPreviousWeek, getPreviousYear, getStartOfWeek, validateParts, } from "./utils/manipulation";
 import { clampDate, convertToArrayOfNumbers, getPartsFromCalendarDay, parseAmPm, parseDate, parseMaxParts, parseMinParts, } from "./utils/parse";
 import { getCalendarDayState, getHighlightStyles, isDayDisabled, isMonthDisabled, isNextMonthDisabled, isPrevMonthDisabled, } from "./utils/state";
+import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from "./utils/validate";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -650,6 +651,7 @@ export class Datetime {
         this.color = 'primary';
         this.name = this.inputId;
         this.disabled = false;
+        this.formatOptions = undefined;
         this.readonly = false;
         this.isDateEnabled = undefined;
         this.min = undefined;
@@ -677,6 +679,11 @@ export class Datetime {
         this.size = 'fixed';
         this.preferWheel = false;
     }
+    formatOptionsChanged() {
+        const { el, formatOptions, presentation } = this;
+        checkForPresentationFormatMismatch(el, presentation, formatOptions);
+        warnIfTimeZoneProvided(el, formatOptions);
+    }
     disabledChanged() {
         this.emitStyle();
     }
@@ -686,6 +693,10 @@ export class Datetime {
     maxChanged() {
         this.processMaxParts();
     }
+    presentationChanged() {
+        const { el, formatOptions, presentation } = this;
+        checkForPresentationFormatMismatch(el, presentation, formatOptions);
+    }
     get isGridStyle() {
         const { presentation, preferWheel } = this;
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
@@ -788,6 +799,7 @@ export class Datetime {
         this.initializeKeyboardListeners();
     }
     componentDidLoad() {
+        const { el, intersectionTrackerRef } = this;
         /**
          * If a scrollable element is hidden using `display: none`,
          * it will not have a scroll height meaning we cannot scroll elements
@@ -813,14 +825,14 @@ export class Datetime {
                 this.el.classList.add('datetime-ready');
             });
         };
-        const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01 });
+        const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01, root: el });
         /**
          * Use raf to avoid a race condition between the component loading and
          * its display animation starting (such as when shown in a modal). This
          * could cause the datetime to start at a visibility of 0, erroneously
          * triggering the `hiddenIO` observer below.
          */
-        raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(this.el));
+        raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
         /**
          * We need to clean up listeners when the datetime is hidden
          * in a popover/modal so that we can properly scroll containers
@@ -846,8 +858,8 @@ export class Datetime {
                 this.el.classList.remove('datetime-ready');
             });
         };
-        const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 });
-        raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(this.el));
+        const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
+        raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -921,7 +933,7 @@ export class Datetime {
         });
     }
     componentWillLoad() {
-        const { el, highlightedDates, multiple, presentation, preferWheel } = this;
+        const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
         if (multiple) {
             if (presentation !== 'date') {
                 printIonWarning('Multiple date selection is only supported for presentation="date".', el);
@@ -938,6 +950,10 @@ export class Datetime {
                 printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
             }
         }
+        if (formatOptions) {
+            checkForPresentationFormatMismatch(el, presentation, formatOptions);
+            warnIfTimeZoneProvided(el, formatOptions);
+        }
         const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
         const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
         const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
@@ -1445,7 +1461,7 @@ export class Datetime {
         return h("slot", { name: "time-label" }, "Time");
     }
     renderTimeOverlay() {
-        const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
+        const { disabled, hourCycle, isTimePopoverOpen, locale, formatOptions } = this;
         const computedHourCycle = getHourCycle(locale, hourCycle);
         const activePart = this.getActivePartsWithFallback();
         return [
@@ -1465,7 +1481,7 @@ export class Datetime {
                         await popoverRef.onWillDismiss();
                         this.isTimePopoverOpen = false;
                     }
-                } }, getLocalizedTime(locale, activePart, computedHourCycle)),
+                } }, getLocalizedTime(locale, activePart, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time)),
             h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
                     /**
                      * Intersection Observers do not consistently fire between Blink and Webkit
@@ -1488,7 +1504,8 @@ export class Datetime {
         ];
     }
     getHeaderSelectedDateText() {
-        const { activeParts, multiple, titleSelectedDatesFormatter } = this;
+        var _a;
+        const { activeParts, formatOptions, multiple, titleSelectedDatesFormatter } = this;
         const isArray = Array.isArray(activeParts);
         let headerText;
         if (multiple && isArray && activeParts.length !== 1) {
@@ -1504,7 +1521,7 @@ export class Datetime {
         }
         else {
             // for exactly 1 day selected (multiple set or not), show a formatted version of that
-            headerText = getMonthAndDay(this.locale, this.getActivePartsWithFallback());
+            headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { weekday: 'short', month: 'short', day: 'numeric' });
         }
         return headerText;
     }
@@ -1593,7 +1610,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: 'b00545b7bbba3ccf35d53c1eec4f1614fb830c11', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '8490192beb6c5c6064ed8f2a7be2d51846f84f36', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1603,7 +1620,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, this.renderDatetime(mode)));
+            })) }, h("div", { key: 'a2959c07ed871f9004a2f11ab1385a5a7b5737fd', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
@@ -1681,6 +1698,27 @@ export class Datetime {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "formatOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormatOptions",
+                    "resolved": "undefined | { date: DateTimeFormatOptions; time?: DateTimeFormatOptions | undefined; } | { date?: DateTimeFormatOptions | undefined; time: DateTimeFormatOptions; }",
+                    "references": {
+                        "FormatOptions": {
+                            "location": "import",
+                            "path": "./datetime-interface",
+                            "id": "src/components/datetime/datetime-interface.ts::FormatOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Formatting options for dates and times.\nShould include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options)."
+                }
+            },
             "readonly": {
                 "type": "boolean",
                 "mutable": false,
@@ -2376,6 +2414,9 @@ export class Datetime {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "formatOptions",
+                "methodName": "formatOptionsChanged"
+            }, {
                 "propName": "disabled",
                 "methodName": "disabledChanged"
             }, {
@@ -2384,6 +2425,9 @@ export class Datetime {
             }, {
                 "propName": "max",
                 "methodName": "maxChanged"
+            }, {
+                "propName": "presentation",
+                "methodName": "presentationChanged"
             }, {
                 "propName": "yearValues",
                 "methodName": "yearValuesChanged"