@ionic/core 7.3.2-dev.11693321763.15a54694 → 7.3.2-dev.11693507138.1f9ed625

package/components/checkbox.js

@@ -8,9 +8,9 @@ import { p as printIonWarning } from './index6.js';
 import { c as createColorClasses, h as hostContext } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
 
-const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--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]:not(.legacy-checkbox)),:host([slot=end]:not(.legacy-checkbox)){width:auto}:host(.legacy-checkbox){width:var(--size);height:var(--size)}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}:host(.legacy-checkbox) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-checkbox) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-checkbox) label{left:0}:host-context([dir=rtl]):host(.legacy-checkbox) label,:host-context([dir=rtl]).legacy-checkbox label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-checkbox) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-checkbox) label::-moz-focus-inner{border:0}.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{pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper{margin-top:10px;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;-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}:host(.legacy-checkbox) .checkbox-icon{display:block;width:100%;height:100%}:host(:not(.legacy-checkbox)) .checkbox-icon{width:var(--size);height:var(--size)}.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-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-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:1px;--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:26px}:host(.checkbox-disabled){opacity:0.3}:host(.in-item.legacy-checkbox){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:9px;display:block;position:static}:host(.in-item.legacy-checkbox[slot=start]){-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:8px;margin-bottom:8px}";
+const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--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]:not(.legacy-checkbox)),:host([slot=end]:not(.legacy-checkbox)){width:auto}:host(.legacy-checkbox){width:var(--size);height:var(--size)}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}:host(.legacy-checkbox) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-checkbox) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-checkbox) label{left:0}:host-context([dir=rtl]):host(.legacy-checkbox) label,:host-context([dir=rtl]).legacy-checkbox label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-checkbox) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-checkbox) label::-moz-focus-inner{border:0}.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{pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-checkbox)) .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;-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}:host(.legacy-checkbox) .checkbox-icon{display:block;width:100%;height:100%}:host(:not(.legacy-checkbox)) .checkbox-icon{width:var(--size);height:var(--size)}.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{margin-left:0;margin-right:0;margin-bottom:16px}: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:1px;--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:26px}:host(.checkbox-disabled){opacity:0.3}:host(.in-item.legacy-checkbox){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:9px;display:block;position:static}:host(.in-item.legacy-checkbox[slot=start]){-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:8px;margin-bottom:8px}";
 
-const checkboxMdCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--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]:not(.legacy-checkbox)),:host([slot=end]:not(.legacy-checkbox)){width:auto}:host(.legacy-checkbox){width:var(--size);height:var(--size)}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}:host(.legacy-checkbox) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-checkbox) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-checkbox) label{left:0}:host-context([dir=rtl]):host(.legacy-checkbox) label,:host-context([dir=rtl]).legacy-checkbox label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-checkbox) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-checkbox) label::-moz-focus-inner{border:0}.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{pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper{margin-top:10px;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;-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}:host(.legacy-checkbox) .checkbox-icon{display:block;width:100%;height:100%}:host(:not(.legacy-checkbox)) .checkbox-icon{width:var(--size);height:var(--size)}.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-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-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:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.legacy-checkbox.checkbox-disabled),:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}:host(.in-item.legacy-checkbox){margin-left:0;margin-right:0;margin-top:18px;margin-bottom:18px;display:block;position:static}:host(.in-item.legacy-checkbox[slot=start]){-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px;margin-top:18px;margin-bottom:18px}";
+const checkboxMdCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--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]:not(.legacy-checkbox)),:host([slot=end]:not(.legacy-checkbox)){width:auto}:host(.legacy-checkbox){width:var(--size);height:var(--size)}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}:host(.legacy-checkbox) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-checkbox) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-checkbox) label{left:0}:host-context([dir=rtl]):host(.legacy-checkbox) label,:host-context([dir=rtl]).legacy-checkbox label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-checkbox) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-checkbox) label::-moz-focus-inner{border:0}.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{pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-checkbox)) .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;-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}:host(.legacy-checkbox) .checkbox-icon{display:block;width:100%;height:100%}:host(:not(.legacy-checkbox)) .checkbox-icon{width:var(--size);height:var(--size)}.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{margin-left:0;margin-right:0;margin-bottom:16px}: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:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.legacy-checkbox.checkbox-disabled),:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}:host(.in-item.legacy-checkbox){margin-left:0;margin-right:0;margin-top:18px;margin-bottom:18px;display:block;position:static}:host(.in-item.legacy-checkbox[slot=start]){-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px;margin-top:18px;margin-bottom:18px}";
 
 const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLElement {
   constructor() {
@@ -59,6 +59,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
     this.value = 'on';
     this.labelPlacement = 'start';
     this.justify = 'space-between';
+    this.alignment = 'center';
     this.legacy = undefined;
   }
   // TODO(FW-3100): remove this
@@ -96,7 +97,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
     return legacyFormController.hasLegacyControl() ? this.renderLegacyCheckbox() : this.renderCheckbox();
   }
   renderCheckbox() {
-    const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, } = this;
+    const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
@@ -108,6 +109,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         'checkbox-indeterminate': indeterminate,
         interactive: true,
         [`checkbox-justify-${justify}`]: true,
+        [`checkbox-alignment-${alignment}`]: true,
         [`checkbox-label-placement-${labelPlacement}`]: true,
       }) }, h("label", { class: "checkbox-wrapper" }, h("input", Object.assign({ type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { class: {
         'label-text-wrapper': true,
@@ -169,6 +171,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     "value": [8],
     "labelPlacement": [1, "label-placement"],
     "justify": [1],
+    "alignment": [1],
     "legacy": [4]
   }]);
 let checkboxIds = 0;

package/components/data.js

@@ -185,7 +185,22 @@ const getPartsFromCalendarDay = (el) => {
 };
 function parseDate(val) {
   if (Array.isArray(val)) {
-    return val.map((valStr) => parseDate(valStr));
+    const parsedArray = [];
+    for (const valStr of val) {
+      const parsedVal = parseDate(valStr);
+      /**
+       * If any of the values weren't parsed correctly, consider
+       * the entire batch incorrect. This simplifies the type
+       * signatures by having "undefined" be a general error case
+       * instead of returning (Datetime | undefined)[], which is
+       * harder for TS to perform type narrowing on.
+       */
+      if (!parsedVal) {
+        return undefined;
+      }
+      parsedArray.push(parsedVal);
+    }
+    return parsedArray;
   }
   // manually parse IS0 cuz Date.parse cannot be trusted
   // ISO 8601 format: 1994-12-15T13:47:20Z
@@ -205,6 +220,7 @@ function parseDate(val) {
   }
   if (parse === null) {
     // wasn't able to parse the ISO datetime
+    printIonWarning(`Unable to parse date string: ${val}. Please provide a valid ISO 8601 datetime string.`);
     return undefined;
   }
   // ensure all the parse values exist with at least 0
@@ -1225,12 +1241,20 @@ const generateTime = (refParts, hourCycle = 'h12', minParts, maxParts, hourValue
  * Given DatetimeParts, generate the previous,
  * current, and and next months.
  */
-const generateMonths = (refParts) => {
-  return [
-    getPreviousMonth(refParts),
-    { month: refParts.month, year: refParts.year, day: refParts.day },
-    getNextMonth(refParts),
-  ];
+const generateMonths = (refParts, forcedDate) => {
+  const current = { month: refParts.month, year: refParts.year, day: refParts.day };
+  /**
+   * If we're forcing a month to appear, and it's different from the current month,
+   * ensure it appears by replacing the next or previous month as appropriate.
+   */
+  if (forcedDate !== undefined && (refParts.month !== forcedDate.month || refParts.year !== forcedDate.year)) {
+    const forced = { month: forcedDate.month, year: forcedDate.year, day: forcedDate.day };
+    const forcedMonthIsBefore = isBefore(forced, current);
+    return forcedMonthIsBefore
+      ? [forced, current, getNextMonth(refParts)]
+      : [getPreviousMonth(refParts), current, forced];
+  }
+  return [getPreviousMonth(refParts), current, getNextMonth(refParts)];
 };
 const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, formatOptions = {
   month: 'long',

package/components/framework-delegate.js

@@ -39,7 +39,6 @@ const CoreDelegate = () => {
   const attachViewToDom = async (parentElement, userComponent, userComponentProps = {}, cssClasses = []) => {
     var _a, _b;
     BaseComponent = parentElement;
-    let ChildComponent;
     /**
      * If passing in a component via the `component` props
      * we need to append it inside of our overlay component.
@@ -66,7 +65,6 @@ const CoreDelegate = () => {
        * inside of the overlay component.
        */
       BaseComponent.appendChild(el);
-      ChildComponent = el;
       await new Promise((resolve) => componentOnReady(el, resolve));
     }
     else if (BaseComponent.children.length > 0 &&
@@ -75,7 +73,7 @@ const CoreDelegate = () => {
        * The delegate host wrapper el is only needed for modals and popovers
        * because they allow the dev to provide custom content to the overlay.
        */
-      const root = (ChildComponent = BaseComponent.children[0]);
+      const root = BaseComponent.children[0];
       if (!root.classList.contains('ion-delegate-host')) {
         /**
          * If the root element is not a delegate host, it means
@@ -90,12 +88,6 @@ const CoreDelegate = () => {
         el.append(...BaseComponent.children);
         // Append the new parent element to the original parent element.
         BaseComponent.appendChild(el);
-        /**
-         * Update the ChildComponent to be the
-         * newly created div in the event that one
-         * does not already exist.
-         */
-        ChildComponent = el;
       }
     }
     /**
@@ -111,18 +103,7 @@ const CoreDelegate = () => {
     Reference = document.createComment('ionic teleport');
     BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
     app.appendChild(BaseComponent);
-    /**
-     * We return the child component rather than the overlay
-     * reference itself since modal and popover will
-     * use this to wait for any Ionic components in the child view
-     * to be ready (i.e. componentOnReady) when using the
-     * lazy loaded component bundle.
-     *
-     * However, we fall back to returning BaseComponent
-     * in the event that a modal or popover is presented
-     * with no child content.
-     */
-    return ChildComponent !== null && ChildComponent !== void 0 ? ChildComponent : BaseComponent;
+    return BaseComponent;
   };
   const removeViewFromDom = () => {
     /**

package/components/ion-datetime-button.js

@@ -52,6 +52,9 @@ const DatetimeButton = /*@__PURE__*/ proxyCustomElement(class DatetimeButton ext
        * to today's date and time if no value is set.
        */
       const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : [getToday()]);
+      if (!parsedDatetimes) {
+        return;
+      }
       /**
        * If developers incorrectly use multiple="true"
        * with non "date" datetimes, then just select

package/components/ion-datetime.js

@@ -207,11 +207,6 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
     this.ionRender = createEvent(this, "ionRender", 7);
     this.inputId = `ion-dt-${datetimeIds++}`;
     this.prevPresentation = null;
-    /**
-     * Duplicate reference to `activeParts` that does not trigger a re-render of the component.
-     * Allows caching an instance of the `activeParts` in between render cycles.
-     */
-    this.activePartsClone = [];
     this.warnIfIncorrectValueUsage = () => {
       const { multiple, value } = this;
       if (!multiple && Array.isArray(value)) {
@@ -239,9 +234,9 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
      * data. This should be used when rendering an
      * interface in an environment where the `value`
      * may not be set. This function works
-     * by returning the first selected date in
-     * "activePartsClone" and then falling back to
-     * defaultParts if no active date is selected.
+     * by returning the first selected date and then
+     * falling back to defaultParts if no active date
+     * is selected.
      */
     this.getActivePartsWithFallback = () => {
       var _a;
@@ -249,8 +244,8 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
       return (_a = this.getActivePart()) !== null && _a !== void 0 ? _a : defaultParts;
     };
     this.getActivePart = () => {
-      const { activePartsClone } = this;
-      return Array.isArray(activePartsClone) ? activePartsClone[0] : activePartsClone;
+      const { activeParts } = this;
+      return Array.isArray(activeParts) ? activeParts[0] : activeParts;
     };
     this.closeParentOverlay = () => {
       const popoverOrModal = this.el.closest('ion-modal, ion-popover');
@@ -262,7 +257,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
       this.workingParts = Object.assign({}, parts);
     };
     this.setActiveParts = (parts, removeDate = false) => {
-      const { multiple, minParts, maxParts, activePartsClone } = this;
+      const { multiple, minParts, maxParts, activeParts } = this;
       /**
        * When setting the active parts, it is possible
        * to set invalid data. For example,
@@ -276,16 +271,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
       const validatedParts = validateParts(parts, minParts, maxParts);
       this.setWorkingParts(validatedParts);
       if (multiple) {
-        /**
-         * We read from activePartsClone here because valueChanged() only updates that,
-         * so it's the more reliable source of truth. If we read from activeParts, then
-         * if you click July 1, manually set the value to July 2, and then click July 3,
-         * the new value would be [July 1, July 3], ignoring the value set.
-         *
-         * We can then pass the new value to activeParts (rather than activePartsClone)
-         * since the clone will be updated automatically by activePartsChanged().
-         */
-        const activePartsArray = Array.isArray(activePartsClone) ? activePartsClone : [activePartsClone];
+        const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
         if (removeDate) {
           this.activeParts = activePartsArray.filter((p) => !isSameDay(p, validatedParts));
         }
@@ -502,6 +488,19 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
           const monthBox = month.getBoundingClientRect();
           if (Math.abs(monthBox.x - box.x) > 2)
             return;
+          /**
+           * If we're force-rendering a month, assume we've
+           * scrolled to that and return it.
+           *
+           * If forceRenderDate is ever used in a context where the
+           * forced month is not immediately auto-scrolled to, this
+           * should be updated to also check whether `month` has the
+           * same month and year as the forced date.
+           */
+          const { forceRenderDate } = this;
+          if (forceRenderDate !== undefined) {
+            return { month: forceRenderDate.month, year: forceRenderDate.year, day: forceRenderDate.day };
+          }
           /**
            * From here, we can determine if the start
            * month or the end month was scrolled into view.
@@ -556,6 +555,9 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
             this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
             calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
             calendarBodyRef.style.removeProperty('overflow');
+            if (this.resolveForceDateScrolling) {
+              this.resolveForceDateScrolling();
+            }
           });
         };
         /**
@@ -610,10 +612,17 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
       }
     };
     this.processValue = (value) => {
-      const hasValue = value !== null && value !== undefined;
+      const hasValue = value !== null && value !== undefined && (!Array.isArray(value) || value.length > 0);
       const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
-      const { minParts, maxParts } = this;
+      const { minParts, maxParts, workingParts, el } = this;
       this.warnIfIncorrectValueUsage();
+      /**
+       * Return early if the value wasn't parsed correctly, such as
+       * if an improperly formatted date string was provided.
+       */
+      if (!valueToProcess) {
+        return;
+      }
       /**
        * Datetime should only warn of out of bounds values
        * if set by the user. If the `value` is undefined,
@@ -631,16 +640,9 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
        * that the values don't necessarily have to be in order.
        */
       const singleValue = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
-      const { month, day, year, hour, minute } = clampDate(singleValue, minParts, maxParts);
+      const targetValue = clampDate(singleValue, minParts, maxParts);
+      const { month, day, year, hour, minute } = targetValue;
       const ampm = parseAmPm(hour);
-      this.setWorkingParts({
-        month,
-        day,
-        year,
-        hour,
-        minute,
-        ampm,
-      });
       /**
        * Since `activeParts` indicates a value that
        * been explicitly selected either by the
@@ -670,6 +672,62 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
          */
         this.activeParts = [];
       }
+      /**
+       * Only animate if:
+       * 1. We're using grid style (wheel style pickers should just jump to new value)
+       * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
+       * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
+       * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
+       */
+      const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
+      const bodyIsVisible = el.classList.contains('datetime-ready');
+      const { isGridStyle, showMonthAndYear } = this;
+      if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+        this.animateToDate(targetValue);
+      }
+      else {
+        /**
+         * We only need to do this if we didn't just animate to a new month,
+         * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+         */
+        this.setWorkingParts({
+          month,
+          day,
+          year,
+          hour,
+          minute,
+          ampm,
+        });
+      }
+    };
+    this.animateToDate = async (targetValue) => {
+      const { workingParts } = this;
+      /**
+       * Tell other render functions that we need to force the
+       * target month to appear in place of the actual next/prev month.
+       * Because this is a State variable, a rerender will be triggered
+       * automatically, updating the rendered months.
+       */
+      this.forceRenderDate = targetValue;
+      /**
+       * Flag that we've started scrolling to the forced date.
+       * The resolve function will be called by the datetime's
+       * scroll listener when it's done updating everything.
+       * This is a replacement for making prev/nextMonth async,
+       * since the logic we're waiting on is in a listener.
+       */
+      const forceDateScrollingPromise = new Promise((resolve) => {
+        this.resolveForceDateScrolling = resolve;
+      });
+      /**
+       * Animate smoothly to the forced month. This will also update
+       * workingParts and correct the surrounding months for us.
+       */
+      const targetMonthIsBefore = isBefore(targetValue, workingParts);
+      targetMonthIsBefore ? this.prevMonth() : this.nextMonth();
+      await forceDateScrollingPromise;
+      this.resolveForceDateScrolling = undefined;
+      this.forceRenderDate = undefined;
     };
     this.onFocus = () => {
       this.ionFocus.emit();
@@ -725,6 +783,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
       ampm: 'pm',
     };
     this.isTimePopoverOpen = false;
+    this.forceRenderDate = undefined;
     this.color = 'primary';
     this.name = this.inputId;
     this.disabled = false;
@@ -764,6 +823,11 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
   maxChanged() {
     this.processMaxParts();
   }
+  get isGridStyle() {
+    const { presentation, preferWheel } = this;
+    const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+    return hasDatePresentation && !preferWheel;
+  }
   yearValuesChanged() {
     this.parsedYearValues = convertToArrayOfNumbers(this.yearValues);
   }
@@ -779,51 +843,13 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
   minuteValuesChanged() {
     this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues);
   }
-  activePartsChanged() {
-    this.activePartsClone = this.activeParts;
-  }
   /**
    * Update the datetime value when the value changes
    */
-  valueChanged() {
-    const { value, minParts, maxParts, workingParts } = this;
+  async valueChanged() {
+    const { value } = this;
     if (this.hasValue()) {
-      this.warnIfIncorrectValueUsage();
-      /**
-       * Clones the value of the `activeParts` to the private clone, to update
-       * the date display on the current render cycle without causing another render.
-       *
-       * This allows us to update the current value's date/time display without
-       * refocusing or shifting the user's display (leaves the user in place).
-       */
-      const valueDateParts = parseDate(value);
-      if (valueDateParts) {
-        warnIfValueOutOfBounds(valueDateParts, minParts, maxParts);
-        if (Array.isArray(valueDateParts)) {
-          this.activePartsClone = [...valueDateParts];
-        }
-        else {
-          const { month, day, year, hour, minute } = valueDateParts;
-          const ampm = hour != null ? (hour >= 12 ? 'pm' : 'am') : undefined;
-          this.activePartsClone = Object.assign(Object.assign({}, this.activeParts), { month,
-            day,
-            year,
-            hour,
-            minute,
-            ampm });
-          /**
-           * The working parts am/pm value must be updated when the value changes, to
-           * ensure the time picker hour column values are generated correctly.
-           *
-           * Note that we don't need to do this if valueDateParts is an array, since
-           * multiple="true" does not apply to time pickers.
-           */
-          this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm }));
-        }
-      }
-      else {
-        printIonWarning(`Unable to parse date string: ${value}. Please provide a valid ISO 8601 datetime string.`);
-      }
+      this.processValue(value);
     }
     this.emitStyle();
     this.ionValueChange.emit({ value });
@@ -1026,8 +1052,6 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
       }
     }
-    this.processMinParts();
-    this.processMaxParts();
     const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
     const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
     const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
@@ -1035,6 +1059,8 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
     const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));
     const todayParts = (this.todayParts = parseDate(getToday()));
     this.defaultParts = getClosestValidDate(todayParts, monthValues, dayValues, yearValues, hourValues, minuteValues);
+    this.processMinParts();
+    this.processMaxParts();
     this.processValue(this.value);
     this.emitStyle();
   }
@@ -1419,7 +1445,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
       const { el, highlightedDates, isDateEnabled, multiple } = this;
       const referenceParts = { month, day, year };
       const isCalendarPadding = day === null;
-      const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.activePartsClone, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
+      const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
       const dateIsoString = convertDataToISO(referenceParts);
       let isCalDayDisabled = isCalMonthDisabled || disabled;
       if (!isCalDayDisabled && isDateEnabled !== undefined) {
@@ -1476,7 +1502,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
     }))));
   }
   renderCalendarBody() {
-    return (h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, generateMonths(this.workingParts).map(({ month, year }) => {
+    return (h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, generateMonths(this.workingParts, this.forceRenderDate).map(({ month, year }) => {
       return this.renderMonth(month, year);
     })));
   }
@@ -1631,14 +1657,13 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
     }
   }
   render() {
-    const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size } = this;
+    const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size, isGridStyle, } = this;
     const mode = getIonMode(this);
     const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year';
     const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
     const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
     const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
     const hasWheelVariant = hasDatePresentation && preferWheel;
-    const hasGrid = hasDatePresentation && !preferWheel;
     renderHiddenInput(true, el, name, formatValue(value), disabled);
     return (h(Host, { "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
         [mode]: true,
@@ -1649,7 +1674,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         [`datetime-presentation-${presentation}`]: true,
         [`datetime-size-${size}`]: true,
         [`datetime-prefer-wheel`]: hasWheelVariant,
-        [`datetime-grid`]: hasGrid,
+        [`datetime-grid`]: isGridStyle,
       })) }, this.renderDatetime(mode)));
   }
   get el() { return this; }
@@ -1662,7 +1687,6 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
     "dayValues": ["dayValuesChanged"],
     "hourValues": ["hourValuesChanged"],
     "minuteValues": ["minuteValuesChanged"],
-    "activeParts": ["activePartsChanged"],
     "value": ["valueChanged"]
   }; }
   static get style() { return {
@@ -1703,6 +1727,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
     "activeParts": [32],
     "workingParts": [32],
     "isTimePopoverOpen": [32],
+    "forceRenderDate": [32],
     "confirm": [64],
     "reset": [64],
     "cancel": [64]

package/components/ion-modal.js

@@ -1298,8 +1298,8 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
      */
     this.currentBreakpoint = this.initialBreakpoint;
     const { inline, delegate } = this.getDelegate(true);
-    this.ionMount.emit();
     this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
+    this.ionMount.emit();
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting