@trunkjs/browser-utils 1.0.16 → 1.0.18

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.0.18 (2025-09-11)
+
+This was a version bump only for browser-utils to align it with other projects, there were no code changes.
+
+## 1.0.17 (2025-09-11)
+
+This was a version bump only for browser-utils to align it with other projects, there were no code changes.
+
 ## 1.0.16 (2025-08-27)
 
 This was a version bump only for browser-utils to align it with other projects, there were no code changes.

package/README.md

@@ -16,24 +16,13 @@ Exports:
 Within this monorepo, the package is consumed via path aliases. If you publish or consume it externally, import from the package name:
 
 ```ts
-import {
-  create_element,
-  Debouncer,
-  Stopwatch,
-  waitFor,
-  waitForDomContentLoaded,
-  waitForLoad,
-  sleep,
-  waitForAnimationEnd,
-  LoggingMixin,
-} from '@trunkjs/browser-utils';
+import { } from '@trunkjs/browser-utils';
 ```
 
-Note: Several utilities depend on browser globals (window, document, performance). Use them in browser-like environments.
 
 ## Quick start
 
-### Create and append an element
+### `function create_element()`: Create and append an element
 
 ```ts
 import { create_element } from '@trunkjs/browser-utils';
@@ -51,7 +40,7 @@ Notes:
 - Attributes with value true create boolean attributes (e.g. disabled becomes disabled="").
 - Attributes with null or undefined are omitted.
 
-### Debounce input handling
+### `class Debouncer`:Debounce input handling
 
 ```ts
 import { Debouncer } from '@trunkjs/browser-utils';
@@ -77,7 +66,7 @@ window.addEventListener('resize', () => {
 });
 ```
 
-### Measure performance with Stopwatch
+### `class Stopwatch`: Measure performance with Stopwatch
 
 ```ts
 import { Stopwatch } from '@trunkjs/browser-utils';
@@ -90,7 +79,7 @@ sw.lap('after step 2');
 console.debug('Total ms:', sw.stop());
 ```
 
-### Enable conditional logging in custom elements (LoggingMixin)
+### `class LoggingMixin`: Enable conditional logging in custom elements (LoggingMixin)
 
 ```ts
 import { LoggingMixin } from '@trunkjs/browser-utils';
@@ -115,7 +104,37 @@ customElements.define('my-el', MyEl);
 Tip:
 - If you toggle the debug attribute at runtime, call el.invalidateDebugCache() so the mixin re-evaluates the attribute on the next log/warn/error call.
 
-### Promise-based event helpers
+### `class EventBindingsMixin`: Auto-bind event listeners in custom elements
+
+This mixin handles automatic registration and removal of event listeners in custom elements. It uses the `@Listen` decorator to bind class methods to events on specified targets.
+
+It will register the events in connectedCallback and remove them in disconnectedCallback.
+
+```ts
+import { EventBindingsMixin } from '@trunkjs/browser-utils';
+import { Listen } from '@trunkjs/browser-utils';
+
+class MyEl extends EventBindingsMixin(HTMLElement) {
+    @Listen('click', { target: 'this' }) // listens to clicks on the element itself
+    onClick(event: MouseEvent) {
+        this.log('Element clicked', event);
+    }
+
+    @Listen('resize', { target: 'window' }) // listens to window resize events
+    onResize(event: UIEvent) {
+        this.log('Window resized', event);
+    }
+}
+```
+
+Target options:
+- 'host': the custom element itself
+- 'window': the global window object
+- 'document': the global document object
+- 'shadowRoot': the shadow root of the element (if any)
+- `(element) => EventTarget`: a function returning any EventTarget (e.g. another DOM element)
+
+### `async function waitForXYZ`: Promise-based event helpers
 
 ```ts
 import { waitFor, waitForDomContentLoaded, waitForLoad, sleep, waitForAnimationEnd } from '@trunkjs/browser-utils';
@@ -133,137 +152,7 @@ await sleep(250);
 await waitForAnimationEnd(document.querySelector('.animate')!);
 ```
 
-## API Reference
-
-### create_element(tag, attrs?, children?)
-
-- Signature:
-  - create_element(tag: string, attrs?: Record<string, string | true | null | undefined>, children?: (Node | string)[] | string | Node): HTMLElement
-- Behavior:
-  - Creates an element, sets provided attributes, and appends children.
-  - children can be a single Node/string or an array.
-  - Attribute values:
-    - true → renders as a boolean attribute with an empty value (e.g. disabled="")
-    - null/undefined → attribute is omitted
-    - string → sets the attribute to the given string
-
-Example:
-```ts
-create_element('input', { type: 'checkbox', checked: true });
-```
-
-### class Debouncer
-
-- constructor(delay: number, max_delay: number | false = false)
-  - delay: debounce window in ms
-  - max_delay: maximum time a call may be deferred. If false, no max is applied.
-- wait(): Promise<true>
-  - Returns a promise that resolves after delay ms since the last call.
-  - If max_delay is set and exceeded, the pending timer is not cleared and will resolve soon.
-- debounce(callback: () => void): void
-  - Schedules callback to run after delay ms since the last call.
-
-Use cases:
-- User input throttling (search boxes)
-- Resize or scroll handlers
-- Preventing excessive network calls
-
-### class Stopwatch
-
-- constructor(label: string, enabled: boolean = true)
-- lap(msg?: string): void
-  - Logs a lap line to console.debug in format: [label] msg +Xs
-- elapsed(): number
-  - Milliseconds since start
-- reset(): void
-- stop(): number
-  - Stops the stopwatch and returns elapsed ms
-- start(): void
-  - Starts (or restarts) and resets timings
-- isRunning(): boolean
-
-Notes:
-- Uses performance.now() for high-resolution timing
-- If enabled is false, lap is a no-op
-
-### LoggingMixin(Base)
-
-- Signature:
-  - LoggingMixin<TBase extends abstract new (...args: any[]) => object>(Base: TBase): class extends Base
-- Adds methods and properties to your Custom Element base class:
-  - log(...args: any[]): void
-    - Logs to console.log only when debug is enabled.
-  - warn(...args: any[]): void
-    - Always logs to console.warn (independent of debug).
-  - error(...args: any[]): void
-    - Always logs to console.error (independent of debug).
-  - get _debug(): boolean
-    - Indicates whether debug logging is enabled for the instance.
-  - invalidateDebugCache(): void
-    - Clears the cached debug flag. Call this after changing the debug attribute dynamically.
-
-How debug is determined:
-- On first call to log/warn/error, the mixin checks the element’s debug attribute and caches the result.
-- The attribute is considered truthy if present and not one of: "false", "0", "off", "no".
-  - Examples:
-    - <my-el debug></my-el> → debug ON
-    - <my-el debug="true"></my-el> → debug ON
-    - <my-el debug="false"></my-el> → debug OFF
-    - <my-el></my-el> → debug OFF
-- If you toggle the attribute at runtime, call invalidateDebugCache() so the next call re-evaluates it.
-
-Usage:
-```ts
-class MyEl extends LoggingMixin(HTMLElement) {
-  connectedCallback() {
-    this.log('connected');  // prints only if debug is ON
-    this.warn('warning');   // always prints
-    this.error('error');    // always prints
-  }
-}
-```
-
-### waitFor<T>(target, eventName, options?)
-
-- Signature:
-  - waitFor<T>(target: EventTarget, eventName: string, options?: AddEventListenerOptions): Promise<T>
-- Resolves with the event object T upon first occurrence.
-
-### waitForDomContentLoaded()
-
-- Resolves once the DOM is ready (DOMContentLoaded).
-- If the document is already past loading, resolves immediately.
-
-### waitForLoad()
-
-- Resolves once the window load event fires.
-- If the document is already complete, resolves immediately.
 
-### sleep(ms)
 
-- Signature: sleep(ms: number): Promise<void>
-- Resolves after the given delay.
 
-### waitForAnimationEnd(element)
-
-- Signature: waitForAnimationEnd(element: HTMLElement): Promise<AnimationEvent>
-- Resolves when the element fires animationend.
-
-## Building
-
-Run `nx build browser-utils` to build the library.
-
-The library is configured for:
-- ES module output
-- TypeScript declaration generation via vite-plugin-dts
-- Vite rollup bundling
-
-## Running unit tests
-
-Run `nx test browser-utils` to execute the unit tests via Vitest.
-
-## Notes and caveats
-
-- Environment: Some utilities require browser globals (window, document, performance). Use them in a DOM-capable environment (browser or a DOM-enabled test runner).
-- Types: Debouncer uses NodeJS.Timeout type in typings; in browsers, the runtime value is still a timeout handle and works as expected.
-- LoggingMixin: Designed for Custom Elements (HTMLElement or frameworks like Lit’s ReactiveElement). The debug attribute is cached for performance; call invalidateDebugCache() after toggling it dynamically. warn and error always log regardless of debug state.
+## API Reference

package/index.js

@@ -1,38 +1,38 @@
-var D = Object.defineProperty;
-var L = (e) => {
-  throw TypeError(e);
+var W = Object.defineProperty;
+var L = (t) => {
+  throw TypeError(t);
 };
-var M = (e, t, n) => t in e ? D(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var u = (e, t, n) => M(e, typeof t != "symbol" ? t + "" : t, n), w = (e, t, n) => t.has(e) || L("Cannot " + n);
-var a = (e, t, n) => (w(e, t, "read from private field"), n ? n.call(e) : t.get(e)), l = (e, t, n) => t.has(e) ? L("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), d = (e, t, n, i) => (w(e, t, "write to private field"), i ? i.call(e, n) : t.set(e, n), n), v = (e, t, n) => (w(e, t, "access private method"), n);
-const m = [
+var x = (t, e, n) => e in t ? W(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var u = (t, e, n) => x(t, typeof e != "symbol" ? e + "" : e, n), w = (t, e, n) => e.has(t) || L("Cannot " + n);
+var a = (t, e, n) => (w(t, e, "read from private field"), n ? n.call(t) : e.get(t)), l = (t, e, n) => e.has(t) ? L("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), c = (t, e, n, i) => (w(t, e, "write to private field"), i ? i.call(t, n) : e.set(t, n), n), v = (t, e, n) => (w(t, e, "access private method"), n);
+const h = [
   { name: "xs", minWidth: 0 },
   { name: "sm", minWidth: 576 },
   { name: "md", minWidth: 768 },
   { name: "lg", minWidth: 992 },
   { name: "xl", minWidth: 1200 },
   { name: "xxl", minWidth: 1400 }
-], y = m.reduce(
-  (e, t) => (e[t.name] = t.minWidth, e),
+], y = h.reduce(
+  (t, e) => (t[e.name] = e.minWidth, t),
   {}
 );
-function B(e) {
-  if (!(e in y))
-    throw new Error(`Unknown breakpoint: ${e}`);
-  return y[e];
+function P(t) {
+  if (!(t in y))
+    throw new Error(`Unknown breakpoint: ${t}`);
+  return y[t];
 }
-function P(e) {
-  e === void 0 && (e = window.innerWidth);
-  for (let t = m.length - 1; t >= 0; t--)
-    if (e >= m[t].minWidth)
-      return m[t].name;
+function B(t) {
+  t === void 0 && (t = window.innerWidth);
+  for (let e = h.length - 1; e >= 0; e--)
+    if (t >= h[e].minWidth)
+      return h[e].name;
   return "xs";
 }
-function _(e, t = {}, n = []) {
+function _(t, e = {}, n = []) {
   Array.isArray(n) || (n = [n]);
-  const i = document.createElement(e);
-  for (const r in t)
-    t[r] !== null && t[r] !== void 0 && i.setAttribute(r, t[r] !== !0 ? t[r] : "");
+  const i = document.createElement(t);
+  for (const r in e)
+    e[r] !== null && e[r] !== void 0 && i.setAttribute(r, e[r] !== !0 ? e[r] : "");
   for (const r of n)
     i.append(typeof r == "string" ? document.createTextNode(r) : r);
   return i;
@@ -43,77 +43,77 @@ class N {
    * @param delay     Debounce delay in milliseconds
    * @param max_delay Maximum delay in milliseconds, if false then no maximum delay is applied
    */
-  constructor(t, n = !1) {
+  constructor(e, n = !1) {
     u(this, "timeout", null);
     u(this, "startTimeWithMs", 0);
-    this.delay = t, this.max_delay = n;
+    this.delay = e, this.max_delay = n;
   }
   async wait() {
-    return this.startTimeWithMs === 0 && (this.startTimeWithMs = Date.now()), this.timeout && (this.max_delay === !1 || this.startTimeWithMs + this.max_delay > Date.now()) && clearTimeout(this.timeout), new Promise((t) => {
+    return this.startTimeWithMs === 0 && (this.startTimeWithMs = Date.now()), this.timeout && (this.max_delay === !1 || this.startTimeWithMs + this.max_delay > Date.now()) && clearTimeout(this.timeout), new Promise((e) => {
       this.timeout = setTimeout(() => {
-        this.startTimeWithMs = 0, t(!0);
+        this.startTimeWithMs = 0, e(!0);
       }, this.delay);
     });
   }
-  debounce(t) {
+  debounce(e) {
     this.timeout && clearTimeout(this.timeout), this.timeout = setTimeout(() => {
-      t();
+      e();
     }, this.delay);
   }
 }
-function F(e) {
-  if (typeof e.lineNumber == "number")
+function F(t) {
+  if (typeof t.lineNumber == "number")
     return {
-      file: e.fileName || e.sourceURL,
-      line: e.lineNumber,
-      column: e.columnNumber ?? void 0
+      file: t.fileName || t.sourceURL,
+      line: t.lineNumber,
+      column: t.columnNumber ?? void 0
     };
-  if (typeof e.line == "number")
+  if (typeof t.line == "number")
     return {
-      file: e.sourceURL,
-      line: e.line,
-      column: e.column
+      file: t.sourceURL,
+      line: t.line,
+      column: t.column
     };
-  const n = String(e.stack || e.message || "").split(`
+  const n = String(t.stack || t.message || "").split(`
 `), i = /(.*?)(?:\(|@)?(.*?):(\d+):(\d+)\)?$/;
   for (const r of n) {
-    const o = r.match(i);
-    if (o)
-      return { file: o[2], line: +o[3], column: +o[4] };
+    const s = r.match(i);
+    if (s)
+      return { file: s[2], line: +s[3], column: +s[4] };
   }
-  return { file: e.fileName || e.sourceURL };
+  return { file: t.fileName || t.sourceURL };
 }
 class k {
-  constructor(t, n, i = "main") {
-    this._debug = t, this.myElementId = n, this.instanceId = i;
+  constructor(e, n, i = "main") {
+    this._debug = e, this.myElementId = n, this.instanceId = i;
   }
-  log(...t) {
-    this._debug && console.log(`[LOG][ID:${this.myElementId}:${this.instanceId}]`, ...t);
+  log(...e) {
+    this._debug && console.log(`[LOG][ID:${this.myElementId}:${this.instanceId}]`, ...e);
   }
-  warn(...t) {
-    console.warn(`[WARN][ID:${this.myElementId}:${this.instanceId}]`, ...t);
+  warn(...e) {
+    console.warn(`[WARN][ID:${this.myElementId}:${this.instanceId}]`, ...e);
   }
-  error(...t) {
-    console.error(`[ERROR][ID:${this.myElementId}:${this.instanceId}]`, ...t);
+  error(...e) {
+    console.error(`[ERROR][ID:${this.myElementId}:${this.instanceId}]`, ...e);
   }
-  throwError(...t) {
-    const n = `[ERROR][ID:${this.myElementId}:${this.instanceId}] ${t.join(" ")}`;
-    throw this.error(...t), new Error(n);
+  throwError(...e) {
+    const n = `[ERROR][ID:${this.myElementId}:${this.instanceId}] ${e.join(" ")}`;
+    throw this.error(...e), new Error(n);
   }
 }
 class O {
-  constructor(t, n = !0) {
+  constructor(e, n = !0) {
     u(this, "label");
     u(this, "last");
     u(this, "startTime");
     u(this, "running", !1);
     u(this, "enabled");
-    this.label = t, this.enabled = n, this.startTime = this.last = performance.now(), this.running = !0;
+    this.label = e, this.enabled = n, this.startTime = this.last = performance.now(), this.running = !0;
   }
-  lap(t = "") {
+  lap(e = "") {
     if (!this.enabled) return;
     const n = performance.now(), i = (n - this.last) / 1e3;
-    this.last = n, console.debug(`[${this.label}] ${t} +${i.toFixed(3)}s`);
+    this.last = n, console.debug(`[${this.label}] ${e} +${i.toFixed(3)}s`);
   }
   elapsed() {
     return performance.now() - this.startTime;
@@ -131,95 +131,105 @@ class O {
     return this.running;
   }
 }
-function U(e, t, n) {
+function S(t, e, n) {
   return new Promise((i, r) => {
-    const o = (g) => {
-      e.removeEventListener(t, o, n), i(g);
+    const s = (g) => {
+      t.removeEventListener(e, s, n), i(g);
     };
-    e.addEventListener(t, o, n);
+    t.addEventListener(e, s, n);
   });
 }
-function S() {
-  return document.readyState === "loading" ? new Promise((e) => {
-    document.addEventListener("DOMContentLoaded", () => e());
+function U() {
+  return document.readyState === "loading" ? new Promise((t) => {
+    document.addEventListener("DOMContentLoaded", () => t());
   }) : Promise.resolve();
 }
-function G() {
-  return document.readyState === "complete" ? Promise.resolve() : new Promise((e) => {
+function H(t = null) {
+  if (t || (t = document), t instanceof Document) {
+    if (document.readyState === "complete")
+      return Promise.resolve();
+  } else if (t instanceof HTMLImageElement) {
+    if (t.complete)
+      return Promise.resolve();
+  } else if (t instanceof HTMLVideoElement || t instanceof HTMLAudioElement)
+    return t.readyState >= 3 ? Promise.resolve() : new Promise((e) => {
+      t.addEventListener("loadeddata", () => e(), { once: !0 });
+    });
+  return new Promise((e) => {
     window.addEventListener("load", () => e());
   });
 }
-function j(e) {
-  return new Promise((t) => setTimeout(t, e));
+function G(t) {
+  return new Promise((e) => setTimeout(e, t));
 }
-function q(e) {
-  return new Promise((t) => {
+function j(t) {
+  return new Promise((e) => {
     const n = (i) => {
-      e.removeEventListener("animationend", n), t(i);
+      t.removeEventListener("animationend", n), e(i);
     };
-    e.addEventListener("animationend", n);
+    t.addEventListener("animationend", n);
   });
 }
 const f = Symbol("listenerDefs"), p = Symbol("withEventBindings");
-function z(e, t) {
-  const n = Array.isArray(e) ? e : [e];
+function V(t, e) {
+  const n = Array.isArray(t) ? t : [t];
   return function(i, r) {
     if (r.kind !== "method") throw new Error("@Listen nur für Methoden");
     return r.addInitializer(function() {
-      const o = this.constructor;
-      (o[f] || (o[f] = [])).push({
+      const s = this.constructor;
+      (s[f] || (s[f] = [])).push({
         method: r.name,
         events: n,
-        opts: t
+        opts: e
       });
-    }), function(...o) {
+    }), function(...s) {
       if (!this[p])
         throw new Error("[EventBindings] @Listen - decorator requires EventBindingMixin.");
-      return i.apply(this, o);
+      return i.apply(this, s);
     };
   };
 }
-function A(e, t) {
+function A(t, e) {
   var n;
-  return !t || t === "host" ? e : t === "document" ? e.ownerDocument ?? document : t === "window" ? ((n = e.ownerDocument) == null ? void 0 : n.defaultView) ?? window : typeof t == "function" ? t(e) : t;
+  return !e || e === "host" ? t : e === "document" ? t.ownerDocument ?? document : e === "window" ? ((n = t.ownerDocument) == null ? void 0 : n.defaultView) ?? window : e === "shadowRoot" ? t.shadowRoot ?? t : typeof e == "function" ? e(t) : e;
 }
-function H(e) {
+function q(t) {
   var n, i, I;
-  class t extends e {
-    constructor(...s) {
-      super(...s);
+  class e extends t {
+    constructor(...o) {
+      super(...o);
       l(this, i);
       l(this, n);
       this[p] = !0;
     }
     connectedCallback() {
-      var s;
-      (s = super.connectedCallback) == null || s.call(this), v(this, i, I).call(this);
+      var o;
+      (o = super.connectedCallback) == null || o.call(this), v(this, i, I).call(this);
     }
     disconnectedCallback() {
-      var s, c;
-      (s = a(this, n)) == null || s.abort(), (c = super.disconnectedCallback) == null || c.call(this);
+      var o, d;
+      (o = a(this, n)) == null || o.abort(), (d = super.disconnectedCallback) == null || d.call(this);
     }
   }
   return n = new WeakMap(), i = new WeakSet(), I = function() {
-    var c, b, E;
-    (c = a(this, n)) == null || c.abort(), d(this, n, new AbortController());
-    const s = this.constructor[f] || [];
-    for (const h of s) {
-      const $ = A(this, (b = h.opts) == null ? void 0 : b.target), T = ((E = h.opts) == null ? void 0 : E.options) ?? {}, W = this[h.method].bind(this);
-      for (const x of h.events)
-        $.addEventListener(x, W, { ...T, signal: a(this, n).signal });
+    var d, b, E;
+    (d = a(this, n)) == null || d.abort(), c(this, n, new AbortController());
+    const o = this.constructor[f] || [];
+    for (const m of o) {
+      const T = A(this, (b = m.opts) == null ? void 0 : b.target), M = ((E = m.opts) == null ? void 0 : E.options) ?? {}, $ = this[m.method].bind(this);
+      for (const D of m.events)
+        T.addEventListener(D, $, { ...M, signal: a(this, n).signal });
     }
-  }, t;
+  }, e;
 }
-let C = 1;
-function V(e) {
+let R = 1;
+function z(t) {
   var n, i, r;
-  class t extends e {
+  class e extends t {
     constructor() {
       super(...arguments);
       l(this, n, null);
-      l(this, i, C++);
+      l(this, i, R++);
       l(this, r, null);
     }
     /**
@@ -227,45 +237,45 @@ function V(e) {
      * on the next log/warn/error call.
      */
     invalidateDebugCache() {
-      d(this, n, null);
+      c(this, n, null);
     }
     get _debug() {
-      return a(this, n) !== null ? a(this, n) : (this instanceof HTMLElement && d(this, n, this.hasAttribute("debug") && !["false", "0", "off", "no"].includes(this.getAttribute("debug") || "")), a(this, n) === !0 && console.log(`[DEBUG][ID:${a(this, i)}] LoggingMixin: Debug mode is enabled for <${this.tagName}>`, this), a(this, n) ?? !1);
+      return a(this, n) !== null ? a(this, n) : (this instanceof HTMLElement && c(this, n, this.hasAttribute("debug") && !["false", "0", "off", "no"].includes(this.getAttribute("debug") || "")), a(this, n) === !0 && console.log(`[DEBUG][ID:${a(this, i)}] LoggingMixin: Debug mode is enabled for <${this.tagName}>`, this), a(this, n) ?? !1);
     }
-    getLogger(s = "main") {
-      return a(this, r) || d(this, r, new k(this._debug, `${a(this, i)}`, s)), a(this, r);
+    getLogger(o = "main") {
+      return a(this, r) || c(this, r, new k(this._debug, `${a(this, i)}`, o)), a(this, r);
     }
-    log(...s) {
-      this.getLogger().log(...s);
+    log(...o) {
+      this.getLogger().log(...o);
     }
-    warn(...s) {
-      this.getLogger().warn(...s);
+    warn(...o) {
+      this.getLogger().warn(...o);
     }
-    error(...s) {
-      this.getLogger().error(...s);
+    error(...o) {
+      this.getLogger().error(...o);
     }
-    throwError(...s) {
-      return this.getLogger().throwError(...s);
+    throwError(...o) {
+      return this.getLogger().throwError(...o);
     }
   }
-  return n = new WeakMap(), i = new WeakMap(), r = new WeakMap(), t;
+  return n = new WeakMap(), i = new WeakMap(), r = new WeakMap(), e;
 }
 export {
   N as Debouncer,
-  H as EventBindingsMixin,
-  z as Listen,
+  q as EventBindingsMixin,
+  V as Listen,
   k as Logger,
-  V as LoggingMixin,
+  z as LoggingMixin,
   O as Stopwatch,
   y as breakpointMap,
-  m as breakpoints,
+  h as breakpoints,
   _ as create_element,
-  B as getBreakpointMinWidth,
-  P as getCurrentBreakpoint,
+  P as getBreakpointMinWidth,
+  B as getCurrentBreakpoint,
   F as getErrorLocation,
-  j as sleep,
-  U as waitFor,
-  q as waitForAnimationEnd,
-  S as waitForDomContentLoaded,
-  G as waitForLoad
+  G as sleep,
+  S as waitFor,
+  j as waitForAnimationEnd,
+  U as waitForDomContentLoaded,
+  H as waitForLoad
 };

package/lib/wait-for.d.ts

@@ -1,5 +1,16 @@
 export declare function waitFor<T>(target: EventTarget, eventName: string, options?: AddEventListenerOptions): Promise<T>;
 export declare function waitForDomContentLoaded(): Promise<void>;
-export declare function waitForLoad(): Promise<void>;
+/**
+ * Waits for the load event of the given element or the window if no element is provided.
+ *
+ * Hanles:
+ * - Document: waits for 'load' event if not already loaded
+ * - HTMLImageElement: waits for 'load' event if not already complete
+ * - HTMLVideoElement and HTMLAudioElement: waits for 'loadeddata' event if not
+ *
+ *
+ * @param element
+ */
+export declare function waitForLoad(element?: HTMLElement | Document | null): Promise<void>;
 export declare function sleep(ms: number): Promise<void>;
 export declare function waitForAnimationEnd(element: HTMLElement): Promise<AnimationEvent>;

package/mixins/EventBindingsMixin.d.ts

@@ -1,5 +1,5 @@
 type Ctor<T = object> = new (...args: any[]) => T;
-type TargetSpec = 'host' | 'document' | 'window' | EventTarget | ((host: HTMLElement) => EventTarget);
+type TargetSpec = 'host' | 'document' | 'window' | 'shadowRoot' | EventTarget | ((host: HTMLElement) => EventTarget);
 type ListenOpts = {
     target?: TargetSpec;
     options?: AddEventListenerOptions;
@@ -9,9 +9,9 @@ type OneOrMany<N extends EventName> = N | readonly N[];
 type EventFromInput<I extends OneOrMany<EventName>> = I extends readonly (infer K)[] ? K extends EventName ? DocumentEventMap[K] : never : I extends EventName ? DocumentEventMap[I] : never;
 export declare function Listen<I extends OneOrMany<EventName>>(type: I, opts?: ListenOpts): <This, Fn extends (this: This, ev: EventFromInput<I>, ...args: any[]) => any>(value: Fn, context: ClassMethodDecoratorContext<This, Fn>) => Fn;
 export declare function EventBindingsMixin<TBase extends Ctor<object>>(Base: TBase): (abstract new (...a: any[]) => {
-    "__#2023@#ac"?: AbortController;
+    "__#2347@#ac"?: AbortController;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#2023@#bindEventListeners"(): void;
+    "__#2347@#bindEventListeners"(): void;
 }) & TBase;
 export {};

package/mixins/LoggingMixin.d.ts

@@ -26,14 +26,14 @@ type Constructor<T = object> = abstract new (...args: any[]) => T;
  *   <my-element debug></my-element>       // enables debug logging
  */
 export declare function LoggingMixin<TBase extends Constructor<object>>(Base: TBase): (abstract new (...args: any[]) => {
-    "__#2024@#debugCached": boolean | null;
-    "__#2024@#myElementId": number;
+    "__#2348@#debugCached": boolean | null;
+    "__#2348@#myElementId": number;
     /**
      * Clears the cached debug flag so the attribute will be checked again
      * on the next log/warn/error call.
      */
     invalidateDebugCache(): void;
-    "__#2024@#myLoggerInstance": Logger | null;
+    "__#2348@#myLoggerInstance": Logger | null;
     readonly _debug: boolean;
     getLogger(instanceId?: string): Logger;
     log(...args: any[]): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@trunkjs/browser-utils",
-    "version": "1.0.16",
+    "version": "1.0.18",
     "main": "./index.js",
     "dependencies": {},
     "type": "module",