@dodlhuat/basix 1.3.4 → 1.4.0

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');

package/js/sidebar-nav.d.ts

@@ -1,29 +1,18 @@
-/** Configuration options for a SidebarNav instance. */
 interface SidebarNavOptions {
-    /** Selector for the toggle button. Default: '.sidebar-toggle' */
     toggleSelector?: string;
-    /** Breakpoint (px) above which the sidebar is always visible. Default: 768 */
     breakpoint?: number;
-    /** Minimum horizontal swipe distance (px) to trigger open/close. Default: 60 */
     swipeThreshold?: number;
-    /** Width of the left-edge zone (px) that triggers open on swipe-right. Default: 20 */
     swipeEdge?: number;
 }
-/** Collapsible sidebar navigation with backdrop, swipe gestures, and responsive breakpoint support. */
 declare class SidebarNav {
     private nav;
     private backdrop;
     private toggleBtn;
     private closeBtn;
     private opts;
-    private _touchStartX;
-    private _touchStartY;
-    private _onToggle;
-    private _onBackdrop;
-    private _onResize;
-    private _onClose;
-    private _onTouchStart;
-    private _onTouchEnd;
+    private touchStartX;
+    private touchStartY;
+    private abortController;
     constructor(containerOrSelector: string | HTMLElement, options?: SidebarNavOptions);
     open(): void;
     close(): void;
@@ -31,4 +20,4 @@ declare class SidebarNav {
     isOpen(): boolean;
     destroy(): void;
 }
-export { SidebarNav, SidebarNavOptions };
+export { SidebarNav, type SidebarNavOptions };

package/js/sidebar-nav.js

@@ -1,18 +1,12 @@
-/** Collapsible sidebar navigation with backdrop, swipe gestures, and responsive breakpoint support. */
 class SidebarNav {
     nav;
     backdrop;
     toggleBtn;
     closeBtn = null;
     opts;
-    _touchStartX = 0;
-    _touchStartY = 0;
-    _onToggle;
-    _onBackdrop;
-    _onResize;
-    _onClose;
-    _onTouchStart;
-    _onTouchEnd;
+    touchStartX = 0;
+    touchStartY = 0;
+    abortController = new AbortController();
     constructor(containerOrSelector, options = {}) {
         const container = typeof containerOrSelector === 'string'
             ? document.querySelector(containerOrSelector)
@@ -26,39 +20,36 @@ class SidebarNav {
         this.nav = container?.querySelector('.sidebar-nav') ?? null;
         this.backdrop = container?.querySelector('.sidebar-backdrop') ?? null;
         this.toggleBtn = document.querySelector(this.opts.toggleSelector);
-        this._onToggle = () => this.toggle();
-        this._onBackdrop = () => this.close();
-        this._onResize = () => { if (window.innerWidth > this.opts.breakpoint)
-            this.close(); };
-        this._onClose = () => this.close();
-        this._onTouchStart = (e) => {
-            this._touchStartX = e.touches[0].clientX;
-            this._touchStartY = e.touches[0].clientY;
-        };
-        this._onTouchEnd = (e) => {
+        const sig = { signal: this.abortController.signal };
+        this.toggleBtn?.addEventListener('click', () => this.toggle(), sig);
+        this.backdrop?.addEventListener('click', () => this.close(), sig);
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > this.opts.breakpoint)
+                this.close();
+        }, sig);
+        document.addEventListener('touchstart', (e) => {
+            this.touchStartX = e.touches[0].clientX;
+            this.touchStartY = e.touches[0].clientY;
+        }, { passive: true, signal: this.abortController.signal });
+        document.addEventListener('touchend', (e) => {
             if (window.innerWidth > this.opts.breakpoint)
                 return;
-            const dx = e.changedTouches[0].clientX - this._touchStartX;
-            const dy = e.changedTouches[0].clientY - this._touchStartY;
+            const dx = e.changedTouches[0].clientX - this.touchStartX;
+            const dy = e.changedTouches[0].clientY - this.touchStartY;
             if (Math.abs(dx) < Math.abs(dy))
                 return;
-            if (!this.isOpen() && this._touchStartX <= this.opts.swipeEdge && dx >= this.opts.swipeThreshold) {
+            if (!this.isOpen() && this.touchStartX <= this.opts.swipeEdge && dx >= this.opts.swipeThreshold) {
                 this.open();
             }
             else if (this.isOpen() && dx <= -this.opts.swipeThreshold) {
                 this.close();
             }
-        };
-        this.toggleBtn?.addEventListener('click', this._onToggle);
-        this.backdrop?.addEventListener('click', this._onBackdrop);
-        window.addEventListener('resize', this._onResize);
-        document.addEventListener('touchstart', this._onTouchStart, { passive: true });
-        document.addEventListener('touchend', this._onTouchEnd, { passive: true });
+        }, { passive: true, signal: this.abortController.signal });
         this.closeBtn = document.createElement('button');
         this.closeBtn.className = 'sidebar-close';
         this.closeBtn.setAttribute('aria-label', 'Close navigation');
         this.closeBtn.innerHTML = '<div class="icon icon-close"></div>';
-        this.closeBtn.addEventListener('click', this._onClose);
+        this.closeBtn.addEventListener('click', () => this.close(), sig);
         this.nav?.append(this.closeBtn);
     }
     open() {
@@ -76,13 +67,8 @@ class SidebarNav {
         return this.nav?.classList.contains('is-open') ?? false;
     }
     destroy() {
-        this.toggleBtn?.removeEventListener('click', this._onToggle);
-        this.backdrop?.removeEventListener('click', this._onBackdrop);
-        window.removeEventListener('resize', this._onResize);
-        this.closeBtn?.removeEventListener('click', this._onClose);
+        this.abortController.abort();
         this.closeBtn?.remove();
-        document.removeEventListener('touchstart', this._onTouchStart);
-        document.removeEventListener('touchend', this._onTouchEnd);
     }
 }
 export { SidebarNav };

package/js/stepper.d.ts

@@ -1,18 +1,21 @@
-/** Configuration options for a Stepper instance. */
 interface StepperOptions {
     defaultStep?: number;
     clickable?: boolean;
     onChange?: (current: number, previous: number) => void;
+    iconBasePath?: string;
 }
-/** Multi-step progress indicator with clickable steps and connector state. */
 declare class Stepper {
     private container;
     private steps;
     private connectors;
     private current;
     private readonly onChange?;
+    private readonly iconBasePath;
     private abortController;
+    private injectedConnectors;
     constructor(elementOrSelector: string | HTMLElement, options?: StepperOptions);
+    private injectConnectors;
+    private checkSvg;
     private render;
     next(): void;
     prev(): void;

package/js/stepper.js

@@ -1,26 +1,29 @@
-/** Multi-step progress indicator with clickable steps and connector state. */
 class Stepper {
     container;
     steps;
     connectors;
     current;
     onChange;
+    iconBasePath;
     abortController = new AbortController();
+    injectedConnectors = false;
     constructor(elementOrSelector, options = {}) {
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
         if (!element)
-            throw new Error(`Stepper: element not found`);
+            throw new Error('Stepper: element not found');
         this.container = element;
         this.steps = Array.from(this.container.querySelectorAll('.stepper-step'));
-        this.connectors = Array.from(this.container.querySelectorAll('.stepper-connector'));
         this.onChange = options.onChange;
+        this.iconBasePath = options.iconBasePath ?? 'svg-icons/';
         this.current = options.defaultStep ?? 0;
         if (this.steps.length === 0) {
             console.warn('Stepper: no .stepper-step elements found');
+            this.connectors = [];
             return;
         }
+        this.connectors = this.injectConnectors();
         if (options.clickable) {
             this.container.classList.add('stepper-clickable');
             this.steps.forEach((step, i) => {
@@ -29,13 +32,41 @@ class Stepper {
         }
         this.render();
     }
+    injectConnectors() {
+        const injected = [];
+        for (let i = 0; i < this.steps.length - 1; i++) {
+            const connector = document.createElement('div');
+            connector.className = 'stepper-connector';
+            this.steps[i].insertAdjacentElement('afterend', connector);
+            injected.push(connector);
+        }
+        this.injectedConnectors = true;
+        return injected;
+    }
+    checkSvg() {
+        return `<svg class="icon-svg" aria-hidden="true"><use href="${this.iconBasePath}icons.svg#check"/></svg>`;
+    }
     render() {
         this.steps.forEach((step, i) => {
-            step.classList.remove('active', 'completed');
-            if (i < this.current)
+            step.classList.remove('active', 'completed', 'error');
+            const indicator = step.querySelector('.stepper-indicator');
+            if (i < this.current) {
                 step.classList.add('completed');
-            else if (i === this.current)
+                step.removeAttribute('aria-current');
+                if (indicator)
+                    indicator.innerHTML = this.checkSvg();
+            }
+            else if (i === this.current) {
                 step.classList.add('active');
+                step.setAttribute('aria-current', 'step');
+                if (indicator)
+                    indicator.textContent = String(i + 1);
+            }
+            else {
+                step.removeAttribute('aria-current');
+                if (indicator)
+                    indicator.textContent = String(i + 1);
+            }
         });
         this.connectors.forEach((connector, i) => {
             connector.classList.toggle('completed', i < this.current);
@@ -85,6 +116,11 @@ class Stepper {
     }
     destroy() {
         this.abortController.abort();
+        if (this.injectedConnectors) {
+            this.connectors.forEach(c => c.remove());
+            this.connectors = [];
+        }
+        this.steps.forEach(step => step.removeAttribute('aria-current'));
     }
 }
 export { Stepper };

package/js/table.d.ts

@@ -1,20 +1,16 @@
-/** Descriptor for a single table column. */
 interface TableColumn {
     key: string;
     label: string;
     sortable?: boolean;
 }
-/** A single data row, keyed by column key. */
 interface TableRow {
     [key: string]: string | number | boolean;
 }
-/** Configuration options for a Table instance. */
 interface TableOptions {
     data?: TableRow[];
     columns?: TableColumn[];
     pageSize?: number;
 }
-/** Dynamic data table with sorting, filtering, and pagination. */
 declare class Table {
     private container;
     private data;
@@ -29,74 +25,23 @@ declare class Table {
     private paginationContainer;
     private abortController;
     constructor(elementOrSelector: string | HTMLElement, options?: TableOptions);
-    /**
-     * Parses an existing HTML table in the DOM to extract data and columns
-     */
     private parseTableFromDOM;
-    /**
-     * Initializes the table by rendering controls, structure, and content
-     */
     private init;
-    /**
-     * Renders the search and page size controls
-     */
     private renderControls;
-    /**
-     * Creates the table structure (table, thead, tbody, pagination container)
-     */
     private renderTableStructure;
-    /**
-     * Returns filtered and sorted data based on current state
-     */
     private getFilteredAndSortedData;
-    /**
-     * Renders the table body, pagination, and header sort indicators
-     */
     private render;
-    /**
-     * Renders the table body rows
-     */
     private renderBody;
-    /**
-     * Updates the sort direction indicators in table headers
-     */
     private updateHeaderSortIcons;
-    /**
-     * Renders pagination controls and info
-     */
     private renderPagination;
-    /**
-     * Handles search input changes
-     */
     private handleSearch;
-    /**
-     * Handles column header clicks for sorting
-     */
     private handleSort;
-    /**
-     * Handles page size changes
-     */
     private handlePageSizeChange;
-    /**
-     * Sets the current page and re-renders
-     */
     private setPage;
-    /**
-     * Assigns a unique ID to an element, incrementing if necessary
-     */
     private assignUniqueId;
-    /**
-     * Public API: Updates the table data and re-renders
-     */
     setData(data: TableRow[]): void;
-    /**
-     * Public API: Updates the columns and re-renders
-     */
     setColumns(columns: TableColumn[]): void;
-    /**
-     * Public API: Gets the current filtered and sorted data
-     */
     getData(): TableRow[];
     destroy(): void;
 }
-export { Table, TableRow, TableColumn, TableOptions };
+export { Table, type TableRow, type TableColumn, type TableOptions };