@studiometa/js-toolkit 2.5.0 → 2.6.1

package/utils/css/animate.js

@@ -3,6 +3,7 @@ import { isDefined, isFunction, isNumber } from "../is.js";
 import transform, { TRANSFORM_PROPS } from "./transform.js";
 import { domScheduler as scheduler } from "../scheduler.js";
 import { tween, normalizeEase } from "../tween.js";
+import { eachElements } from "./utils.js";
 let id = 0;
 const running = /* @__PURE__ */ new WeakMap();
 const CSSUnitConverter = {
@@ -22,13 +23,16 @@ function getAnimationStepValue(val, getSizeRef) {
   return CSSUnitConverter[val[1]](val[0], getSizeRef);
 }
 const generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => lerp(
-  getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]),
-  getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]),
+  getAnimationStepValue(
+    fromValue ?? 0,
+    () => element[sizeRef]
+  ),
+  getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),
   progress
 );
 const widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetWidth");
 const heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetHeight");
-const generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => lerp(fromValue != null ? fromValue : defaultValue, toValue != null ? toValue : defaultValue, progress);
+const generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);
 const scaleRenderStrategy = generateLerpRenderStrategy(1);
 const degreesRenderStrategy = generateLerpRenderStrategy(0);
 const transformRenderStrategies = {
@@ -50,10 +54,9 @@ const transformRenderStrategies = {
 function render(element, from, to, progress) {
   const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));
   scheduler.read(function renderRead() {
-    var _a, _b;
     let opacity = false;
     if (isDefined(from.opacity) || isDefined(to.opacity)) {
-      opacity = map(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
+      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);
     } else if (element.style.opacity) {
       opacity = "";
     }
@@ -79,17 +82,14 @@ function render(element, from, to, progress) {
     });
   });
 }
-function animate(element, keyframes, options = {}) {
+function singleAnimate(element, keyframes, options = {}) {
   const keyframesCount = keyframes.length - 1;
   const normalizedKeyframes = keyframes.map(
-    (keyframe, index) => {
-      var _a;
-      return {
-        ...keyframe,
-        offset: (_a = keyframe.offset) != null ? _a : index / keyframesCount,
-        easing: normalizeEase(keyframe.easing)
-      };
-    }
+    (keyframe, index) => ({
+      ...keyframe,
+      offset: keyframe.offset ?? index / keyframesCount,
+      easing: normalizeEase(keyframe.easing)
+    })
   );
   if (!running.has(element)) {
     running.set(element, /* @__PURE__ */ new Map());
@@ -120,6 +120,30 @@ function animate(element, keyframes, options = {}) {
   });
   return controls;
 }
+function animate(elementOrElements, keyframes, options = {}) {
+  const controls = eachElements(
+    elementOrElements,
+    (element) => singleAnimate(element, keyframes, options)
+  );
+  const delegate = (key) => {
+    return (...args) => {
+      if (key === "progress" && args.length === 0) {
+        return controls[0][key]();
+      }
+      controls.forEach((control) => {
+        control[key](...args);
+      });
+    };
+  };
+  return {
+    start: delegate("start"),
+    pause: delegate("pause"),
+    finish: delegate("finish"),
+    play: delegate("play"),
+    progress: delegate("progress")
+  };
+}
 export {
   animate
 };
+//# sourceMappingURL=animate.js.map

package/utils/css/animate.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/animate.js"],
+  "sourcesContent": ["import { lerp, map } from '../math/index.js';\nimport { isDefined, isFunction, isNumber } from '../is.js';\nimport transform, { TRANSFORM_PROPS } from './transform.js';\nimport { domScheduler as scheduler } from '../scheduler.js';\nimport { tween, normalizeEase } from '../tween.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\nlet id = 0;\nconst running = new WeakMap();\n\nconst CSSUnitConverter = {\n  '%': (value, getSizeRef) => (value * getSizeRef()) / 100,\n  vh: (value) => (value * window.innerHeight) / 100,\n  vw: (value) => (value * window.innerWidth) / 100,\n  vmin: (value) => (value * Math.min(window.innerWidth, window.innerHeight)) / 100,\n  vmax: (value) => (value * Math.max(window.innerWidth, window.innerHeight)) / 100,\n};\n\n/**\n * Get the value from a step property.\n * @param   {number|[number, string]} val\n * @param   {() => number} getSizeRef\n * @returns {number}\n */\nfunction getAnimationStepValue(val, getSizeRef) {\n  if (isNumber(val)) {\n    return val;\n  }\n\n  if (!val[1] || !CSSUnitConverter[val[1]]) {\n    return val[0];\n  }\n\n  return CSSUnitConverter[val[1]](val[0], getSizeRef);\n}\n\nconst generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) =>\n  lerp(\n    getAnimationStepValue(\n      fromValue ?? 0,\n      /* istanbul ignore next */\n      () => element[sizeRef],\n    ),\n    getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),\n    progress,\n  );\nconst widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetWidth');\nconst heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetHeight');\n\nconst generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) =>\n  lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);\nconst scaleRenderStrategy = generateLerpRenderStrategy(1);\nconst degreesRenderStrategy = generateLerpRenderStrategy(0);\n\nconst transformRenderStrategies = {\n  x: widthBasedTranslateRenderStrategy,\n  y: heightBasedTranslateRenderStrategy,\n  z: widthBasedTranslateRenderStrategy,\n  scale: scaleRenderStrategy,\n  scaleX: scaleRenderStrategy,\n  scaleY: scaleRenderStrategy,\n  scaleZ: scaleRenderStrategy,\n  skew: degreesRenderStrategy,\n  skewX: degreesRenderStrategy,\n  skewY: degreesRenderStrategy,\n  rotate: degreesRenderStrategy,\n  rotateX: degreesRenderStrategy,\n  rotateY: degreesRenderStrategy,\n  rotateZ: degreesRenderStrategy,\n};\n\n/**\n * Render an element style based on 2 keyframes and a progress value.\n *\n * @param   {HTMLElement} element\n * @param   {NormalizedKeyframe} from\n * @param   {NormalizedKeyframe} to\n * @param   {number} progress\n * @returns {void}\n */\nfunction render(element, from, to, progress) {\n  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));\n\n  scheduler.read(function renderRead() {\n    /** @type {false|number|string} */\n    let opacity = false;\n    if (isDefined(from.opacity) || isDefined(to.opacity)) {\n      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);\n    } else if (element.style.opacity) {\n      opacity = '';\n    }\n\n    /** @type {false|string} */\n    let transformOrigin = false;\n    if (isDefined(to.transformOrigin)) {\n      transformOrigin = to.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    const props = Object.fromEntries(\n      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => {\n        return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];\n      }),\n    );\n    scheduler.write(function renderWrite() {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      transform(element, props);\n    });\n  });\n}\n\n/**\n * @typedef {import('./transform.js').TransformProps} TransformProps\n * @typedef {TransformProps & {\n *   opacity?: number;\n *   transformOrigin?: string;\n *   easing?: import('../math/createEases.js').EasingFunction|import('../tween.js').BezierCurve;\n *   offset?: number;\n * }} Keyframe\n * @typedef {Keyframe & {\n *   easing: import('../math/createEases.js').EasingFunction;\n *   offset: number;\n * }} NormalizedKeyframe\n * @typedef {{\n *   start: () => void;\n *   pause: () => void;\n *   play: () => void;\n *   finish: () => void;\n *   progress: (value?: number) => number\n * }} Animate\n */\n\n/**\n * Animate an element.\n * @param   {HTMLElement} element\n * @param   {Keyframe[]} keyframes\n * @param   {import('../tween.js').TweenOptions} [options]\n * @returns {Animate}\n */\nfunction singleAnimate(element, keyframes, options = {}) {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index) =>\n      /** @type {NormalizedKeyframe} */ ({\n        ...keyframe,\n        offset: keyframe.offset ?? index / keyframesCount,\n        easing: normalizeEase(keyframe.easing),\n      }),\n  );\n\n  if (!running.has(element)) {\n    running.set(element, new Map());\n  }\n\n  const key = `animate-${id}`;\n  id += 1;\n\n  /**\n   * Set the progress value.\n   *\n   * @param {number} progress The progress value.\n   */\n  function callback(progress) {\n    let toIndex = 0;\n    while (\n      normalizedKeyframes[toIndex] &&\n      normalizedKeyframes[toIndex].offset <= progress &&\n      normalizedKeyframes[toIndex].offset !== 1\n    ) {\n      toIndex += 1;\n    }\n\n    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);\n  }\n\n  const controls = tween(callback, {\n    ...options,\n    onStart() {\n      if (isFunction(options.onStart)) {\n        options.onStart();\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      runningKeys.forEach((runningPause, runningKey) => {\n        runningPause();\n        runningKeys.delete(runningKey);\n      });\n      runningKeys.set(key, controls.pause);\n      running.set(element, runningKeys);\n    },\n  });\n\n  return controls;\n}\n\n/**\n * Animate one or more elements.\n * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements\n * @param   {Keyframe[]} keyframes\n * @param   {import('../tween.js').TweenOptions} [options]\n * @returns {Animate}\n */\nexport function animate(elementOrElements, keyframes, options = {}) {\n  const controls = eachElements(elementOrElements, (element) =>\n    singleAnimate(element, keyframes, options),\n  );\n\n  const delegate = (key) => {\n    // eslint-disable-next-line consistent-return\n    return (...args) => {\n      if (key === 'progress' && args.length === 0) {\n        return controls[0][key]();\n      }\n\n      controls.forEach((control) => {\n        control[key](...args);\n      });\n    };\n  };\n\n  return {\n    start: delegate('start'),\n    pause: delegate('pause'),\n    finish: delegate('finish'),\n    play: delegate('play'),\n    progress: delegate('progress'),\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/utils/css/classes.cjs

@@ -25,15 +25,18 @@ __export(classes_exports, {
 });
 module.exports = __toCommonJS(classes_exports);
 var import_is = require("../is.cjs");
+var import_utils = require("./utils.cjs");
 function setClasses(element, classNames, method, forceToggle) {
   if (!element || !classNames) {
     return;
   }
-  const normalizedClassNames = (0, import_is.isArray)(classNames) ? classNames : classNames.split(" ");
+  const normalizedClassNames = (0, import_is.isArray)(classNames) ? classNames : classNames.split(" ").filter((className) => className);
   if (method !== "toggle") {
-    element.classList[method](...normalizedClassNames);
+    (0, import_utils.eachElements)(element, (el) => el.classList[method](...normalizedClassNames));
   } else {
-    normalizedClassNames.forEach((className) => element.classList[method](className, forceToggle));
+    normalizedClassNames.forEach(
+      (className) => (0, import_utils.eachElements)(element, (el) => el.classList[method](className, forceToggle))
+    );
   }
 }
 function add(element, classNames) {
@@ -46,3 +49,4 @@ function toggle(element, classNames, force) {
   setClasses(element, classNames, "toggle", force);
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=classes.cjs.map

package/utils/css/classes.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/classes.js"],
+  "sourcesContent": ["import { isArray } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of classes as string on an element.\n *\n * @param {Element|Element[]|NodeListOf<Element>} element The element to update.\n * @param {string|string[]} classNames A string of class names.\n * @param {'add'|'remove'|'toggle'} [method] The method to use: add, remove or toggle.\n * @param {boolean} [forceToggle] Force toggle?\n */\nfunction setClasses(element, classNames, method, forceToggle) {\n  if (!element || !classNames) {\n    return;\n  }\n\n  const normalizedClassNames = isArray(classNames)\n    ? classNames\n    : classNames.split(' ').filter((className) => className);\n\n  if (method !== 'toggle') {\n    eachElements(element, (el) => el.classList[method](...normalizedClassNames));\n  } else {\n    normalizedClassNames.forEach((className) =>\n      eachElements(element, (el) => el.classList[method](className, forceToggle)),\n    );\n  }\n}\n\n/**\n * Add class names to an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @returns {void}\n */\nexport function add(element, classNames) {\n  setClasses(element, classNames, 'add');\n}\n\n/**\n * Remove class names from an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @returns {void}\n */\nexport function remove(element, classNames) {\n  setClasses(element, classNames, 'remove');\n}\n\n/**\n * Toggle class names from an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @param   {boolean}         [force]    Force toggle?\n * @returns {void}\n */\nexport function toggle(element, classNames, force) {\n  setClasses(element, classNames, 'toggle', force);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAwB;AAExB,mBAA6B;AAU7B,SAAS,WAAW,SAAS,YAAY,QAAQ,aAAa;AAC5D,MAAI,CAAC,WAAW,CAAC,YAAY;AAC3B;AAAA,EACF;AAEA,QAAM,2BAAuB,mBAAQ,UAAU,IAC3C,aACA,WAAW,MAAM,GAAG,EAAE,OAAO,CAAC,cAAc,SAAS;AAEzD,MAAI,WAAW,UAAU;AACvB,mCAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,GAAG,oBAAoB,CAAC;AAAA,EAC7E,OAAO;AACL,yBAAqB;AAAA,MAAQ,CAAC,kBAC5B,2BAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,WAAW,WAAW,CAAC;AAAA,IAC5E;AAAA,EACF;AACF;AASO,SAAS,IAAI,SAAS,YAAY;AACvC,aAAW,SAAS,YAAY,KAAK;AACvC;AASO,SAAS,OAAO,SAAS,YAAY;AAC1C,aAAW,SAAS,YAAY,QAAQ;AAC1C;AAUO,SAAS,OAAO,SAAS,YAAY,OAAO;AACjD,aAAW,SAAS,YAAY,UAAU,KAAK;AACjD;",
+  "names": []
+}

package/utils/css/classes.d.ts

@@ -1,25 +1,25 @@
 /**
  * Add class names to an element.
  *
- * @param   {HTMLElement}     element    The element to update.
+ * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.
  * @param   {string|string[]} classNames A string of class names.
  * @returns {void}
  */
-export function add(element: HTMLElement, classNames: string | string[]): void;
+export function add(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
 /**
  * Remove class names from an element.
  *
- * @param   {HTMLElement}     element    The element to update.
+ * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.
  * @param   {string|string[]} classNames A string of class names.
  * @returns {void}
  */
-export function remove(element: HTMLElement, classNames: string | string[]): void;
+export function remove(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
 /**
  * Toggle class names from an element.
  *
- * @param   {HTMLElement}     element    The element to update.
+ * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.
  * @param   {string|string[]} classNames A string of class names.
  * @param   {boolean}         [force]    Force toggle?
  * @returns {void}
  */
-export function toggle(element: HTMLElement, classNames: string | string[], force?: boolean): void;
+export function toggle(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[], force?: boolean): void;

package/utils/css/classes.js

@@ -1,13 +1,16 @@
 import { isArray } from "../is.js";
+import { eachElements } from "./utils.js";
 function setClasses(element, classNames, method, forceToggle) {
   if (!element || !classNames) {
     return;
   }
-  const normalizedClassNames = isArray(classNames) ? classNames : classNames.split(" ");
+  const normalizedClassNames = isArray(classNames) ? classNames : classNames.split(" ").filter((className) => className);
   if (method !== "toggle") {
-    element.classList[method](...normalizedClassNames);
+    eachElements(element, (el) => el.classList[method](...normalizedClassNames));
   } else {
-    normalizedClassNames.forEach((className) => element.classList[method](className, forceToggle));
+    normalizedClassNames.forEach(
+      (className) => eachElements(element, (el) => el.classList[method](className, forceToggle))
+    );
   }
 }
 function add(element, classNames) {
@@ -24,3 +27,4 @@ export {
   remove,
   toggle
 };
+//# sourceMappingURL=classes.js.map

package/utils/css/classes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/classes.js"],
+  "sourcesContent": ["import { isArray } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of classes as string on an element.\n *\n * @param {Element|Element[]|NodeListOf<Element>} element The element to update.\n * @param {string|string[]} classNames A string of class names.\n * @param {'add'|'remove'|'toggle'} [method] The method to use: add, remove or toggle.\n * @param {boolean} [forceToggle] Force toggle?\n */\nfunction setClasses(element, classNames, method, forceToggle) {\n  if (!element || !classNames) {\n    return;\n  }\n\n  const normalizedClassNames = isArray(classNames)\n    ? classNames\n    : classNames.split(' ').filter((className) => className);\n\n  if (method !== 'toggle') {\n    eachElements(element, (el) => el.classList[method](...normalizedClassNames));\n  } else {\n    normalizedClassNames.forEach((className) =>\n      eachElements(element, (el) => el.classList[method](className, forceToggle)),\n    );\n  }\n}\n\n/**\n * Add class names to an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @returns {void}\n */\nexport function add(element, classNames) {\n  setClasses(element, classNames, 'add');\n}\n\n/**\n * Remove class names from an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @returns {void}\n */\nexport function remove(element, classNames) {\n  setClasses(element, classNames, 'remove');\n}\n\n/**\n * Toggle class names from an element.\n *\n * @param   {Element|Element[]|NodeListOf<Element>}     element    The element to update.\n * @param   {string|string[]} classNames A string of class names.\n * @param   {boolean}         [force]    Force toggle?\n * @returns {void}\n */\nexport function toggle(element, classNames, force) {\n  setClasses(element, classNames, 'toggle', force);\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAU7B,SAAS,WAAW,SAAS,YAAY,QAAQ,aAAa;AAC5D,MAAI,CAAC,WAAW,CAAC,YAAY;AAC3B;AAAA,EACF;AAEA,QAAM,uBAAuB,QAAQ,UAAU,IAC3C,aACA,WAAW,MAAM,GAAG,EAAE,OAAO,CAAC,cAAc,SAAS;AAEzD,MAAI,WAAW,UAAU;AACvB,iBAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,GAAG,oBAAoB,CAAC;AAAA,EAC7E,OAAO;AACL,yBAAqB;AAAA,MAAQ,CAAC,cAC5B,aAAa,SAAS,CAAC,OAAO,GAAG,UAAU,QAAQ,WAAW,WAAW,CAAC;AAAA,IAC5E;AAAA,EACF;AACF;AASO,SAAS,IAAI,SAAS,YAAY;AACvC,aAAW,SAAS,YAAY,KAAK;AACvC;AASO,SAAS,OAAO,SAAS,YAAY;AAC1C,aAAW,SAAS,YAAY,QAAQ;AAC1C;AAUO,SAAS,OAAO,SAAS,YAAY,OAAO;AACjD,aAAW,SAAS,YAAY,UAAU,KAAK;AACjD;",
+  "names": []
+}

package/utils/css/getOffsetSizes.cjs

@@ -45,3 +45,4 @@ function getOffsetSizes(element) {
   };
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=getOffsetSizes.cjs.map

package/utils/css/getOffsetSizes.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.js"],
+  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n * @param   {HTMLElement} element\n * @returns {{ x: number, y: number, width: number, height: number, top: number, right: number, bottom: number, left: number }}\n */\nexport default function getOffsetSizes(element) {\n  let parent = element;\n  let x = -window.pageXOffset;\n  let y = -window.pageYOffset;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetWidth;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKe,SAAR,eAAgC,SAAS;AAC9C,MAAI,SAAS;AACb,MAAI,IAAI,CAAC,OAAO;AAChB,MAAI,IAAI,CAAC,OAAO;AAEhB,SAAO,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AAEZ,aAAS,OAAO;AAAA,EAClB;AAEA,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,MAAM;AAAA,EACR;AACF;",
+  "names": []
+}

package/utils/css/getOffsetSizes.js

@@ -23,3 +23,4 @@ function getOffsetSizes(element) {
 export {
   getOffsetSizes as default
 };
+//# sourceMappingURL=getOffsetSizes.js.map

package/utils/css/getOffsetSizes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.js"],
+  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n * @param   {HTMLElement} element\n * @returns {{ x: number, y: number, width: number, height: number, top: number, right: number, bottom: number, left: number }}\n */\nexport default function getOffsetSizes(element) {\n  let parent = element;\n  let x = -window.pageXOffset;\n  let y = -window.pageYOffset;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetWidth;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
+  "mappings": "AAKe,SAAR,eAAgC,SAAS;AAC9C,MAAI,SAAS;AACb,MAAI,IAAI,CAAC,OAAO;AAChB,MAAI,IAAI,CAAC,OAAO;AAEhB,SAAO,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AAEZ,aAAS,OAAO;AAAA,EAClB;AAEA,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,MAAM;AAAA,EACR;AACF;",
+  "names": []
+}

package/utils/css/index.cjs

@@ -23,7 +23,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/index.js
+// packages/js-toolkit/utils/css/index.ts
 var css_exports = {};
 __export(css_exports, {
   addClass: () => import_classes.add,
@@ -45,3 +45,4 @@ var import_matrix = __toESM(require("./matrix.cjs"), 1);
 var import_transform = __toESM(require("./transform.cjs"), 1);
 var import_transition = __toESM(require("./transition.cjs"), 1);
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/utils/css/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/index.ts"],
+  "sourcesContent": ["export * from './animate.js';\nexport { add as addClass, remove as removeClass, toggle as toggleClass } from './classes.js';\nexport { add as addStyle, remove as removeStyle } from './styles.js';\nexport { default as getOffsetSizes } from './getOffsetSizes.js';\nexport { default as matrix } from './matrix.js';\nexport { default as transform } from './transform.js';\nexport { default as transition } from './transition.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,0BAAd;AACA,qBAA8E;AAC9E,oBAAuD;AACvD,4BAA0C;AAC1C,oBAAkC;AAClC,uBAAqC;AACrC,wBAAsC;",
+  "names": []
+}

package/utils/css/index.d.ts

@@ -1,7 +1,7 @@
-export * from "./animate.js";
-export { default as getOffsetSizes } from "./getOffsetSizes.js";
-export { default as matrix } from "./matrix.js";
-export { default as transform } from "./transform.js";
-export { default as transition } from "./transition.js";
-export { add as addClass, remove as removeClass, toggle as toggleClass } from "./classes.js";
-export { add as addStyle, remove as removeStyle } from "./styles.js";
+export * from './animate.js';
+export { add as addClass, remove as removeClass, toggle as toggleClass } from './classes.js';
+export { add as addStyle, remove as removeStyle } from './styles.js';
+export { default as getOffsetSizes } from './getOffsetSizes.js';
+export { default as matrix } from './matrix.js';
+export { default as transform } from './transform.js';
+export { default as transition } from './transition.js';

package/utils/css/index.js

@@ -16,3 +16,4 @@ export {
   default4 as transform,
   default5 as transition
 };
+//# sourceMappingURL=index.js.map

package/utils/css/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/index.ts"],
+  "sourcesContent": ["export * from './animate.js';\nexport { add as addClass, remove as removeClass, toggle as toggleClass } from './classes.js';\nexport { add as addStyle, remove as removeStyle } from './styles.js';\nexport { default as getOffsetSizes } from './getOffsetSizes.js';\nexport { default as matrix } from './matrix.js';\nexport { default as transform } from './transform.js';\nexport { default as transition } from './transition.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,SAAgB,KAAoB,QAAuB,cAAmB;AAC9E,SAAgB,OAAPA,MAA2B,UAAVC,eAA6B;AACvD,SAAoB,WAAXC,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA4B;AACrC,SAAoB,WAAXA,gBAA6B;",
+  "names": ["add", "remove", "default"]
+}

package/utils/css/matrix.cjs

@@ -23,8 +23,8 @@ __export(matrix_exports, {
 });
 module.exports = __toCommonJS(matrix_exports);
 function matrix(transform) {
-  var _a, _b, _c, _d, _e, _f;
   transform = transform || {};
-  return `matrix(${(_a = transform.scaleX) != null ? _a : 1}, ${(_b = transform.skewY) != null ? _b : 0}, ${(_c = transform.skewX) != null ? _c : 0}, ${(_d = transform.scaleY) != null ? _d : 1}, ${(_e = transform.translateX) != null ? _e : 0}, ${(_f = transform.translateY) != null ? _f : 0})`;
+  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${transform.scaleY ?? 1}, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=matrix.cjs.map

package/utils/css/matrix.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/matrix.js"],
+  "sourcesContent": ["/**\n * Format a CSS transform matrix with the given values.\n *\n * @param   {Object} transform\n * @param   {number} [transform.scaleX=1]     The scale on the x axis.\n * @param   {number} [transform.scaleY=1]     The scale on the y axis.\n * @param   {number} [transform.skewX=0]      The skew on the x axis.\n * @param   {number} [transform.skewY=0]      The skew on the y axis.\n * @param   {number} [transform.translateX=0] The translate on the x axis.\n * @param   {number} [transform.translateY=0] The translate on the y axis.\n * @returns {string}                           A formatted CSS matrix transform.\n * @example\n * ```js\n * matrix({ scaleX: 0.5, scaleY: 0.5 });\n * // matrix(0.5, 0, 0, 0.5, 0, 0)\n * ```\n */\nexport default function matrix(transform) {\n  // eslint-disable-next-line no-param-reassign\n  transform = transform || {};\n  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${\n    transform.scaleY ?? 1\n  }, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBe,SAAR,OAAwB,WAAW;AAExC,cAAY,aAAa,CAAC;AAC1B,SAAO,UAAU,UAAU,UAAU,MAAM,UAAU,SAAS,MAAM,UAAU,SAAS,MACrF,UAAU,UAAU,MACjB,UAAU,cAAc,MAAM,UAAU,cAAc;AAC7D;",
+  "names": []
+}

package/utils/css/matrix.js

@@ -1,8 +1,8 @@
 function matrix(transform) {
-  var _a, _b, _c, _d, _e, _f;
   transform = transform || {};
-  return `matrix(${(_a = transform.scaleX) != null ? _a : 1}, ${(_b = transform.skewY) != null ? _b : 0}, ${(_c = transform.skewX) != null ? _c : 0}, ${(_d = transform.scaleY) != null ? _d : 1}, ${(_e = transform.translateX) != null ? _e : 0}, ${(_f = transform.translateY) != null ? _f : 0})`;
+  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${transform.scaleY ?? 1}, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;
 }
 export {
   matrix as default
 };
+//# sourceMappingURL=matrix.js.map

package/utils/css/matrix.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/matrix.js"],
+  "sourcesContent": ["/**\n * Format a CSS transform matrix with the given values.\n *\n * @param   {Object} transform\n * @param   {number} [transform.scaleX=1]     The scale on the x axis.\n * @param   {number} [transform.scaleY=1]     The scale on the y axis.\n * @param   {number} [transform.skewX=0]      The skew on the x axis.\n * @param   {number} [transform.skewY=0]      The skew on the y axis.\n * @param   {number} [transform.translateX=0] The translate on the x axis.\n * @param   {number} [transform.translateY=0] The translate on the y axis.\n * @returns {string}                           A formatted CSS matrix transform.\n * @example\n * ```js\n * matrix({ scaleX: 0.5, scaleY: 0.5 });\n * // matrix(0.5, 0, 0, 0.5, 0, 0)\n * ```\n */\nexport default function matrix(transform) {\n  // eslint-disable-next-line no-param-reassign\n  transform = transform || {};\n  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${\n    transform.scaleY ?? 1\n  }, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;\n}\n"],
+  "mappings": "AAiBe,SAAR,OAAwB,WAAW;AAExC,cAAY,aAAa,CAAC;AAC1B,SAAO,UAAU,UAAU,UAAU,MAAM,UAAU,SAAS,MAAM,UAAU,SAAS,MACrF,UAAU,UAAU,MACjB,UAAU,cAAc,MAAM,UAAU,cAAc;AAC7D;",
+  "names": []
+}

package/utils/css/styles.cjs

@@ -24,18 +24,22 @@ __export(styles_exports, {
 });
 module.exports = __toCommonJS(styles_exports);
 var import_is = require("../is.cjs");
-function setStyles(element, styles, method = "add") {
-  if (!element || !styles || !(0, import_is.isObject)(styles)) {
+var import_utils = require("./utils.cjs");
+function setStyles(elementOrElements, styles, method = "add") {
+  if (!elementOrElements || !styles || !(0, import_is.isObject)(styles)) {
     return;
   }
-  Object.entries(styles).forEach(([prop, value]) => {
-    element.style[prop] = method === "add" ? value : "";
+  (0, import_utils.eachElements)(elementOrElements, (el) => {
+    Object.entries(styles).forEach(([prop, value]) => {
+      el.style[prop] = method === "add" ? value : "";
+    });
   });
 }
-function add(element, styles) {
-  setStyles(element, styles);
+function add(elementOrElements, styles) {
+  setStyles(elementOrElements, styles);
 }
-function remove(element, styles) {
-  setStyles(element, styles, "remove");
+function remove(elementOrElements, styles) {
+  setStyles(elementOrElements, styles, "remove");
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=styles.cjs.map

package/utils/css/styles.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/styles.js"],
+  "sourcesContent": ["import { isObject } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of style properties on an element.\n *\n * @param {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param {Partial<CSSStyleDeclaration>} styles  An object of styles properties and values.\n * @param {string}                       method  The method to use: add or remove.\n */\nfunction setStyles(elementOrElements, styles, method = 'add') {\n  if (!elementOrElements || !styles || !isObject(styles)) {\n    return;\n  }\n\n  eachElements(elementOrElements, (el) => {\n    Object.entries(styles).forEach(([prop, value]) => {\n      el.style[prop] = method === 'add' ? value : '';\n    });\n  });\n}\n\n/**\n * Add styles to an element.\n *\n * @param {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param {Partial<CSSStyleDeclaration>} styles  A string of class names.\n * @returns {void}\n */\nexport function add(elementOrElements, styles) {\n  setStyles(elementOrElements, styles);\n}\n\n/**\n * Remove class names from an element.\n *\n * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param  {Partial<CSSStyleDeclaration>} styles  A string of class names.\n * @returns {void}\n */\nexport function remove(elementOrElements, styles) {\n  setStyles(elementOrElements, styles, 'remove');\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAyB;AAEzB,mBAA6B;AAS7B,SAAS,UAAU,mBAAmB,QAAQ,SAAS,OAAO;AAC5D,MAAI,CAAC,qBAAqB,CAAC,UAAU,KAAC,oBAAS,MAAM,GAAG;AACtD;AAAA,EACF;AAEA,iCAAa,mBAAmB,CAAC,OAAO;AACtC,WAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAChD,SAAG,MAAM,QAAQ,WAAW,QAAQ,QAAQ;AAAA,IAC9C,CAAC;AAAA,EACH,CAAC;AACH;AASO,SAAS,IAAI,mBAAmB,QAAQ;AAC7C,YAAU,mBAAmB,MAAM;AACrC;AASO,SAAS,OAAO,mBAAmB,QAAQ;AAChD,YAAU,mBAAmB,QAAQ,QAAQ;AAC/C;",
+  "names": []
+}

package/utils/css/styles.d.ts

@@ -1,16 +1,16 @@
 /**
  * Add styles to an element.
  *
- * @param {HTMLElement}                  element The element to update.
+ * @param {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.
  * @param {Partial<CSSStyleDeclaration>} styles  A string of class names.
  * @returns {void}
  */
-export function add(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;
+export function add(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, styles: Partial<CSSStyleDeclaration>): void;
 /**
  * Remove class names from an element.
  *
- * @param  {HTMLElement}                  element The element to update.
+ * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.
  * @param  {Partial<CSSStyleDeclaration>} styles  A string of class names.
  * @returns {void}
  */
-export function remove(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;
+export function remove(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, styles: Partial<CSSStyleDeclaration>): void;

package/utils/css/styles.js

@@ -1,19 +1,23 @@
 import { isObject } from "../is.js";
-function setStyles(element, styles, method = "add") {
-  if (!element || !styles || !isObject(styles)) {
+import { eachElements } from "./utils.js";
+function setStyles(elementOrElements, styles, method = "add") {
+  if (!elementOrElements || !styles || !isObject(styles)) {
     return;
   }
-  Object.entries(styles).forEach(([prop, value]) => {
-    element.style[prop] = method === "add" ? value : "";
+  eachElements(elementOrElements, (el) => {
+    Object.entries(styles).forEach(([prop, value]) => {
+      el.style[prop] = method === "add" ? value : "";
+    });
   });
 }
-function add(element, styles) {
-  setStyles(element, styles);
+function add(elementOrElements, styles) {
+  setStyles(elementOrElements, styles);
 }
-function remove(element, styles) {
-  setStyles(element, styles, "remove");
+function remove(elementOrElements, styles) {
+  setStyles(elementOrElements, styles, "remove");
 }
 export {
   add,
   remove
 };
+//# sourceMappingURL=styles.js.map

package/utils/css/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/styles.js"],
+  "sourcesContent": ["import { isObject } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * Manage a list of style properties on an element.\n *\n * @param {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param {Partial<CSSStyleDeclaration>} styles  An object of styles properties and values.\n * @param {string}                       method  The method to use: add or remove.\n */\nfunction setStyles(elementOrElements, styles, method = 'add') {\n  if (!elementOrElements || !styles || !isObject(styles)) {\n    return;\n  }\n\n  eachElements(elementOrElements, (el) => {\n    Object.entries(styles).forEach(([prop, value]) => {\n      el.style[prop] = method === 'add' ? value : '';\n    });\n  });\n}\n\n/**\n * Add styles to an element.\n *\n * @param {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param {Partial<CSSStyleDeclaration>} styles  A string of class names.\n * @returns {void}\n */\nexport function add(elementOrElements, styles) {\n  setStyles(elementOrElements, styles);\n}\n\n/**\n * Remove class names from an element.\n *\n * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>}                  elementOrElements The element to update.\n * @param  {Partial<CSSStyleDeclaration>} styles  A string of class names.\n * @returns {void}\n */\nexport function remove(elementOrElements, styles) {\n  setStyles(elementOrElements, styles, 'remove');\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,oBAAoB;AAS7B,SAAS,UAAU,mBAAmB,QAAQ,SAAS,OAAO;AAC5D,MAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,SAAS,MAAM,GAAG;AACtD;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,OAAO;AACtC,WAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAChD,SAAG,MAAM,QAAQ,WAAW,QAAQ,QAAQ;AAAA,IAC9C,CAAC;AAAA,EACH,CAAC;AACH;AASO,SAAS,IAAI,mBAAmB,QAAQ;AAC7C,YAAU,mBAAmB,MAAM;AACrC;AASO,SAAS,OAAO,mBAAmB,QAAQ;AAChD,YAAU,mBAAmB,QAAQ,QAAQ;AAC/C;",
+  "names": []
+}

package/utils/css/transform.cjs

@@ -24,6 +24,7 @@ __export(transform_exports, {
 });
 module.exports = __toCommonJS(transform_exports);
 var import_is = require("../is.cjs");
+var import_utils = require("./utils.cjs");
 var TRANSFORM_PROPS = [
   "x",
   "y",
@@ -40,11 +41,10 @@ var TRANSFORM_PROPS = [
   "skewX",
   "skewY"
 ];
-function transform(element, props) {
-  var _a, _b, _c;
+function transform(elementOrElements, props) {
   let value = "";
   if ((0, import_is.isDefined)(props.x) || (0, import_is.isDefined)(props.y) || (0, import_is.isDefined)(props.z)) {
-    value += `translate3d(${(_a = props.x) != null ? _a : 0}px, ${(_b = props.y) != null ? _b : 0}px, ${(_c = props.z) != null ? _c : 0}px) `;
+    value += `translate3d(${props.x ?? 0}px, ${props.y ?? 0}px, ${props.z ?? 0}px) `;
   }
   if ((0, import_is.isDefined)(props.rotate)) {
     value += `rotate(${props.rotate}deg) `;
@@ -82,7 +82,10 @@ function transform(element, props) {
       value += `skewY(${props.skewY}deg) `;
     }
   }
-  element.style.transform = value;
+  (0, import_utils.eachElements)(elementOrElements, (element) => {
+    element.style.transform = value;
+  });
   return value;
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=transform.cjs.map

package/utils/css/transform.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/transform.js"],
+  "sourcesContent": ["import { isDefined } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * @typedef {Partial<{\n *  x: number;\n *  y: number;\n *  z: number;\n *  rotate: number;\n *  rotateX: number;\n *  rotateY: number;\n *  rotateZ: number;\n *  scale: number;\n *  scaleX: number;\n *  scaleY: number;\n *  scaleZ: number;\n *  skew: number;\n *  skewX: number;\n *  skewY: number;\n * }>} TransformProps\n */\n\nexport const TRANSFORM_PROPS = [\n  'x',\n  'y',\n  'z',\n  'rotate',\n  'rotateX',\n  'rotateY',\n  'rotateZ',\n  'scale',\n  'scaleX',\n  'scaleY',\n  'scaleZ',\n  'skew',\n  'skewX',\n  'skewY',\n];\n\n/**\n * Generate a CSS transform.\n *\n * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements\n * @param   {TransformProps} props\n * @returns {string}\n */\nexport default function transform(elementOrElements, props) {\n  let value = '';\n\n  if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {\n    value += `translate3d(${props.x ?? 0}px, ${props.y ?? 0}px, ${props.z ?? 0}px) `;\n  }\n\n  if (isDefined(props.rotate)) {\n    value += `rotate(${props.rotate}deg) `;\n  } else {\n    if (isDefined(props.rotateX)) {\n      value += `rotateX(${props.rotateX}deg) `;\n    }\n\n    if (isDefined(props.rotateY)) {\n      value += `rotateY(${props.rotateY}deg) `;\n    }\n\n    if (isDefined(props.rotateZ)) {\n      value += `rotateZ(${props.rotateZ}deg) `;\n    }\n  }\n\n  if (isDefined(props.scale)) {\n    value += `scale(${props.scale}) `;\n  } else {\n    if (isDefined(props.scaleX)) {\n      value += `scaleX(${props.scaleX}) `;\n    }\n\n    if (isDefined(props.scaleY)) {\n      value += `scaleY(${props.scaleY}) `;\n    }\n\n    if (isDefined(props.scaleZ)) {\n      value += `scaleZ(${props.scaleZ}) `;\n    }\n  }\n\n  if (isDefined(props.skew)) {\n    value += `skew(${props.skew}deg) `;\n  } else {\n    if (isDefined(props.skewX)) {\n      value += `skewX(${props.skewX}deg) `;\n    }\n\n    if (isDefined(props.skewY)) {\n      value += `skewY(${props.skewY}deg) `;\n    }\n  }\n\n  eachElements(elementOrElements, (element) => {\n    element.style.transform = value;\n  });\n  return value;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA0B;AAE1B,mBAA6B;AAqBtB,IAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AASe,SAAR,UAA2B,mBAAmB,OAAO;AAC1D,MAAI,QAAQ;AAEZ,UAAI,qBAAU,MAAM,CAAC,SAAK,qBAAU,MAAM,CAAC,SAAK,qBAAU,MAAM,CAAC,GAAG;AAClE,aAAS,eAAe,MAAM,KAAK,QAAQ,MAAM,KAAK,QAAQ,MAAM,KAAK;AAAA,EAC3E;AAEA,UAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,aAAS,UAAU,MAAM;AAAA,EAC3B,OAAO;AACL,YAAI,qBAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,YAAI,qBAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,YAAI,qBAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAAA,EACF;AAEA,UAAI,qBAAU,MAAM,KAAK,GAAG;AAC1B,aAAS,SAAS,MAAM;AAAA,EAC1B,OAAO;AACL,YAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,YAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,YAAI,qBAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAAA,EACF;AAEA,UAAI,qBAAU,MAAM,IAAI,GAAG;AACzB,aAAS,QAAQ,MAAM;AAAA,EACzB,OAAO;AACL,YAAI,qBAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAEA,YAAI,qBAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,EACF;AAEA,iCAAa,mBAAmB,CAAC,YAAY;AAC3C,YAAQ,MAAM,YAAY;AAAA,EAC5B,CAAC;AACD,SAAO;AACT;",
+  "names": []
+}

package/utils/css/transform.d.ts

@@ -1,11 +1,11 @@
 /**
  * Generate a CSS transform.
  *
- * @param   {HTMLElement} element
+ * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements
  * @param   {TransformProps} props
  * @returns {string}
  */
-export default function transform(element: HTMLElement, props: TransformProps): string;
+export default function transform(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, props: TransformProps): string;
 /**
  * @typedef {Partial<{
  *  x: number;

package/utils/css/transform.js

@@ -1,4 +1,5 @@
 import { isDefined } from "../is.js";
+import { eachElements } from "./utils.js";
 const TRANSFORM_PROPS = [
   "x",
   "y",
@@ -15,11 +16,10 @@ const TRANSFORM_PROPS = [
   "skewX",
   "skewY"
 ];
-function transform(element, props) {
-  var _a, _b, _c;
+function transform(elementOrElements, props) {
   let value = "";
   if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {
-    value += `translate3d(${(_a = props.x) != null ? _a : 0}px, ${(_b = props.y) != null ? _b : 0}px, ${(_c = props.z) != null ? _c : 0}px) `;
+    value += `translate3d(${props.x ?? 0}px, ${props.y ?? 0}px, ${props.z ?? 0}px) `;
   }
   if (isDefined(props.rotate)) {
     value += `rotate(${props.rotate}deg) `;
@@ -57,10 +57,13 @@ function transform(element, props) {
       value += `skewY(${props.skewY}deg) `;
     }
   }
-  element.style.transform = value;
+  eachElements(elementOrElements, (element) => {
+    element.style.transform = value;
+  });
   return value;
 }
 export {
   TRANSFORM_PROPS,
   transform as default
 };
+//# sourceMappingURL=transform.js.map

package/utils/css/transform.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/css/transform.js"],
+  "sourcesContent": ["import { isDefined } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/**\n * @typedef {Partial<{\n *  x: number;\n *  y: number;\n *  z: number;\n *  rotate: number;\n *  rotateX: number;\n *  rotateY: number;\n *  rotateZ: number;\n *  scale: number;\n *  scaleX: number;\n *  scaleY: number;\n *  scaleZ: number;\n *  skew: number;\n *  skewX: number;\n *  skewY: number;\n * }>} TransformProps\n */\n\nexport const TRANSFORM_PROPS = [\n  'x',\n  'y',\n  'z',\n  'rotate',\n  'rotateX',\n  'rotateY',\n  'rotateZ',\n  'scale',\n  'scaleX',\n  'scaleY',\n  'scaleZ',\n  'skew',\n  'skewX',\n  'skewY',\n];\n\n/**\n * Generate a CSS transform.\n *\n * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements\n * @param   {TransformProps} props\n * @returns {string}\n */\nexport default function transform(elementOrElements, props) {\n  let value = '';\n\n  if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {\n    value += `translate3d(${props.x ?? 0}px, ${props.y ?? 0}px, ${props.z ?? 0}px) `;\n  }\n\n  if (isDefined(props.rotate)) {\n    value += `rotate(${props.rotate}deg) `;\n  } else {\n    if (isDefined(props.rotateX)) {\n      value += `rotateX(${props.rotateX}deg) `;\n    }\n\n    if (isDefined(props.rotateY)) {\n      value += `rotateY(${props.rotateY}deg) `;\n    }\n\n    if (isDefined(props.rotateZ)) {\n      value += `rotateZ(${props.rotateZ}deg) `;\n    }\n  }\n\n  if (isDefined(props.scale)) {\n    value += `scale(${props.scale}) `;\n  } else {\n    if (isDefined(props.scaleX)) {\n      value += `scaleX(${props.scaleX}) `;\n    }\n\n    if (isDefined(props.scaleY)) {\n      value += `scaleY(${props.scaleY}) `;\n    }\n\n    if (isDefined(props.scaleZ)) {\n      value += `scaleZ(${props.scaleZ}) `;\n    }\n  }\n\n  if (isDefined(props.skew)) {\n    value += `skew(${props.skew}deg) `;\n  } else {\n    if (isDefined(props.skewX)) {\n      value += `skewX(${props.skewX}deg) `;\n    }\n\n    if (isDefined(props.skewY)) {\n      value += `skewY(${props.skewY}deg) `;\n    }\n  }\n\n  eachElements(elementOrElements, (element) => {\n    element.style.transform = value;\n  });\n  return value;\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAqBtB,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AASe,SAAR,UAA2B,mBAAmB,OAAO;AAC1D,MAAI,QAAQ;AAEZ,MAAI,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,GAAG;AAClE,aAAS,eAAe,MAAM,KAAK,QAAQ,MAAM,KAAK,QAAQ,MAAM,KAAK;AAAA,EAC3E;AAEA,MAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,aAAS,UAAU,MAAM;AAAA,EAC3B,OAAO;AACL,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM;AAAA,IAC5B;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,aAAS,SAAS,MAAM;AAAA,EAC1B,OAAO;AACL,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM;AAAA,IAC3B;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,IAAI,GAAG;AACzB,aAAS,QAAQ,MAAM;AAAA,EACzB,OAAO;AACL,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAEA,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,YAAY;AAC3C,YAAQ,MAAM,YAAY;AAAA,EAC5B,CAAC;AACD,SAAO;AACT;",
+  "names": []
+}