@studiometa/js-toolkit 2.5.0 → 2.6.0

package/Base/managers/ResponsiveOptionsManager.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,19 +14,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/js-toolkit/Base/managers/ResponsiveOptionsManager.ts
 var ResponsiveOptionsManager_exports = {};
 __export(ResponsiveOptionsManager_exports, {
-  default: () => ResponsiveOptionsManager
+  ResponsiveOptionsManager: () => ResponsiveOptionsManager
 });
 module.exports = __toCommonJS(ResponsiveOptionsManager_exports);
-var import_OptionsManager = __toESM(require("./OptionsManager.cjs"), 1);
+var import_OptionsManager = require("./OptionsManager.cjs");
 var import_services = require("../../services/index.cjs");
 var import_utils = require("../../utils/index.cjs");
 function __getResponsiveName(that, name) {
@@ -48,7 +42,7 @@ function __getResponsiveName(that, name) {
   });
   return responsiveName;
 }
-var ResponsiveOptionsManager = class extends import_OptionsManager.default {
+var ResponsiveOptionsManager = class extends import_OptionsManager.OptionsManager {
   get(name, config) {
     if (!config.responsive) {
       return super.get(name, config);

package/Base/managers/ResponsiveOptionsManager.d.ts

@@ -1,8 +1,12 @@
-import OptionsManager from './OptionsManager.js';
+import { OptionsManager } from './OptionsManager.js';
+import type { OptionObject } from './OptionsManager.js';
+export declare type ResponsiveOptionObject = OptionObject & {
+    responsive?: boolean;
+};
 /**
  * Class options to manage options as data attributes on an HTML element.
  */
-export default class ResponsiveOptionsManager extends OptionsManager {
+export declare class ResponsiveOptionsManager extends OptionsManager {
     /**
      * Get an option value.
      *
@@ -10,7 +14,7 @@ export default class ResponsiveOptionsManager extends OptionsManager {
      * @param   {ResponsiveOptionObject} config The option configuration.
      * @returns {any}
      */
-    get(name: any, config: any): any;
+    get(name: string, config: ResponsiveOptionObject): any;
     /**
      * Set an option value.
      *
@@ -18,5 +22,5 @@ export default class ResponsiveOptionsManager extends OptionsManager {
      * @param {any} value The new value.
      * @param {ResponsiveOptionObject} config The option configuration.
      */
-    set(name: any, value: any, config: any): void;
+    set(name: string, value: unknown, config: ResponsiveOptionObject): void;
 }

package/Base/managers/ResponsiveOptionsManager.js

@@ -1,4 +1,4 @@
-import OptionsManager, { __getPropertyName } from "./OptionsManager.js";
+import { OptionsManager, __getPropertyName } from "./OptionsManager.js";
 import { useResize } from "../../services/index.js";
 import { isDev } from "../../utils/index.js";
 function __getResponsiveName(that, name) {
@@ -36,5 +36,5 @@ class ResponsiveOptionsManager extends OptionsManager {
   }
 }
 export {
-  ResponsiveOptionsManager as default
+  ResponsiveOptionsManager
 };

package/Base/managers/ServicesManager.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,40 +15,31 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/js-toolkit/Base/managers/ServicesManager.js
+// packages/js-toolkit/Base/managers/ServicesManager.ts
 var ServicesManager_exports = {};
 __export(ServicesManager_exports, {
-  default: () => ServicesManager
+  ServicesManager: () => ServicesManager
 });
 module.exports = __toCommonJS(ServicesManager_exports);
-var import_pointer = __toESM(require("../../services/pointer.cjs"), 1);
-var import_raf = __toESM(require("../../services/raf.cjs"), 1);
-var import_resize = __toESM(require("../../services/resize.cjs"), 1);
-var import_scroll = __toESM(require("../../services/scroll.cjs"), 1);
-var import_key = __toESM(require("../../services/key.cjs"), 1);
-var import_load = __toESM(require("../../services/load.cjs"), 1);
-var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
+var import_services = require("../../services/index.cjs");
+var import_AbstractManager = require("./AbstractManager.cjs");
 var import_utils = require("../../utils/index.cjs");
 var SERVICES_MAP = {
-  scrolled: import_scroll.default,
-  resized: import_resize.default,
-  ticked: import_raf.default,
-  moved: import_pointer.default,
-  keyed: import_key.default,
-  loaded: import_load.default
+  scrolled: import_services.useScroll,
+  resized: import_services.useResize,
+  ticked: import_services.useRaf,
+  moved: import_services.usePointer,
+  keyed: import_services.useKey,
+  loaded: import_services.useLoad
 };
 var SERVICE_NAMES = Object.keys(SERVICES_MAP);
-var ServicesManager = class extends import_AbstractManager.default {
+var ServicesManager = class extends import_AbstractManager.AbstractManager {
   constructor() {
     super(...arguments);
     __publicField(this, "__customServices", {});
@@ -78,25 +67,19 @@ var ServicesManager = class extends import_AbstractManager.default {
     if (!((0, import_utils.isFunction)(this.__base[service]) || this.__base.__hasEvent(service)) || !this.__services[service]) {
       return import_utils.noop;
     }
-    const { add } = this.__services[service]();
-    const self = this;
-    function serviceHandler(...args) {
-      return self.__base.__callMethod(service, ...args);
-    }
-    add(this.__base.$id, serviceHandler);
+    const serviceInstance = this.__services[service]();
+    serviceInstance.add(this.__base.$id, (...args) => {
+      this.__base.__callMethod(service, ...args);
+    });
     return this.disable.bind(this, service);
   }
   enableAll() {
-    return Object.keys(this.__services).map(
-      (serviceName) => this.enable(serviceName)
-    );
+    return Object.keys(this.__services).map((serviceName) => this.enable(serviceName));
   }
   disableAll() {
-    Object.keys(this.__services).forEach(
-      (serviceName) => {
-        this.disable(serviceName);
-      }
-    );
+    Object.keys(this.__services).forEach((serviceName) => {
+      this.disable(serviceName);
+    });
   }
   disable(service) {
     if (!this.__services[service]) {

package/Base/managers/ServicesManager.d.ts

@@ -1,47 +1,55 @@
-/**
- * @typedef {typeof SERVICES_MAP & Record<string, () => ServiceInterface>} Services
- * @typedef {keyof SERVICES_MAP|string} ServiceName
- */
+import { usePointer, useRaf, useResize, useScroll, useKey, useLoad } from '../../services/index.js';
+import type { PointerServiceInterface, RafServiceInterface, ResizeServiceInterface, ScrollServiceInterface, KeyServiceInterface, LoadServiceInterface, ServiceInterface } from '../../services/index.js';
+import { AbstractManager } from './AbstractManager.js';
+declare type Services = {
+    scrolled: ScrollServiceInterface;
+    resized: ResizeServiceInterface;
+    ticked: RafServiceInterface;
+    moved: PointerServiceInterface;
+    keyed: KeyServiceInterface;
+    loaded: LoadServiceInterface;
+} & Record<string, ServiceInterface<unknown>>;
+declare type ServiceNames = keyof Services;
 /**
  * Services management for the Base class.
  *
  * @todo Add support for disabled services on mount when the method is defined.
  */
-export default class ServicesManager extends AbstractManager {
+export declare class ServicesManager extends AbstractManager {
     /**
-     * @type {Record<string, () => ServiceInterface>}
+     * Holder for custom services.
      */
-    __customServices: Record<string, () => import("../../services").ServiceInterface<any>>;
+    __customServices: Record<string, <T>() => ServiceInterface<T>>;
     /**
-     * @returns {Record<string, () => ServiceInterface>}
+     * Get registered services.
      */
-    get __services(): Record<string, () => import("../../services").ServiceInterface<any>>;
+    get __services(): {
+        scrolled: typeof useScroll;
+        resized: typeof useResize;
+        ticked: typeof useRaf;
+        moved: typeof usePointer;
+        keyed: typeof useKey;
+        loaded: typeof useLoad;
+    };
     /**
      * Test if the given service is registered.
-     *
-     * @param  {ServiceName} service The name of the service.
-     * @returns {boolean}
      */
-    has(service: ServiceName): boolean;
+    has(service: ServiceNames | string): boolean;
     /**
      * Get a service props by name.
-     * @param   {ServiceName} service The name of the service.
-     * @returns {ReturnType<ServiceInterface['props']>}
      */
-    get(service: ServiceName): ReturnType<import("../../services").ServiceInterface<any>['props']>;
+    get<S extends ServiceNames | string>(service: S): ReturnType<Services[S]['props']>;
     /**
      * Init the given service and bind it to the given instance.
      *
-     * @param  {ServiceName} service The name of the service.
+     * @param  {ServiceNames} service The name of the service.
      * @returns {() => void}          A function to unbind the service.
      */
-    enable(service: ServiceName): () => void;
+    enable(service: ServiceNames): () => void;
     /**
      * Enable all services and return methods to disable them.
-     *
-     * @returns {Function[]}
      */
-    enableAll(): Function[];
+    enableAll(): (() => void)[];
     /**
      * Disable all services.
      *
@@ -50,27 +58,21 @@ export default class ServicesManager extends AbstractManager {
     disableAll(): void;
     /**
      * Disable a service.
-     *
-     * @param  {string} service  The name of the service.
-     * @returns {void}
      */
-    disable(service: string): void;
+    disable(service: ServiceNames): void;
     /**
      * Toggle a service.
-     * @param  {string}  service    The name of the service.
-     * @param  {boolean} [force] The state to force.
-     * @returns {void}
      */
-    toggle(service: string, force?: boolean): void;
+    toggle(service: ServiceNames, force?: boolean): void;
     /**
      * Register a new service to be enabled/disabled.
      *
      * @param {string} name
      *   The name of the service hook.
-     * @param {() => ServiceInterface} useFunction
+     * @param {<T>(...args:unknown[]) => ServiceInterface<T>} useFunction
      *   The `use...` function for the service.
      */
-    register(name: string, useFunction: () => import("../../services").ServiceInterface<any>): void;
+    register(name: string, useFunction: <T>(...args: unknown[]) => ServiceInterface<T>): void;
     /**
      * Unregister a new service to be enabled disabled.
      *
@@ -79,31 +81,4 @@ export default class ServicesManager extends AbstractManager {
      */
     unregister(name: string): void;
 }
-export type Base = import('../index').Base;
-export type BaseConstructor = import('../index').BaseConstructor;
-export type ServiceInterface = import('../../services').ServiceInterface<any>;
-export type Services = typeof SERVICES_MAP & Record<string, () => import("../../services").ServiceInterface<any>>;
-export type ServiceName = keyof {
-    scrolled: typeof useScroll;
-    resized: typeof useResize;
-    ticked: typeof useRaf;
-    moved: typeof usePointer;
-    keyed: typeof useKey;
-    loaded: typeof useLoad;
-} | string;
-import AbstractManager from "./AbstractManager.js";
-declare namespace SERVICES_MAP {
-    export { useScroll as scrolled };
-    export { useResize as resized };
-    export { useRaf as ticked };
-    export { usePointer as moved };
-    export { useKey as keyed };
-    export { useLoad as loaded };
-}
-import useScroll from "../../services/scroll.js";
-import useResize from "../../services/resize.js";
-import useRaf from "../../services/raf.js";
-import usePointer from "../../services/pointer.js";
-import useKey from "../../services/key.js";
-import useLoad from "../../services/load.js";
 export {};

package/Base/managers/ServicesManager.js

@@ -4,13 +4,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import usePointer from "../../services/pointer.js";
-import useRaf from "../../services/raf.js";
-import useResize from "../../services/resize.js";
-import useScroll from "../../services/scroll.js";
-import useKey from "../../services/key.js";
-import useLoad from "../../services/load.js";
-import AbstractManager from "./AbstractManager.js";
+import { usePointer, useRaf, useResize, useScroll, useKey, useLoad } from "../../services/index.js";
+import { AbstractManager } from "./AbstractManager.js";
 import { noop, isFunction, isDefined, isDev } from "../../utils/index.js";
 const SERVICES_MAP = {
   scrolled: useScroll,
@@ -49,25 +44,19 @@ class ServicesManager extends AbstractManager {
     if (!(isFunction(this.__base[service]) || this.__base.__hasEvent(service)) || !this.__services[service]) {
       return noop;
     }
-    const { add } = this.__services[service]();
-    const self = this;
-    function serviceHandler(...args) {
-      return self.__base.__callMethod(service, ...args);
-    }
-    add(this.__base.$id, serviceHandler);
+    const serviceInstance = this.__services[service]();
+    serviceInstance.add(this.__base.$id, (...args) => {
+      this.__base.__callMethod(service, ...args);
+    });
     return this.disable.bind(this, service);
   }
   enableAll() {
-    return Object.keys(this.__services).map(
-      (serviceName) => this.enable(serviceName)
-    );
+    return Object.keys(this.__services).map((serviceName) => this.enable(serviceName));
   }
   disableAll() {
-    Object.keys(this.__services).forEach(
-      (serviceName) => {
-        this.disable(serviceName);
-      }
-    );
+    Object.keys(this.__services).forEach((serviceName) => {
+      this.disable(serviceName);
+    });
   }
   disable(service) {
     if (!this.__services[service]) {
@@ -106,5 +95,5 @@ class ServicesManager extends AbstractManager {
   }
 }
 export {
-  ServicesManager as default
+  ServicesManager
 };

package/decorators/withResponsiveOptions.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,10 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/js-toolkit/decorators/withResponsiveOptions.ts
@@ -28,13 +22,13 @@ __export(withResponsiveOptions_exports, {
   withResponsiveOptions: () => withResponsiveOptions
 });
 module.exports = __toCommonJS(withResponsiveOptions_exports);
-var import_ResponsiveOptionsManager = __toESM(require("../Base/managers/ResponsiveOptionsManager.cjs"), 1);
+var import_ResponsiveOptionsManager = require("../Base/managers/ResponsiveOptionsManager.cjs");
 function withResponsiveOptions(BaseClass) {
   class WithResponsiveOptions extends BaseClass {
     get __managers() {
       return {
         ...super.__managers,
-        OptionsManager: import_ResponsiveOptionsManager.default
+        OptionsManager: import_ResponsiveOptionsManager.ResponsiveOptionsManager
       };
     }
   }

package/decorators/withResponsiveOptions.js

@@ -1,4 +1,4 @@
-import ResponsiveOptionsManager from "../Base/managers/ResponsiveOptionsManager.js";
+import { ResponsiveOptionsManager } from "../Base/managers/ResponsiveOptionsManager.js";
 function withResponsiveOptions(BaseClass) {
   class WithResponsiveOptions extends BaseClass {
     get __managers() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"

package/utils/css/animate.cjs

@@ -33,6 +33,7 @@ var import_is = require("../is.cjs");
 var import_transform = __toESM(require("./transform.cjs"), 1);
 var import_scheduler = require("../scheduler.cjs");
 var import_tween = require("../tween.cjs");
+var import_utils = require("./utils.cjs");
 var id = 0;
 var running = /* @__PURE__ */ new WeakMap();
 var CSSUnitConverter = {
@@ -52,7 +53,10 @@ function getAnimationStepValue(val, getSizeRef) {
   return CSSUnitConverter[val[1]](val[0], getSizeRef);
 }
 var generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => (0, import_math.lerp)(
-  getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]),
+  getAnimationStepValue(
+    fromValue != null ? fromValue : 0,
+    () => element[sizeRef]
+  ),
   getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]),
   progress
 );
@@ -109,7 +113,7 @@ 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) => {
@@ -150,4 +154,27 @@ function animate(element, keyframes, options = {}) {
   });
   return controls;
 }
+function animate(elementOrElements, keyframes, options = {}) {
+  const controls = (0, import_utils.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")
+  };
+}
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/animate.d.ts

@@ -1,31 +1,11 @@
 /**
- * @typedef {import('./transform.js').TransformProps} TransformProps
- * @typedef {TransformProps & {
- *   opacity?: number;
- *   transformOrigin?: string;
- *   easing?: import('../math/createEases.js').EasingFunction|import('../tween.js').BezierCurve;
- *   offset?: number;
- * }} Keyframe
- * @typedef {Keyframe & {
- *   easing: import('../math/createEases.js').EasingFunction;
- *   offset: number;
- * }} NormalizedKeyframe
- * @typedef {{
- *   start: () => void;
- *   pause: () => void;
- *   play: () => void;
- *   finish: () => void;
- *   progress: (value: number?) => number
- * }} Animate
- */
-/**
- * Animate an element.
- * @param   {HTMLElement} element
+ * Animate one or more elements.
+ * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements
  * @param   {Keyframe[]} keyframes
  * @param   {import('../tween.js').TweenOptions} [options]
  * @returns {Animate}
  */
-export function animate(element: HTMLElement, keyframes: Keyframe[], options?: import('../tween.js').TweenOptions): Animate;
+export function animate(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, keyframes: Keyframe[], options?: import('../tween.js').TweenOptions): Animate;
 export type TransformProps = import('./transform.js').TransformProps;
 export type Keyframe = TransformProps & {
     opacity?: number;
@@ -42,5 +22,5 @@ export type Animate = {
     pause: () => void;
     play: () => void;
     finish: () => void;
-    progress: (value: number | null) => number;
+    progress: (value?: number) => number;
 };

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,7 +23,10 @@ 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(
+    fromValue != null ? fromValue : 0,
+    () => element[sizeRef]
+  ),
   getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]),
   progress
 );
@@ -79,7 +83,7 @@ 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) => {
@@ -120,6 +124,29 @@ 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
 };

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(" ");
   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) {

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(" ");
   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) {