highcharts 13.0.0 → 13.0.2

package/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "highcharts",
-  "version": "13.0.0",
+  "version": "13.0.2",
   "main": "highcharts.js",
   "license": "https://www.highcharts.com/license",
   "types": "highcharts.d.ts",

package/css/highcharts.css

@@ -321,7 +321,7 @@
 }
 
 .highcharts-tooltip text,
-.highcharts-tooltip foreignObject div {
+.highcharts-tooltip foreignObject div:not(foreignObject > div) {
     fill: var(--highcharts-neutral-color-80);
     font-size: 0.8em;
 }
@@ -1283,6 +1283,7 @@ text.highcharts-drilldown-data-label,
     margin: 0;
     display: block;
     position: absolute;
+    pointer-events: none;
 }
 
 .highcharts-a11y-proxy-group li {

package/es-modules/Accessibility/A11yI18n.js

@@ -14,7 +14,7 @@
 'use strict';
 import F from '../Core/Templating.js';
 const { format } = F;
-import { getNestedProperty, pick } from '../Shared/Utilities.js';
+import { getNestedProperty } from '../Shared/Utilities.js';
 /* *
  *
  *  Composition
@@ -80,13 +80,13 @@ var A11yI18nComposition;
             const pluralEnd = (statement.slice(pluralStart).indexOf(')') + pluralStart), pluralStatement = statement.substring(pluralStart + 8, pluralEnd), pluralArguments = pluralStatement.split(','), num = Number(getNestedProperty(pluralArguments[0], ctx));
             switch (num) {
                 case 0:
-                    result = pick(pluralArguments[4], pluralArguments[1]);
+                    result = (pluralArguments[4] ?? pluralArguments[1]);
                     break;
                 case 1:
-                    result = pick(pluralArguments[2], pluralArguments[1]);
+                    result = (pluralArguments[2] ?? pluralArguments[1]);
                     break;
                 case 2:
-                    result = pick(pluralArguments[3], pluralArguments[1]);
+                    result = (pluralArguments[3] ?? pluralArguments[1]);
                     break;
                 default:
                     result = pluralArguments[1];

package/es-modules/Accessibility/Accessibility.js

@@ -17,7 +17,7 @@ const { defaultOptions } = D;
 import H from '../Core/Globals.js';
 const { doc } = H;
 import HU from './Utils/HTMLUtilities.js';
-const { removeElement } = HU;
+const { escapeStringForHTML, removeElement, stripHTMLTagsFromString } = HU;
 import A11yI18n from './A11yI18n.js';
 import ContainerComponent from './Components/ContainerComponent.js';
 import FocusBorderComposition from './FocusBorder.js';
@@ -261,6 +261,42 @@ class Accessibility {
             });
         }
     }
+    /**
+     * Inject the accessibility description into the exported SVG as a
+     * Dublin Core RDF metadata block. Runs on the source chart so the
+     * `linkedDescription` selector resolves against the live DOM, then
+     * mutates the export copy's `<svg>` element before its `innerHTML`
+     * is serialized.
+     * @private
+     */
+    function chartOnGetSVG(e) {
+        const a11y = this.accessibility;
+        if (!a11y || a11y.zombie) {
+            return;
+        }
+        const infoRegions = a11y.components.infoRegions;
+        const text = infoRegions && (infoRegions.getLongdescText() ||
+            infoRegions.getTypeDescriptionText());
+        if (!text) {
+            return;
+        }
+        const safe = escapeStringForHTML(stripHTMLTagsFromString(text, true));
+        if (!safe.trim()) {
+            return;
+        }
+        const box = e.chartCopy.renderer.box;
+        box.querySelector(':scope > metadata')?.remove();
+        box.insertAdjacentHTML('afterbegin', '<metadata>' +
+            '<rdf:RDF ' +
+            'xmlns:rdf="http://www.w3.org/' +
+            '1999/02/22-rdf-syntax-ns#" ' +
+            'xmlns:dc="http://purl.org/dc/elements/1.1/">' +
+            '<rdf:Description>' +
+            '<dc:description>' + safe + '</dc:description>' +
+            '</rdf:Description>' +
+            '</rdf:RDF>' +
+            '</metadata>');
+    }
     /**
      * Update with chart/series/point updates.
      * @private
@@ -348,6 +384,7 @@ class Accessibility {
             addEvent(ChartClass, 'destroy', chartOnDestroy);
             addEvent(ChartClass, 'render', chartOnRender);
             addEvent(ChartClass, 'update', chartOnUpdate);
+            addEvent(ChartClass, 'getSVG', chartOnGetSVG);
             // Mark dirty for update
             ['addSeries', 'init'].forEach((event) => {
                 addEvent(ChartClass, event, function () {

package/es-modules/Accessibility/Components/InfoRegionsComponent.js

@@ -26,7 +26,7 @@ import H from '../../Core/Globals.js';
 const { doc } = H;
 import HU from '../Utils/HTMLUtilities.js';
 const { addClass, getElement, getHeadingTagNameForElement, stripHTMLTagsFromString, visuallyHideElement } = HU;
-import { attr, pick, replaceNested } from '../../Shared/Utilities.js';
+import { attr, replaceNested } from '../../Shared/Utilities.js';
 /* *
  *
  *  Functions
@@ -506,9 +506,11 @@ class InfoRegionsComponent extends AccessibilityComponent {
     getAxesDescription() {
         const chart = this.chart, shouldDescribeColl = function (collectionKey, defaultCondition) {
             const axes = chart[collectionKey];
-            return axes.length > 1 || axes[0] &&
-                pick(axes[0].options.accessibility &&
-                    axes[0].options.accessibility.enabled, defaultCondition);
+            const axisA11yEnabled = axes[0] ?
+                (axes[0].options.accessibility &&
+                    axes[0].options.accessibility.enabled) :
+                void 0;
+            return axes.length > 1 || (axisA11yEnabled ?? defaultCondition);
         }, hasNoMap = !!chart.types &&
             chart.types.indexOf('map') < 0 &&
             chart.types.indexOf('treemap') < 0 &&

package/es-modules/Accessibility/Components/LegendComponent.js

@@ -12,8 +12,7 @@
  *
  * */
 'use strict';
-import A from '../../Core/Animation/AnimationUtilities.js';
-const { animObject } = A;
+import { animObject } from '../../Core/Animation/AnimationUtilities.js';
 import H from '../../Core/Globals.js';
 const { doc } = H;
 import Legend from '../../Core/Legend/Legend.js';
@@ -22,7 +21,7 @@ import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
 import CU from '../Utils/ChartUtilities.js';
 const { getChartTitle } = CU;
 import HU from '../Utils/HTMLUtilities.js';
-import { addEvent, fireEvent, isNumber, pick, syncTimeout } from '../../Shared/Utilities.js';
+import { addEvent, fireEvent, isNumber, syncTimeout } from '../../Shared/Utilities.js';
 const { stripHTMLTagsFromString: stripHTMLTags, addClass, removeClass } = HU;
 /* *
  *
@@ -119,7 +118,7 @@ class LegendComponent extends AccessibilityComponent {
                 this.chart.renderer &&
                 component.recreateProxies()) {
                 syncTimeout(() => component.proxyProvider
-                    .updateGroupProxyElementPositions('legend'), animObject(pick(this.chart.renderer.globalAnimation, true)).duration);
+                    .updateGroupProxyElementPositions('legend'), animObject((this.chart.renderer.globalAnimation ?? true)).duration);
             }
         });
     }

package/es-modules/Accessibility/Components/NavigatorComponent.js

@@ -21,15 +21,14 @@ import AccessibilityComponent from '../AccessibilityComponent.js';
 import Announcer from '../Utils/Announcer.js';
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
 import Navigator from '../../Stock/Navigator/Navigator.js';
-import A from '../../Core/Animation/AnimationUtilities.js';
-const { animObject } = A;
+import { animObject } from '../../Core/Animation/AnimationUtilities.js';
 import T from '../../Core/Templating.js';
 const { format } = T;
 import HU from '../Utils/HTMLUtilities.js';
 const { getFakeMouseEvent } = HU;
 import CU from '../Utils/ChartUtilities.js';
 const { getAxisRangeDescription, fireEventOnWrappedOrUnwrappedElement } = CU;
-import { clamp, internalClearTimeout, pick, syncTimeout } from '../../Shared/Utilities.js';
+import { clamp, internalClearTimeout, syncTimeout } from '../../Shared/Utilities.js';
 /**
  * The NavigatorComponent class
  *
@@ -53,7 +52,7 @@ class NavigatorComponent extends AccessibilityComponent {
                     component.proxyProvider
                         .updateGroupProxyElementPositions('navigator');
                     component.updateHandleValues();
-                }, animObject(pick(this.chart.renderer.globalAnimation, true)).duration);
+                }, animObject((this.chart.renderer.globalAnimation ?? true)).duration);
             }
         });
     }

package/es-modules/Accessibility/Components/SeriesComponent/SeriesDescriber.js

@@ -20,7 +20,7 @@ import F from '../../../Core/Templating.js';
 const { format, numberFormat } = F;
 import HTMLUtilities from '../../Utils/HTMLUtilities.js';
 const { reverseChildNodes, stripHTMLTagsFromString: stripHTMLTags } = HTMLUtilities;
-import { defined, find, isString, isNumber, pick } from '../../../Shared/Utilities.js';
+import { defined, find, isString, isNumber } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Functions
@@ -77,11 +77,11 @@ function addMockPointElement(point) {
     const series = point.series, firstPointWithGraphic = findFirstPointWithGraphic(point), firstGraphic = firstPointWithGraphic && firstPointWithGraphic.graphic, parentGroup = firstGraphic ?
         firstGraphic.parentGroup :
         series.graph || series.group, mockPos = firstPointWithGraphic ? {
-        x: pick(point.plotX, firstPointWithGraphic.plotX, 0),
-        y: pick(point.plotY, firstPointWithGraphic.plotY, 0)
+        x: (point.plotX ?? firstPointWithGraphic.plotX ?? 0),
+        y: (point.plotY ?? firstPointWithGraphic.plotY ?? 0)
     } : {
-        x: pick(point.plotX, 0),
-        y: pick(point.plotY, 0)
+        x: (point.plotX ?? 0),
+        y: (point.plotY ?? 0)
     }, mockElement = makeMockElement(point, mockPos);
     if (parentGroup && parentGroup.element) {
         point.graphic = mockElement;
@@ -193,7 +193,7 @@ function getPointXDescription(point) {
  */
 function getPointArrayMapValueDescription(point, prefix, suffix) {
     const pre = prefix || '', suf = suffix || '', keyToValStr = function (key) {
-        const num = pointNumberToString(point, pick(point[key], point.options[key]));
+        const num = pointNumberToString(point, (point[key] ?? point.options[key]));
         return num !== void 0 ?
             key + ': ' + pre + num + suf :
             num;
@@ -253,9 +253,10 @@ function getPointAnnotationDescription(point) {
 function getPointValueDescription(point) {
     const series = point.series, chart = series.chart, seriesA11yOptions = series.options.accessibility, seriesValueDescFormat = seriesA11yOptions && seriesA11yOptions.point &&
         seriesA11yOptions.point.valueDescriptionFormat, pointValueDescriptionFormat = seriesValueDescFormat ||
-        chart.options.accessibility.point.valueDescriptionFormat, showXDescription = pick(series.xAxis &&
+        chart.options.accessibility.point.valueDescriptionFormat, showXDescription = ((series.xAxis &&
         series.xAxis.options.accessibility &&
-        series.xAxis.options.accessibility.enabled, !chart.angular && series.type !== 'flowmap'), xDesc = showXDescription ? getPointXDescription(point) : '', context = {
+        series.xAxis.options.accessibility.enabled) ??
+        (!chart.angular && series.type !== 'flowmap')), xDesc = showXDescription ? getPointXDescription(point) : '', context = {
         point: point,
         index: defined(point.index) ? (point.index + 1) : '',
         xDescription: xDesc,
@@ -340,8 +341,10 @@ function defaultSeriesDescriptionFormatter(series) {
         seriesNumber,
         series,
         chart
-    }, combinationSuffix = chartTypes.length > 1 ? 'Combination' : '', summary = chart.langFormat('accessibility.series.summary.' + series.type + combinationSuffix, summaryContext) || chart.langFormat('accessibility.series.summary.default' + combinationSuffix, summaryContext), axisDescription = (shouldDescribeAxis('yAxis') ? ' ' + yAxisInfo + '.' : '') + (shouldDescribeAxis('xAxis') ? ' ' + xAxisInfo + '.' : ''), formatStr = pick(series.options.accessibility &&
-        series.options.accessibility.descriptionFormat, chart.options.accessibility.series.descriptionFormat, '');
+    }, combinationSuffix = chartTypes.length > 1 ? 'Combination' : '', summary = chart.langFormat('accessibility.series.summary.' + series.type + combinationSuffix, summaryContext) || chart.langFormat('accessibility.series.summary.default' + combinationSuffix, summaryContext), axisDescription = (shouldDescribeAxis('yAxis') ? ' ' + yAxisInfo + '.' : '') + (shouldDescribeAxis('xAxis') ? ' ' + xAxisInfo + '.' : ''), formatStr = ((series.options.accessibility &&
+        series.options.accessibility.descriptionFormat) ??
+        chart.options.accessibility.series.descriptionFormat ??
+        '');
     return format(formatStr, {
         seriesDescription: summary,
         authorDescription: (description ? ' ' + description : ''),

package/es-modules/Accessibility/Components/SeriesComponent/SeriesKeyboardNavigation.js

@@ -74,15 +74,19 @@ function isSkipSeries(series) {
  * @private
  */
 function isSkipPoint(point) {
-    const series = point.series, nullInteraction = series.options.nullInteraction, pointOptions = point.options, pointA11yOptions = pointOptions.accessibility, a11yOptions = series.chart.options.accessibility, pointA11yDisabled = pointA11yOptions?.enabled === false;
-    return a11yOptions
+    const series = point.series, nullInteraction = series.options.nullInteraction, pointOptions = point.options, pointA11yOptions = pointOptions.accessibility, a11yOptions = series.chart.options.accessibility, pointA11yDisabled = pointA11yOptions?.enabled === false, 
+    // Whether to skip null points. If the user did not set this
+    // option, use the opposite of nullInteraction as the default
+    // (#24650).
+    skipNullPoints = a11yOptions
         .keyboardNavigation
         .seriesNavigation
-        .skipNullPoints ?? (!(!point.isNull || nullInteraction) &&
+        .skipNullPoints ?? !nullInteraction;
+    return point.isNull && skipNullPoints ||
         point.visible === false ||
         point.isInside === false ||
         pointA11yDisabled ||
-        isSkipSeries(series));
+        isSkipSeries(series);
 }
 /**
  * Get the first point that is not a skip point in this series.

package/es-modules/Accessibility/Components/ZoomComponent.js

@@ -18,7 +18,7 @@ const { unhideChartElementFromAT } = CU;
 import HU from '../Utils/HTMLUtilities.js';
 const { getFakeMouseEvent } = HU;
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
-import { attr, pick } from '../../Shared/Utilities.js';
+import { attr } from '../../Shared/Utilities.js';
 /* *
  *
  *  Functions
@@ -274,7 +274,7 @@ class ZoomComponent extends AccessibilityComponent {
                     [keys.space, keys.enter],
                     function () {
                         const res = onClick(this, chart);
-                        return pick(res, this.response.success);
+                        return (res ?? this.response.success);
                     }
                 ]
             ],

package/es-modules/Accessibility/FocusBorder.js

@@ -12,7 +12,7 @@
  *
  * */
 'use strict';
-import { addEvent, pick } from '../Shared/Utilities.js';
+import { addEvent } from '../Shared/Utilities.js';
 /* *
  *
  *  Composition
@@ -150,7 +150,7 @@ var FocusBorderComposition;
             this.removeFocusBorder();
         }
         // Add the border rect
-        const bb = this.getBBox(), pad = pick(margin, 3), parent = this.parentGroup, scaleX = this.scaleX || parent && parent.scaleX, scaleY = this.scaleY || parent && parent.scaleY, oneDefined = scaleX ? !scaleY : scaleY, scaleBoth = oneDefined ? Math.abs(scaleX || scaleY || 1) :
+        const bb = this.getBBox(), pad = (margin ?? 3), parent = this.parentGroup, scaleX = this.scaleX || parent && parent.scaleX, scaleY = this.scaleY || parent && parent.scaleY, oneDefined = scaleX ? !scaleY : scaleY, scaleBoth = oneDefined ? Math.abs(scaleX || scaleY || 1) :
             (Math.abs(scaleX || 1) + Math.abs(scaleY || 1)) / 2, lineHeight = this.renderer.fontMetrics(this).h;
         bb.x += this.translateX ? this.translateX : 0;
         bb.y += this.translateY ? this.translateY : 0;

package/es-modules/Accessibility/Options/A11yDefaults.js

@@ -458,8 +458,11 @@ const Options = {
          * Alternatively, the HTML element to link can be passed in directly as
          * an HTML node.
          *
-         * If you need the description to be part of the exported image,
-         * consider using the [caption](#caption) feature.
+         * When the Exporting module is also loaded, the description
+         * is embedded in the exported SVG as a Dublin Core
+         * RDF `<metadata>` block, so it is preserved in downloaded images
+         * for indexers and machine readers. If you need a visible caption
+         * in the exported image, use the [caption](#caption) feature.
          *
          * If you need the description to be hidden visually, use the
          * [accessibility.description](#accessibility.description) option.
@@ -520,7 +523,13 @@ const Options = {
          *
          * If the Accessibility module is loaded, this option is included by
          * default as a long description of the chart in the hidden screen
-         * reader information region.
+         * reader information region. When the Exporting module is also loaded,
+         * it is embedded into exported SVGs as a Dublin Core RDF `<metadata>`
+         * block, so the description is preserved in downloaded images
+         * for indexers and machine readers. The embedded value falls back
+         * through [linkedDescription](#accessibility.linkedDescription),
+         * [caption.text](#caption.text), and finally the generated
+         * chart-type description.
          *
          * Note: Since Highcharts now supports captions and linked descriptions,
          * it is preferred to define the description using those methods, as a

package/es-modules/Accessibility/Options/DeprecatedOptions.js

@@ -64,7 +64,6 @@
  */
 /* eslint-enable max-len */
 'use strict';
-import { pick } from '../../Shared/Utilities.js';
 import { error } from '../../Core/Utilities.js';
 /* *
  *
@@ -84,7 +83,7 @@ function traverseSetOption(root, optionAsArray, val) {
     let opt = root, prop, i = 0;
     for (; i < optionAsArray.length - 1; ++i) {
         prop = optionAsArray[i];
-        opt = opt[prop] = pick(opt[prop], {});
+        opt = opt[prop] = (opt[prop] ?? {});
     }
     opt[optionAsArray[optionAsArray.length - 1]] = val;
 }

package/es-modules/Accessibility/ProxyElement.js

@@ -174,6 +174,7 @@ class ProxyElement {
             margin: 0,
             display: 'block',
             position: 'absolute',
+            'pointer-events': 'none',
             '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)'
         });
     }

package/es-modules/Core/Animation/AnimationUtilities.js

@@ -11,7 +11,7 @@
  * */
 'use strict';
 import Fx from './Fx.js';
-import { defined, getStyle, isArray, isNumber, isObject, merge, objectEach, pick } from '../../Shared/Utilities.js';
+import { defined, getStyle, isArray, isNumber, isObject, merge, objectEach } from '../../Shared/Utilities.js';
 /* *
  *
  *  Functions
@@ -33,8 +33,9 @@ import { defined, getStyle, isArray, isNumber, isObject, merge, objectEach, pick
  * This function always relates to a chart, and sets a property on the renderer,
  * so it should be moved to the SVGRenderer.
  */
-function setAnimation(animation, chart) {
-    chart.renderer.globalAnimation = pick(animation, chart.options.chart.animation, true);
+export function setAnimation(animation, chart) {
+    chart.renderer.globalAnimation =
+        animation ?? chart.options.chart.animation ?? true;
 }
 /**
  * Get the animation in object form, where a disabled animation is always
@@ -72,7 +73,7 @@ export function animObject(animation) {
  * @return {number}
  *        The numeric value.
  */
-function getDeferredAnimation(chart, animation, series) {
+export function getDeferredAnimation(chart, animation, series) {
     const labelAnimation = animObject(animation), s = series ? [series] : chart.series;
     let defer = 0, duration = 0;
     s.forEach((series) => {
@@ -95,6 +96,11 @@ function getDeferredAnimation(chart, animation, series) {
 /**
  * The global animate method, which uses Fx to create individual animators.
  *
+ * @sample highcharts/members/renderer-basic
+ *         SVG elements with animation
+ * @sample highcharts/members/animate
+ *         Animation without an owner element
+ *
  * @function Highcharts.animate
  *
  * @param {Highcharts.HTMLDOMElement|Highcharts.SVGElement} el
@@ -110,14 +116,12 @@ function getDeferredAnimation(chart, animation, series) {
  *
  * @return {void}
  */
-function animate(el, params, opt) {
-    let start, unit = '', end, fx, args;
+export function animate(el, params = { pos: 1 }, opt) {
     if (!isObject(opt)) { // Number or undefined/null
-        args = arguments;
         opt = {
-            duration: args[2],
-            easing: args[3],
-            complete: args[4]
+            duration: arguments[2],
+            easing: arguments[3],
+            complete: arguments[4]
         };
     }
     if (!isNumber(opt.duration)) {
@@ -127,22 +131,23 @@ function animate(el, params, opt) {
         opt.easing :
         (Math[opt.easing] || Math.easeInOutSine);
     opt.curAnim = merge(params);
-    objectEach(params, function (val, prop) {
+    objectEach(params, (val, prop) => {
         // Stop current running animation of this property
-        stop(el, prop);
-        fx = new Fx(el, opt, prop);
-        end = void 0;
-        if (prop === 'd' && isArray(params.d)) {
-            fx.paths = fx.initPath(el, el.pathArray, params.d);
-            fx.toD = params.d;
-            start = 0;
+        if (el) {
+            stop(el, prop);
+        }
+        const fx = new Fx(el, opt, prop), d = params.d;
+        let start = 0, end = void 0, unit = '';
+        if (prop === 'd' && isArray(d)) {
+            fx.paths = fx.initPath(el, el.pathArray, d);
+            fx.toD = d;
             end = 1;
         }
-        else if (el.attr) {
+        else if (el?.attr) {
             start = el.attr(prop);
         }
-        else {
-            start = parseFloat(getStyle(el, prop)) || 0;
+        else if (el) {
+            start = +(getStyle(el, prop) || 0);
             if (prop !== 'opacity') {
                 unit = 'px';
             }
@@ -153,7 +158,10 @@ function animate(el, params, opt) {
         if (typeof end === 'string' && end.match('px')) {
             end = end.replace(/px/g, ''); // #4351
         }
-        fx.run(start, end, unit);
+        // Empty dashstyle animation crashes treemap on hover
+        if (defined(end)) {
+            fx.run(start, end, unit);
+        }
     });
 }
 /**
@@ -177,28 +185,11 @@ function animate(el, params, opt) {
  * improvement in all cases where we stop the animation from .attr. Instead of
  * stopping everything, we can just stop the actual attributes we're setting.
  */
-function stop(el, prop) {
-    let i = Fx.timers.length;
-    // Remove timers related to this element (#4519)
-    while (i--) {
-        if (Fx.timers[i].elem === el && (!prop || prop === Fx.timers[i].prop)) {
-            Fx.timers[i].stopped = true; // #4667
-        }
+export const stop = (el, prop) => Fx.timers.forEach((timer) => {
+    if (timer.elem === el && (!prop || prop === timer.prop)) {
+        timer.stopped = true; // #4667
     }
-}
-const animationExports = {
-    animate,
-    animObject,
-    getDeferredAnimation,
-    setAnimation,
-    stop
-};
-/* *
- *
- *  Default Export
- *
- * */
-export default animationExports;
+});
 /* *
  *
  *  API Options

package/es-modules/Core/Animation/Fx.js

@@ -117,24 +117,22 @@ class Fx {
      */
     update() {
         const elem = this.elem, prop = this.prop, // If destroyed, it is null
-        now = this.now, step = this.options.step;
+        now = this.now ?? 1, step = this.options.step;
         // Animation setter defined from outside
         if (this[prop + 'Setter']) {
             this[prop + 'Setter']();
             // Other animations on SVGElement
         }
-        else if (elem.attr) {
+        else if (elem && elem.attr) {
             if (elem.element) {
-                elem.attr(prop, now, null, true);
+                elem.attr(prop, now, void 0, true);
             }
             // HTML styles, raw HTML content like container size
         }
-        else {
-            elem.style[prop] = now + this.unit;
-        }
-        if (step) {
-            step.call(elem, now, this);
+        else if (elem) {
+            elem.style[prop] = now + (this.unit || '');
         }
+        step?.call(elem, now, this);
     }
     /**
      * Run an animation.
@@ -152,12 +150,10 @@ class Fx {
      *
      */
     run(from, to, unit) {
-        const self = this, options = self.options, timer = function (gotoEnd) {
-            return timer.stopped ? false : self.step(gotoEnd);
-        }, requestAnimationFrame = win.requestAnimationFrame ||
+        const { elem, options } = this, { complete, curAnim = {} } = options, timer = (gotoEnd) => (timer.stopped ? false : this.step(gotoEnd)), requestAnimationFrame = win.requestAnimationFrame ||
             function (step) {
                 setTimeout(step, 13);
-            }, step = function () {
+            }, step = () => {
             for (let i = 0; i < Fx.timers.length; i++) {
                 if (!Fx.timers[i]()) {
                     Fx.timers.splice(i--, 1);
@@ -167,11 +163,11 @@ class Fx {
                 requestAnimationFrame(step);
             }
         };
-        if (from === to && !this.elem['forceAnimate:' + this.prop]) {
-            delete options.curAnim[this.prop];
-            if (options.complete &&
-                Object.keys(options.curAnim).length === 0) {
-                options.complete.call(this.elem);
+        if (from === to && !elem['forceAnimate:' + this.prop]) {
+            delete curAnim[this.prop];
+            if (complete &&
+                Object.keys(curAnim).length === 0) {
+                complete.call(elem);
             }
         }
         else { // #7166
@@ -181,7 +177,7 @@ class Fx {
             this.unit = unit;
             this.now = this.start;
             this.pos = 0;
-            timer.elem = this.elem;
+            timer.elem = elem;
             timer.prop = this.prop;
             if (timer() && Fx.timers.push(timer) === 1) {
                 requestAnimationFrame(step);
@@ -202,7 +198,8 @@ class Fx {
     step(gotoEnd) {
         const t = +new Date(), options = this.options, elem = this.elem, complete = options.complete, duration = options.duration, curAnim = options.curAnim;
         let ret, done;
-        if (!!elem.attr && !elem.element) { // #2616, element is destroyed
+        // #2616, element is destroyed
+        if (elem?.attr && !elem.element) {
             ret = false;
         }
         else if (gotoEnd || t >= duration + this.startTime) {