voyager-ionic-core 8.0.0-beta.1 → 8.0.0-beta.2

package/dist/cjs/ion-card_5.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ea266398.js');
-const helpers = require('./helpers-b71ca811.js');
+const index = require('./index-2d21d526.js');
+const helpers = require('./helpers-668b3d95.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
 
 const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))));-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:24px;margin-bottom:24px;border-radius:8px;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:-webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1), -webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:0.875rem;-webkit-box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}:host(.ion-activated){-webkit-transform:scale3d(0.97, 0.97, 1);transform:scale3d(0.97, 0.97, 1)}";
 const IonCardIosStyle0 = cardIosCss;
@@ -56,7 +56,7 @@ const Card = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '9e35c114ce466623024b94dd6797118ad027417d', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '20989b44d99554e110bd2b41dca7f989f038dc5b', class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),
@@ -81,7 +81,7 @@ const CardContent = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'd4da147bb0b0b14684b54d37d04ba5a8f7a7d71d', class: {
+        return (index.h(index.Host, { key: 'c2146c75bb2e20dd975b144dd7a99c122d420aab', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`card-content-${mode}`]: true,
@@ -107,11 +107,11 @@ const CardHeader = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '070294064c4b17c941961c9cccf1ae6592b385b6', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '05a406ae897dd0d1564bb9d0e213c5c2c21445fa', class: theme.createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, index.h("slot", { key: 'adac918d5e93bf69b07c5bda329ebf8c719bd623' })));
+            }) }, index.h("slot", { key: '505a74bfb528182bad69d519b848ac2060f4552f' })));
     }
 };
 CardHeader.style = {
@@ -132,10 +132,10 @@ const CardSubtitle = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'ae115cf349cd13f88d20b1fbab6b8a813a87b925', role: "heading", "aria-level": "3", class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '4494e715bdff695b17df995bca3c9924cc9dec6c', role: "heading", "aria-level": "3", class: theme.createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, index.h("slot", { key: 'f5dd779b34b5c5c541cbbe56cc8a877e50513252' })));
+            }) }, index.h("slot", { key: '717e7f2b865b7bb6ae570922eb740c4ae731d85d' })));
     }
 };
 CardSubtitle.style = {
@@ -156,10 +156,10 @@ const CardTitle = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '432d7bf971fda63c30c748986143ec2a8be9e4af', role: "heading", "aria-level": "2", class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '1f26cd9bd47f87540dfaff6ac8150a80bcf14475', role: "heading", "aria-level": "2", class: theme.createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, index.h("slot", { key: '3c5dcf6ac1bf981c6c0488f0027765269c80db5a' })));
+            }) }, index.h("slot", { key: 'b2d51db6dc9284e17cb900af557b36ef866cdc3c' })));
     }
 };
 CardTitle.style = {

package/dist/cjs/ion-checkbox.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ea266398.js');
-const helpers = require('./helpers-b71ca811.js');
+const index = require('./index-2d21d526.js');
+const helpers = require('./helpers-668b3d95.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
 
 const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){width:100%;height:100%}:host([slot=start]),:host([slot=end]){width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}";
 const IonCheckboxIosStyle0 = checkboxIosCss;
@@ -78,7 +78,7 @@ const Checkbox = class {
         const mode = ionicGlobal.getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (index.h(index.Host, { key: 'be30606f48a3adf62eddc68b7d7f908d0c46f96d', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '93550068abf4a5103a5d7f06e88e8d004382c203', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: theme.createColorClasses(color, {
                 [mode]: true,
                 'in-item': theme.hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -88,10 +88,10 @@ const Checkbox = class {
                 [`checkbox-justify-${justify}`]: true,
                 [`checkbox-alignment-${alignment}`]: true,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, index.h("label", { key: '96c3f85a0ae6970743f6965d614033426cf2b163', class: "checkbox-wrapper" }, index.h("input", Object.assign({ key: 'd998089218bcb6065228095e38af936eebfa3780', 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)), index.h("div", { key: 'f2374957e47eec899aa2ca49ede4cfdf8397fc18', class: {
+            }), onClick: this.onClick }, index.h("label", { key: '43c0a59f152c8b836fcfcefd29db16962568b1e1', class: "checkbox-wrapper" }, index.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)), index.h("div", { key: 'a7454e4c99eb6ea3fe4db171c0071b803949c4d0', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, index.h("slot", { key: '3bd6bc289c26e96cc0b4a8b39154fec1d02ba426' })), index.h("div", { key: '30397663226d628859d3814f9dc53ee4aad57de5', class: "native-wrapper" }, index.h("svg", { key: '53374f787677adfdb3b693ead3f8d86412127c10', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label" }, index.h("slot", { key: '41741533b49c0281d8ff496c7b5eeccd944d2b2a' })), index.h("div", { key: 'e3b43df785386c2cd87fb3a38777c34a7d9b32e0', class: "native-wrapper" }, index.h("svg", { key: 'd3cfb07ec4c7b3e45b9cf5a049fcc841fdb4e2c3', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (index.h("path", { d: "M6 12L18 12", part: "mark" })) : (index.h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

package/dist/cjs/ion-chip.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ea266398.js');
+const index = require('./index-2d21d526.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
 
 const chipIosCss = ":host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.87);border-radius:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px;margin-top:4px;margin-bottom:4px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;min-height:32px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);cursor:pointer;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.chip-disabled){cursor:default;opacity:0.4;pointer-events:none}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.08);color:var(--ion-color-shade)}:host(.ion-color:focus){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.ion-color.ion-activated){background:rgba(var(--ion-color-base-rgb), 0.16)}:host(.chip-outline){border-width:1px;border-style:solid}:host(.chip-outline){border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32);background:transparent}:host(.chip-outline.ion-color){border-color:rgba(var(--ion-color-base-rgb), 0.32)}:host(.chip-outline:not(.ion-color):focus){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}:host(.chip-outline.ion-activated:not(.ion-color)){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)}::slotted(ion-icon){font-size:1.4285714286em}:host(:not(.ion-color)) ::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)}::slotted(ion-icon:first-child){-webkit-margin-start:-4px;margin-inline-start:-4px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-icon:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-4px;margin-inline-end:-4px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar){-ms-flex-negative:0;flex-shrink:0;width:1.7142857143em;height:1.7142857143em}::slotted(ion-avatar:first-child){-webkit-margin-start:-8px;margin-inline-start:-8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-8px;margin-inline-end:-8px;margin-top:-4px;margin-bottom:-4px}:host(:focus){outline:none}:host(:focus){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-activated){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}@media (any-hover: hover){:host(:hover){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-color:hover){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.chip-outline:not(.ion-color):hover){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}}:host{font-size:clamp(13px, 0.875rem, 22px)}";
 const IonChipIosStyle0 = chipIosCss;
@@ -24,12 +24,12 @@ const Chip = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '4c8c83eefc650c00f2c515937df63094f9468bbd', "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '6c6497d9397407443784f1b79df0b58d6d24eed2', "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, index.h("slot", { key: '5a94dafd29f2ea7255ba2d4fa173f5eff92146aa' }), mode === 'md' && index.h("ion-ripple-effect", null)));
+            }) }, index.h("slot", { key: 'a4d431e3b066420890fcaa30bbc99f1240dff11c' }), mode === 'md' && index.h("ion-ripple-effect", null)));
     }
 };
 Chip.style = {

package/dist/cjs/ion-col_3.cjs.entry.js

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ea266398.js');
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
+const index = require('./index-2d21d526.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
 
 const SIZE_TO_MEDIA = {
     xs: '(min-width: 0px)',
@@ -140,9 +140,9 @@ const Col = class {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '8bb465c85b64001d6613e8b38cd4f4fd2b4c4a90', class: {
+        return (index.h(index.Host, { key: 'af31133e071846ac6609a46eabe59cc481dafdb7', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, index.h("slot", { key: 'fe9f9ce55c86771638413457a0d5dcd9dce29217' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, index.h("slot", { key: 'd11a95925819a0e2dc69966b7893f0d3efc62eb9' })));
     }
 };
 Col.style = IonColStyle0;
@@ -157,10 +157,10 @@ const Grid = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '6d46d3693c8af7e805cb438dd654485a152e7e40', class: {
+        return (index.h(index.Host, { key: 'd240212314811650765ac22936da13b0a92680b8', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, index.h("slot", { key: '7f57ee35524880aeb96d081dd8125460156196b3' })));
+            } }, index.h("slot", { key: 'd0b55fd347db2b2f92805975c61da093c762c26d' })));
     }
 };
 Grid.style = IonGridStyle0;
@@ -173,7 +173,7 @@ const Row = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e52c499804f7bebc1c4ab8fb69ef1b452eae58c1', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
+        return (index.h(index.Host, { key: '8b54835ea837e25c278ffa3e298238e92b095ccc', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: 'cb77d85c8d02fdee29a72b58f3091db8daeaf3b2' })));
     }
 };
 Row.style = IonRowStyle0;

package/dist/cjs/ion-datetime-button.cjs.entry.js

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ea266398.js');
-const helpers = require('./helpers-b71ca811.js');
+const index = require('./index-2d21d526.js');
+const helpers = require('./helpers-668b3d95.js');
 const index$1 = require('./index-5915f9b3.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
-const data = require('./data-e2bf21de.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
+const data = require('./data-21dc0f81.js');
 
 const datetimeButtonIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}:host button{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:7px;padding-bottom:7px}:host button.ion-activated{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
 const IonDatetimeButtonIosStyle0 = datetimeButtonIosCss;
@@ -44,11 +44,12 @@ const DatetimeButton = class {
          * to the locale specified on ion-datetime.
          */
         this.setDateTimeText = () => {
+            var _a, _b, _c, _d, _e;
             const { datetimeEl, datetimePresentation } = this;
             if (!datetimeEl) {
                 return;
             }
-            const { value, locale, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
              * Both ion-datetime and ion-datetime-button default
@@ -71,8 +72,8 @@ const DatetimeButton = class {
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = data.getMonthDayAndYear(locale, firstParsedDatetime);
-                    const timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+                    const dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' });
+                    const timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     if (preferWheel) {
                         this.dateText = `${dateText} ${timeText}`;
                     }
@@ -95,20 +96,20 @@ const DatetimeButton = class {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = data.getMonthDayAndYear(locale, firstParsedDatetime);
+                        this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'short', day: 'numeric', year: 'numeric' });
                     }
                     break;
                 case 'time':
-                    this.timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+                    this.timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     break;
                 case 'month-year':
-                    this.dateText = data.getMonthAndYear(locale, firstParsedDatetime);
+                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _c !== void 0 ? _c : { month: 'long', year: 'numeric' });
                     break;
                 case 'month':
-                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, { month: 'long' });
+                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { month: 'long' });
                     break;
                 case 'year':
-                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, { year: 'numeric' });
+                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
                     break;
             }
         };
@@ -337,7 +338,7 @@ const DatetimeButton = class {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'cff9c4cbabf76a415b3785e9fa6cc682fddcec54', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '49854fc8a4b9875194c1537d0b3b59459e39606f', class: theme.createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,

package/dist/cjs/ion-datetime_3.cjs.entry.js

@@ -5,22 +5,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-ea266398.js');
+const index$1 = require('./index-2d21d526.js');
 const focusVisible = require('./focus-visible-7a0ce04f.js');
-const helpers = require('./helpers-b71ca811.js');
+const helpers = require('./helpers-668b3d95.js');
 const index = require('./index-5915f9b3.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
 const index$2 = require('./index-f52c6d38.js');
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
-const data = require('./data-e2bf21de.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
+const data = require('./data-21dc0f81.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-3d02b54f.js');
-const animation = require('./animation-4ad55058.js');
+const overlays = require('./overlays-44b8d0e0.js');
+const animation = require('./animation-3e7bb91e.js');
 const haptic = require('./haptic-b882e0bb.js');
 require('./index-c8d52405.js');
-require('./hardware-back-button-4cb049f1.js');
-require('./framework-delegate-53817ef1.js');
+require('./hardware-back-button-1c67a5a2.js');
+require('./framework-delegate-0499d444.js');
 require('./gesture-controller-9436f482.js');
 require('./capacitor-c04564bf.js');
 
@@ -191,6 +191,48 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
     return undefined;
 };
 
+/**
+ * If a time zone is provided in the format options, the rendered text could
+ * differ from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+const warnIfTimeZoneProvided = (el, formatOptions) => {
+    var _a, _b, _c, _d;
+    if (((_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _a === void 0 ? void 0 : _a.timeZone) ||
+        ((_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _b === void 0 ? void 0 : _b.timeZoneName) ||
+        ((_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _c === void 0 ? void 0 : _c.timeZone) ||
+        ((_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _d === void 0 ? void 0 : _d.timeZoneName)) {
+        index.printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
+    }
+};
+const checkForPresentationFormatMismatch = (el, presentation, formatOptions) => {
+    // formatOptions is not required
+    if (!formatOptions)
+        return;
+    // If formatOptions is provided, the date and/or time objects are required, depending on the presentation
+    switch (presentation) {
+        case 'date':
+        case 'month-year':
+        case 'month':
+        case 'year':
+            if (formatOptions.date === undefined) {
+                index.printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`, el);
+            }
+            break;
+        case 'time':
+            if (formatOptions.time === undefined) {
+                index.printIonWarning(`Datetime: The 'time' presentation requires a time object in formatOptions.`, el);
+            }
+            break;
+        case 'date-time':
+        case 'time-date':
+            if (formatOptions.date === undefined && formatOptions.time === undefined) {
+                index.printIonWarning(`Datetime: The '${presentation}' presentation requires either a date or time object (or both) in formatOptions.`, el);
+            }
+            break;
+    }
+};
+
 const datetimeIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}.calendar-month-year-toggle.ion-focused::after{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2);font-size:min(1.375rem, 35.2px)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons{width:100%}";
 const IonDatetimeIosStyle0 = datetimeIosCss;
 
@@ -815,6 +857,7 @@ const Datetime = class {
         this.color = 'primary';
         this.name = this.inputId;
         this.disabled = false;
+        this.formatOptions = undefined;
         this.readonly = false;
         this.isDateEnabled = undefined;
         this.min = undefined;
@@ -842,6 +885,11 @@ const Datetime = class {
         this.size = 'fixed';
         this.preferWheel = false;
     }
+    formatOptionsChanged() {
+        const { el, formatOptions, presentation } = this;
+        checkForPresentationFormatMismatch(el, presentation, formatOptions);
+        warnIfTimeZoneProvided(el, formatOptions);
+    }
     disabledChanged() {
         this.emitStyle();
     }
@@ -851,6 +899,10 @@ const Datetime = class {
     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';
@@ -1086,7 +1138,7 @@ const Datetime = class {
         });
     }
     componentWillLoad() {
-        const { el, highlightedDates, multiple, presentation, preferWheel } = this;
+        const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
         if (multiple) {
             if (presentation !== 'date') {
                 index.printIonWarning('Multiple date selection is only supported for presentation="date".', el);
@@ -1103,6 +1155,10 @@ const Datetime = class {
                 index.printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
             }
         }
+        if (formatOptions) {
+            checkForPresentationFormatMismatch(el, presentation, formatOptions);
+            warnIfTimeZoneProvided(el, formatOptions);
+        }
         const hourValues = (this.parsedHourValues = data.convertToArrayOfNumbers(this.hourValues));
         const minuteValues = (this.parsedMinuteValues = data.convertToArrayOfNumbers(this.minuteValues));
         const monthValues = (this.parsedMonthValues = data.convertToArrayOfNumbers(this.monthValues));
@@ -1556,7 +1612,7 @@ const Datetime = class {
         return index$1.h("slot", { name: "time-label" }, "Time");
     }
     renderTimeOverlay() {
-        const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
+        const { disabled, hourCycle, isTimePopoverOpen, locale, formatOptions } = this;
         const computedHourCycle = data.getHourCycle(locale, hourCycle);
         const activePart = this.getActivePartsWithFallback();
         return [
@@ -1576,7 +1632,7 @@ const Datetime = class {
                         await popoverRef.onWillDismiss();
                         this.isTimePopoverOpen = false;
                     }
-                } }, data.getLocalizedTime(locale, activePart, computedHourCycle)),
+                } }, data.getLocalizedTime(locale, activePart, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time)),
             index$1.h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
                     /**
                      * Intersection Observers do not consistently fire between Blink and Webkit
@@ -1599,7 +1655,8 @@ const Datetime = class {
         ];
     }
     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) {
@@ -1615,7 +1672,7 @@ const Datetime = class {
         }
         else {
             // for exactly 1 day selected (multiple set or not), show a formatted version of that
-            headerText = data.getMonthAndDay(this.locale, this.getActivePartsWithFallback());
+            headerText = data.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;
     }
@@ -1704,7 +1761,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
-        return (index$1.h(index$1.Host, { key: '2e5ff577327018558a145cff23f03661c2d19c41', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
+        return (index$1.h(index$1.Host, { key: '1dac1c5d908ba080b2ed4cb9c02fd346ca8e8fa5', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1718,9 +1775,11 @@ const Datetime = class {
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {
+        "formatOptions": ["formatOptionsChanged"],
         "disabled": ["disabledChanged"],
         "min": ["minChanged"],
         "max": ["maxChanged"],
+        "presentation": ["presentationChanged"],
         "yearValues": ["yearValuesChanged"],
         "monthValues": ["monthValuesChanged"],
         "dayValues": ["dayValuesChanged"],
@@ -1964,11 +2023,11 @@ const Picker = class {
     render() {
         const { htmlAttributes } = this;
         const mode = ionicGlobal.getIonMode(this);
-        return (index$1.h(index$1.Host, Object.assign({ key: '1cf2f8a25a3eca7ac59eff969803c85540f102fc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (index$1.h(index$1.Host, Object.assign({ key: '4144eef6498c66a82f3873ae5c8e55d2ee1d381e', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index$1.h("ion-backdrop", { key: '3a70c7c6e0457afda2e9ef4619cb253b583b7805', visible: this.showBackdrop, tappable: this.backdropDismiss }), index$1.h("div", { key: '4c90cf7dfeb9d2bdb5e947739864dbc2d1e327e0', tabindex: "0" }), index$1.h("div", { key: '050098ced341fd86bfcd72595b1f7a52c3b01b46', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index$1.h("div", { key: 'b0d9420fb053d0c71af04c88224a38f804fd99ba', class: "picker-toolbar" }, this.buttons.map((b) => (index$1.h("div", { class: buttonWrapperClass(b) }, index$1.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index$1.h("div", { key: '82cd2788c394079cb8843c240c17e3629eef0953', class: "picker-columns" }, index$1.h("div", { key: '34d2ce59e88b5967e52fe8077ef3a151c6ce38e5', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index$1.h("ion-picker-legacy-column", { col: c })), index$1.h("div", { key: 'b604b101bc0006efc246aea9320d9f44419c531f', class: "picker-below-highlight" }))), index$1.h("div", { key: '70437d735b009386b4f5ae250b555c039c366183', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index$1.h("ion-backdrop", { key: '4344a38bea27537a0f907d929ae3e88d16e751a5', visible: this.showBackdrop, tappable: this.backdropDismiss }), index$1.h("div", { key: 'a9634e85c6feb73e298407dadb02c1260e2f2f9b', tabindex: "0" }), index$1.h("div", { key: '871bb60dbb57c7b0c357491d84da97a2b3900071', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index$1.h("div", { key: '92e0d584c0d5e0c365af7d48781181248718e17e', class: "picker-toolbar" }, this.buttons.map((b) => (index$1.h("div", { class: buttonWrapperClass(b) }, index$1.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index$1.h("div", { key: '76c9024a822a96a9f9cd0e121629e5c02ba757e3', class: "picker-columns" }, index$1.h("div", { key: 'd1326bb793aedff0a5fc16eb2ddd5d5152210838', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index$1.h("ion-picker-legacy-column", { col: c })), index$1.h("div", { key: '1a9273ff23a5fc42003929dbdc267a29587cc5c6', class: "picker-below-highlight" }))), index$1.h("div", { key: 'cbc1280639e26e1b50e8dc9b6e640b357eb22c33', tabindex: "0" })));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -2325,9 +2384,9 @@ const PickerColumnCmp = class {
     render() {
         const col = this.col;
         const mode = ionicGlobal.getIonMode(this);
-        return (index$1.h(index$1.Host, { key: '0337ac8379be177501b8d61f0ac0f68ecbb8344d', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, theme.getClassMap(col.cssClass)), style: {
+        return (index$1.h(index$1.Host, { key: 'b7342219fdfcf106d905e3badefe021fd46ad12b', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, theme.getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (index$1.h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), index$1.h("div", { key: '013ba8ea1c2fe4fe717386b9cc87484913c234f7', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (index$1.h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (index$1.h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (index$1.h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), index$1.h("div", { key: 'c87f5f3f1efca050c20bcd697aae905f0f370afc', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (index$1.h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (index$1.h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-fab_3.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ea266398.js');
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
-const helpers = require('./helpers-b71ca811.js');
+const index = require('./index-2d21d526.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
+const helpers = require('./helpers-668b3d95.js');
 const theme = require('./theme-d1c573d2.js');
 const index$1 = require('./index-f52c6d38.js');
 
@@ -59,12 +59,12 @@ const Fab = class {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '295e4b79449ff102d54b4a415487a26144a47839', class: {
+        return (index.h(index.Host, { key: '8d10537e35f518b03a840de9a0fbe7973abc4290', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, index.h("slot", { key: 'a41871eb5d0a8c6315ba7012cef0e4dfc1126c9d' })));
+            } }, index.h("slot", { key: '77331bf85f939b20ff14886f0a8b0f13c5ca392a' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -133,7 +133,7 @@ const FabButton = class {
                 rel: this.rel,
                 target: this.target,
             };
-        return (index.h(index.Host, { key: 'bfc553a86d54b665039512e93c83865232431e61', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'bc00fdb39e41787a3b4c53aededfc32485ee9211', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: theme.createColorClasses(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -144,7 +144,7 @@ const FabButton = class {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, index.h(TagType, Object.assign({ key: '08821f166159c1c0c08a936f8db0cc5b8c121b6b' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => theme.openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), index.h("ion-icon", { key: '5b369ce677bb08c2972489be8abad035f2074fee', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), index.h("span", { key: '6b61a3242e6d6ec49e157fe6c7a64b8445e6de3b', class: "button-inner" }, index.h("slot", { key: 'f6450e5caabb8becd48425547246b6edf96eb4f8' })), mode === 'md' && index.h("ion-ripple-effect", null))));
+            }) }, index.h(TagType, Object.assign({ key: 'fe13b3e19638177b516e6e530e6ff0b745856481' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => theme.openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), index.h("ion-icon", { key: '210e4a3cd39e0ff6fc300eeaafa3a9330a9dc73f', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), index.h("span", { key: 'c6547612ff58a1e46bae2e91302b6b86a49d6429', class: "button-inner" }, index.h("slot", { key: '48abc7e6a27391f2595eeddf9abd8d16c0a86630' })), mode === 'md' && index.h("ion-ripple-effect", null))));
     }
     get el() { return index.getElement(this); }
 };
@@ -172,11 +172,11 @@ const FabList = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '8eca9c8c4f7febe3e0b44604a3854480f5f9e697', class: {
+        return (index.h(index.Host, { key: 'ccce297302fa14d6ce0646d4bb14a74e71d68cb9', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, index.h("slot", { key: '3be8055bbf0dbb928d712e950f6184bd173a2d1e' })));
+            } }, index.h("slot", { key: '9007d178411ea80db29d2034473e3f9d61157fa1' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-img.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ea266398.js');
-const helpers = require('./helpers-b71ca811.js');
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
+const index = require('./index-2d21d526.js');
+const helpers = require('./helpers-668b3d95.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
 
 const imgCss = ":host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}";
 const IonImgStyle0 = imgCss;
@@ -80,7 +80,7 @@ const Img = class {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (index.h(index.Host, { key: 'ff933e2b7e586c71bc695ad9e1475c2ef48a1632', class: ionicGlobal.getIonMode(this) }, index.h("img", { key: '60fea471b6665abe92678c7c9ab15c3e12195582', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (index.h(index.Host, { key: '167143c9e996a0b2f78841e6c427c57a322189d7', class: ionicGlobal.getIonMode(this) }, index.h("img", { key: 'e840d04e5d0a939cd4c2d19f915a3fee394419b5', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {