@dodlhuat/basix 1.3.5 → 1.4.1

package/js/group-picker.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from './utils.js';
-/** Searchable picker for selecting groups and their subgroups. */
 class GroupPicker {
     container;
     data;
@@ -44,9 +43,9 @@ class GroupPicker {
         const searchWrap = document.createElement('div');
         searchWrap.className = 'group-picker__search';
         searchWrap.innerHTML = `
-      <span class="icon icon-search group-picker__search-icon" aria-hidden="true"></span>
-      <input type="text" />
-    `;
+            <span class="icon icon-search group-picker__search-icon" aria-hidden="true"></span>
+            <input type="text" />
+        `;
         this.searchInput = searchWrap.querySelector('input');
         this.searchInput.placeholder = this.options.searchPlaceholder;
         this.listEl = document.createElement('div');
@@ -73,9 +72,9 @@ class GroupPicker {
             const empty = document.createElement('div');
             empty.className = 'group-picker__empty';
             empty.innerHTML = `
-        <span class="icon icon-search" aria-hidden="true"></span>
-        <span>${this.options.emptyLabel}</span>
-      `;
+                <span class="icon icon-search" aria-hidden="true"></span>
+                <span>${this.options.emptyLabel}</span>
+            `;
             this.listEl.appendChild(empty);
         }
     }
@@ -94,7 +93,6 @@ class GroupPicker {
             el.classList.add('is-expanded');
         if (isParentSelected)
             el.classList.add('is-selected');
-        // Header row
         const header = document.createElement('div');
         header.className = 'group-picker__group-header';
         const label = document.createElement('span');

package/js/lightbox.d.ts

@@ -1,10 +1,8 @@
-/** A single image entry for the Lightbox gallery. */
 interface LightboxImage {
     src: string;
     alt?: string;
     caption?: string;
 }
-/** Configuration options for a Lightbox instance. */
 interface LightboxOptions {
     src?: string;
     alt?: string;
@@ -15,7 +13,6 @@ interface LightboxOptions {
     onOpen?: () => void;
     onClose?: () => void;
 }
-/** Full-screen image viewer with gallery navigation, zoom, and touch support. */
 declare class Lightbox {
     private images;
     private currentIndex;
@@ -30,7 +27,7 @@ declare class Lightbox {
     private abortController;
     constructor(options: LightboxOptions);
     show(): void;
-    hide(): void;
+    hide: () => void;
     next(): void;
     prev(): void;
     isVisible(): boolean;

package/js/lightbox.js

@@ -1,4 +1,3 @@
-/** Full-screen image viewer with gallery navigation, zoom, and touch support. */
 class Lightbox {
     images;
     currentIndex;
@@ -22,9 +21,6 @@ class Lightbox {
         this.closeable = options.closeable ?? true;
         this.onOpen = options.onOpen;
         this.onClose = options.onClose;
-        this.hide = this.hide.bind(this);
-        this.handleKeydown = this.handleKeydown.bind(this);
-        this.handleBackgroundClick = this.handleBackgroundClick.bind(this);
     }
     show() {
         this.hide();
@@ -61,7 +57,7 @@ class Lightbox {
         });
         this.onOpen?.();
     }
-    hide() {
+    hide = () => {
         const wrapper = this.wrapper;
         if (!wrapper)
             return;
@@ -80,7 +76,7 @@ class Lightbox {
             }
             this.onClose?.();
         }, 300);
-    }
+    };
     next() {
         if (this.images.length <= 1)
             return;
@@ -168,7 +164,7 @@ class Lightbox {
         this.imgEl.classList.toggle('is-zoomed', this.isZoomed);
         this.wrapper?.querySelector('.lightbox-img-wrap')?.classList.toggle('is-zoomed', this.isZoomed);
     }
-    handleKeydown(e) {
+    handleKeydown = (e) => {
         switch (e.key) {
             case 'Escape':
                 if (this.closeable)
@@ -184,7 +180,7 @@ class Lightbox {
                 this.trapFocus(e);
                 break;
         }
-    }
+    };
     trapFocus(e) {
         if (!this.wrapper)
             return;
@@ -206,11 +202,11 @@ class Lightbox {
             }
         }
     }
-    handleBackgroundClick(e) {
+    handleBackgroundClick = (e) => {
         if (e.target?.classList.contains('lightbox-background')) {
             this.hide();
         }
-    }
+    };
     addTouchSupport() {
         const wrap = this.wrapper?.querySelector('.lightbox-img-wrap');
         if (!wrap)

package/js/modal.d.ts

@@ -1,5 +1,4 @@
 type ModalType = 'default' | 'success' | 'error' | 'warning' | 'info';
-/** Configuration options for a Modal dialog. */
 interface ModalOptions {
     content: string;
     header?: string;
@@ -7,7 +6,6 @@ interface ModalOptions {
     closeable?: boolean;
     type?: ModalType;
 }
-/** Overlay dialog with optional header, footer, close button, and type variants. */
 declare class Modal {
     private content;
     private readonly header?;

package/js/modal.js

@@ -1,6 +1,5 @@
 import { sanitizeHtml } from './utils.js';
 const CLOSE_ICON = '<div class="icon icon-close close"></div>';
-/** Overlay dialog with optional header, footer, close button, and type variants. */
 class Modal {
     content;
     header;

package/js/popover.d.ts

@@ -2,7 +2,6 @@ import type { Placement } from './position.js';
 type PopoverPlacement = Placement | 'auto';
 type PopoverAlign = 'start' | 'center' | 'end';
 type PopoverTrigger = 'click' | 'hover';
-/** Configuration options for a Popover instance. */
 interface PopoverOptions {
     content: string;
     placement?: PopoverPlacement;
@@ -16,7 +15,6 @@ interface PopoverOptions {
     onOpen?: () => void;
     onClose?: () => void;
 }
-/** Anchored popover triggered by click or hover, with auto-placement and optional arrow. */
 declare class Popover {
     private static openPopovers;
     private static idCounter;
@@ -32,7 +30,6 @@ declare class Popover {
     toggle(): void;
     destroy(): void;
     static closeAll(): void;
-    /** Declarative init — reads [data-popover="#selector"] attributes */
     static initAll(): void;
     private buildEl;
     private reposition;

package/js/popover.js

@@ -1,7 +1,6 @@
 import { computePosition } from './position.js';
 import { sanitizeHtml } from './utils.js';
 const ARROW_SIZE = 6;
-/** Anchored popover triggered by click or hover, with auto-placement and optional arrow. */
 class Popover {
     static openPopovers = new Set();
     static idCounter = 0;
@@ -75,7 +74,6 @@ class Popover {
     static closeAll() {
         Popover.openPopovers.forEach(p => p.close());
     }
-    /** Declarative init — reads [data-popover="#selector"] attributes */
     static initAll() {
         document.querySelectorAll('[data-popover]').forEach(trigger => {
             const sel = trigger.getAttribute('data-popover');

package/js/position.d.ts

@@ -1,10 +1,5 @@
-/**
- * Shared floating-element positioning utility.
- * Used by Tooltip and Popover.
- */
 type Placement = 'top' | 'bottom' | 'left' | 'right';
 type Align = 'start' | 'center' | 'end';
-/** Options accepted by `computePosition`. */
 interface PositionOptions {
     placement: Placement | 'auto';
     align?: Align;
@@ -12,22 +7,14 @@ interface PositionOptions {
     margin?: number;
     arrowSize?: number;
 }
-/** Result returned by `computePosition`. */
 interface PositionResult {
     left: number;
     top: number;
     placement: Placement;
     arrowOffset?: number;
 }
-/** Pick the placement with the most available space, preferring bottom > top > right > left. */
 declare function bestPlacement(trigger: DOMRect, floating: DOMRect, offset: number): Placement;
-/** Flip to opposite side if preferred placement doesn't fit. */
 declare function maybeFlip(placement: Placement, trigger: DOMRect, floating: DOMRect, offset: number): Placement;
-/**
- * Compute `left` / `top` for a `position: fixed` floating element anchored to a trigger.
- * Handles placement resolution (auto + flip), cross-axis alignment, viewport clamping,
- * and optional arrow offset calculation.
- */
 declare function computePosition(trigger: DOMRect, floating: DOMRect, opts: PositionOptions): PositionResult;
 export { computePosition, bestPlacement, maybeFlip };
 export type { Placement, Align, PositionOptions, PositionResult };

package/js/position.js

@@ -1,8 +1,3 @@
-/**
- * Shared floating-element positioning utility.
- * Used by Tooltip and Popover.
- */
-/** Pick the placement with the most available space, preferring bottom > top > right > left. */
 function bestPlacement(trigger, floating, offset) {
     const space = {
         bottom: window.innerHeight - trigger.bottom - offset,
@@ -18,10 +13,8 @@ function bestPlacement(trigger, floating, offset) {
         return 'right';
     if (space.left >= floating.width)
         return 'left';
-    // Fallback: largest available side
     return (Object.entries(space).sort((a, b) => b[1] - a[1])[0][0]);
 }
-/** Flip to opposite side if preferred placement doesn't fit. */
 function maybeFlip(placement, trigger, floating, offset) {
     const fits = {
         top: trigger.top - offset >= floating.height,
@@ -32,11 +25,6 @@ function maybeFlip(placement, trigger, floating, offset) {
     const opp = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
     return (!fits[placement] && fits[opp[placement]]) ? opp[placement] : placement;
 }
-/**
- * Compute `left` / `top` for a `position: fixed` floating element anchored to a trigger.
- * Handles placement resolution (auto + flip), cross-axis alignment, viewport clamping,
- * and optional arrow offset calculation.
- */
 function computePosition(trigger, floating, opts) {
     const offset = opts.offset ?? 8;
     const margin = opts.margin ?? 8;

package/js/push-menu.d.ts

@@ -1,4 +1,3 @@
-/** DOM element references managed by the PushMenu static class. */
 interface PushMenuElements {
     navigation: HTMLElement | null;
     content: HTMLElement | null;
@@ -7,12 +6,10 @@ interface PushMenuElements {
     controlIcon: HTMLElement | null;
     backdrop: HTMLElement | null;
 }
-/** Static class that manages a push-style side navigation panel. */
 declare class PushMenu {
     private static elements;
     private static initialized;
     private static panelStack;
-    private static boundHandleNavigationChange;
     static init(): void;
     private static buildPanels;
     private static extractSubPanels;

package/js/push-menu.js

@@ -1,4 +1,3 @@
-/** Static class that manages a push-style side navigation panel. */
 class PushMenu {
     static elements = {
         navigation: null,
@@ -10,7 +9,6 @@ class PushMenu {
     };
     static initialized = false;
     static panelStack = [];
-    static boundHandleNavigationChange;
     static init() {
         if (this.initialized) {
             console.warn('PushMenu: Already initialized');
@@ -21,8 +19,7 @@ class PushMenu {
             throw new Error('PushMenu: Required elements not found (.navigation, .push-content)');
         }
         this.buildPanels();
-        this.boundHandleNavigationChange = this.handleNavigationChange.bind(this);
-        this.elements.navigation.addEventListener('change', this.boundHandleNavigationChange);
+        this.elements.navigation.addEventListener('change', this.handleNavigationChange);
         this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
         this.initialized = true;
     }
@@ -120,7 +117,7 @@ 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);
@@ -130,7 +127,7 @@ class PushMenu {
             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)');
@@ -152,13 +149,11 @@ class PushMenu {
         }
     }
     static clickNav = () => {
-        const navigation = PushMenu.elements.navigation;
-        navigation?.click();
+        PushMenu.elements.navigation.click();
     };
     static handleBackdropClick = () => {
         if (PushMenu.isOpen()) {
-            const navigation = PushMenu.elements.navigation;
-            navigation?.click();
+            PushMenu.elements.navigation.click();
         }
     };
     static open() {
@@ -177,7 +172,7 @@ class PushMenu {
     static destroy() {
         if (!this.initialized)
             return;
-        this.elements.navigation?.removeEventListener('change', this.boundHandleNavigationChange);
+        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
         this.elements.content?.removeEventListener('click', this.clickNav);
         this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
         this.close();

package/js/range-slider.d.ts

@@ -1,4 +1,3 @@
-/** Enhances a native range input with a CSS fill-percentage custom property. */
 declare class RangeSlider {
     private readonly input;
     constructor(input: HTMLInputElement);

package/js/range-slider.js

@@ -1,4 +1,3 @@
-/** Enhances a native range input with a CSS fill-percentage custom property. */
 class RangeSlider {
     input;
     constructor(input) {
@@ -12,8 +11,8 @@ class RangeSlider {
         });
     }
     update() {
-        const min = +this.input.min || 0;
-        const max = +this.input.max || 100;
+        const min = this.input.min !== '' ? +this.input.min : 0;
+        const max = this.input.max !== '' ? +this.input.max : 100;
         const pct = ((+this.input.value - min) / (max - min)) * 100;
         this.input.style.setProperty('--range-fill', `${pct}%`);
     }

package/js/scroll.d.ts

@@ -1,10 +1,8 @@
-/** Options for the Scroll.to() utility. */
 interface ScrollOptions {
     behavior?: ScrollBehavior;
     offset?: number;
     block?: ScrollLogicalPosition;
 }
-/** Static utility for smooth-scrolling to a target element with header offset support. */
 declare class Scroll {
     static to(target: string | Element, options?: ScrollOptions): void;
 }

package/js/scroll.js

@@ -1,16 +1,15 @@
-/** Static utility for smooth-scrolling to a target element with header offset support. */
 class Scroll {
     static to(target, options = {}) {
-        const fixed_header = document.querySelector('.main-header');
-        const offset = fixed_header ? fixed_header.offsetHeight : 0;
+        const fixedHeader = document.querySelector('.main-header');
+        const offset = fixedHeader ? fixedHeader.offsetHeight : 0;
         const settings = {
-            behavior: "smooth",
+            behavior: 'smooth',
             offset: offset,
-            block: "start",
+            block: 'start',
             ...options
         };
         let el = target instanceof Element ? target : null;
-        if (typeof target === "string") {
+        if (typeof target === 'string') {
             el = document.querySelector(target);
         }
         if (!el)

package/js/scrollbar.d.ts

@@ -1,11 +1,9 @@
-/** DOM element references for a Scrollbar instance. */
 interface ScrollbarElements {
     viewport: HTMLElement;
     content: HTMLElement;
     track: HTMLElement;
     thumb: HTMLElement;
 }
-/** Custom scrollbar overlay that replaces the native scrollbar with a draggable thumb. */
 declare class Scrollbar {
     private static readonly instances;
     private static activeInstance;
@@ -23,13 +21,7 @@ declare class Scrollbar {
     private activePointerId;
     private startPointerY;
     private startThumbTop;
-    private readonly boundPointerMove;
-    private readonly boundPointerUp;
-    private readonly boundThumbPointerDown;
-    private readonly boundTrackClick;
-    private readonly boundViewportScroll;
-    private readonly boundUpdateThumb;
-    private readonly boundContainerWheel;
+    private abortController;
     private constructor();
     private getRequiredElements;
     private getMinThumbHeight;
@@ -47,4 +39,4 @@ declare class Scrollbar {
     static initOne(elementOrSelector: string | HTMLElement): Scrollbar;
     static getInstance(container: HTMLElement): Scrollbar | undefined;
 }
-export { Scrollbar, ScrollbarElements };
+export { Scrollbar, type ScrollbarElements };

package/js/scrollbar.js

@@ -1,4 +1,3 @@
-/** Custom scrollbar overlay that replaces the native scrollbar with a draggable thumb. */
 class Scrollbar {
     static instances = new WeakMap();
     static activeInstance = null;
@@ -16,13 +15,7 @@ class Scrollbar {
     activePointerId = null;
     startPointerY = 0;
     startThumbTop = 0;
-    boundPointerMove;
-    boundPointerUp;
-    boundThumbPointerDown;
-    boundTrackClick;
-    boundViewportScroll;
-    boundUpdateThumb;
-    boundContainerWheel;
+    abortController = new AbortController();
     constructor(container) {
         this.container = container;
         const elements = this.getRequiredElements(container);
@@ -31,21 +24,14 @@ class Scrollbar {
         this.track = elements.track;
         this.thumb = elements.thumb;
         this.MIN_THUMB_HEIGHT = this.getMinThumbHeight();
-        this.boundPointerMove = this.handlePointerMove.bind(this);
-        this.boundPointerUp = this.handlePointerUp.bind(this);
-        this.boundThumbPointerDown = this.handleThumbPointerDown.bind(this);
-        this.boundTrackClick = this.handleTrackClick.bind(this);
-        this.boundViewportScroll = this.updateThumb.bind(this);
-        this.boundUpdateThumb = this.updateThumb.bind(this);
-        this.boundContainerWheel = this.handleContainerWheel.bind(this);
-        this.ro = new ResizeObserver(this.boundUpdateThumb);
+        this.ro = new ResizeObserver(this.updateThumb);
         this.attachEventListeners();
         Scrollbar.instances.set(container, this);
         Scrollbar.instanceCount++;
         if (!Scrollbar.globalListenersInstalled) {
             Scrollbar.installGlobalListeners();
         }
-        requestAnimationFrame(this.boundUpdateThumb);
+        requestAnimationFrame(this.updateThumb);
     }
     getRequiredElements(container) {
         const viewport = container.querySelector('.viewport');
@@ -70,26 +56,27 @@ class Scrollbar {
         const ac = new AbortController();
         Scrollbar.globalListenerAbortController = ac;
         document.addEventListener('pointermove', (e) => {
-            Scrollbar.activeInstance?.boundPointerMove(e);
+            Scrollbar.activeInstance?.handlePointerMove(e);
         }, { passive: false, signal: ac.signal });
         document.addEventListener('pointerup', (e) => {
-            Scrollbar.activeInstance?.boundPointerUp(e);
+            Scrollbar.activeInstance?.handlePointerUp(e);
         }, { signal: ac.signal });
         document.addEventListener('pointercancel', (e) => {
-            Scrollbar.activeInstance?.boundPointerUp(e);
+            Scrollbar.activeInstance?.handlePointerUp(e);
         }, { signal: ac.signal });
         Scrollbar.globalListenersInstalled = true;
     }
     attachEventListeners() {
-        this.viewport.addEventListener('scroll', this.boundViewportScroll, { passive: true });
-        this.thumb.addEventListener('pointerdown', this.boundThumbPointerDown);
-        this.track.addEventListener('click', this.boundTrackClick);
-        this.container.addEventListener('wheel', this.boundContainerWheel, { passive: false });
+        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);
-        window.addEventListener('resize', this.boundUpdateThumb);
     }
-    updateThumb() {
+    updateThumb = () => {
         const viewportHeight = this.viewport.clientHeight;
         const contentHeight = this.content.scrollHeight;
         const trackHeight = this.track.clientHeight;
@@ -106,8 +93,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;
@@ -123,8 +110,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;
         }
@@ -140,8 +127,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;
         }
@@ -155,8 +142,8 @@ class Scrollbar {
         this.activePointerId = null;
         Scrollbar.activeInstance = null;
         document.body.style.userSelect = '';
-    }
-    handleTrackClick(e) {
+    };
+    handleTrackClick = (e) => {
         if (e.target === this.thumb) {
             return;
         }
@@ -173,8 +160,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;
@@ -183,13 +170,9 @@ class Scrollbar {
             e.preventDefault();
         }
         this.viewport.scrollTop += e.deltaY;
-    }
+    };
     destroy() {
-        this.viewport.removeEventListener('scroll', this.boundViewportScroll);
-        this.thumb.removeEventListener('pointerdown', this.boundThumbPointerDown);
-        this.track.removeEventListener('click', this.boundTrackClick);
-        this.container.removeEventListener('wheel', this.boundContainerWheel);
-        window.removeEventListener('resize', this.boundUpdateThumb);
+        this.abortController.abort();
         this.ro.disconnect();
         Scrollbar.instances.delete(this.container);
         if (Scrollbar.activeInstance === this) {

package/js/select.d.ts

@@ -1,4 +1,3 @@
-/** Enhances a native `<select>` element with a custom styled dropdown. */
 declare class Select {
     private readonly element;
     private readonly isMultiselect;
@@ -6,8 +5,8 @@ declare class Select {
     private readonly documentClickHandler;
     constructor(elementOrSelector: string | HTMLSelectElement);
     destroy(): void;
-    value(): string | string[] | undefined;
-    static init(elementOrSelector: string | HTMLSelectElement): boolean | null;
+    value(): string | string[];
+    static init(elementOrSelector: string | HTMLSelectElement): (() => void) | null;
     private static initElement;
     private static closeAllDropdowns;
     private static handleMultiSelect;

package/js/select.js

@@ -1,4 +1,3 @@
-/** Enhances a native `<select>` element with a custom styled dropdown. */
 class Select {
     element;
     isMultiselect;
@@ -30,9 +29,6 @@ class Select {
         this.dropdown?.classList.remove('open');
     }
     value() {
-        if (!this.element) {
-            return undefined;
-        }
         const selectedValues = Array.from(this.element.options)
             .filter(option => option.selected)
             .map(option => option.value);
@@ -42,18 +38,18 @@ class Select {
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
-        if (!element) {
+        if (!element)
             return null;
-        }
         const result = Select.initElement(element);
         if (!result)
             return null;
-        document.addEventListener('click', (e) => {
+        const handler = (e) => {
             if (!result.dropdown.contains(e.target)) {
                 result.dropdown.classList.remove('open');
             }
-        });
-        return result.isMulti;
+        };
+        document.addEventListener('click', handler);
+        return () => document.removeEventListener('click', handler);
     }
     static initElement(element) {
         if (!Select.transformSelect(element)) {
@@ -122,6 +118,7 @@ class Select {
         selected.textContent = option.textContent?.trim() || '';
         dropdown.classList.remove('open');
         selectElement.value = option.dataset.value || '';
+        selectElement.dispatchEvent(new Event('change'));
     }
     static transformSelect(select) {
         const parent = select.closest('.select-group');