@dodlhuat/basix 1.3.1 → 1.3.3

package/js/push-menu.js

@@ -1,4 +1,16 @@
+/** Static class that manages a push-style side navigation panel. */
 class PushMenu {
+    static elements = {
+        navigation: null,
+        content: null,
+        menu: null,
+        header: null,
+        controlIcon: null,
+        backdrop: null
+    };
+    static initialized = false;
+    static panelStack = [];
+    static boundHandleNavigationChange;
     static init() {
         if (this.initialized) {
             console.warn('PushMenu: Already initialized');
@@ -14,7 +26,6 @@ class PushMenu {
         this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
         this.initialized = true;
     }
-    // ─── Panel construction ────────────────────────────────────────────────
     static buildPanels() {
         const menu = this.elements.menu;
         if (!menu)
@@ -22,18 +33,15 @@ class PushMenu {
         const rootUl = menu.querySelector(':scope > ul');
         if (!rootUl)
             return;
-        // Wrap root ul in a panel
         const rootPanel = document.createElement('div');
         rootPanel.classList.add('push-menu-panel', 'is-active');
         rootPanel.dataset.level = '0';
         rootPanel.appendChild(rootUl);
         menu.appendChild(rootPanel);
-        // Recursively extract nested uls into sibling panels
         this.extractSubPanels(rootPanel, 1);
         this.panelStack = [rootPanel];
     }
     static extractSubPanels(panel, level) {
-        // Collect all uls currently in this panel before any mutations
         const uls = Array.from(panel.querySelectorAll('ul'));
         for (const ul of uls) {
             const listItems = Array.from(ul.children);
@@ -41,14 +49,11 @@ class PushMenu {
                 const childUl = li.querySelector(':scope > ul');
                 if (!childUl)
                     continue;
-                // Determine label from the immediate anchor child
                 const parentAnchor = li.querySelector(':scope > a');
                 const title = parentAnchor?.textContent?.trim() ?? '';
-                // ── Build sub-panel ──────────────────────────────────────
                 const subPanel = document.createElement('div');
                 subPanel.classList.add('push-menu-panel');
                 subPanel.dataset.level = String(level);
-                // Header: back button + breadcrumb title
                 const header = document.createElement('div');
                 header.classList.add('push-menu-panel-header');
                 const backBtn = document.createElement('button');
@@ -62,15 +67,11 @@ class PushMenu {
                 header.appendChild(backBtn);
                 header.appendChild(titleEl);
                 subPanel.appendChild(header);
-                // Move the child ul into the sub-panel
                 subPanel.appendChild(childUl);
-                // Append sub-panel as sibling inside the nav
                 this.elements.menu?.appendChild(subPanel);
-                // ── Replace anchor with a trigger span in the parent li ──
                 const trigger = document.createElement('span');
                 trigger.classList.add('push-menu-item');
                 trigger.textContent = title;
-                // Chevron icon
                 const chevron = document.createElement('span');
                 chevron.classList.add('push-menu-chevron');
                 chevron.setAttribute('aria-hidden', 'true');
@@ -83,12 +84,10 @@ class PushMenu {
                     li.prepend(trigger);
                 }
                 trigger.addEventListener('click', () => PushMenu.openPanel(subPanel));
-                // Recurse into the newly created sub-panel
                 this.extractSubPanels(subPanel, level + 1);
             }
         }
     }
-    // ─── Panel navigation ──────────────────────────────────────────────────
     static openPanel(panel) {
         const currentPanel = this.panelStack[this.panelStack.length - 1];
         currentPanel.classList.remove('is-active');
@@ -109,7 +108,6 @@ class PushMenu {
         const menu = this.elements.menu;
         if (!menu)
             return;
-        // Wait for the close animation before snapping panels back
         setTimeout(() => {
             const panels = Array.from(menu.querySelectorAll('.push-menu-panel'));
             panels.forEach((panel, index) => {
@@ -122,7 +120,6 @@ class PushMenu {
             }
         }, 300);
     }
-    // ─── Open / close ──────────────────────────────────────────────────────
     static handleNavigationChange() {
         const isPushed = this.elements.content?.classList.contains('pushed') ?? false;
         if (!isPushed) {
@@ -139,10 +136,10 @@ class PushMenu {
             throw new Error('PushMenu: Required elements not found (.push-content, .push-menu)');
         }
         const isPushed = this.elements.content.classList.contains('pushed');
-        this.toggleClass(this.elements.content, 'pushed', !isPushed);
-        this.toggleClass(this.elements.menu, 'pushed', !isPushed);
-        this.toggleClass(this.elements.header, 'pushed', !isPushed);
-        this.toggleClass(this.elements.backdrop, 'pushed', !isPushed);
+        this.elements.content.classList.toggle('pushed', !isPushed);
+        this.elements.menu.classList.toggle('pushed', !isPushed);
+        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');
@@ -154,16 +151,16 @@ class PushMenu {
             }
         }
     }
-    static toggleClass(element, className, add) {
-        if (!element)
-            return;
-        if (add) {
-            element.classList.add(className);
-        }
-        else {
-            element.classList.remove(className);
+    static clickNav = () => {
+        const navigation = PushMenu.elements.navigation;
+        navigation?.click();
+    };
+    static handleBackdropClick = () => {
+        if (PushMenu.isOpen()) {
+            const navigation = PushMenu.elements.navigation;
+            navigation?.click();
         }
-    }
+    };
     static open() {
         if (!this.elements.content?.classList.contains('pushed')) {
             this.pushToggle();
@@ -204,24 +201,4 @@ class PushMenu {
         this.elements.backdrop = document.querySelector('.push-menu-backdrop');
     }
 }
-PushMenu.elements = {
-    navigation: null,
-    content: null,
-    menu: null,
-    header: null,
-    controlIcon: null,
-    backdrop: null
-};
-PushMenu.initialized = false;
-PushMenu.panelStack = [];
-PushMenu.clickNav = () => {
-    const navigation = PushMenu.elements.navigation;
-    navigation?.click();
-};
-PushMenu.handleBackdropClick = () => {
-    if (PushMenu.isOpen()) {
-        const navigation = PushMenu.elements.navigation;
-        navigation?.click();
-    }
-};
 export { PushMenu };

package/js/range-slider.d.ts

@@ -1,3 +1,4 @@
+/** 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,8 +1,7 @@
+/** Enhances a native range input with a CSS fill-percentage custom property. */
 class RangeSlider {
+    input;
     constructor(input) {
-        this.handleInput = () => {
-            this.update();
-        };
         this.input = input;
         this.update();
         this.input.addEventListener('input', this.handleInput);
@@ -18,6 +17,9 @@ class RangeSlider {
         const pct = ((+this.input.value - min) / (max - min)) * 100;
         this.input.style.setProperty('--range-fill', `${pct}%`);
     }
+    handleInput = () => {
+        this.update();
+    };
     destroy() {
         this.input.removeEventListener('input', this.handleInput);
         this.input.style.removeProperty('--range-fill');

package/js/scroll.d.ts

@@ -1,8 +1,10 @@
+/** 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,3 +1,4 @@
+/** 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');

package/js/scrollbar.d.ts

@@ -1,9 +1,11 @@
+/** 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;

package/js/scrollbar.js

@@ -1,19 +1,36 @@
+/** Custom scrollbar overlay that replaces the native scrollbar with a draggable thumb. */
 class Scrollbar {
+    static instances = new WeakMap();
+    static activeInstance = null;
+    static globalListenersInstalled = false;
+    static instanceCount = 0;
+    static globalListenerAbortController = null;
+    container;
+    viewport;
+    content;
+    track;
+    thumb;
+    MIN_THUMB_HEIGHT;
+    ro;
+    dragging = false;
+    activePointerId = null;
+    startPointerY = 0;
+    startThumbTop = 0;
+    boundPointerMove;
+    boundPointerUp;
+    boundThumbPointerDown;
+    boundTrackClick;
+    boundViewportScroll;
+    boundUpdateThumb;
+    boundContainerWheel;
     constructor(container) {
-        this.dragging = false;
-        this.activePointerId = null;
-        this.startPointerY = 0;
-        this.startThumbTop = 0;
         this.container = container;
-        // Query and validate required elements
         const elements = this.getRequiredElements(container);
         this.viewport = elements.viewport;
         this.content = elements.content;
         this.track = elements.track;
         this.thumb = elements.thumb;
-        // Get minimum thumb height from CSS variable or use default
         this.MIN_THUMB_HEIGHT = this.getMinThumbHeight();
-        // Bind all event handlers once
         this.boundPointerMove = this.handlePointerMove.bind(this);
         this.boundPointerUp = this.handlePointerUp.bind(this);
         this.boundThumbPointerDown = this.handleThumbPointerDown.bind(this);
@@ -21,17 +38,13 @@ class Scrollbar {
         this.boundViewportScroll = this.updateThumb.bind(this);
         this.boundUpdateThumb = this.updateThumb.bind(this);
         this.boundContainerWheel = this.handleContainerWheel.bind(this);
-        // Setup ResizeObserver
         this.ro = new ResizeObserver(this.boundUpdateThumb);
-        // Initialize
         this.attachEventListeners();
         Scrollbar.instances.set(container, this);
-        // Track instances and install global listeners once for all
         Scrollbar.instanceCount++;
         if (!Scrollbar.globalListenersInstalled) {
             Scrollbar.installGlobalListeners();
         }
-        // Initial thumb update
         requestAnimationFrame(this.boundUpdateThumb);
     }
     getRequiredElements(container) {
@@ -68,12 +81,10 @@ class Scrollbar {
         Scrollbar.globalListenersInstalled = true;
     }
     attachEventListeners() {
-        // Instance-specific events
         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 });
-        // Observe size changes
         this.ro.observe(this.viewport);
         this.ro.observe(this.content);
         window.addEventListener('resize', this.boundUpdateThumb);
@@ -82,17 +93,14 @@ class Scrollbar {
         const viewportHeight = this.viewport.clientHeight;
         const contentHeight = this.content.scrollHeight;
         const trackHeight = this.track.clientHeight;
-        // Hide thumb if content fits in viewport
         if (contentHeight <= viewportHeight + 1) {
             this.thumb.style.display = 'none';
             return;
         }
         this.thumb.style.display = '';
-        // Calculate thumb size
         const ratio = viewportHeight / contentHeight;
         const thumbHeight = Math.max(Math.floor(ratio * trackHeight), this.MIN_THUMB_HEIGHT);
         this.thumb.style.height = `${thumbHeight}px`;
-        // Calculate thumb position
         const maxScroll = contentHeight - viewportHeight;
         const maxThumbTop = trackHeight - thumbHeight;
         const scrollRatio = this.viewport.scrollTop / (maxScroll || 1);
@@ -104,7 +112,6 @@ class Scrollbar {
         this.dragging = true;
         this.activePointerId = e.pointerId;
         Scrollbar.activeInstance = this;
-        // Capture pointer for reliable tracking
         try {
             this.thumb.setPointerCapture(e.pointerId);
         }
@@ -115,11 +122,9 @@ class Scrollbar {
         const thumbRect = this.thumb.getBoundingClientRect();
         const trackRect = this.track.getBoundingClientRect();
         this.startThumbTop = thumbRect.top - trackRect.top;
-        // Prevent text selection during drag
         document.body.style.userSelect = 'none';
     }
     handlePointerMove(e) {
-        // Only handle events for the active pointer
         if (!this.dragging || this.activePointerId !== e.pointerId) {
             return;
         }
@@ -128,10 +133,8 @@ class Scrollbar {
         const trackHeight = this.track.clientHeight;
         const thumbHeight = this.thumb.clientHeight;
         const maxThumbTop = trackHeight - thumbHeight;
-        // Calculate new thumb position
         const newThumbTop = Math.max(0, Math.min(maxThumbTop, this.startThumbTop + pointerDelta));
         this.thumb.style.top = `${newThumbTop}px`;
-        // Update viewport scroll position
         const contentHeight = this.content.scrollHeight;
         const viewportHeight = this.viewport.clientHeight;
         const maxScroll = contentHeight - viewportHeight;
@@ -143,7 +146,6 @@ class Scrollbar {
             return;
         }
         this.dragging = false;
-        // Release pointer capture
         try {
             this.thumb.releasePointerCapture(e.pointerId);
         }
@@ -155,7 +157,6 @@ class Scrollbar {
         document.body.style.userSelect = '';
     }
     handleTrackClick(e) {
-        // Ignore clicks directly on the thumb
         if (e.target === this.thumb) {
             return;
         }
@@ -163,11 +164,9 @@ class Scrollbar {
         const clickY = e.clientY - trackRect.top;
         const thumbHeight = this.thumb.clientHeight;
         const trackHeight = this.track.clientHeight;
-        // Center thumb on click position
         const targetThumbTop = clickY - thumbHeight / 2;
         const maxThumbTop = trackHeight - thumbHeight;
         const clampedThumbTop = Math.max(0, Math.min(maxThumbTop, targetThumbTop));
-        // Calculate corresponding scroll position
         const contentHeight = this.content.scrollHeight;
         const viewportHeight = this.viewport.clientHeight;
         const maxScroll = contentHeight - viewportHeight;
@@ -186,21 +185,16 @@ class Scrollbar {
         this.viewport.scrollTop += e.deltaY;
     }
     destroy() {
-        // Remove event listeners
         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);
-        // Disconnect observer
         this.ro.disconnect();
-        // Clear from instances map
         Scrollbar.instances.delete(this.container);
-        // Clear active instance if this was it
         if (Scrollbar.activeInstance === this) {
             Scrollbar.activeInstance = null;
         }
-        // Uninstall global listeners when last instance is destroyed
         Scrollbar.instanceCount--;
         if (Scrollbar.instanceCount === 0) {
             Scrollbar.globalListenerAbortController?.abort();
@@ -208,7 +202,6 @@ class Scrollbar {
             Scrollbar.globalListenersInstalled = false;
         }
     }
-    // Static factory methods
     static create(elementOrSelector) {
         const container = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
@@ -232,9 +225,4 @@ class Scrollbar {
         return Scrollbar.instances.get(container);
     }
 }
-Scrollbar.instances = new WeakMap();
-Scrollbar.activeInstance = null;
-Scrollbar.globalListenersInstalled = false;
-Scrollbar.instanceCount = 0;
-Scrollbar.globalListenerAbortController = null;
 export { Scrollbar };

package/js/select.d.ts

@@ -1,3 +1,4 @@
+/** Enhances a native `<select>` element with a custom styled dropdown. */
 declare class Select {
     private readonly element;
     private readonly isMultiselect;

package/js/select.js

@@ -1,4 +1,9 @@
+/** Enhances a native `<select>` element with a custom styled dropdown. */
 class Select {
+    element;
+    isMultiselect;
+    dropdown;
+    documentClickHandler;
     constructor(elementOrSelector) {
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
@@ -43,7 +48,6 @@ class Select {
         const result = Select.initElement(element);
         if (!result)
             return null;
-        // Static init path: add document listener without lifecycle management
         document.addEventListener('click', (e) => {
             if (!result.dropdown.contains(e.target)) {
                 result.dropdown.classList.remove('open');
@@ -69,12 +73,10 @@ class Select {
             throw new Error(`Select: Required dropdown elements not found for "${element}"`);
         }
         const isMulti = dropdown.dataset.multi === 'true';
-        // Toggle dropdown on selected element click
         selected.addEventListener('click', () => {
             Select.closeAllDropdowns(dropdown);
             dropdown.classList.toggle('open');
         });
-        // Handle option selection
         options.addEventListener('click', (e) => {
             const target = e.target;
             if (!target.classList.contains('dropdown-option')) {
@@ -87,7 +89,6 @@ class Select {
                 Select.handleSingleSelect(target, options, selected, dropdown, element);
             }
         });
-        // Close dropdown when clicking the close icon
         const closeIcon = options.querySelector('.dropdown-options-icon');
         if (closeIcon) {
             closeIcon.addEventListener('click', () => {
@@ -130,14 +131,12 @@ class Select {
         const label = parent.querySelector('label');
         const isMulti = select.hasAttribute('multiple');
         const labelText = label?.textContent?.trim() || 'Select';
-        // Create hidden wrapper for original select
         const hiddenWrapper = document.createElement('div');
         hiddenWrapper.classList.add('hidden');
         if (label) {
             hiddenWrapper.appendChild(label);
         }
         hiddenWrapper.appendChild(select);
-        // Create dropdown structure
         const dropdown = document.createElement('div');
         dropdown.className = 'dropdown';
         dropdown.dataset.multi = String(isMulti);
@@ -146,12 +145,10 @@ class Select {
         dropdownSelected.textContent = labelText;
         const dropdownOptions = document.createElement('div');
         dropdownOptions.className = 'dropdown-options';
-        // Add mobile menu
         const optionsMenu = document.createElement('div');
         optionsMenu.className = 'dropdown-options-menu hidden';
         optionsMenu.innerHTML = 'Select options<span class="dropdown-options-icon icon icon-close"></span>';
         dropdownOptions.appendChild(optionsMenu);
-        // Create option elements
         Array.from(select.options).forEach(opt => {
             const optDiv = document.createElement('div');
             optDiv.className = 'dropdown-option';
@@ -159,10 +156,8 @@ class Select {
             optDiv.textContent = opt.textContent;
             dropdownOptions.appendChild(optDiv);
         });
-        // Assemble dropdown
         dropdown.appendChild(dropdownSelected);
         dropdown.appendChild(dropdownOptions);
-        // Replace original content
         parent.innerHTML = '';
         parent.appendChild(hiddenWrapper);
         parent.appendChild(dropdown);

package/js/sidebar-nav.d.ts

@@ -1,9 +1,11 @@
+/** 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;
 }
+/** Collapsible sidebar navigation with backdrop and responsive breakpoint support. */
 declare class SidebarNav {
     private nav;
     private backdrop;

package/js/sidebar-nav.js

@@ -1,4 +1,12 @@
+/** Collapsible sidebar navigation with backdrop and responsive breakpoint support. */
 class SidebarNav {
+    nav;
+    backdrop;
+    toggleBtn;
+    opts;
+    _onToggle;
+    _onBackdrop;
+    _onResize;
     constructor(containerOrSelector, options = {}) {
         const container = typeof containerOrSelector === 'string'
             ? document.querySelector(containerOrSelector)

package/js/stepper.d.ts

@@ -1,8 +1,10 @@
+/** Configuration options for a Stepper instance. */
 interface StepperOptions {
     defaultStep?: number;
     clickable?: boolean;
     onChange?: (current: number, previous: number) => void;
 }
+/** Multi-step progress indicator with clickable steps and connector state. */
 declare class Stepper {
     private container;
     private steps;

package/js/stepper.js

@@ -1,6 +1,12 @@
+/** Multi-step progress indicator with clickable steps and connector state. */
 class Stepper {
+    container;
+    steps;
+    connectors;
+    current;
+    onChange;
+    abortController = new AbortController();
     constructor(elementOrSelector, options = {}) {
-        this.abortController = new AbortController();
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;

package/js/table.d.ts

@@ -1,16 +1,20 @@
+/** 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;