@trunkjs/browser-utils 1.0.19 → 1.0.21

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.0.21 (2025-12-11)
+
+This was a version bump only for browser-utils to align it with other projects, there were no code changes.
+
+## 1.0.20 (2025-12-11)
+
+This was a version bump only for browser-utils to align it with other projects, there were no code changes.
+
 ## 1.0.19 (2025-09-11)
 
 This was a version bump only for browser-utils to align it with other projects, there were no code changes.

package/README.md

@@ -104,6 +104,8 @@ 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.
 
+
+
 ### `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.
@@ -153,6 +155,11 @@ await waitForAnimationEnd(document.querySelector('.animate')!);
 ```
 
 
+### `BreakPointMixin`: Responsive behavior for custom elements
+
+Evaluates the css variable `--breakpoint` and adds corresponding and adds a `desktop` attribute to the host element when the breakpoint is above the defined threshold.
+
+
 
 
 ## API Reference

package/index.d.ts

@@ -5,5 +5,6 @@ export * from './lib/get-error-location';
 export * from './lib/Logger';
 export * from './lib/Stopwatch';
 export * from './lib/wait-for';
+export * from './mixins/BreakPointMixin';
 export * from './mixins/EventBindingsMixin';
 export * from './mixins/LoggingMixin';

package/index.js

@@ -1,119 +1,120 @@
-var x = Object.defineProperty;
-var L = (t) => {
-  throw TypeError(t);
+var W = Object.defineProperty;
+var L = (e) => {
+  throw TypeError(e);
 };
-var D = (t, e, n) => e in t ? x(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var u = (t, e, n) => D(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)), d = (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 m = [
+var $ = (e, t, n) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var u = (e, t, n) => $(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)), c = (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), m = (e, t, n, i) => (w(e, t, "write to private field"), i ? i.call(e, n) : t.set(e, n), n), p = (e, t, n) => (w(e, t, "access private method"), n);
+import { Debouncer as x } from "@kasimirjs/core";
+const f = [
   { 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(
-  (t, e) => (t[e.name] = e.minWidth, t),
+], v = f.reduce(
+  (e, t) => (e[t.name] = t.minWidth, e),
   {}
 );
-function P(t) {
-  if (!(t in y))
-    throw new Error(`Unknown breakpoint: ${t}`);
-  return y[t];
+function y(e) {
+  if (!(e in v))
+    throw new Error(`Unknown breakpoint: ${e}`);
+  return v[e];
 }
-function B(t) {
-  t === void 0 && (t = window.innerWidth);
-  for (let e = m.length - 1; e >= 0; e--)
-    if (t >= m[e].minWidth)
-      return m[e].name;
+function A(e) {
+  e === void 0 && (e = window.innerWidth);
+  for (let t = f.length - 1; t >= 0; t--)
+    if (e >= f[t].minWidth)
+      return f[t].name;
   return "xs";
 }
-function _(t, e = {}, n = []) {
+function U(e, t = {}, n = []) {
   Array.isArray(n) || (n = [n]);
-  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] : "");
+  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] : "");
   for (const r of n)
     i.append(typeof r == "string" ? document.createTextNode(r) : r);
   return i;
 }
-class N {
+class F {
   /**
    *
    * @param delay     Debounce delay in milliseconds
    * @param max_delay Maximum delay in milliseconds, if false then no maximum delay is applied
    */
-  constructor(e, n = !1) {
+  constructor(t, n = !1) {
     u(this, "timeout", null);
     u(this, "startTimeWithMs", 0);
-    this.delay = e, this.max_delay = n;
+    this.delay = t, 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((e) => {
+    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) => {
       this.timeout = setTimeout(() => {
-        this.startTimeWithMs = 0, e(!0);
+        this.startTimeWithMs = 0, t(!0);
       }, this.delay);
     });
   }
-  debounce(e) {
+  debounce(t) {
     this.timeout && clearTimeout(this.timeout), this.timeout = setTimeout(() => {
-      e();
+      t();
     }, this.delay);
   }
 }
-function F(t) {
-  if (typeof t.lineNumber == "number")
+function H(e) {
+  if (typeof e.lineNumber == "number")
     return {
-      file: t.fileName || t.sourceURL,
-      line: t.lineNumber,
-      column: t.columnNumber ?? void 0
+      file: e.fileName || e.sourceURL,
+      line: e.lineNumber,
+      column: e.columnNumber ?? void 0
     };
-  if (typeof t.line == "number")
+  if (typeof e.line == "number")
     return {
-      file: t.sourceURL,
-      line: t.line,
-      column: t.column
+      file: e.sourceURL,
+      line: e.line,
+      column: e.column
     };
-  const n = String(t.stack || t.message || "").split(`
+  const n = String(e.stack || e.message || "").split(`
 `), i = /(.*?)(?:\(|@)?(.*?):(\d+):(\d+)\)?$/;
   for (const r of n) {
     const s = r.match(i);
     if (s)
       return { file: s[2], line: +s[3], column: +s[4] };
   }
-  return { file: t.fileName || t.sourceURL };
+  return { file: e.fileName || e.sourceURL };
 }
-class k {
-  constructor(e, n, i = "main") {
-    this._debug = e, this.myElementId = n, this.instanceId = i;
+class C {
+  constructor(t, n, i = "main") {
+    this._debug = t, this.myElementId = n, this.instanceId = i;
   }
-  log(...e) {
-    this._debug && console.log(`[LOG][ID:${this.myElementId}:${this.instanceId}]`, ...e);
+  log(...t) {
+    this._debug && console.log(`[LOG][ID:${this.myElementId}:${this.instanceId}]`, ...t);
   }
-  warn(...e) {
-    console.warn(`[WARN][ID:${this.myElementId}:${this.instanceId}]`, ...e);
+  warn(...t) {
+    console.warn(`[WARN][ID:${this.myElementId}:${this.instanceId}]`, ...t);
   }
-  error(...e) {
-    console.error(`[ERROR][ID:${this.myElementId}:${this.instanceId}]`, ...e);
+  error(...t) {
+    console.error(`[ERROR][ID:${this.myElementId}:${this.instanceId}]`, ...t);
   }
-  throwError(...e) {
-    const n = `[ERROR][ID:${this.myElementId}:${this.instanceId}] ${e.join(" ")}`;
-    throw this.error(...e), new Error(n);
+  throwError(...t) {
+    const n = `[ERROR][ID:${this.myElementId}:${this.instanceId}] ${t.join(" ")}`;
+    throw this.error(...t), new Error(n);
   }
 }
 class O {
-  constructor(e, n = !0) {
+  constructor(t, n = !0) {
     u(this, "label");
     u(this, "last");
     u(this, "startTime");
     u(this, "running", !1);
     u(this, "enabled");
-    this.label = e, this.enabled = n, this.startTime = this.last = performance.now(), this.running = !0;
+    this.label = t, this.enabled = n, this.startTime = this.last = performance.now(), this.running = !0;
   }
-  lap(e = "") {
+  lap(t = "") {
     if (!this.enabled) return;
     const n = performance.now(), i = (n - this.last) / 1e3;
-    this.last = n, console.debug(`[${this.label}] ${e} +${i.toFixed(3)}s`);
+    this.last = n, console.debug(`[${this.label}] ${t} +${i.toFixed(3)}s`);
   }
   elapsed() {
     return performance.now() - this.startTime;
@@ -131,119 +132,134 @@ class O {
     return this.running;
   }
 }
-function S(t, e, n) {
+function V(e, t, n) {
   return new Promise((i, r) => {
-    const s = (g) => {
-      t.removeEventListener(e, s, n), i(g);
+    const s = (l) => {
+      e.removeEventListener(t, s, n), i(l);
     };
-    t.addEventListener(e, s, n);
+    e.addEventListener(t, s, n);
   });
 }
-function U() {
-  return document.readyState === "loading" ? new Promise((t) => {
-    document.addEventListener("DOMContentLoaded", () => t());
+function B() {
+  return document.readyState === "loading" ? new Promise((e) => {
+    document.addEventListener("DOMContentLoaded", () => e());
   }) : Promise.resolve();
 }
-function H(t = null) {
-  if (t || (t = window), t instanceof Window) {
-    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) => {
-    t.addEventListener("load", () => e());
-  });
+function z(e = window) {
+  return e || (e = window), e === window ? document.readyState === "complete" ? Promise.resolve() : new Promise((t) => window.addEventListener("load", () => t(), { once: !0 })) : e instanceof HTMLImageElement ? e.complete && e.naturalWidth !== 0 ? Promise.resolve() : new Promise((t, n) => {
+    e.addEventListener("load", () => t(), { once: !0 }), e.addEventListener("error", () => n(new Error("image error")), { once: !0 });
+  }) : e instanceof HTMLMediaElement ? e.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA ? Promise.resolve() : new Promise((t) => e.addEventListener("loadeddata", () => t(), { once: !0 })) : new Promise((t) => e.addEventListener("load", () => t(), { once: !0 }));
 }
-function G(t) {
-  return new Promise((e) => setTimeout(e, t));
+function G(e) {
+  return new Promise((t) => setTimeout(t, e));
 }
-function j(t) {
-  return new Promise((e) => {
+function j(e) {
+  return new Promise((t) => {
     const n = (i) => {
-      t.removeEventListener("animationend", n), e(i);
+      e.removeEventListener("animationend", n), t(i);
     };
-    t.addEventListener("animationend", n);
+    e.addEventListener("animationend", n);
   });
 }
-const f = Symbol("listenerDefs"), p = Symbol("withEventBindings");
-function V(t, e) {
-  const n = Array.isArray(t) ? t : [t];
+function q(e) {
+  var i;
+  const t = new x(200, 5e3);
+  class n extends e {
+    constructor() {
+      super(...arguments);
+      u(this, "currentBreakPoint", null);
+      c(this, i, async () => {
+        await t.debounce(), await B();
+        const l = window.innerWidth;
+        let o = getComputedStyle(this).getPropertyValue("--breakpoint");
+        o || (this.style.setProperty("--breakpoint", "md"), o = getComputedStyle(this).getPropertyValue("--breakpoint"));
+        const d = A(l);
+        this.currentBreakPoint !== d && (y(o) < y(d) ? this.setAttribute("mode", "desktop") : this.setAttribute("mode", "mobile"));
+      });
+    }
+    connectedCallback() {
+      super.connectedCallback(), a(this, i).call(this), window.addEventListener("resize", a(this, i)), a(this, i).call(this);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), window.removeEventListener("resize", a(this, i));
+    }
+  }
+  return i = new WeakMap(), n;
+}
+const g = Symbol("listenerDefs"), k = Symbol("withEventBindings");
+function X(e, t) {
+  const n = Array.isArray(e) ? e : [e];
   return function(i, r) {
     if (r.kind !== "method") throw new Error("@Listen nur für Methoden");
     return r.addInitializer(function() {
       const s = this.constructor;
-      (s[f] || (s[f] = [])).push({
+      (s[g] || (s[g] = [])).push({
         method: r.name,
         events: n,
-        opts: e
+        opts: t
       });
     }), function(...s) {
-      if (!this[p])
+      if (!this[k])
         throw new Error("[EventBindings] @Listen - decorator requires EventBindingMixin.");
       return i.apply(this, s);
     };
   };
 }
-function A(t, e) {
+function R(e, t) {
   var n;
-  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;
+  return !t || t === "host" ? e : t === "document" ? e.ownerDocument ?? document : t === "window" ? ((n = e.ownerDocument) == null ? void 0 : n.defaultView) ?? window : t === "shadowRoot" ? e.shadowRoot ?? e : typeof t == "function" ? t(e) : t;
 }
-function q(t) {
-  var n, i, I;
-  class e extends t {
+function J(e) {
+  var n, i, P;
+  class t extends e {
     constructor(...o) {
       super(...o);
-      d(this, i);
-      d(this, n);
-      this[p] = !0;
+      c(this, i);
+      c(this, n);
+      this[k] = !0;
     }
     connectedCallback() {
       var o;
-      (o = super.connectedCallback) == null || o.call(this), v(this, i, I).call(this);
+      (o = super.connectedCallback) == null || o.call(this), p(this, i, P).call(this);
     }
     disconnectedCallback() {
-      var o, l;
-      (o = a(this, n)) == null || o.abort(), (l = super.disconnectedCallback) == null || l.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 l, b, E;
-    (l = a(this, n)) == null || l.abort(), c(this, n, new AbortController());
-    const o = this.constructor[f] || [];
+  return n = new WeakMap(), i = new WeakSet(), P = function() {
+    var d, b, E;
+    (d = a(this, n)) == null || d.abort(), m(this, n, new AbortController());
+    const o = this.constructor[g] || [];
     for (const h of o) {
-      const T = A(this, (b = h.opts) == null ? void 0 : b.target), M = ((E = h.opts) == null ? void 0 : E.options) ?? {}, W = this[h.method].bind(this);
-      for (const $ of h.events)
-        T.addEventListener($, W, { ...M, signal: a(this, n).signal });
+      const I = R(this, (b = h.opts) == null ? void 0 : b.target), M = ((E = h.opts) == null ? void 0 : E.options) ?? {}, T = this[h.method].bind(this);
+      for (const D of h.events)
+        I.addEventListener(D, T, { ...M, signal: a(this, n).signal });
     }
-  }, e;
+  }, t;
 }
-let R = 1;
-function z(t) {
+let _ = 1;
+function K(e) {
   var n, i, r;
-  class e extends t {
+  class t extends e {
     constructor() {
       super(...arguments);
-      d(this, n, null);
-      d(this, i, R++);
-      d(this, r, null);
+      c(this, n, null);
+      c(this, i, _++);
+      c(this, r, null);
     }
     /**
      * Clears the cached debug flag so the attribute will be checked again
      * on the next log/warn/error call.
      */
     invalidateDebugCache() {
-      c(this, n, null);
+      m(this, n, null);
     }
     get _debug() {
-      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);
+      return a(this, n) !== null ? a(this, n) : (this instanceof HTMLElement && m(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(o = "main") {
-      return a(this, r) || c(this, r, new k(this._debug, `${a(this, i)}`, o)), a(this, r);
+      return a(this, r) || m(this, r, new C(this._debug, `${a(this, i)}`, o)), a(this, r);
     }
     log(...o) {
       this.getLogger().log(...o);
@@ -258,24 +274,25 @@ function z(t) {
       return this.getLogger().throwError(...o);
     }
   }
-  return n = new WeakMap(), i = new WeakMap(), r = new WeakMap(), e;
+  return n = new WeakMap(), i = new WeakMap(), r = new WeakMap(), t;
 }
 export {
-  N as Debouncer,
-  q as EventBindingsMixin,
-  V as Listen,
-  k as Logger,
-  z as LoggingMixin,
+  q as BreakPointMixin,
+  F as Debouncer,
+  J as EventBindingsMixin,
+  X as Listen,
+  C as Logger,
+  K as LoggingMixin,
   O as Stopwatch,
-  y as breakpointMap,
-  m as breakpoints,
-  _ as create_element,
-  P as getBreakpointMinWidth,
-  B as getCurrentBreakpoint,
-  F as getErrorLocation,
+  v as breakpointMap,
+  f as breakpoints,
+  U as create_element,
+  y as getBreakpointMinWidth,
+  A as getCurrentBreakpoint,
+  H as getErrorLocation,
   G as sleep,
-  S as waitFor,
+  V as waitFor,
   j as waitForAnimationEnd,
-  U as waitForDomContentLoaded,
-  H as waitForLoad
+  B as waitForDomContentLoaded,
+  z as waitForLoad
 };

package/lib/wait-for.d.ts

@@ -9,8 +9,8 @@ export declare function waitForDomContentLoaded(): Promise<void>;
  * - HTMLVideoElement and HTMLAudioElement: waits for 'loadeddata' event if not
  *
  *
- * @param element
+ * @param el
  */
-export declare function waitForLoad(element?: HTMLElement | Window | null): Promise<void>;
+export declare function waitForLoad(el?: Window | HTMLElement | null): Promise<void>;
 export declare function sleep(ms: number): Promise<void>;
 export declare function waitForAnimationEnd(element: HTMLElement): Promise<AnimationEvent>;

package/mixins/BreakPointMixin.d.ts

@@ -0,0 +1,346 @@
+type Constructor<T = object> = abstract new (...args: any[]) => T;
+export declare function BreakPointMixin<TBase extends Constructor<HTMLElement>>(Base: TBase): (abstract new (...args: any[]) => {
+    currentBreakPoint: string | null;
+    "__#2663@#updateBreakPoint": () => Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    accessKey: string;
+    readonly accessKeyLabel: string;
+    autocapitalize: string;
+    dir: string;
+    draggable: boolean;
+    hidden: boolean;
+    inert: boolean;
+    innerText: string;
+    lang: string;
+    readonly offsetHeight: number;
+    readonly offsetLeft: number;
+    readonly offsetParent: Element | null;
+    readonly offsetTop: number;
+    readonly offsetWidth: number;
+    outerText: string;
+    popover: string | null;
+    spellcheck: boolean;
+    title: string;
+    translate: boolean;
+    writingSuggestions: string;
+    attachInternals(): ElementInternals;
+    click(): void;
+    hidePopover(): void;
+    showPopover(): void;
+    togglePopover(options?: boolean): boolean;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    readonly attributes: NamedNodeMap;
+    get classList(): DOMTokenList;
+    set classList(value: string);
+    className: string;
+    readonly clientHeight: number;
+    readonly clientLeft: number;
+    readonly clientTop: number;
+    readonly clientWidth: number;
+    readonly currentCSSZoom: number;
+    id: string;
+    innerHTML: string;
+    readonly localName: string;
+    readonly namespaceURI: string | null;
+    onfullscreenchange: ((this: Element, ev: Event) => any) | null;
+    onfullscreenerror: ((this: Element, ev: Event) => any) | null;
+    outerHTML: string;
+    readonly ownerDocument: Document;
+    get part(): DOMTokenList;
+    set part(value: string);
+    readonly prefix: string | null;
+    readonly scrollHeight: number;
+    scrollLeft: number;
+    scrollTop: number;
+    readonly scrollWidth: number;
+    readonly shadowRoot: ShadowRoot | null;
+    slot: string;
+    readonly tagName: string;
+    attachShadow(init: ShadowRootInit): ShadowRoot;
+    checkVisibility(options?: CheckVisibilityOptions): boolean;
+    closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
+    closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
+    closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
+    closest<E extends Element = Element>(selectors: string): E | null;
+    computedStyleMap(): StylePropertyMapReadOnly;
+    getAttribute(qualifiedName: string): string | null;
+    getAttributeNS(namespace: string | null, localName: string): string | null;
+    getAttributeNames(): string[];
+    getAttributeNode(qualifiedName: string): Attr | null;
+    getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+    getBoundingClientRect(): DOMRect;
+    getClientRects(): DOMRectList;
+    getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+    getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
+    getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
+    getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+    getHTML(options?: GetHTMLOptions): string;
+    hasAttribute(qualifiedName: string): boolean;
+    hasAttributeNS(namespace: string | null, localName: string): boolean;
+    hasAttributes(): boolean;
+    hasPointerCapture(pointerId: number): boolean;
+    insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+    insertAdjacentHTML(position: InsertPosition, string: string): void;
+    insertAdjacentText(where: InsertPosition, data: string): void;
+    matches(selectors: string): boolean;
+    releasePointerCapture(pointerId: number): void;
+    removeAttribute(qualifiedName: string): void;
+    removeAttributeNS(namespace: string | null, localName: string): void;
+    removeAttributeNode(attr: Attr): Attr;
+    requestFullscreen(options?: FullscreenOptions): Promise<void>;
+    requestPointerLock(options?: PointerLockOptions): Promise<void>;
+    scroll(options?: ScrollToOptions): void;
+    scroll(x: number, y: number): void;
+    scrollBy(options?: ScrollToOptions): void;
+    scrollBy(x: number, y: number): void;
+    scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
+    scrollTo(options?: ScrollToOptions): void;
+    scrollTo(x: number, y: number): void;
+    setAttribute(qualifiedName: string, value: string): void;
+    setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
+    setAttributeNode(attr: Attr): Attr | null;
+    setAttributeNodeNS(attr: Attr): Attr | null;
+    setHTMLUnsafe(html: string): void;
+    setPointerCapture(pointerId: number): void;
+    toggleAttribute(qualifiedName: string, force?: boolean): boolean;
+    webkitMatchesSelector(selectors: string): boolean;
+    readonly baseURI: string;
+    readonly childNodes: NodeListOf<ChildNode>;
+    readonly firstChild: ChildNode | null;
+    readonly isConnected: boolean;
+    readonly lastChild: ChildNode | null;
+    readonly nextSibling: ChildNode | null;
+    readonly nodeName: string;
+    readonly nodeType: number;
+    nodeValue: string | null;
+    readonly parentElement: HTMLElement | null;
+    readonly parentNode: ParentNode | null;
+    readonly previousSibling: ChildNode | null;
+    textContent: string | null;
+    appendChild<T extends Node>(node: T): T;
+    cloneNode(subtree?: boolean): Node;
+    compareDocumentPosition(other: Node): number;
+    contains(other: Node | null): boolean;
+    getRootNode(options?: GetRootNodeOptions): Node;
+    hasChildNodes(): boolean;
+    insertBefore<T extends Node>(node: T, child: Node | null): T;
+    isDefaultNamespace(namespace: string | null): boolean;
+    isEqualNode(otherNode: Node | null): boolean;
+    isSameNode(otherNode: Node | null): boolean;
+    lookupNamespaceURI(prefix: string | null): string | null;
+    lookupPrefix(namespace: string | null): string | null;
+    normalize(): void;
+    removeChild<T extends Node>(child: T): T;
+    replaceChild<T extends Node>(node: Node, child: T): T;
+    readonly ELEMENT_NODE: 1;
+    readonly ATTRIBUTE_NODE: 2;
+    readonly TEXT_NODE: 3;
+    readonly CDATA_SECTION_NODE: 4;
+    readonly ENTITY_REFERENCE_NODE: 5;
+    readonly ENTITY_NODE: 6;
+    readonly PROCESSING_INSTRUCTION_NODE: 7;
+    readonly COMMENT_NODE: 8;
+    readonly DOCUMENT_NODE: 9;
+    readonly DOCUMENT_TYPE_NODE: 10;
+    readonly DOCUMENT_FRAGMENT_NODE: 11;
+    readonly NOTATION_NODE: 12;
+    readonly DOCUMENT_POSITION_DISCONNECTED: 1;
+    readonly DOCUMENT_POSITION_PRECEDING: 2;
+    readonly DOCUMENT_POSITION_FOLLOWING: 4;
+    readonly DOCUMENT_POSITION_CONTAINS: 8;
+    readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
+    readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
+    dispatchEvent(event: Event): boolean;
+    ariaAtomic: string | null;
+    ariaAutoComplete: string | null;
+    ariaBrailleLabel: string | null;
+    ariaBrailleRoleDescription: string | null;
+    ariaBusy: string | null;
+    ariaChecked: string | null;
+    ariaColCount: string | null;
+    ariaColIndex: string | null;
+    ariaColIndexText: string | null;
+    ariaColSpan: string | null;
+    ariaCurrent: string | null;
+    ariaDescription: string | null;
+    ariaDisabled: string | null;
+    ariaExpanded: string | null;
+    ariaHasPopup: string | null;
+    ariaHidden: string | null;
+    ariaInvalid: string | null;
+    ariaKeyShortcuts: string | null;
+    ariaLabel: string | null;
+    ariaLevel: string | null;
+    ariaLive: string | null;
+    ariaModal: string | null;
+    ariaMultiLine: string | null;
+    ariaMultiSelectable: string | null;
+    ariaOrientation: string | null;
+    ariaPlaceholder: string | null;
+    ariaPosInSet: string | null;
+    ariaPressed: string | null;
+    ariaReadOnly: string | null;
+    ariaRelevant: string | null;
+    ariaRequired: string | null;
+    ariaRoleDescription: string | null;
+    ariaRowCount: string | null;
+    ariaRowIndex: string | null;
+    ariaRowIndexText: string | null;
+    ariaRowSpan: string | null;
+    ariaSelected: string | null;
+    ariaSetSize: string | null;
+    ariaSort: string | null;
+    ariaValueMax: string | null;
+    ariaValueMin: string | null;
+    ariaValueNow: string | null;
+    ariaValueText: string | null;
+    role: string | null;
+    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
+    getAnimations(options?: GetAnimationsOptions): Animation[];
+    after(...nodes: (Node | string)[]): void;
+    before(...nodes: (Node | string)[]): void;
+    remove(): void;
+    replaceWith(...nodes: (Node | string)[]): void;
+    readonly nextElementSibling: Element | null;
+    readonly previousElementSibling: Element | null;
+    readonly childElementCount: number;
+    readonly children: HTMLCollection;
+    readonly firstElementChild: Element | null;
+    readonly lastElementChild: Element | null;
+    append(...nodes: (Node | string)[]): void;
+    prepend(...nodes: (Node | string)[]): void;
+    querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
+    querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
+    querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
+    querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
+    querySelector<E extends Element = Element>(selectors: string): E | null;
+    querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+    replaceChildren(...nodes: (Node | string)[]): void;
+    readonly assignedSlot: HTMLSlotElement | null;
+    readonly attributeStyleMap: StylePropertyMap;
+    get style(): CSSStyleDeclaration;
+    set style(cssText: string);
+    contentEditable: string;
+    enterKeyHint: string;
+    inputMode: string;
+    readonly isContentEditable: boolean;
+    onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+    onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+    onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+    oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+    oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+    ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onerror: OnErrorEventHandler;
+    onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+    onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+    ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+    onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
+    onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+    onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
+    onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+    onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+    autofocus: boolean;
+    readonly dataset: DOMStringMap;
+    nonce?: string;
+    tabIndex: number;
+    blur(): void;
+    focus(options?: FocusOptions): void;
+}) & TBase;
+export {};

package/mixins/EventBindingsMixin.d.ts

@@ -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[]) => {
-    "__#2378@#ac"?: AbortController;
+    "__#2664@#ac"?: AbortController;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#2378@#bindEventListeners"(): void;
+    "__#2664@#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[]) => {
-    "__#2379@#debugCached": boolean | null;
-    "__#2379@#myElementId": number;
+    "__#2665@#debugCached": boolean | null;
+    "__#2665@#myElementId": number;
     /**
      * Clears the cached debug flag so the attribute will be checked again
      * on the next log/warn/error call.
      */
     invalidateDebugCache(): void;
-    "__#2379@#myLoggerInstance": Logger | null;
+    "__#2665@#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.19",
+    "version": "1.0.21",
     "main": "./index.js",
     "dependencies": {},
     "type": "module",