@dodlhuat/basix 1.4.2 → 1.5.0

package/js/popover.js

@@ -1,5 +1,6 @@
 import { computePosition } from './position.js';
 import { sanitizeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 const ARROW_SIZE = 6;
 class Popover {
     static openPopovers = new Set();
@@ -7,12 +8,11 @@ class Popover {
     trigger;
     opts;
     popoverEl = null;
-    _isOpen = false;
     hoverTimer = null;
+    listeners = new ListenerGroup();
+    openListeners = null;
     constructor(triggerEl, options) {
-        const el = typeof triggerEl === 'string'
-            ? document.querySelector(triggerEl)
-            : triggerEl;
+        const el = typeof triggerEl === 'string' ? document.querySelector(triggerEl) : triggerEl;
         if (!el)
             throw new Error('Popover: trigger element not found');
         this.trigger = el;
@@ -31,9 +31,11 @@ class Popover {
         };
         this.attachTrigger();
     }
-    get isOpen() { return this._isOpen; }
+    get isOpen() {
+        return this.popoverEl !== null;
+    }
     open() {
-        if (this._isOpen)
+        if (this.popoverEl)
             return;
         if (this.opts.triggerMode === 'click')
             Popover.closeAll();
@@ -42,40 +44,47 @@ class Popover {
         this.reposition();
         requestAnimationFrame(() => {
             this.popoverEl?.classList.add('is-open');
-            this._isOpen = true;
             Popover.openPopovers.add(this);
             this.opts.onOpen();
+            this.openListeners = new ListenerGroup();
+            const openSig = { signal: this.openListeners.signal };
             if (this.opts.closeOnOutsideClick)
-                document.addEventListener('pointerdown', this.onOutsideClick, { capture: true });
+                document.addEventListener('pointerdown', (e) => this.onOutsideClick(e), { ...openSig, capture: true });
             if (this.opts.closeOnEscape)
-                document.addEventListener('keydown', this.onEscape);
+                document.addEventListener('keydown', (e) => this.onEscape(e), openSig);
         });
     }
     close() {
-        if (!this._isOpen || !this.popoverEl)
+        if (!this.popoverEl)
             return;
         this.popoverEl.classList.remove('is-open');
-        this._isOpen = false;
         Popover.openPopovers.delete(this);
         this.opts.onClose();
-        document.removeEventListener('pointerdown', this.onOutsideClick, { capture: true });
-        document.removeEventListener('keydown', this.onEscape);
+        this.openListeners?.destroy();
+        this.openListeners = null;
         this.trigger.removeAttribute('aria-expanded');
         this.trigger.removeAttribute('aria-controls');
         const el = this.popoverEl;
         setTimeout(() => el.remove(), 200);
         this.popoverEl = null;
     }
-    toggle() { this._isOpen ? this.close() : this.open(); }
+    toggle() {
+        if (this.popoverEl) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
     destroy() {
         this.close();
-        this.detachTrigger();
+        this.listeners.destroy();
     }
     static closeAll() {
-        Popover.openPopovers.forEach(p => p.close());
+        Popover.openPopovers.forEach((p) => p.close());
     }
     static initAll() {
-        document.querySelectorAll('[data-popover]').forEach(trigger => {
+        document.querySelectorAll('[data-popover]').forEach((trigger) => {
             const sel = trigger.getAttribute('data-popover');
             if (!sel)
                 return;
@@ -100,9 +109,7 @@ class Popover {
         el.setAttribute('data-arrow', String(this.opts.arrow));
         const hasStructure = /class="popover-(header|body|footer|menu)/.test(this.opts.content);
         const safeContent = sanitizeHtml(this.opts.content);
-        el.innerHTML = hasStructure
-            ? safeContent
-            : `<div class="popover-body">${safeContent}</div>`;
+        el.innerHTML = hasStructure ? safeContent : `<div class="popover-body">${safeContent}</div>`;
         this.trigger.setAttribute('aria-expanded', 'true');
         this.trigger.setAttribute('aria-controls', id);
         return el;
@@ -123,37 +130,35 @@ class Popover {
         this.popoverEl.style.left = `${left}px`;
         this.popoverEl.style.top = `${top}px`;
     }
-    onClick = () => { this.toggle(); };
-    onMouseEnter = () => {
+    onClick() {
+        this.toggle();
+    }
+    onMouseEnter() {
         if (this.hoverTimer !== null)
             clearTimeout(this.hoverTimer);
         this.open();
-    };
-    onMouseLeave = () => {
+    }
+    onMouseLeave() {
         this.hoverTimer = window.setTimeout(() => this.close(), 120);
-    };
-    onOutsideClick = (e) => {
+    }
+    onOutsideClick(e) {
         const t = e.target;
         if (!this.popoverEl?.contains(t) && !this.trigger.contains(t))
             this.close();
-    };
-    onEscape = (e) => {
+    }
+    onEscape(e) {
         if (e.key === 'Escape')
             this.close();
-    };
+    }
     attachTrigger() {
+        const sig = { signal: this.listeners.signal };
         if (this.opts.triggerMode === 'click') {
-            this.trigger.addEventListener('click', this.onClick);
+            this.trigger.addEventListener('click', () => this.onClick(), sig);
         }
         else {
-            this.trigger.addEventListener('mouseenter', this.onMouseEnter);
-            this.trigger.addEventListener('mouseleave', this.onMouseLeave);
+            this.trigger.addEventListener('mouseenter', () => this.onMouseEnter(), sig);
+            this.trigger.addEventListener('mouseleave', () => this.onMouseLeave(), sig);
         }
     }
-    detachTrigger() {
-        this.trigger.removeEventListener('click', this.onClick);
-        this.trigger.removeEventListener('mouseenter', this.onMouseEnter);
-        this.trigger.removeEventListener('mouseleave', this.onMouseLeave);
-    }
 }
 export { Popover };

package/js/position.js

@@ -13,7 +13,7 @@ function bestPlacement(trigger, floating, offset) {
         return 'right';
     if (space.left >= floating.width)
         return 'left';
-    return (Object.entries(space).sort((a, b) => b[1] - a[1])[0][0]);
+    return Object.entries(space).sort((a, b) => b[1] - a[1])[0][0];
 }
 function maybeFlip(placement, trigger, floating, offset) {
     const fits = {
@@ -23,15 +23,13 @@ function maybeFlip(placement, trigger, floating, offset) {
         right: window.innerWidth - trigger.right - offset >= floating.width,
     };
     const opp = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
-    return (!fits[placement] && fits[opp[placement]]) ? opp[placement] : placement;
+    return !fits[placement] && fits[opp[placement]] ? opp[placement] : placement;
 }
 function computePosition(trigger, floating, opts) {
     const offset = opts.offset ?? 8;
     const margin = opts.margin ?? 8;
     const align = opts.align ?? 'center';
-    const placement = opts.placement === 'auto'
-        ? bestPlacement(trigger, floating, offset)
-        : maybeFlip(opts.placement, trigger, floating, offset);
+    const placement = opts.placement === 'auto' ? bestPlacement(trigger, floating, offset) : maybeFlip(opts.placement, trigger, floating, offset);
     let left = 0, top = 0;
     switch (placement) {
         case 'top':

package/js/push-menu.d.ts

@@ -6,11 +6,17 @@ interface PushMenuElements {
     controlIcon: HTMLElement | null;
     backdrop: HTMLElement | null;
 }
+interface PushMenuOptions {
+    iconBasePath?: string;
+}
 declare class PushMenu {
+    private static iconBasePath;
     private static elements;
     private static initialized;
     private static panelStack;
-    static init(): void;
+    private static listeners;
+    private static clickNavListeners;
+    static init(options?: PushMenuOptions): void;
     private static buildPanels;
     private static extractSubPanels;
     static openPanel(panel: HTMLElement): void;
@@ -26,4 +32,4 @@ declare class PushMenu {
     static destroy(): void;
     static refresh(): void;
 }
-export { PushMenu, type PushMenuElements };
+export { PushMenu, type PushMenuElements, type PushMenuOptions };

package/js/push-menu.js

@@ -1,26 +1,32 @@
+import { ListenerGroup } from './listeners.js';
 class PushMenu {
+    static iconBasePath = 'svg-icons/';
     static elements = {
         navigation: null,
         content: null,
         menu: null,
         header: null,
         controlIcon: null,
-        backdrop: null
+        backdrop: null,
     };
     static initialized = false;
     static panelStack = [];
-    static init() {
+    static listeners = new ListenerGroup();
+    static clickNavListeners = null;
+    static init(options = {}) {
         if (this.initialized) {
             console.warn('PushMenu: Already initialized');
             return;
         }
+        this.iconBasePath = options.iconBasePath ?? 'svg-icons/';
         this.refresh();
         if (!this.elements.navigation || !this.elements.content) {
             throw new Error('PushMenu: Required elements not found (.navigation, .push-content)');
         }
         this.buildPanels();
-        this.elements.navigation.addEventListener('change', this.handleNavigationChange);
-        this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
+        const sig = { signal: this.listeners.signal };
+        this.elements.navigation.addEventListener('change', () => this.handleNavigationChange(), sig);
+        this.elements.backdrop?.addEventListener('click', () => this.handleBackdropClick(), sig);
         this.initialized = true;
     }
     static buildPanels() {
@@ -56,7 +62,7 @@ class PushMenu {
                 const backBtn = document.createElement('button');
                 backBtn.classList.add('push-menu-back');
                 backBtn.setAttribute('aria-label', 'Back');
-                backBtn.innerHTML = `<span class="icon icon-navigate_before" aria-hidden="true"></span>`;
+                backBtn.innerHTML = `<svg class="icon-svg" aria-hidden="true"><use href="${PushMenu.iconBasePath}icons.svg#chevron_left"/></svg>`;
                 header.addEventListener('click', () => PushMenu.goBack());
                 const titleEl = document.createElement('span');
                 titleEl.classList.add('push-menu-panel-title');
@@ -72,7 +78,7 @@ class PushMenu {
                 const chevron = document.createElement('span');
                 chevron.classList.add('push-menu-chevron');
                 chevron.setAttribute('aria-hidden', 'true');
-                chevron.innerHTML = `<span class="icon icon-navigate_next" aria-hidden="true"></span>`;
+                chevron.innerHTML = `<svg class="icon-svg" aria-hidden="true"><use href="${PushMenu.iconBasePath}icons.svg#chevron_right"/></svg>`;
                 trigger.appendChild(chevron);
                 if (parentAnchor) {
                     parentAnchor.replaceWith(trigger);
@@ -117,17 +123,19 @@ class PushMenu {
             }
         }, 300);
     }
-    static handleNavigationChange = () => {
+    static handleNavigationChange() {
         const isPushed = this.elements.content?.classList.contains('pushed') ?? false;
         if (!isPushed) {
-            this.elements.content?.addEventListener('click', this.clickNav);
+            this.clickNavListeners = new ListenerGroup();
+            this.elements.content?.addEventListener('click', () => this.clickNav(), { signal: this.clickNavListeners.signal });
         }
         else {
-            this.elements.content?.removeEventListener('click', this.clickNav);
+            this.clickNavListeners?.destroy();
+            this.clickNavListeners = null;
             this.resetPanels();
         }
         this.pushToggle();
-    };
+    }
     static pushToggle() {
         if (!this.elements.content || !this.elements.menu) {
             throw new Error('PushMenu: Required elements not found (.push-content, .push-menu)');
@@ -138,24 +146,27 @@ class PushMenu {
         this.elements.header?.classList.toggle('pushed', !isPushed);
         this.elements.backdrop?.classList.toggle('pushed', !isPushed);
         if (this.elements.controlIcon) {
-            if (isPushed) {
-                this.elements.controlIcon.classList.remove('icon-menu_open');
-                this.elements.controlIcon.classList.add('icon-menu');
+            const iconName = isPushed ? 'menu' : 'menu_open';
+            const useEl = this.elements.controlIcon.querySelector('use');
+            if (useEl) {
+                const existingHref = useEl.getAttribute('href') ?? '';
+                const basePath = existingHref.includes('#') ? existingHref.split('#')[0] : PushMenu.iconBasePath + 'icons.svg';
+                useEl.setAttribute('href', `${basePath}#${iconName}`);
             }
             else {
-                this.elements.controlIcon.classList.add('icon-menu_open');
-                this.elements.controlIcon.classList.remove('icon-menu');
+                this.elements.controlIcon.classList.remove('icon-menu_open', 'icon-menu');
+                this.elements.controlIcon.classList.add(`icon-${iconName}`);
             }
         }
     }
-    static clickNav = () => {
+    static clickNav() {
         PushMenu.elements.navigation.click();
-    };
-    static handleBackdropClick = () => {
+    }
+    static handleBackdropClick() {
         if (PushMenu.isOpen()) {
             PushMenu.elements.navigation.click();
         }
-    };
+    }
     static open() {
         if (!this.elements.content?.classList.contains('pushed')) {
             this.pushToggle();
@@ -172,9 +183,9 @@ class PushMenu {
     static destroy() {
         if (!this.initialized)
             return;
-        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
-        this.elements.content?.removeEventListener('click', this.clickNav);
-        this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
+        this.listeners.reset();
+        this.clickNavListeners?.destroy();
+        this.clickNavListeners = null;
         this.close();
         this.elements = {
             navigation: null,
@@ -182,7 +193,7 @@ class PushMenu {
             menu: null,
             header: null,
             controlIcon: null,
-            backdrop: null
+            backdrop: null,
         };
         this.panelStack = [];
         this.initialized = false;

package/js/range-slider.d.ts

@@ -1,6 +1,6 @@
 declare class RangeSlider {
     private readonly input;
-    private abortController;
+    private listeners;
     constructor(input: HTMLInputElement);
     static initAll(selector?: string): void;
     private update;
@@ -12,7 +12,7 @@ declare class RangeSliderRange {
     private readonly endInput;
     private readonly fill;
     private readonly fillCreatedByUs;
-    private abortController;
+    private listeners;
     constructor(container: HTMLElement);
     static initAll(selector?: string): void;
     values(): [number, number];

package/js/range-slider.js

@@ -1,10 +1,11 @@
+import { ListenerGroup } from './listeners.js';
 class RangeSlider {
     input;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(input) {
         this.input = input;
         this.update();
-        this.input.addEventListener('input', () => this.update(), { signal: this.abortController.signal });
+        this.input.addEventListener('input', () => this.update(), { signal: this.listeners.signal });
     }
     static initAll(selector = '.range-slider input[type="range"]') {
         document.querySelectorAll(selector).forEach((input) => {
@@ -18,7 +19,7 @@ class RangeSlider {
         this.input.style.setProperty('--range-fill', `${pct}%`);
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.input.style.removeProperty('--range-fill');
     }
 }
@@ -28,7 +29,7 @@ class RangeSliderRange {
     endInput;
     fill;
     fillCreatedByUs;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(container) {
         const inputs = container.querySelectorAll('input[type="range"]');
         if (inputs.length !== 2) {
@@ -45,7 +46,7 @@ class RangeSliderRange {
             container.insertBefore(this.fill, container.firstChild);
         }
         this.update();
-        const signal = this.abortController.signal;
+        const signal = this.listeners.signal;
         this.startInput.addEventListener('input', () => this.handleInput(this.startInput), { signal });
         this.endInput.addEventListener('input', () => this.handleInput(this.endInput), { signal });
     }
@@ -75,7 +76,7 @@ class RangeSliderRange {
         this.container.style.setProperty('--range-end', `${endPct}%`);
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.container.style.removeProperty('--range-start');
         this.container.style.removeProperty('--range-end');
         if (this.fillCreatedByUs) {

package/js/scroll.js

@@ -4,14 +4,11 @@ class Scroll {
         const offset = fixedHeader ? fixedHeader.offsetHeight : 0;
         const settings = {
             behavior: 'smooth',
-            offset: offset,
+            offset,
             block: 'start',
-            ...options
+            ...options,
         };
-        let el = target instanceof Element ? target : null;
-        if (typeof target === 'string') {
-            el = document.querySelector(target);
-        }
+        const el = typeof target === 'string' ? document.querySelector(target) : target;
         if (!el)
             return;
         const rect = el.getBoundingClientRect();
@@ -19,7 +16,7 @@ class Scroll {
         const offsetTop = rect.top + scrollTop - settings.offset;
         window.scrollTo({
             top: offsetTop,
-            behavior: settings.behavior
+            behavior: settings.behavior,
         });
     }
 }

package/js/scrollbar.d.ts

@@ -9,19 +9,19 @@ declare class Scrollbar {
     private static activeInstance;
     private static globalListenersInstalled;
     private static instanceCount;
-    private static globalListenerAbortController;
+    private static globalListeners;
     private readonly container;
     private readonly viewport;
     private readonly content;
     private readonly track;
     private readonly thumb;
     private readonly MIN_THUMB_HEIGHT;
-    private readonly ro;
+    private readonly resizeObserver;
     private dragging;
     private activePointerId;
     private startPointerY;
     private startThumbTop;
-    private abortController;
+    private listeners;
     private constructor();
     private getRequiredElements;
     private getMinThumbHeight;

package/js/scrollbar.js

@@ -1,21 +1,22 @@
+import { ListenerGroup } from './listeners.js';
 class Scrollbar {
     static instances = new WeakMap();
     static activeInstance = null;
     static globalListenersInstalled = false;
     static instanceCount = 0;
-    static globalListenerAbortController = null;
+    static globalListeners = null;
     container;
     viewport;
     content;
     track;
     thumb;
     MIN_THUMB_HEIGHT;
-    ro;
+    resizeObserver;
     dragging = false;
     activePointerId = null;
     startPointerY = 0;
     startThumbTop = 0;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(container) {
         this.container = container;
         const elements = this.getRequiredElements(container);
@@ -24,14 +25,14 @@ class Scrollbar {
         this.track = elements.track;
         this.thumb = elements.thumb;
         this.MIN_THUMB_HEIGHT = this.getMinThumbHeight();
-        this.ro = new ResizeObserver(this.updateThumb);
+        this.resizeObserver = new ResizeObserver(() => this.updateThumb());
         this.attachEventListeners();
         Scrollbar.instances.set(container, this);
         Scrollbar.instanceCount++;
         if (!Scrollbar.globalListenersInstalled) {
             Scrollbar.installGlobalListeners();
         }
-        requestAnimationFrame(this.updateThumb);
+        requestAnimationFrame(() => this.updateThumb());
     }
     getRequiredElements(container) {
         const viewport = container.querySelector('.viewport');
@@ -44,39 +45,37 @@ class Scrollbar {
         return { viewport, content, track, thumb };
     }
     getMinThumbHeight() {
-        const cssValue = getComputedStyle(document.documentElement)
-            .getPropertyValue('--thumb-min')
-            .trim();
+        const cssValue = getComputedStyle(document.documentElement).getPropertyValue('--thumb-min').trim();
         const parsed = parseInt(cssValue, 10);
         const defaultMin = 28;
         const absoluteMin = 16;
         return Math.max(absoluteMin, parsed || defaultMin);
     }
     static installGlobalListeners() {
-        const ac = new AbortController();
-        Scrollbar.globalListenerAbortController = ac;
+        const listeners = new ListenerGroup();
+        Scrollbar.globalListeners = listeners;
         document.addEventListener('pointermove', (e) => {
             Scrollbar.activeInstance?.handlePointerMove(e);
-        }, { passive: false, signal: ac.signal });
+        }, { passive: false, signal: listeners.signal });
         document.addEventListener('pointerup', (e) => {
             Scrollbar.activeInstance?.handlePointerUp(e);
-        }, { signal: ac.signal });
+        }, { signal: listeners.signal });
         document.addEventListener('pointercancel', (e) => {
             Scrollbar.activeInstance?.handlePointerUp(e);
-        }, { signal: ac.signal });
+        }, { signal: listeners.signal });
         Scrollbar.globalListenersInstalled = true;
     }
     attachEventListeners() {
-        const sig = { signal: this.abortController.signal };
-        this.viewport.addEventListener('scroll', this.updateThumb, { passive: true, signal: sig.signal });
-        this.thumb.addEventListener('pointerdown', this.handleThumbPointerDown, sig);
-        this.track.addEventListener('click', this.handleTrackClick, sig);
-        this.container.addEventListener('wheel', this.handleContainerWheel, { passive: false, signal: sig.signal });
-        window.addEventListener('resize', this.updateThumb, sig);
-        this.ro.observe(this.viewport);
-        this.ro.observe(this.content);
-    }
-    updateThumb = () => {
+        const sig = { signal: this.listeners.signal };
+        this.viewport.addEventListener('scroll', () => this.updateThumb(), { ...sig, passive: true });
+        this.thumb.addEventListener('pointerdown', (e) => this.handleThumbPointerDown(e), sig);
+        this.track.addEventListener('click', (e) => this.handleTrackClick(e), sig);
+        this.container.addEventListener('wheel', (e) => this.handleContainerWheel(e), { ...sig, passive: false });
+        window.addEventListener('resize', () => this.updateThumb(), sig);
+        this.resizeObserver.observe(this.viewport);
+        this.resizeObserver.observe(this.content);
+    }
+    updateThumb() {
         const viewportHeight = this.viewport.clientHeight;
         const contentHeight = this.content.scrollHeight;
         const trackHeight = this.track.clientHeight;
@@ -93,8 +92,8 @@ class Scrollbar {
         const scrollRatio = this.viewport.scrollTop / (maxScroll || 1);
         const thumbTop = scrollRatio * (maxThumbTop || 0);
         this.thumb.style.top = `${thumbTop}px`;
-    };
-    handleThumbPointerDown = (e) => {
+    }
+    handleThumbPointerDown(e) {
         e.preventDefault();
         this.dragging = true;
         this.activePointerId = e.pointerId;
@@ -110,8 +109,8 @@ class Scrollbar {
         const trackRect = this.track.getBoundingClientRect();
         this.startThumbTop = thumbRect.top - trackRect.top;
         document.body.style.userSelect = 'none';
-    };
-    handlePointerMove = (e) => {
+    }
+    handlePointerMove(e) {
         if (!this.dragging || this.activePointerId !== e.pointerId) {
             return;
         }
@@ -127,8 +126,8 @@ class Scrollbar {
         const maxScroll = contentHeight - viewportHeight;
         const scrollRatio = newThumbTop / (maxThumbTop || 1);
         this.viewport.scrollTop = scrollRatio * (maxScroll || 0);
-    };
-    handlePointerUp = (e) => {
+    }
+    handlePointerUp(e) {
         if (!this.dragging || this.activePointerId !== e.pointerId) {
             return;
         }
@@ -142,8 +141,8 @@ class Scrollbar {
         this.activePointerId = null;
         Scrollbar.activeInstance = null;
         document.body.style.userSelect = '';
-    };
-    handleTrackClick = (e) => {
+    }
+    handleTrackClick(e) {
         if (e.target === this.thumb) {
             return;
         }
@@ -160,8 +159,8 @@ class Scrollbar {
         const scrollRatio = clampedThumbTop / (maxThumbTop || 1);
         const scrollTop = scrollRatio * (maxScroll || 0);
         this.viewport.scrollTo({ top: scrollTop, behavior: 'smooth' });
-    };
-    handleContainerWheel = (e) => {
+    }
+    handleContainerWheel(e) {
         const { scrollTop, scrollHeight, clientHeight } = this.viewport;
         const scrollable = scrollHeight > clientHeight;
         const atTop = scrollTop === 0 && e.deltaY < 0;
@@ -170,25 +169,23 @@ class Scrollbar {
             e.preventDefault();
         }
         this.viewport.scrollTop += e.deltaY;
-    };
+    }
     destroy() {
-        this.abortController.abort();
-        this.ro.disconnect();
+        this.listeners.destroy();
+        this.resizeObserver.disconnect();
         Scrollbar.instances.delete(this.container);
         if (Scrollbar.activeInstance === this) {
             Scrollbar.activeInstance = null;
         }
         Scrollbar.instanceCount--;
         if (Scrollbar.instanceCount === 0) {
-            Scrollbar.globalListenerAbortController?.abort();
-            Scrollbar.globalListenerAbortController = null;
+            Scrollbar.globalListeners?.destroy();
+            Scrollbar.globalListeners = null;
             Scrollbar.globalListenersInstalled = false;
         }
     }
     static create(elementOrSelector) {
-        const container = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const container = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!container) {
             throw new Error(`Scrollbar: Element not found for selector "${elementOrSelector}"`);
         }
@@ -199,7 +196,7 @@ class Scrollbar {
     }
     static initAll(selector) {
         const containers = document.querySelectorAll(selector);
-        return Array.from(containers).map(container => Scrollbar.create(container));
+        return Array.from(containers).map((container) => Scrollbar.create(container));
     }
     static initOne(elementOrSelector) {
         return Scrollbar.create(elementOrSelector);

package/js/select.d.ts

@@ -2,7 +2,7 @@ declare class Select {
     private readonly element;
     private readonly isMultiselect;
     private readonly dropdown;
-    private readonly documentClickHandler;
+    private listeners;
     constructor(elementOrSelector: string | HTMLSelectElement);
     destroy(): void;
     value(): string | string[];