@dodlhuat/basix 1.3.2 → 1.3.3

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;

package/js/table.js

@@ -1,7 +1,19 @@
 import { Select } from "./select.js";
+/** Dynamic data table with sorting, filtering, and pagination. */
 class Table {
+    container;
+    data;
+    columns;
+    pageSize;
+    currentPage;
+    sortColumn;
+    sortDirection;
+    filterText;
+    tableBody;
+    tableHeader;
+    paginationContainer;
+    abortController = new AbortController();
     constructor(elementOrSelector, options = {}) {
-        this.abortController = new AbortController();
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -32,14 +44,12 @@ class Table {
         const tbody = table.querySelector('tbody');
         if (!thead || !tbody)
             return;
-        // Parse columns from header
         const ths = thead.querySelectorAll('th');
         this.columns = Array.from(ths).map((th, index) => ({
             key: `col${index}`,
             label: th.textContent?.trim() || '',
             sortable: true
         }));
-        // Parse data from body rows
         const trs = tbody.querySelectorAll('tr');
         this.data = Array.from(trs).map(tr => {
             const row = {};
@@ -51,7 +61,6 @@ class Table {
             });
             return row;
         });
-        // Clear the existing static table
         this.container.innerHTML = '';
     }
     /**
@@ -68,7 +77,6 @@ class Table {
     renderControls() {
         const controlsDiv = document.createElement('div');
         controlsDiv.className = 'table-controls';
-        // Search input
         const searchInput = document.createElement('input');
         searchInput.type = 'text';
         searchInput.placeholder = 'Search...';
@@ -77,7 +85,6 @@ class Table {
             this.handleSearch(e.target.value);
         }, { signal: this.abortController.signal });
         controlsDiv.appendChild(searchInput);
-        // Page size selector
         const selectGroup = document.createElement('div');
         selectGroup.className = 'select-group';
         const label = document.createElement('label');
@@ -110,7 +117,6 @@ class Table {
         const table = document.createElement('table');
         const thead = document.createElement('thead');
         const tbody = document.createElement('tbody');
-        // Create header row
         const tr = document.createElement('tr');
         this.columns.forEach(col => {
             const th = document.createElement('th');
@@ -127,7 +133,6 @@ class Table {
         table.appendChild(tbody);
         wrapper.appendChild(table);
         this.container.appendChild(wrapper);
-        // Create pagination container
         const paginationDiv = document.createElement('div');
         paginationDiv.className = 'pagination';
         this.container.appendChild(paginationDiv);
@@ -140,7 +145,6 @@ class Table {
      */
     getFilteredAndSortedData() {
         let processedData = [...this.data];
-        // Apply filter
         if (this.filterText) {
             const lowerFilter = this.filterText.toLowerCase();
             processedData = processedData.filter(row => {
@@ -150,12 +154,10 @@ class Table {
                 });
             });
         }
-        // Apply sort
         if (this.sortColumn) {
             processedData.sort((a, b) => {
                 const valA = a[this.sortColumn];
                 const valB = b[this.sortColumn];
-                // Handle null/undefined values
                 if (valA == null && valB == null)
                     return 0;
                 if (valA == null)
@@ -178,7 +180,6 @@ class Table {
         const processedData = this.getFilteredAndSortedData();
         const totalItems = processedData.length;
         const totalPages = Math.ceil(totalItems / this.pageSize);
-        // Ensure current page is valid
         if (this.currentPage > totalPages && totalPages > 0) {
             this.currentPage = totalPages;
         }
@@ -212,7 +213,7 @@ class Table {
             this.columns.forEach(col => {
                 const td = document.createElement('td');
                 td.textContent = String(row[col.key] ?? '');
-                td.setAttribute('data-label', col.label); // For mobile view
+                td.setAttribute('data-label', col.label);
                 tr.appendChild(td);
             });
             this.tableBody.appendChild(tr);
@@ -237,28 +238,23 @@ class Table {
         this.paginationContainer.innerHTML = '';
         if (totalItems === 0)
             return;
-        // Info text
         const info = document.createElement('div');
         info.className = 'pagination-info';
         info.textContent = `Showing ${startIndex + 1} to ${endIndex} of ${totalItems} entries`;
         this.paginationContainer.appendChild(info);
-        // Pagination buttons
         const buttonsDiv = document.createElement('div');
         buttonsDiv.className = 'pagination-buttons';
-        // Previous button
         const prevBtn = document.createElement('button');
         prevBtn.className = 'page-btn';
         prevBtn.textContent = 'Previous';
         prevBtn.disabled = this.currentPage === 1;
         prevBtn.addEventListener('click', () => this.setPage(this.currentPage - 1));
         buttonsDiv.appendChild(prevBtn);
-        // Calculate page range to display (max 5 pages)
         let startPage = Math.max(1, this.currentPage - 2);
         let endPage = Math.min(totalPages, startPage + 4);
         if (endPage - startPage < 4) {
             startPage = Math.max(1, endPage - 4);
         }
-        // Page number buttons
         for (let i = startPage; i <= endPage; i++) {
             const btn = document.createElement('button');
             btn.className = `page-btn ${i === this.currentPage ? 'active' : ''}`;
@@ -266,7 +262,6 @@ class Table {
             btn.addEventListener('click', () => this.setPage(i));
             buttonsDiv.appendChild(btn);
         }
-        // Next button
         const nextBtn = document.createElement('button');
         nextBtn.className = 'page-btn';
         nextBtn.textContent = 'Next';
@@ -280,7 +275,7 @@ class Table {
      */
     handleSearch(text) {
         this.filterText = text;
-        this.currentPage = 1; // Reset to first page on search
+        this.currentPage = 1;
         this.render();
     }
     /**
@@ -288,7 +283,6 @@ class Table {
      */
     handleSort(key) {
         if (this.sortColumn === key) {
-            // Toggle sort direction
             this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
         }
         else {
@@ -320,7 +314,6 @@ class Table {
             return null;
         let id = baseId;
         let counter = 1;
-        // If baseId already ends with a number, extract it
         const match = baseId.match(/^(.*?)(\d+)$/);
         if (match) {
             id = match[1];

package/js/tabs.d.ts

@@ -1,11 +1,13 @@
 type TabLayout = 'horizontal' | 'vertical';
 type MenuPosition = 'top' | 'bottom' | 'left' | 'right';
+/** Configuration options for a Tabs instance. */
 interface TabsOptions {
     layout?: TabLayout;
     defaultTab?: number;
     menuPos?: MenuPosition;
     onChange?: (index: number) => void;
 }
+/** Tabbed content component with horizontal/vertical layouts and keyboard navigation. */
 declare class Tabs {
     private container;
     private options;