voyager-ionic-core 8.0.0-beta.3 → 8.0.0-rc.0

package/dist/collection/components/tabs/tabs.js

@@ -135,7 +135,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: 'ee98a688e181f29f70bf67d8ac9a74f6863de070', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'd0fab7c4acb24591931523584c8f2d0a0685058a', name: "top" }), h("div", { key: '0a71bcbc44d45b0f47834f055e13a4d5ad2ec189', class: "tabs-inner" }, h("slot", { key: 'df40115d87f04d6068b1d44d4eef26d51435405a' })), h("slot", { key: '1ba4b7ff756fec9954645f13b295121fe2dc3ca3', name: "bottom" })));
+        return (h(Host, { key: '05f1607d092d5bef9f1f42dd46d4bec6caa58f15', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '8e175dbf3afeb76c0b3a794b3064a2191b1b5fbc', name: "top" }), h("div", { key: 'd7120d2f0dc58cca23c0854e042a4d4b8fde4db6', class: "tabs-inner" }, h("slot", { key: 'a3651076ad9ab1c6cf56a7b82172ff59930d1963' })), h("slot", { key: 'a719a23f813740dc2c03d21af0c2fe28f1b4f8bb', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -13,9 +13,9 @@ export class Text {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9b808f0e1c85e39e89df51ea0a8b97bf815907ec', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7481d3ae97e8623e9cdbf7702b16465f9aaa13bf', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '200d6bf3820c9428b645abf8ec2a6f9de849e78a' })));
+            }) }, h("slot", { key: 'ae2ed8d29d2e52914f0d38b804e1cdc8941c9c64' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -359,7 +359,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '031dd0f49d577017faa1c5ec87184f8047e1be86', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'bb02bfa6a2f0f80d98df5a556941dfe4e6167f1a', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -368,7 +368,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '867331fa40e10931dc3b476ce96a5c1bf24f10d8', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '0e63c53cdf36b2f5abc80f5e0327c50407785d75', class: "textarea-wrapper-inner" }, h("div", { key: '762d406affec3ff1cc42349b926f39d1a03bb86e', class: "start-slot-wrapper" }, h("slot", { key: '94f5c12011301d17c61c05794e162c06257b1e3f', name: "start" })), h("div", { key: '9f4c77548e14e61cf003c3876270838ee7ccb1c4', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '7677c92431fd88cda4b3318e0eabb5747b23416c', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: 'a3d97905a3e526a6a65fac13cc379c981bfeedd2', class: "end-slot-wrapper" }, h("slot", { key: '3edf3ecd1917595917aa960f99698eabf3268a6f', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '1b94ad5bc71dd4441fe6d35690ba2d8e19e4f59c', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'cd3143f63bf715782f849a4d29549473d5ee9a80', class: "textarea-wrapper-inner" }, h("div", { key: 'bebcda4eed228f9742fb3446e5b5d27daf2d2dd4', class: "start-slot-wrapper" }, h("slot", { key: '4cc32fbeae35ae04914183abc4e300aa21863ec6', name: "start" })), h("div", { key: '6f43f54dd8e0a548bc8b376025fb8f914d705130', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '11b30015d9b5daf6781651a1d0111d2be893f4c6', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: '7dc55f082b3268b78b1f8230ce81c9b870d945a8', class: "end-slot-wrapper" }, h("slot", { key: '054c0a7e052a301c00f8fe3cb975e61e7a7b4d3c', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -928,30 +928,6 @@ export class Textarea {
                         }
                     }
                 }
-            }, {
-                "method": "ionStyle",
-                "name": "ionStyle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": "Emitted when the styles change."
-                },
-                "complexType": {
-                    "original": "StyleEventDetail",
-                    "resolved": "StyleEventDetail",
-                    "references": {
-                        "StyleEventDetail": {
-                            "location": "import",
-                            "path": "../../interface",
-                            "id": "src/interface.d.ts::StyleEventDetail"
-                        }
-                    }
-                }
             }, {
                 "method": "ionBlur",
                 "name": "ionBlur",

package/dist/collection/components/thumbnail/thumbnail.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { key: 'a399199598f8eb605a2c41e0b372609e0c1df8ee', class: getIonMode(this) }, h("slot", { key: 'a63159fa02a1339273066bf7d74ec7d5d2ed0c53' })));
+        return (h(Host, { key: 'b1fe245cf42f0462336519d07afd6c91eef388cf', class: getIonMode(this) }, h("slot", { key: '5e0f575864fcd9ae03ec8f5f7eb915efcf568337' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: '2e4240e81db3a6c9293b7cc0589226429c82790d', class: createColorClasses(this.color, {
+        return (h(Host, { key: '4e7a269caceb9cf7a71c3ba5dc15903a72203132', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '2dccef7ee6ec217b12844e0ed72401eb834ac54e', class: "toolbar-title" }, h("slot", { key: '8d109bb5cd4e883d1e47aaa6b26ac9a345de525e' }))));
+            }) }, h("div", { key: 'e42d43e85a57a2ac16579021df43ade524f1d9bf', class: "toolbar-title" }, h("slot", { key: '2319bcfdb2b79eec9c03db84bea2a9f133cc8576' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.js

@@ -388,9 +388,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: '66dcfb5335d7476659c05a3df8f8b49f198197c5', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'ebab697ab245b8ffe7163c59ee059d143242845a', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'fb798e74b5ebcb1e17f368679d4947a490d0fdeb', class: wrapperClass }, h("div", { key: '0b39964d740f1172d172dca5af306c083f3435ae', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '265b36d5c914ac6a42a9a8e622237e026035a658', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '94d1bcbb17cb4ed81ec67d63ccf61822fedbed94', class: wrapperClass }, h("div", { key: 'd10a99dcdf94d70003b70dea7d965c05baefa934', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '6475020a6890eb79bb37638c0ad0267f1cbf89fb', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.js

@@ -157,7 +157,7 @@ export class Toggle {
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '4a786aed54ad9c746cc3fb4cc73dc831d5cc39dc', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '9ea705862e0a6c8c3250d19d6487ba5a312557f4', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -167,10 +167,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '7e0d74361076d55bf500a08c7f24856c1f712afa', class: "toggle-wrapper" }, h("input", Object.assign({ key: '1112f0a15dd0e8b39a1cb60e2bdef19e37e9a4ce', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: 'ff94aa7e50d1b68d8131f54141209ca67b4889b9', class: {
+            }) }, h("label", { key: '6347141bd48c42c10f358bdf95ee5c3e9719f7e7', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'a81935c322ccdec55723986bc69556833e057b7b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '0ab294895807335c63c9a31685d861a9f75f0129', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: 'd43b70d600179d41f98b17b2e249b8e672096ccd' })), h("div", { key: 'c8e1bec8e42a09e3947209fdc7a31c66a474702f', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '918de14911b5c1453ac1b817a92614d80fe81082' })), h("div", { key: 'f7f8b23c1de4eacdf912034286d51d88dde09699', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.js

@@ -62,10 +62,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'ccdad3d73213ea96f320bedcfc77dba0b1d5a1e6', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: 'f11da98ce3398f95930cd6f5b95783a5b658e206', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: 'a7511bff77244f06648e7a9fa88dba7cfa341736', class: "toolbar-background" }), h("div", { key: '11347fdb377f492d454709d552754b71c0d62754', class: "toolbar-container" }, h("slot", { key: '49b7e5f7fa17329b9160f1017d00c0d39fbd1e59', name: "start" }), h("slot", { key: '23f248e4273880e4629f1149dfb3081f873d9fcb', name: "secondary" }), h("div", { key: '4f2d1b71e624c2e63427c13a1e5c4c37a422004e', class: "toolbar-content" }, h("slot", { key: '3554cda5a394ec59b6161ce45fd1c71e41dfc26c' })), h("slot", { key: 'de77e5bca3c49d3c961838681fca239ff4d4bba9', name: "primary" }), h("slot", { key: 'e3e32c04cd0558ea1cd2af1a99d527eb67de5863', name: "end" }))));
+            })) }, h("div", { key: '2e473c8bebf448f411ec1a579f0c81eb05310c56', class: "toolbar-background" }), h("div", { key: 'cf2d7c69bc028410338942aaea37527c570ccec5', class: "toolbar-container" }, h("slot", { key: '445cbd5299188eef4761c605b4a8d20a61079590', name: "start" }), h("slot", { key: '77675b5c0c0afffe5251ba271f5db23f87339859', name: "secondary" }), h("div", { key: '7d5967c4ad6c0fca7573aa48da707c8b0dfcd052', class: "toolbar-content" }, h("slot", { key: 'ad5530d63df9ca101760fb9f71e3641c66e95b6c' })), h("slot", { key: '35837ac1b7a4a59f000149d480900bc19015b258', name: "primary" }), h("slot", { key: '504904cf46e2190dd0a3aa5b7855b5fc54f73726', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/animation/animation-utils.js

@@ -2,36 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 let animationPrefix;
-/**
- * Web Animations requires hyphenated CSS properties
- * to be written in camelCase when animating
- */
-export 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();
-};
 export const getAnimationPrefix = (el) => {
     if (animationPrefix === undefined) {
         const supportsUnprefixed = el.style.animationName !== undefined;
@@ -44,78 +14,6 @@ export const setStyleProperty = (element, propertyName, value) => {
     const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
     element.style.setProperty(prefix + propertyName, value);
 };
-export const removeStyleProperty = (element, propertyName) => {
-    const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
-    element.style.removeProperty(prefix + propertyName);
-};
-export 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
-export 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 = [];
-export const generateKeyframeName = (keyframeRules) => {
-    let index = keyframeIds.indexOf(keyframeRules);
-    if (index < 0) {
-        index = keyframeIds.push(keyframeRules) - 1;
-    }
-    return `ion-animation-${index}`;
-};
-export 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;
-};
-export 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;
-};
 export const addClassToArray = (classes = [], className) => {
     if (className !== undefined) {
         const classNameToAppend = Array.isArray(className) ? className : [className];

package/dist/collection/utils/animation/animation.js

@@ -2,8 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { win } from "../browser";
-import { raf } from "../helpers";
-import { addClassToArray, animationEnd, createKeyframeStylesheet, generateKeyframeName, generateKeyframeRules, processKeyframes, removeStyleProperty, setStyleProperty, } from "./animation-utils";
+import { addClassToArray, setStyleProperty } from "./animation-utils";
 export const createAnimation = (animationId) => {
     let _delay;
     let _duration;
@@ -30,7 +29,6 @@ export const createAnimation = (animationId) => {
     let willComplete = true;
     let finished = false;
     let shouldCalculateNumAnimations = true;
-    let keyframeName;
     let ani;
     let paused = false;
     const id = animationId;
@@ -47,10 +45,16 @@ export 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;
     };
@@ -138,21 +142,6 @@ export 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
@@ -410,9 +399,6 @@ export const createAnimation = (animationId) => {
                 }
             });
         }
-        else {
-            initializeCSSAnimation();
-        }
     };
     /**
      * Run all "before" animation hooks.
@@ -498,32 +484,6 @@ export 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, {
@@ -544,15 +504,12 @@ export const createAnimation = (animationId) => {
             };
         }
     };
-    const initializeAnimation = (toggleAnimationName = true) => {
+    const initializeAnimation = () => {
         beforeAnimation();
         if (_keyframes.length > 0) {
             if (supportsWebAnimations) {
                 initializeWebAnimation();
             }
-            else {
-                initializeCSSAnimation(toggleAnimationName);
-            }
         }
         initialized = true;
     };
@@ -565,15 +522,6 @@ export 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) => {
@@ -590,26 +538,6 @@ export 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) => {
@@ -619,9 +547,6 @@ export const createAnimation = (animationId) => {
         if (supportsWebAnimations) {
             updateWebAnimation(step);
         }
-        else {
-            updateCSSAnimation(toggleAnimationName, step);
-        }
         return ani;
     };
     const progressStart = (forceLinearEasing = false, step) => {
@@ -704,10 +629,6 @@ export const createAnimation = (animationId) => {
         pauseAnimation();
         return ani;
     };
-    const onAnimationEndFallback = () => {
-        cssAnimationsTimerFallback = undefined;
-        animationFinish();
-    };
     const clearCSSAnimationsTimeout = () => {
         if (cssAnimationsTimerFallback) {
             clearTimeout(cssAnimationsTimerFallback);
@@ -715,56 +636,7 @@ export const createAnimation = (animationId) => {
     };
     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) => {
@@ -779,9 +651,6 @@ export const createAnimation = (animationId) => {
             setAnimationStep(0);
             updateWebAnimation();
         }
-        else {
-            updateCSSAnimation();
-        }
     };
     const play = (opts) => {
         return new Promise((resolve) => {

package/dist/collection/utils/animation/test/animation.spec.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { createAnimation } from "../animation";
-import { processKeyframes } from "../animation-utils";
 import { getTimeGivenProgression } from "../cubic-bezier";
 describe('Animation Class', () => {
     describe('progressEnd callbacks', () => {
@@ -48,84 +47,6 @@ describe('Animation Class', () => {
             animation.play();
             expect(animation.isRunning()).toEqual(false);
         });
-        it('should be running', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            expect(animation.isRunning()).toEqual(true);
-        });
-        it('should not be running after finishing the animation', async () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            await animation.play();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should not be running after calling pause', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            expect(animation.isRunning()).toEqual(true);
-            animation.pause();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should not be running when doing progress steps', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            animation.progressStart();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should be running after calling progressEnd', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            animation.progressStart();
-            animation.progressEnd(1, 0);
-            expect(animation.isRunning()).toEqual(true);
-        });
-        it('should not be running after playing to beginning', async () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            await animation.play();
-            animation.progressStart();
-            animation.progressEnd(0, 0);
-            await new Promise((resolve) => {
-                animation.onFinish(() => {
-                    expect(animation.isRunning()).toEqual(false);
-                    resolve();
-                });
-            });
-        });
     });
     describe('addElement()', () => {
         let animation;
@@ -183,16 +104,6 @@ describe('Animation Class', () => {
             ]);
             expect(animation.getKeyframes().length).toEqual(3);
         });
-        it('should convert properties for CSS Animations', () => {
-            const processedKeyframes = processKeyframes([
-                { borderRadius: '0px', easing: 'ease-in', offset: 0 },
-                { borderRadius: '4px', easing: 'ease-out', offset: 1 },
-            ]);
-            expect(processedKeyframes).toEqual([
-                { 'border-radius': '0px', 'animation-timing-function': 'ease-in', offset: 0 },
-                { 'border-radius': '4px', 'animation-timing-function': 'ease-out', offset: 1 },
-            ]);
-        });
         it('should set the from keyframe properly', () => {
             animation.from('opacity', 0).from('background', 'red').from('color', 'purple');
             const keyframes = animation.getKeyframes();

package/dist/collection/utils/animation/test/animationbuilder/animation.e2e.js

@@ -12,10 +12,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.goto('/src/utils/animation/test/animationbuilder', config);
             await testNavigation(page);
         });
-        test('ios-transition css', async ({ page }) => {
-            await page.goto('/src/utils/animation/test/animationbuilder?ionic:_forceCSSAnimations=true', config);
-            await testNavigation(page);
-        });
     });
 });
 const testNavigation = async (page) => {

package/dist/collection/utils/animation/test/basic/animation.e2e.js

@@ -8,10 +8,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/basic', config);
             await testPage(page);
         });
-        test(`should resolve using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/basic?ionic:_forceCSSAnimations=true', config);
-            await testPage(page);
-        });
     });
 });
 const testPage = async (page) => {