@ionic/core 8.0.0-dev.11709245047.1565a499 → 8.0.0-dev.11711035263.183d2423

package/components/action-sheet.js

@@ -289,12 +289,12 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (h(Host, Object.assign({ key: 'cd141d12d7d86d3402fd220c4afb61cdbf064c04', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'b81b5301c2544d6474561047fa8f3cf1b27882fb', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'b6a051e2cf5e101edbf59c8a40a04d8f7107fb3c', tappable: this.backdropDismiss }), h("div", { key: '5bfa2b37a417aaff3776f06d92a8544dfcbf714f', tabindex: "0" }), h("div", { key: '77d5a217803fd7be8f8dbedcd0ef5e59f0fd9800', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '3901d56215f05cdab074e2ec321391281a165097', class: "action-sheet-container" }, h("div", { key: '275f5c7981b2ee44fb632b3d137c7209cbfcf45c', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'b98bfa2ed6b6c8f5648f5fe52968c7f79fd3557b', tappable: this.backdropDismiss }), h("div", { key: '15354a41ab7eb1014bb65638dad9daa7c8bf8167', tabindex: "0" }), h("div", { key: 'dff2e93f5f44b5f6488cf2a7da55563ce9a9cfdb', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '25981afc3a174fb44a6d97b4118b3a39792211c8', class: "action-sheet-container" }, h("div", { key: '5a9d5174b3fe7b59e08f8022df8ead909650da53', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { key: '5be2fba3c88800b24bb3d69422285724eab15311', tabindex: "0" })));
+            } }, header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { key: 'b1891248a8269c9077f48cd4af210072daf7c119', tabindex: "0" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/alert.js

@@ -486,9 +486,9 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
          * If neither is defined, don't set aria-labelledby.
          */
         const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, Object.assign({ key: '4b7f7880dc5f39aa9b61981af0a821ac0350af7f', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'fe991967332781c792690760d63857f28e20e928', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '961a2684013ac61d59882914fd8d759ddb542fe7', tappable: this.backdropDismiss }), h("div", { key: '2ec08c3719b3cd8a4cae09d2c6ac778ffad5f940', tabindex: "0" }), h("div", { key: 'ee543683d20693c9a9497aca4d41f032aa580c9c', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '55015102b67d080249a8859fc8788f3a82d5ead9', class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'df7bcfb0cb41965f169de05edd631a050d5ce648', tabindex: "0" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'd2cf69281264c779cd583acc6466b67bbeffff77', tappable: this.backdropDismiss }), h("div", { key: 'cf1613444b085bf41326703a8ee39a0e7da4fbbd', tabindex: "0" }), h("div", { key: 'da4106c5da97987844b9404d968e895d3399d09b', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '0880f30325c25f08a27f5feaf44c497c64318819', class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '20c5e7f555e64750e5043aa62a511f2b56cc9e42', tabindex: "0" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/animation.js

@@ -2,39 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as win } from './index5.js';
-import { r as raf } from './helpers.js';
 
 let animationPrefix;
-/**
- * Web Animations requires hyphenated CSS properties
- * to be written in camelCase when animating
- */
-const processKeyframes = (keyframes) => {
-    keyframes.forEach((keyframe) => {
-        for (const key in keyframe) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (keyframe.hasOwnProperty(key)) {
-                const value = keyframe[key];
-                if (key === 'easing') {
-                    const newKey = 'animation-timing-function';
-                    keyframe[newKey] = value;
-                    delete keyframe[key];
-                }
-                else {
-                    const newKey = convertCamelCaseToHypen(key);
-                    if (newKey !== key) {
-                        keyframe[newKey] = value;
-                        delete keyframe[key];
-                    }
-                }
-            }
-        }
-    });
-    return keyframes;
-};
-const convertCamelCaseToHypen = (str) => {
-    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-};
 const getAnimationPrefix = (el) => {
     if (animationPrefix === undefined) {
         const supportsUnprefixed = el.style.animationName !== undefined;
@@ -47,78 +16,6 @@ const setStyleProperty = (element, propertyName, value) => {
     const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
     element.style.setProperty(prefix + propertyName, value);
 };
-const removeStyleProperty = (element, propertyName) => {
-    const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
-    element.style.removeProperty(prefix + propertyName);
-};
-const animationEnd = (el, callback) => {
-    let unRegTrans;
-    const opts = { passive: true };
-    const unregister = () => {
-        if (unRegTrans) {
-            unRegTrans();
-        }
-    };
-    const onTransitionEnd = (ev) => {
-        if (el === ev.target) {
-            unregister();
-            callback(ev);
-        }
-    };
-    if (el) {
-        el.addEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-        el.addEventListener('animationend', onTransitionEnd, opts);
-        unRegTrans = () => {
-            el.removeEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-            el.removeEventListener('animationend', onTransitionEnd, opts);
-        };
-    }
-    return unregister;
-};
-// TODO(FW-2832): type
-const generateKeyframeRules = (keyframes = []) => {
-    return keyframes
-        .map((keyframe) => {
-        const offset = keyframe.offset;
-        const frameString = [];
-        for (const property in keyframe) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (keyframe.hasOwnProperty(property) && property !== 'offset') {
-                frameString.push(`${property}: ${keyframe[property]};`);
-            }
-        }
-        return `${offset * 100}% { ${frameString.join(' ')} }`;
-    })
-        .join(' ');
-};
-const keyframeIds = [];
-const generateKeyframeName = (keyframeRules) => {
-    let index = keyframeIds.indexOf(keyframeRules);
-    if (index < 0) {
-        index = keyframeIds.push(keyframeRules) - 1;
-    }
-    return `ion-animation-${index}`;
-};
-const getStyleContainer = (element) => {
-    // getRootNode is not always available in SSR environments.
-    // TODO(FW-2832): types
-    const rootNode = element.getRootNode !== undefined ? element.getRootNode() : element;
-    return rootNode.head || rootNode;
-};
-const createKeyframeStylesheet = (keyframeName, keyframeRules, element) => {
-    var _a;
-    const styleContainer = getStyleContainer(element);
-    const keyframePrefix = getAnimationPrefix(element);
-    const existingStylesheet = styleContainer.querySelector('#' + keyframeName);
-    if (existingStylesheet) {
-        return existingStylesheet;
-    }
-    const stylesheet = ((_a = element.ownerDocument) !== null && _a !== void 0 ? _a : document).createElement('style');
-    stylesheet.id = keyframeName;
-    stylesheet.textContent = `@${keyframePrefix}keyframes ${keyframeName} { ${keyframeRules} } @${keyframePrefix}keyframes ${keyframeName}-alt { ${keyframeRules} }`;
-    styleContainer.appendChild(stylesheet);
-    return stylesheet;
-};
 const addClassToArray = (classes = [], className) => {
     if (className !== undefined) {
         const classNameToAppend = Array.isArray(className) ? className : [className];
@@ -146,14 +43,12 @@ const createAnimation = (animationId) => {
     let numAnimationsRunning = 0;
     let shouldForceLinearEasing = false;
     let shouldForceSyncPlayback = false;
-    let cssAnimationsTimerFallback;
     let forceDirectionValue;
     let forceDurationValue;
     let forceDelayValue;
     let willComplete = true;
     let finished = false;
     let shouldCalculateNumAnimations = true;
-    let keyframeName;
     let ani;
     let paused = false;
     const id = animationId;
@@ -170,10 +65,16 @@ const createAnimation = (animationId) => {
     const webAnimations = [];
     const supportsAnimationEffect = typeof AnimationEffect === 'function' ||
         (win !== undefined && typeof win.AnimationEffect === 'function');
+    /**
+     * This is a feature detection for Web Animations.
+     *
+     * Certain environments such as emulated browser environments for testing,
+     * do not support Web Animations. As a result, we need to check for support
+     * and provide a fallback to test certain functionality related to Web Animations.
+     */
     const supportsWebAnimations = typeof Element === 'function' &&
         typeof Element.prototype.animate === 'function' &&
         supportsAnimationEffect;
-    const ANIMATION_END_FALLBACK_PADDING_MS = 100;
     const getWebAnimations = () => {
         return webAnimations;
     };
@@ -261,21 +162,6 @@ const createAnimation = (animationId) => {
             });
             webAnimations.length = 0;
         }
-        else {
-            const elementsArray = elements.slice();
-            raf(() => {
-                elementsArray.forEach((element) => {
-                    removeStyleProperty(element, 'animation-name');
-                    removeStyleProperty(element, 'animation-duration');
-                    removeStyleProperty(element, 'animation-timing-function');
-                    removeStyleProperty(element, 'animation-iteration-count');
-                    removeStyleProperty(element, 'animation-delay');
-                    removeStyleProperty(element, 'animation-play-state');
-                    removeStyleProperty(element, 'animation-fill-mode');
-                    removeStyleProperty(element, 'animation-direction');
-                });
-            });
-        }
     };
     /**
      * Removes the animation's stylesheets
@@ -533,9 +419,6 @@ const createAnimation = (animationId) => {
                 }
             });
         }
-        else {
-            initializeCSSAnimation();
-        }
     };
     /**
      * Run all "before" animation hooks.
@@ -565,7 +448,6 @@ const createAnimation = (animationId) => {
      * Run all "after" animation hooks.
      */
     const afterAnimation = () => {
-        clearCSSAnimationsTimeout();
         // Runs all after read callbacks
         _afterAddReadFunctions.forEach((callback) => callback());
         // Runs all after write callbacks
@@ -621,32 +503,6 @@ const createAnimation = (animationId) => {
             }
         }
     };
-    const initializeCSSAnimation = (toggleAnimationName = true) => {
-        cleanUpStyleSheets();
-        const processedKeyframes = processKeyframes(_keyframes);
-        elements.forEach((element) => {
-            if (processedKeyframes.length > 0) {
-                const keyframeRules = generateKeyframeRules(processedKeyframes);
-                keyframeName = animationId !== undefined ? animationId : generateKeyframeName(keyframeRules);
-                const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
-                stylesheets.push(stylesheet);
-                setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
-                setStyleProperty(element, 'animation-timing-function', getEasing());
-                setStyleProperty(element, 'animation-delay', `${getDelay()}ms`);
-                setStyleProperty(element, 'animation-fill-mode', getFill());
-                setStyleProperty(element, 'animation-direction', getDirection());
-                const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
-                setStyleProperty(element, 'animation-iteration-count', iterationsCount);
-                setStyleProperty(element, 'animation-play-state', 'paused');
-                if (toggleAnimationName) {
-                    setStyleProperty(element, 'animation-name', `${stylesheet.id}-alt`);
-                }
-                raf(() => {
-                    setStyleProperty(element, 'animation-name', stylesheet.id || null);
-                });
-            }
-        });
-    };
     const initializeWebAnimation = () => {
         elements.forEach((element) => {
             const animation = element.animate(_keyframes, {
@@ -667,15 +523,12 @@ const createAnimation = (animationId) => {
             };
         }
     };
-    const initializeAnimation = (toggleAnimationName = true) => {
+    const initializeAnimation = () => {
         beforeAnimation();
         if (_keyframes.length > 0) {
             if (supportsWebAnimations) {
                 initializeWebAnimation();
             }
-            else {
-                initializeCSSAnimation(toggleAnimationName);
-            }
         }
         initialized = true;
     };
@@ -688,15 +541,6 @@ const createAnimation = (animationId) => {
                 animation.pause();
             });
         }
-        else {
-            const animationDuration = `-${getDuration() * step}ms`;
-            elements.forEach((element) => {
-                if (_keyframes.length > 0) {
-                    setStyleProperty(element, 'animation-delay', animationDuration);
-                    setStyleProperty(element, 'animation-play-state', 'paused');
-                }
-            });
-        }
     };
     const updateWebAnimation = (step) => {
         webAnimations.forEach((animation) => {
@@ -713,26 +557,6 @@ const createAnimation = (animationId) => {
             setAnimationStep(step);
         }
     };
-    const updateCSSAnimation = (toggleAnimationName = true, step) => {
-        raf(() => {
-            elements.forEach((element) => {
-                setStyleProperty(element, 'animation-name', keyframeName || null);
-                setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
-                setStyleProperty(element, 'animation-timing-function', getEasing());
-                setStyleProperty(element, 'animation-delay', step !== undefined ? `-${step * getDuration()}ms` : `${getDelay()}ms`);
-                setStyleProperty(element, 'animation-fill-mode', getFill() || null);
-                setStyleProperty(element, 'animation-direction', getDirection() || null);
-                const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
-                setStyleProperty(element, 'animation-iteration-count', iterationsCount);
-                if (toggleAnimationName) {
-                    setStyleProperty(element, 'animation-name', `${keyframeName}-alt`);
-                }
-                raf(() => {
-                    setStyleProperty(element, 'animation-name', keyframeName || null);
-                });
-            });
-        });
-    };
     const update = (deep = false, toggleAnimationName = true, step) => {
         if (deep) {
             childAnimations.forEach((animation) => {
@@ -742,9 +566,6 @@ const createAnimation = (animationId) => {
         if (supportsWebAnimations) {
             updateWebAnimation(step);
         }
-        else {
-            updateCSSAnimation(toggleAnimationName, step);
-        }
         return ani;
     };
     const progressStart = (forceLinearEasing = false, step) => {
@@ -827,67 +648,8 @@ const createAnimation = (animationId) => {
         pauseAnimation();
         return ani;
     };
-    const onAnimationEndFallback = () => {
-        cssAnimationsTimerFallback = undefined;
-        animationFinish();
-    };
-    const clearCSSAnimationsTimeout = () => {
-        if (cssAnimationsTimerFallback) {
-            clearTimeout(cssAnimationsTimerFallback);
-        }
-    };
     const playCSSAnimations = () => {
-        clearCSSAnimationsTimeout();
-        raf(() => {
-            elements.forEach((element) => {
-                if (_keyframes.length > 0) {
-                    setStyleProperty(element, 'animation-play-state', 'running');
-                }
-            });
-        });
-        if (_keyframes.length === 0 || elements.length === 0) {
-            animationFinish();
-        }
-        else {
-            /**
-             * This is a catchall in the event that a CSS Animation did not finish.
-             * The Web Animations API has mechanisms in place for preventing this.
-             * CSS Animations will not fire an `animationend` event
-             * for elements with `display: none`. The Web Animations API
-             * accounts for this, but using raw CSS Animations requires
-             * this workaround.
-             */
-            const animationDelay = getDelay() || 0;
-            const animationDuration = getDuration() || 0;
-            const animationIterations = getIterations() || 1;
-            // No need to set a timeout when animation has infinite iterations
-            if (isFinite(animationIterations)) {
-                cssAnimationsTimerFallback = setTimeout(onAnimationEndFallback, animationDelay + animationDuration * animationIterations + ANIMATION_END_FALLBACK_PADDING_MS);
-            }
-            animationEnd(elements[0], () => {
-                clearCSSAnimationsTimeout();
-                /**
-                 * Ensure that clean up
-                 * is always done a frame
-                 * before the onFinish handlers
-                 * are fired. Otherwise, there
-                 * may be flickering if a new
-                 * animation is started on the same
-                 * element too quickly
-                 */
-                raf(() => {
-                    clearCSSAnimationPlayState();
-                    raf(animationFinish);
-                });
-            });
-        }
-    };
-    const clearCSSAnimationPlayState = () => {
-        elements.forEach((element) => {
-            removeStyleProperty(element, 'animation-duration');
-            removeStyleProperty(element, 'animation-delay');
-            removeStyleProperty(element, 'animation-play-state');
-        });
+        animationFinish();
     };
     const playWebAnimations = () => {
         webAnimations.forEach((animation) => {
@@ -902,9 +664,6 @@ const createAnimation = (animationId) => {
             setAnimationStep(0);
             updateWebAnimation();
         }
-        else {
-            updateCSSAnimation();
-        }
     };
     const play = (opts) => {
         return new Promise((resolve) => {

package/components/backdrop.js

@@ -34,7 +34,7 @@ const Backdrop = /*@__PURE__*/ proxyCustomElement(class Backdrop extends HTMLEle
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'e512499f1aa0cdb70cdabf300cf69f1062dc7c48', tabindex: "-1", "aria-hidden": "true", class: {
+        return (h(Host, { key: 'edc9b82940adbb5fa740107bd2d12d02955606fa', tabindex: "-1", "aria-hidden": "true", class: {
                 [mode]: true,
                 'backdrop-hide': !this.visible,
                 'backdrop-no-tappable': !this.tappable,

package/components/button.js

@@ -202,7 +202,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: '8533314504b286ec10e26722f93376d86a7ca1c9', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'cb5af107c877f0c1926045acfd4f6922f7dbcb8d', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -217,7 +217,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: '79bf020fdac0c2ceb2b05547b3e5a9a11e60abb4' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '109481ba86102647023b746b054b2718d3c9d92a', class: "button-inner" }, h("slot", { key: 'f824ddd9f988b9bd33136555b16aa790d9291b49', name: "icon-only" }), h("slot", { key: 'd614f4e430792c5f93be4b3a8c57a826d74b9cfd', name: "start" }), h("slot", { key: '95d00c8a980c31cc7f84732f51a17a0cd285a7cb' }), h("slot", { key: 'a228ff52cbe04dc9d2e22bb66611ecc96d130e6f', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: 'bc4c5e6a17fa90e172e56bd481ba24c69419dd1a' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'f1eac679bcdf2b40177f920025a49705f726bf0c', class: "button-inner" }, h("slot", { key: '19aa897289923c8e7d16a354f9acac312f0641ea', name: "icon-only" }), h("slot", { key: '0a321ca359f631a2c8708566b3f1b936fe9a4d00', name: "start" }), h("slot", { key: '9ec1b7197ec1b4d858338f45433f6bfa46b81a3d' }), h("slot", { key: 'e632fd3b918ec94e119a5e766371886072292d75', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/buttons.js

@@ -18,16 +18,16 @@ const Buttons = /*@__PURE__*/ proxyCustomElement(class Buttons extends HTMLEleme
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '52c0c5535f5688a481746fe8fd92b6c02941526f', class: {
+        return (h(Host, { key: '3b78d2f2ebdc2a1720edb570270dd0228eef6ae5', class: {
                 [mode]: true,
                 ['buttons-collapse']: this.collapse,
-            } }));
+            } }, h("slot", { key: 'a48e728d5d5ecb29965c3a2c9ffa9516b5da5309' })));
     }
     static get style() { return {
         ios: IonButtonsIosStyle0,
         md: IonButtonsMdStyle0
     }; }
-}, [34, "ion-buttons", {
+}, [38, "ion-buttons", {
         "collapse": [4]
     }]);
 function defineCustomElement() {

package/components/checkbox.js

@@ -76,7 +76,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'be30606f48a3adf62eddc68b7d7f908d0c46f96d', class: createColorClasses(color, {
+        return (h(Host, { key: '93550068abf4a5103a5d7f06e88e8d004382c203', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -86,10 +86,10 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
                 [`checkbox-justify-${justify}`]: true,
                 [`checkbox-alignment-${alignment}`]: true,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, h("label", { key: '96c3f85a0ae6970743f6965d614033426cf2b163', class: "checkbox-wrapper" }, 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)), h("div", { key: 'f2374957e47eec899aa2ca49ede4cfdf8397fc18', class: {
+            }), onClick: this.onClick }, h("label", { key: '43c0a59f152c8b836fcfcefd29db16962568b1e1', class: "checkbox-wrapper" }, h("input", Object.assign({ key: '7dc4216a96c001216a99349290d7615032952aee', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { key: 'a7454e4c99eb6ea3fe4db171c0071b803949c4d0', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, h("slot", { key: '3bd6bc289c26e96cc0b4a8b39154fec1d02ba426' })), h("div", { key: '30397663226d628859d3814f9dc53ee4aad57de5', class: "native-wrapper" }, h("svg", { key: '53374f787677adfdb3b693ead3f8d86412127c10', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label" }, h("slot", { key: '41741533b49c0281d8ff496c7b5eeccd944d2b2a' })), h("div", { key: 'e3b43df785386c2cd87fb3a38777c34a7d9b32e0', class: "native-wrapper" }, h("svg", { key: 'd3cfb07ec4c7b3e45b9cf5a049fcc841fdb4e2c3', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

package/components/data.js

@@ -832,7 +832,25 @@ const getFormattedDayPeriod = (dayPeriod) => {
     }
     return dayPeriod.toUpperCase();
 };
-const getLocalizedTime = (locale, refParts, hourCycle) => {
+/**
+ * Including time zone options may lead to the rendered text showing a
+ * different time from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+const stripTimeZone = (formatOptions) => {
+    return Object.assign(Object.assign({}, formatOptions), { 
+        /**
+         * Setting the time zone to UTC ensures that the value shown is always the
+         * same as what was selected and safeguards against older Safari bugs with
+         * Intl.DateTimeFormat.
+         */
+        timeZone: 'UTC', 
+        /**
+         * We do not want to display the time zone name
+         */
+        timeZoneName: undefined });
+};
+const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = { hour: 'numeric', minute: 'numeric' }) => {
     const timeParts = {
         hour: refParts.hour,
         minute: refParts.minute,
@@ -840,28 +858,12 @@ const getLocalizedTime = (locale, refParts, hourCycle) => {
     if (timeParts.hour === undefined || timeParts.minute === undefined) {
         return 'Invalid Time';
     }
-    return new Intl.DateTimeFormat(locale, {
-        hour: 'numeric',
-        minute: 'numeric',
-        /**
-         * Setting the timeZone to UTC prevents
-         * new Intl.DatetimeFormat from subtracting
-         * the user's current timezone offset
-         * when formatting the time.
-         */
-        timeZone: 'UTC',
+    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, stripTimeZone(formatOptions)), { 
         /**
          * We use hourCycle here instead of hour12 due to:
          * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
          */
-        hourCycle,
-        /**
-         * Setting Z at the end indicates that this
-         * date string is in the UTC time zone. This
-         * prevents new Date from adding the time zone
-         * offset when getting the ISO string.
-         */
-    }).format(new Date(convertDataToISO(Object.assign({ 
+        hourCycle })).format(new Date(convertDataToISO(Object.assign({ 
         /**
          * JS uses a simplified ISO 8601 format which allows for
          * date-only formats and date-time formats, but not
@@ -947,14 +949,6 @@ const generateDayAriaLabel = (locale, today, refParts) => {
      */
     return today ? `Today, ${labelString}` : labelString;
 };
-/**
- * Gets the day of the week, month, and day
- * Used for the header in MD mode.
- */
-const getMonthAndDay = (locale, refParts) => {
-    const date = getNormalizedDate(refParts);
-    return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' }).format(date);
-};
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -965,15 +959,6 @@ const getMonthAndYear = (locale, refParts) => {
     const date = getNormalizedDate(refParts);
     return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(date);
 };
-/**
- * Given a locale and a date object,
- * return a formatted string that includes
- * the short month, numeric day, and full year.
- * Example: Apr 22, 2021
- */
-const getMonthDayAndYear = (locale, refParts) => {
-    return getLocalizedDateTime(locale, refParts, { month: 'short', day: 'numeric', year: 'numeric' });
-};
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -1023,7 +1008,7 @@ const getNormalizedDate = (refParts) => {
  */
 const getLocalizedDateTime = (locale, refParts, options) => {
     const date = getNormalizedDate(refParts);
-    return getDateTimeFormat(locale, options).format(date);
+    return getDateTimeFormat(locale, stripTimeZone(options)).format(date);
 };
 /**
  * Given a locale, DatetimeParts, and options
@@ -1622,4 +1607,4 @@ const getTimeColumnsData = (locale, refParts, hourCycle, minParts, maxParts, all
     };
 };
 
-export { getNumDaysInMonth as A, getCombinedDateColumnData as B, getMonthColumnData as C, getDayColumnData as D, getYearColumnData as E, isMonthFirstLocale as F, getTimeColumnsData as G, isLocaleDayPeriodRTL as H, getMonthAndYear as I, getDaysOfWeek as J, getDaysOfMonth as K, getHourCycle as L, getLocalizedTime as M, getMonthAndDay as N, formatValue as O, clampDate as P, parseAmPm as Q, calculateHourFromAMPM as R, getLocalizedDateTime as S, getMonthDayAndYear as T, getDay as a, isAfter as b, isSameDay as c, getPreviousMonth as d, getNextMonth as e, getPartsFromCalendarDay as f, generateDayAriaLabel as g, getNextYear as h, isBefore as i, getPreviousYear as j, getEndOfWeek as k, getStartOfWeek as l, getPreviousDay as m, getNextDay as n, getPreviousWeek as o, getNextWeek as p, parseMinParts as q, parseMaxParts as r, parseDate as s, convertToArrayOfNumbers as t, convertDataToISO as u, validateParts as v, warnIfValueOutOfBounds as w, getToday as x, getClosestValidDate as y, generateMonths as z };
+export { getNumDaysInMonth as A, getCombinedDateColumnData as B, getMonthColumnData as C, getDayColumnData as D, getYearColumnData as E, isMonthFirstLocale as F, getTimeColumnsData as G, isLocaleDayPeriodRTL as H, getMonthAndYear as I, getDaysOfWeek as J, getDaysOfMonth as K, getHourCycle as L, getLocalizedTime as M, getLocalizedDateTime as N, formatValue as O, clampDate as P, parseAmPm as Q, calculateHourFromAMPM as R, getDay as a, isAfter as b, isSameDay as c, getPreviousMonth as d, getNextMonth as e, getPartsFromCalendarDay as f, generateDayAriaLabel as g, getNextYear as h, isBefore as i, getPreviousYear as j, getEndOfWeek as k, getStartOfWeek as l, getPreviousDay as m, getNextDay as n, getPreviousWeek as o, getNextWeek as p, parseMinParts as q, parseMaxParts as r, parseDate as s, convertToArrayOfNumbers as t, convertDataToISO as u, validateParts as v, warnIfValueOutOfBounds as w, getToday as x, getClosestValidDate as y, generateMonths as z };