@studiometa/js-toolkit 2.6.5 → 2.8.0

package/utils/css/animate.js.map

@@ -1,7 +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": []
+  "sources": ["../../../packages/js-toolkit/utils/css/animate.ts"],
+  "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';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, TweenOptions } from '../tween.js';\n\nexport type CSSCustomPropertyName = `--${string}`;\n\nexport type Keyframe = TransformProps & {\n  opacity?: number;\n  transformOrigin?: string;\n  easing?: EasingFunction | BezierCurve;\n  offset?: number;\n  [key: CSSCustomPropertyName]: number;\n};\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n  vars: string[];\n};\n\nexport type Animate = {\n  start: () => void;\n  pause: () => void;\n  play: () => void;\n  finish: () => void;\n  progress: (value?: number) => number;\n};\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 */\nfunction getAnimationStepValue(val: number | [number, string], getSizeRef: () => number): number {\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 */\nfunction render(\n  element: HTMLElement,\n  from: NormalizedKeyframe,\n  to: NormalizedKeyframe,\n  progress: number,\n) {\n  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));\n\n  scheduler.read(() => {\n    let opacity: false | number | string = 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    let transformOrigin: false | string = false;\n    if (isDefined(to.transformOrigin)) {\n      transformOrigin = to.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    let customProperties: false | [string, number][] = false;\n    if (isDefined(from.vars) && isDefined(to.vars)) {\n      customProperties = from.vars.map((customPropertyName) => {\n        const customPropertyValue = lerp(\n          from[customPropertyName],\n          to[customPropertyName],\n          stepProgress,\n        );\n        return [customPropertyName, customPropertyValue];\n      });\n    }\n\n    const props = Object.fromEntries(\n      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => [\n        name,\n        transformRenderStrategies[name](element, from[name], to[name], stepProgress),\n      ]),\n    );\n    scheduler.write(() => {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      if (customProperties !== false) {\n        customProperties.forEach((customProperty) => {\n          element.style.setProperty(customProperty[0], customProperty[1].toString());\n        });\n      }\n      transform(element, props);\n    });\n  });\n}\n\n/**\n * Animate an element.\n */\nfunction singleAnimate(\n  element: HTMLElement,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index): NormalizedKeyframe => ({\n      ...keyframe,\n      offset: keyframe.offset ?? index / keyframesCount,\n      easing: normalizeEase(keyframe.easing),\n      vars: Object.keys(keyframe).filter((key) => key.startsWith('--')),\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  function callback(progress: number) {\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 */\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const controls = eachElements(elementOrElements, (element) =>\n    singleAnimate(element, keyframes, options),\n  );\n\n  const delegate =\n    (key) =>\n    // eslint-disable-next-line consistent-return\n    (...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  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": ["key"]
 }

package/utils/css/classes.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/classes.js
+// packages/js-toolkit/utils/css/classes.ts
 var classes_exports = {};
 __export(classes_exports, {
   add: () => add,

package/utils/css/classes.cjs.map

@@ -1,7 +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;",
+  "sources": ["../../../packages/js-toolkit/utils/css/classes.ts"],
+  "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 */\nfunction setClasses(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  method: 'add' | 'remove' | 'toggle',\n  forceToggle?: boolean,\n) {\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 */\nexport function add(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'add');\n}\n\n/**\n * Remove class names from an element.\n */\nexport function remove(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'remove');\n}\n\n/**\n * Toggle class names from an element.\n */\nexport function toggle(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  force?: boolean,\n) {\n  setClasses(element, classNames, 'toggle', force);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAwB;AAExB,mBAA6B;AAK7B,SAAS,WACP,SACA,YACA,QACA,aACA;AACA,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;AAKO,SAAS,IACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,KAAK;AACvC;AAKO,SAAS,OACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,QAAQ;AAC1C;AAKO,SAAS,OACd,SACA,YACA,OACA;AACA,aAAW,SAAS,YAAY,UAAU,KAAK;AACjD;",
   "names": []
 }

package/utils/css/classes.d.ts

@@ -1,25 +1,12 @@
 /**
  * Add class names to an element.
- *
- * @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: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
+export declare function add(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
 /**
  * Remove class names from an element.
- *
- * @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: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
+export declare function remove(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[]): void;
 /**
  * Toggle class names from an element.
- *
- * @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: Element | Element[] | NodeListOf<Element>, classNames: string | string[], force?: boolean): void;
+export declare function toggle(element: Element | Element[] | NodeListOf<Element>, classNames: string | string[], force?: boolean): void;

package/utils/css/classes.js.map

@@ -1,7 +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;",
+  "sources": ["../../../packages/js-toolkit/utils/css/classes.ts"],
+  "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 */\nfunction setClasses(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  method: 'add' | 'remove' | 'toggle',\n  forceToggle?: boolean,\n) {\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 */\nexport function add(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'add');\n}\n\n/**\n * Remove class names from an element.\n */\nexport function remove(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n) {\n  setClasses(element, classNames, 'remove');\n}\n\n/**\n * Toggle class names from an element.\n */\nexport function toggle(\n  element: Element | Element[] | NodeListOf<Element>,\n  classNames: string | string[],\n  force?: boolean,\n) {\n  setClasses(element, classNames, 'toggle', force);\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAK7B,SAAS,WACP,SACA,YACA,QACA,aACA;AACA,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;AAKO,SAAS,IACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,KAAK;AACvC;AAKO,SAAS,OACd,SACA,YACA;AACA,aAAW,SAAS,YAAY,QAAQ;AAC1C;AAKO,SAAS,OACd,SACA,YACA,OACA;AACA,aAAW,SAAS,YAAY,UAAU,KAAK;AACjD;",
   "names": []
 }

package/utils/css/getOffsetSizes.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/getOffsetSizes.js
+// packages/js-toolkit/utils/css/getOffsetSizes.ts
 var getOffsetSizes_exports = {};
 __export(getOffsetSizes_exports, {
   default: () => getOffsetSizes
@@ -32,7 +32,7 @@ function getOffsetSizes(element) {
     parent = parent.offsetParent;
   }
   const width = element.offsetWidth;
-  const height = element.offsetWidth;
+  const height = element.offsetHeight;
   return {
     x,
     y,

package/utils/css/getOffsetSizes.cjs.map

@@ -1,7 +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;",
+  "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.ts"],
+  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n */\nexport default function getOffsetSizes(element: HTMLElement) {\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.offsetHeight;\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;AAGe,SAAR,eAAgC,SAAsB;AAC3D,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.d.ts

@@ -1,7 +1,5 @@
 /**
  * Get a `DOMRect` like `Object` for an element, without its transforms.
- * @param   {HTMLElement} element
- * @returns {{ x: number, y: number, width: number, height: number, top: number, right: number, bottom: number, left: number }}
  */
 export default function getOffsetSizes(element: HTMLElement): {
     x: number;

package/utils/css/getOffsetSizes.js

@@ -8,7 +8,7 @@ function getOffsetSizes(element) {
     parent = parent.offsetParent;
   }
   const width = element.offsetWidth;
-  const height = element.offsetWidth;
+  const height = element.offsetHeight;
   return {
     x,
     y,

package/utils/css/getOffsetSizes.js.map

@@ -1,7 +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;",
+  "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.ts"],
+  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n */\nexport default function getOffsetSizes(element: HTMLElement) {\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.offsetHeight;\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": "AAGe,SAAR,eAAgC,SAAsB;AAC3D,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/matrix.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/matrix.js
+// packages/js-toolkit/utils/css/matrix.ts
 var matrix_exports = {};
 __export(matrix_exports, {
   default: () => matrix

package/utils/css/matrix.cjs.map

@@ -1,7 +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;",
+  "sources": ["../../../packages/js-toolkit/utils/css/matrix.ts"],
+  "sourcesContent": ["type MatrixTransform = {\n  scaleX?: number;\n  scaleY?: number;\n  skewX?: number;\n  skewY?: number;\n  translateX?: number;\n  translateY?: number;\n};\n\n/**\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: MatrixTransform): string {\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;AA0Be,SAAR,OAAwB,WAAoC;AAEjE,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.d.ts

@@ -1,3 +1,11 @@
+type MatrixTransform = {
+    scaleX?: number;
+    scaleY?: number;
+    skewX?: number;
+    skewY?: number;
+    translateX?: number;
+    translateY?: number;
+};
 /**
  * Format a CSS transform matrix with the given values.
  *
@@ -15,11 +23,5 @@
  * // matrix(0.5, 0, 0, 0.5, 0, 0)
  * ```
  */
-export default function matrix(transform: {
-    scaleX?: number;
-    scaleY?: number;
-    skewX?: number;
-    skewY?: number;
-    translateX?: number;
-    translateY?: number;
-}): string;
+export default function matrix(transform: MatrixTransform): string;
+export {};

package/utils/css/matrix.js.map

@@ -1,7 +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;",
+  "sources": ["../../../packages/js-toolkit/utils/css/matrix.ts"],
+  "sourcesContent": ["type MatrixTransform = {\n  scaleX?: number;\n  scaleY?: number;\n  skewX?: number;\n  skewY?: number;\n  translateX?: number;\n  translateY?: number;\n};\n\n/**\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: MatrixTransform): string {\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": "AA0Be,SAAR,OAAwB,WAAoC;AAEjE,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

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/styles.js
+// packages/js-toolkit/utils/css/styles.ts
 var styles_exports = {};
 __export(styles_exports, {
   add: () => add,

package/utils/css/styles.cjs.map

@@ -1,7 +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;",
+  "sources": ["../../../packages/js-toolkit/utils/css/styles.ts"],
+  "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 */\nfunction setStyles(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n  method: 'add' | 'remove' = 'add',\n) {\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 */\nexport function add(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n) {\n  setStyles(elementOrElements, styles);\n}\n\n/**\n * Remove class names from an element.\n */\nexport function remove(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n) {\n  setStyles(elementOrElements, styles, 'remove');\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAyB;AAEzB,mBAA6B;AAK7B,SAAS,UACP,mBACA,QACA,SAA2B,OAC3B;AACA,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;AAKO,SAAS,IACd,mBACA,QACA;AACA,YAAU,mBAAmB,MAAM;AACrC;AAKO,SAAS,OACd,mBACA,QACA;AACA,YAAU,mBAAmB,QAAQ,QAAQ;AAC/C;",
   "names": []
 }

package/utils/css/styles.d.ts

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

package/utils/css/styles.js.map

@@ -1,7 +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;",
+  "sources": ["../../../packages/js-toolkit/utils/css/styles.ts"],
+  "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 */\nfunction setStyles(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n  method: 'add' | 'remove' = 'add',\n) {\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 */\nexport function add(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n) {\n  setStyles(elementOrElements, styles);\n}\n\n/**\n * Remove class names from an element.\n */\nexport function remove(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  styles: Partial<CSSStyleDeclaration>,\n) {\n  setStyles(elementOrElements, styles, 'remove');\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,oBAAoB;AAK7B,SAAS,UACP,mBACA,QACA,SAA2B,OAC3B;AACA,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;AAKO,SAAS,IACd,mBACA,QACA;AACA,YAAU,mBAAmB,MAAM;AACrC;AAKO,SAAS,OACd,mBACA,QACA;AACA,YAAU,mBAAmB,QAAQ,QAAQ;AAC/C;",
   "names": []
 }

package/utils/css/transform.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/utils/css/transform.js
+// packages/js-toolkit/utils/css/transform.ts
 var transform_exports = {};
 __export(transform_exports, {
   TRANSFORM_PROPS: () => TRANSFORM_PROPS,

package/utils/css/transform.cjs.map

@@ -1,7 +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;",
+  "sources": ["../../../packages/js-toolkit/utils/css/transform.ts"],
+  "sourcesContent": ["import { isDefined } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\nexport type TransformProps = 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}>;\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 */\nexport default function transform(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  props: TransformProps,\n): string {\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;AAmBtB,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;AAKe,SAAR,UACL,mBACA,OACQ;AACR,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,30 +1,3 @@
-/**
- * Generate a CSS transform.
- *
- * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements
- * @param   {TransformProps} props
- * @returns {string}
- */
-export default function transform(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, props: TransformProps): string;
-/**
- * @typedef {Partial<{
- *  x: number;
- *  y: number;
- *  z: number;
- *  rotate: number;
- *  rotateX: number;
- *  rotateY: number;
- *  rotateZ: number;
- *  scale: number;
- *  scaleX: number;
- *  scaleY: number;
- *  scaleZ: number;
- *  skew: number;
- *  skewX: number;
- *  skewY: number;
- * }>} TransformProps
- */
-export const TRANSFORM_PROPS: string[];
 export type TransformProps = Partial<{
     x: number;
     y: number;
@@ -41,3 +14,8 @@ export type TransformProps = Partial<{
     skewX: number;
     skewY: number;
 }>;
+export declare const TRANSFORM_PROPS: string[];
+/**
+ * Generate a CSS transform.
+ */
+export default function transform(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, props: TransformProps): string;

package/utils/css/transform.js.map

@@ -1,7 +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;",
+  "sources": ["../../../packages/js-toolkit/utils/css/transform.ts"],
+  "sourcesContent": ["import { isDefined } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\nexport type TransformProps = 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}>;\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 */\nexport default function transform(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  props: TransformProps,\n): string {\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;AAmBtB,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;AAKe,SAAR,UACL,mBACA,OACQ;AACR,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": []
 }

package/utils/css/transition.cjs

@@ -22,7 +22,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/transition.js
+// packages/js-toolkit/utils/css/transition.ts
 var transition_exports = {};
 __export(transition_exports, {
   default: () => transition,
@@ -76,7 +76,7 @@ async function next(element, classesOrStyles) {
   return new Promise(async (resolve) => {
     if (hasTransition) {
       const trs = Transition.getInstance(element);
-      trs.transitionEndHandler = resolve;
+      trs.transitionEndHandler = () => resolve();
       element.addEventListener("transitionend", trs.transitionEndHandler, false);
     }
     setClassesOrStyles(element, classesOrStyles.from, "remove");

package/utils/css/transition.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/js-toolkit/utils/css/transition.js"],
-  "sourcesContent": ["import { nextFrame } from '../nextFrame.js';\nimport * as classes from './classes.js';\nimport * as styles from './styles.js';\nimport { isArray, isString } from '../is.js';\nimport { hasWindow } from '../has.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/** WeakMap to hold the transition instances. */\nconst cache = new WeakMap();\n\n/**\n * @typedef {string|string[]|Partial<CSSStyleDeclaration>} ClassesOrStyles\n * @typedef {{ from?: ClassesOrStyles, active?: ClassesOrStyles, to?: ClassesOrStyles }} TransitionStyles\n */\n\n/**\n * Transition class.\n */\nclass Transition {\n  /**\n   * Is a transition currently running?\n   * @type {boolean}\n   */\n  isTransitioning = false;\n\n  /**\n   * A callback to execute when the transition ends.\n   * @type {EventListenerOrEventListenerObject|null}\n   */\n  transitionEndHandler = null;\n\n  /**\n   * Instantiate and save the instance to the cache.\n   * @param {HTMLElement} element The HTML element.\n   */\n  constructor(element) {\n    cache.set(element, this);\n  }\n\n  /**\n   * Get the transition class attached to the given element.\n   * @param  {HTMLElement} element The HTML element concerned by the transition.\n   * @returns {Transition}          The transition instance tied to the given element.\n   */\n  static getInstance(element) {\n    let instance = cache.get(element);\n\n    if (!instance) {\n      instance = new this(element);\n    }\n\n    return instance;\n  }\n}\n\n/**\n * Update either the classes or the styles of an element with the given method.\n *\n * @param {HTMLElement}     element         The element to update.\n * @param {ClassesOrStyles} classesOrStyles The classes or styles to apply.\n * @param {'add'|'remove'}  method          The method to use, one of `add` or `remove`.\n */\nexport function setClassesOrStyles(element, classesOrStyles, method = 'add') {\n  if (isString(classesOrStyles) || isArray(classesOrStyles)) {\n    classes[method](element, classesOrStyles);\n  } else {\n    styles[method](element, classesOrStyles);\n  }\n}\n\n/**\n * Test if the given element has a transition duration.\n *\n * @param  {HTMLElement} element The element to test.\n * @returns {boolean}             The result of the test.\n */\nfunction testTransition(element) {\n  if (!hasWindow()) {\n    return false;\n  }\n\n  const { transitionDuration } = window.getComputedStyle(element);\n  return !!transitionDuration && transitionDuration !== '0s';\n}\n\n/**\n * Apply the from state.\n *\n * @param  {HTMLElement}      element         The target element.\n * @param  {TransitionStyles} classesOrStyles The classes or styles definition.\n * @returns {Promise<void>}\n */\nasync function start(element, classesOrStyles) {\n  const trs = Transition.getInstance(element);\n  trs.isTransitioning = true;\n  setClassesOrStyles(element, classesOrStyles.from);\n  await nextFrame();\n  setClassesOrStyles(element, classesOrStyles.active);\n}\n\n/**\n * Apply the active state.\n *\n * @param  {HTMLElement}      element         The target element.\n * @param  {TransitionStyles} classesOrStyles The classes or styles definition.\n * @returns {Promise}\n */\nasync function next(element, classesOrStyles) {\n  const hasTransition = testTransition(element);\n\n  /* eslint-disable-next-line */\n  return new Promise(async (resolve) => {\n    if (hasTransition) {\n      const trs = Transition.getInstance(element);\n      trs.transitionEndHandler = resolve;\n      element.addEventListener('transitionend', trs.transitionEndHandler, false);\n    }\n    setClassesOrStyles(element, classesOrStyles.from, 'remove');\n    setClassesOrStyles(element, classesOrStyles.to);\n    await nextFrame();\n    if (!hasTransition) {\n      resolve();\n    }\n  });\n}\n\n/**\n * Apply the final state.\n *\n * @param {HTMLElement}   element         The target element.\n * @param {string | Object} classesOrStyles The classes or styles definition.\n * @param {string}        mode            Whether to remove or keep the `to`  classes/styles.\n * @returns {void}\n */\nfunction end(element, classesOrStyles, mode = 'remove') {\n  const trs = Transition.getInstance(element);\n  element.removeEventListener('transitionend', trs.transitionEndHandler, false);\n  if (mode === 'remove') {\n    setClassesOrStyles(element, classesOrStyles.to, 'remove');\n  }\n  setClassesOrStyles(element, classesOrStyles.active, 'remove');\n  trs.isTransitioning = false;\n  trs.transitionEndHandler = null;\n}\n\n/**\n * Manage CSS transition with class.\n *\n * This is heavily inspired by the Vue `<transition>` component\n * and the `@barba/css` package, many thanks to them!\n *\n * @param  {HTMLElement}             element The target element.\n * @param  {string|TransitionStyles} name    The name of the transition or an object with the hooks classesOrStyles.\n * @param  {string}                  endMode Whether to remove or keep the `to` classes/styles\n * @returns {Promise<void>}                   A promise resolving at the end of the transition.\n */\nasync function singleTransition(element, name, endMode = 'remove') {\n  /** @type {TransitionStyles} */\n  const classesOrStyles = isString(name)\n    ? {\n        from: `${name}-from`,\n        active: `${name}-active`,\n        to: `${name}-to`,\n      }\n    : {\n        from: '',\n        active: '',\n        to: '',\n        ...name,\n      };\n\n  const trs = Transition.getInstance(element);\n  // End any previous transition running on the element.\n  if (trs.isTransitioning) {\n    end(element, classesOrStyles);\n  }\n\n  await start(element, classesOrStyles);\n  await next(element, classesOrStyles);\n  end(element, classesOrStyles, endMode);\n  return Promise.resolve();\n}\n\n/**\n * Manage CSS transition with class.\n *\n * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements The target element or elements.\n * @param  {string|TransitionStyles}            name    The name of the transition or an object with the hooks classesOrStyles.\n * @param  {string}                             endMode Whether to remove or keep the `to` classes/styles\n * @returns {Promise<void>}                             A promise resolving at the end of the transition.\n */\nexport default async function transition(elementOrElements, name, endMode = 'remove') {\n  await Promise.all(\n    eachElements(elementOrElements, (element) => singleTransition(element, name, endMode)),\n  );\n}\n"],
-  "mappings": "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",
+  "sources": ["../../../packages/js-toolkit/utils/css/transition.ts"],
+  "sourcesContent": ["import { nextFrame } from '../nextFrame.js';\nimport * as classes from './classes.js';\nimport * as styles from './styles.js';\nimport { isArray, isString } from '../is.js';\nimport { hasWindow } from '../has.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\n/** WeakMap to hold the transition instances. */\nconst cache = new WeakMap();\n\nexport type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;\n\nexport type TransitionStyles = {\n  from?: ClassesOrStyles;\n  active?: ClassesOrStyles;\n  to?: ClassesOrStyles;\n};\n\n/**\n * Transition class.\n */\nclass Transition {\n  /**\n   * Is a transition currently running?\n   */\n  isTransitioning = false;\n\n  /**\n   * A callback to execute when the transition ends.\n   */\n  transitionEndHandler: EventListenerOrEventListenerObject | null = null;\n\n  /**\n   * Instantiate and save the instance to the cache.\n   */\n  constructor(element: HTMLElement) {\n    cache.set(element, this);\n  }\n\n  /**\n   * Get the transition class attached to the given element.\n   * @param  {HTMLElement} element The HTML element concerned by the transition.\n   * @returns {Transition}          The transition instance tied to the given element.\n   */\n  static getInstance(element: HTMLElement): Transition {\n    let instance = cache.get(element);\n\n    if (!instance) {\n      instance = new this(element);\n    }\n\n    return instance;\n  }\n}\n\n/**\n * Update either the classes or the styles of an element with the given method.\n */\nexport function setClassesOrStyles(\n  element: HTMLElement,\n  classesOrStyles: ClassesOrStyles,\n  method: 'add' | 'remove' = 'add',\n) {\n  if (isString(classesOrStyles) || isArray(classesOrStyles)) {\n    classes[method](element, classesOrStyles);\n  } else {\n    styles[method](element, classesOrStyles);\n  }\n}\n\n/**\n * Test if the given element has a transition duration.\n */\nfunction testTransition(element: HTMLElement) {\n  if (!hasWindow()) {\n    return false;\n  }\n\n  const { transitionDuration } = window.getComputedStyle(element);\n  return !!transitionDuration && transitionDuration !== '0s';\n}\n\n/**\n * Apply the from state.\n */\nasync function start(element: HTMLElement, classesOrStyles: TransitionStyles) {\n  const trs = Transition.getInstance(element);\n  trs.isTransitioning = true;\n  setClassesOrStyles(element, classesOrStyles.from);\n  await nextFrame();\n  setClassesOrStyles(element, classesOrStyles.active);\n}\n\n/**\n * Apply the active state.\n */\nasync function next(element: HTMLElement, classesOrStyles: TransitionStyles): Promise<void> {\n  const hasTransition = testTransition(element);\n\n  /* eslint-disable-next-line */\n  return new Promise(async (resolve) => {\n    if (hasTransition) {\n      const trs = Transition.getInstance(element);\n      trs.transitionEndHandler = () => resolve();\n      element.addEventListener('transitionend', trs.transitionEndHandler, false);\n    }\n    setClassesOrStyles(element, classesOrStyles.from, 'remove');\n    setClassesOrStyles(element, classesOrStyles.to);\n    await nextFrame();\n    if (!hasTransition) {\n      resolve();\n    }\n  });\n}\n\n/**\n * Apply the final state.\n */\nfunction end(\n  element: HTMLElement,\n  classesOrStyles: TransitionStyles,\n  mode: 'keep' | 'remove' = 'remove',\n) {\n  const trs = Transition.getInstance(element);\n  element.removeEventListener('transitionend', trs.transitionEndHandler, false);\n  if (mode === 'remove') {\n    setClassesOrStyles(element, classesOrStyles.to, 'remove');\n  }\n  setClassesOrStyles(element, classesOrStyles.active, 'remove');\n  trs.isTransitioning = false;\n  trs.transitionEndHandler = null;\n}\n\n/**\n * Manage CSS transition with class.\n *\n * This is inspired by the Vue `<transition>` component\n * and the `@barba/css` package, many thanks to them!\n *\n * @param  {HTMLElement}             element The target element.\n * @param  {string|TransitionStyles} name    The name of the transition or an object with the hooks classesOrStyles.\n * @param  {string}                  endMode Whether to remove or keep the `to` classes/styles\n * @returns {Promise<void>}                   A promise resolving at the end of the transition.\n */\nasync function singleTransition(\n  element: HTMLElement,\n  name: string | TransitionStyles,\n  endMode: 'keep' | 'remove' = 'remove',\n): Promise<void> {\n  /** @type {TransitionStyles} */\n  const classesOrStyles = isString(name)\n    ? {\n        from: `${name}-from`,\n        active: `${name}-active`,\n        to: `${name}-to`,\n      }\n    : {\n        from: '',\n        active: '',\n        to: '',\n        ...name,\n      };\n\n  const trs = Transition.getInstance(element);\n  // End any previous transition running on the element.\n  if (trs.isTransitioning) {\n    end(element, classesOrStyles);\n  }\n\n  await start(element, classesOrStyles);\n  await next(element, classesOrStyles);\n  end(element, classesOrStyles, endMode);\n  return Promise.resolve();\n}\n\n/**\n * Manage CSS transition with class.\n *\n * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements The target element or elements.\n * @param  {string|TransitionStyles}                           name              The name of the transition or an object with the hooks classesOrStyles.\n * @param  {string}                                            endMode           Whether to remove or keep the `to` classes/styles\n * @returns {Promise<void>}                                                      A promise resolving at the end of the transition.\n */\nexport default async function transition(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  name: string | TransitionStyles,\n  endMode: 'keep' | 'remove' = 'remove',\n) {\n  await Promise.all(\n    eachElements(elementOrElements, (element) => singleTransition(element, name, endMode)),\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/utils/css/transition.d.ts

@@ -1,23 +1,19 @@
+export type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
+export type TransitionStyles = {
+    from?: ClassesOrStyles;
+    active?: ClassesOrStyles;
+    to?: ClassesOrStyles;
+};
 /**
  * Update either the classes or the styles of an element with the given method.
- *
- * @param {HTMLElement}     element         The element to update.
- * @param {ClassesOrStyles} classesOrStyles The classes or styles to apply.
- * @param {'add'|'remove'}  method          The method to use, one of `add` or `remove`.
  */
-export function setClassesOrStyles(element: HTMLElement, classesOrStyles: ClassesOrStyles, method?: 'add' | 'remove'): void;
+export declare function setClassesOrStyles(element: HTMLElement, classesOrStyles: ClassesOrStyles, method?: 'add' | 'remove'): void;
 /**
  * Manage CSS transition with class.
  *
  * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements The target element or elements.
- * @param  {string|TransitionStyles}            name    The name of the transition or an object with the hooks classesOrStyles.
- * @param  {string}                             endMode Whether to remove or keep the `to` classes/styles
- * @returns {Promise<void>}                             A promise resolving at the end of the transition.
+ * @param  {string|TransitionStyles}                           name              The name of the transition or an object with the hooks classesOrStyles.
+ * @param  {string}                                            endMode           Whether to remove or keep the `to` classes/styles
+ * @returns {Promise<void>}                                                      A promise resolving at the end of the transition.
  */
-export default function transition(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, name: string | TransitionStyles, endMode?: string): Promise<void>;
-export type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
-export type TransitionStyles = {
-    from?: ClassesOrStyles;
-    active?: ClassesOrStyles;
-    to?: ClassesOrStyles;
-};
+export default function transition(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, name: string | TransitionStyles, endMode?: 'keep' | 'remove'): Promise<void>;

package/utils/css/transition.js

@@ -45,7 +45,7 @@ async function next(element, classesOrStyles) {
   return new Promise(async (resolve) => {
     if (hasTransition) {
       const trs = Transition.getInstance(element);
-      trs.transitionEndHandler = resolve;
+      trs.transitionEndHandler = () => resolve();
       element.addEventListener("transitionend", trs.transitionEndHandler, false);
     }
     setClassesOrStyles(element, classesOrStyles.from, "remove");