@dodlhuat/basix 1.3.2 → 1.3.3

package/js/tabs.js

@@ -1,4 +1,10 @@
+/** Tabbed content component with horizontal/vertical layouts and keyboard navigation. */
 class Tabs {
+    container;
+    options;
+    tabItems;
+    tabPanels;
+    currentTab;
     constructor(elementOrSelector, options = {}) {
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
@@ -7,7 +13,6 @@ class Tabs {
             throw new Error(`Tabs: Element not found for selector "${elementOrSelector}"`);
         }
         this.container = element;
-        // Set default options
         const layout = options.layout || 'horizontal';
         this.options = {
             layout,
@@ -24,13 +29,11 @@ class Tabs {
      * Initializes the tabs component
      */
     init() {
-        // Apply layout class
         if (this.options.layout === 'vertical') {
             this.container.classList.add('tabs-vertical');
         }
         this.tabItems = this.container.querySelectorAll('.tab-item');
         this.tabPanels = this.container.querySelectorAll('.tab-panel');
-        // Validate that we have tabs and panels
         if (this.tabItems.length === 0) {
             console.warn('No tab items found in container');
             return;
@@ -54,17 +57,14 @@ class Tabs {
                 e.preventDefault();
                 this.activateTab(index);
             });
-            // Add keyboard navigation for accessibility
             item.addEventListener('keydown', (e) => {
                 const keyEvent = e;
                 this.handleKeyboardNavigation(keyEvent, index);
             });
-            // Set ARIA attributes
             item.setAttribute('role', 'tab');
             item.setAttribute('tabindex', index === this.options.defaultTab ? '0' : '-1');
             item.setAttribute('aria-selected', index === this.options.defaultTab ? 'true' : 'false');
         });
-        // Set ARIA attributes for panels
         this.tabPanels.forEach((panel, index) => {
             panel.setAttribute('role', 'tabpanel');
             panel.setAttribute('aria-hidden', index === this.options.defaultTab ? 'false' : 'true');
@@ -125,7 +125,6 @@ class Tabs {
             console.warn(`Invalid tab index: ${index}`);
             return;
         }
-        // Remove active class from all
         this.tabItems.forEach((item, i) => {
             item.classList.remove('active');
             item.setAttribute('tabindex', '-1');
@@ -135,7 +134,6 @@ class Tabs {
             panel.classList.remove('active');
             panel.setAttribute('aria-hidden', 'true');
         });
-        // Add active class to selected
         this.tabItems[index].classList.add('active');
         this.tabItems[index].setAttribute('tabindex', '0');
         this.tabItems[index].setAttribute('aria-selected', 'true');
@@ -143,7 +141,6 @@ class Tabs {
         this.tabPanels[index].setAttribute('aria-hidden', 'false');
         const previousTab = this.currentTab;
         this.currentTab = index;
-        // Call onChange callback if provided
         if (this.options.onChange && previousTab !== index) {
             this.options.onChange(index);
         }
@@ -153,7 +150,6 @@ class Tabs {
      */
     goToTab(index) {
         this.activateTab(index);
-        // Focus the tab for keyboard users
         if (this.tabItems[index]) {
             this.tabItems[index].focus();
         }
@@ -191,7 +187,6 @@ class Tabs {
         tab.classList.add('disabled');
         tab.setAttribute('aria-disabled', 'true');
         tab.style.pointerEvents = 'none';
-        // If disabling the current tab, switch to the first enabled tab
         if (index === this.currentTab) {
             const firstEnabled = Array.from(this.tabItems).findIndex((item) => !item.classList.contains('disabled'));
             if (firstEnabled !== -1) {
@@ -203,14 +198,11 @@ class Tabs {
      * Public API: Destroy the tabs instance and clean up
      */
     destroy() {
-        // Remove event listeners by cloning and replacing nodes
         this.tabItems.forEach((item) => {
             const newItem = item.cloneNode(true);
             item.parentNode?.replaceChild(newItem, item);
         });
-        // Remove classes
         this.container.classList.remove('tabs-vertical');
-        // Remove ARIA attributes
         this.tabItems.forEach((item) => {
             item.removeAttribute('role');
             item.removeAttribute('tabindex');

package/js/theme.d.ts

@@ -1,4 +1,5 @@
 type ThemeMode = 'light' | 'dark';
+/** Static class for managing light/dark theme switching with system preference and localStorage persistence. */
 declare class Theme {
     private static readonly STORAGE_KEY;
     private static root;

package/js/theme.js

@@ -1,14 +1,17 @@
+/** Static class for managing light/dark theme switching with system preference and localStorage persistence. */
 class Theme {
+    static STORAGE_KEY = 'theme';
+    static root;
+    static elements = null;
+    static mediaQuery = null;
     /**
      * Initializes the theme system with toggle functionality and system preference detection
      */
     static init() {
         this.root = document.documentElement;
-        // Get DOM elements
         const toggleBtn = document.getElementById('theme-toggle');
         const icon = document.getElementById('theme-icon');
         const status = document.getElementById('status');
-        // Validate required elements
         if (!toggleBtn || !icon) {
             console.error('Theme toggle: missing DOM elements', { toggleBtn, icon });
             if (status) {
@@ -17,16 +20,13 @@ class Theme {
             return;
         }
         this.elements = { toggleBtn, icon, status };
-        // Initialize media query
         if (window.matchMedia) {
             this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         }
-        // Apply initial theme
         const savedTheme = this.getSavedTheme();
         const systemTheme = this.getSystemTheme();
         const initialTheme = savedTheme || systemTheme;
         this.applyTheme(initialTheme);
-        // Bind event listeners
         this.bindToggleClick();
         this.bindKeyboardShortcut();
         this.bindSystemThemeChange();
@@ -77,10 +77,8 @@ class Theme {
         this.root.setAttribute('data-theme', theme);
         const isDark = theme === 'dark';
         const { toggleBtn, icon } = this.elements;
-        // Update button state
         toggleBtn.setAttribute('aria-pressed', String(isDark));
         toggleBtn.setAttribute('aria-label', `Switch to ${isDark ? 'light' : 'dark'} mode`);
-        // Update icon — SVG sprite via <use> or font icon via class
         const useEl = icon.querySelector('use');
         if (useEl) {
             const iconName = isDark ? icon.dataset.iconDark : icon.dataset.iconLight;
@@ -151,17 +149,14 @@ class Theme {
         if (!this.mediaQuery)
             return;
         const handler = (e) => {
-            // Only apply system theme if user hasn't saved a preference
             if (!this.getSavedTheme()) {
                 const matches = 'matches' in e ? e.matches : e.matches;
                 this.applyTheme(matches ? 'dark' : 'light');
             }
         };
-        // Modern API
         if ('addEventListener' in this.mediaQuery) {
             this.mediaQuery.addEventListener('change', handler);
         }
-        // Legacy API (deprecated but still supported in older browsers)
         else if ('addListener' in this.mediaQuery) {
             this.mediaQuery.addListener(handler);
         }
@@ -199,7 +194,4 @@ class Theme {
         return this.getSavedTheme() !== null;
     }
 }
-Theme.STORAGE_KEY = 'theme';
-Theme.elements = null;
-Theme.mediaQuery = null;
 export { Theme };

package/js/timepicker.d.ts

@@ -1,7 +1,9 @@
+/** A start/end time pair as HH:MM strings. */
 interface TimeSpan {
     start: string;
     end: string;
 }
+/** Configuration options for a TimeSpanPicker instance. */
 interface TimeSpanPickerOptions {
     onChange?: (start: string, end: string) => void;
     defaultStart?: string;
@@ -9,6 +11,7 @@ interface TimeSpanPickerOptions {
     fromString?: string;
     toString?: string;
 }
+/** Interactive time-range picker with a draggable bar and dual time inputs. */
 declare class TimeSpanPicker {
     private container;
     private startTimeInput;

package/js/timepicker.js

@@ -1,72 +1,20 @@
+/** Interactive time-range picker with a draggable bar and dual time inputs. */
 class TimeSpanPicker {
+    container;
+    startTimeInput;
+    endTimeInput;
+    onChange;
+    uid;
+    fromString;
+    toLabel;
+    pickerEl;
+    durationEl;
+    barEl;
+    barFillEl;
+    startHandleEl;
+    endHandleEl;
+    dragState = null;
     constructor(elementOrSelector, options) {
-        this.dragState = null;
-        this.handleChange = () => {
-            this.updateUI();
-            const start = this.startTimeInput.value;
-            const end = this.endTimeInput.value;
-            if (this.onChange && start && end) {
-                this.onChange(start, end);
-            }
-        };
-        this.onStartHandleDown = (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            this.beginDrag('start');
-        };
-        this.onEndHandleDown = (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            this.beginDrag('end');
-        };
-        this.onFillDown = (e) => {
-            if (e.target.classList.contains('timespan-handle'))
-                return;
-            e.preventDefault();
-            const start = this.startTimeInput.value;
-            if (!start)
-                return;
-            const rect = this.barEl.getBoundingClientRect();
-            const clickMins = ((e.clientX - rect.left) / rect.width) * 1440;
-            this.beginDrag('move', clickMins - this.toMinutes(start), rect);
-        };
-        this.onPointerMove = (e) => {
-            if (!this.dragState)
-                return;
-            e.preventDefault();
-            const { type, barLeft, barWidth, startMins, endMins, clickOffsetMins } = this.dragState;
-            const pct = Math.max(0, Math.min(1, (e.clientX - barLeft) / barWidth));
-            const rawMins = pct * 1440;
-            let start = this.startTimeInput.value;
-            let end = this.endTimeInput.value;
-            if (type === 'start') {
-                start = this.minutesToTime(Math.max(0, Math.min(endMins - 5, this.snap(rawMins))));
-                this.startTimeInput.value = start;
-            }
-            else if (type === 'end') {
-                end = this.minutesToTime(Math.max(startMins + 5, Math.min(1440, this.snap(rawMins))));
-                this.endTimeInput.value = end;
-            }
-            else {
-                const duration = endMins - startMins;
-                const newStartMins = Math.max(0, Math.min(1440 - duration, this.snap(rawMins - clickOffsetMins)));
-                start = this.minutesToTime(newStartMins);
-                end = this.minutesToTime(newStartMins + duration);
-                this.startTimeInput.value = start;
-                this.endTimeInput.value = end;
-            }
-            this.updateUI();
-            if (this.onChange)
-                this.onChange(start, end);
-        };
-        this.onPointerUp = () => {
-            if (!this.dragState)
-                return;
-            this.dragState = null;
-            this.barEl.classList.remove('is-dragging');
-            document.removeEventListener('pointermove', this.onPointerMove);
-            document.removeEventListener('pointerup', this.onPointerUp);
-        };
         const element = typeof elementOrSelector === 'string'
             ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
                 ? document.querySelector(elementOrSelector)
@@ -127,6 +75,14 @@ class TimeSpanPicker {
       </div>
     `;
     }
+    handleChange = () => {
+        this.updateUI();
+        const start = this.startTimeInput.value;
+        const end = this.endTimeInput.value;
+        if (this.onChange && start && end) {
+            this.onChange(start, end);
+        }
+    };
     attachEventListeners() {
         this.startTimeInput.addEventListener('change', this.handleChange);
         this.endTimeInput.addEventListener('change', this.handleChange);
@@ -160,6 +116,64 @@ class TimeSpanPicker {
         document.addEventListener('pointermove', this.onPointerMove);
         document.addEventListener('pointerup', this.onPointerUp);
     }
+    onStartHandleDown = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        this.beginDrag('start');
+    };
+    onEndHandleDown = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        this.beginDrag('end');
+    };
+    onFillDown = (e) => {
+        if (e.target.classList.contains('timespan-handle'))
+            return;
+        e.preventDefault();
+        const start = this.startTimeInput.value;
+        if (!start)
+            return;
+        const rect = this.barEl.getBoundingClientRect();
+        const clickMins = ((e.clientX - rect.left) / rect.width) * 1440;
+        this.beginDrag('move', clickMins - this.toMinutes(start), rect);
+    };
+    onPointerMove = (e) => {
+        if (!this.dragState)
+            return;
+        e.preventDefault();
+        const { type, barLeft, barWidth, startMins, endMins, clickOffsetMins } = this.dragState;
+        const pct = Math.max(0, Math.min(1, (e.clientX - barLeft) / barWidth));
+        const rawMins = pct * 1440;
+        let start = this.startTimeInput.value;
+        let end = this.endTimeInput.value;
+        if (type === 'start') {
+            start = this.minutesToTime(Math.max(0, Math.min(endMins - 5, this.snap(rawMins))));
+            this.startTimeInput.value = start;
+        }
+        else if (type === 'end') {
+            end = this.minutesToTime(Math.max(startMins + 5, Math.min(1440, this.snap(rawMins))));
+            this.endTimeInput.value = end;
+        }
+        else {
+            const duration = endMins - startMins;
+            const newStartMins = Math.max(0, Math.min(1440 - duration, this.snap(rawMins - clickOffsetMins)));
+            start = this.minutesToTime(newStartMins);
+            end = this.minutesToTime(newStartMins + duration);
+            this.startTimeInput.value = start;
+            this.endTimeInput.value = end;
+        }
+        this.updateUI();
+        if (this.onChange)
+            this.onChange(start, end);
+    };
+    onPointerUp = () => {
+        if (!this.dragState)
+            return;
+        this.dragState = null;
+        this.barEl.classList.remove('is-dragging');
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+    };
     toMinutes(time) {
         const [h, m] = time.split(':').map(Number);
         return h * 60 + m;

package/js/toast.d.ts

@@ -1,10 +1,12 @@
 type ToastType = 'success' | 'error' | 'warning' | 'info';
+/** Options for creating a Toast notification. */
 interface ToastOptions {
     content: string;
     header?: string;
     type?: ToastType;
     closeable?: boolean;
 }
+/** Dismissible notification banner with optional auto-hide timer and progress bar. */
 declare class Toast {
     private readonly content;
     private readonly header;
@@ -19,6 +21,7 @@ declare class Toast {
     show(ms?: number): void;
     hide: () => void;
     private startTimer;
+    destroy(): void;
     private buildTemplate;
 }
 export { Toast };

package/js/toast.js

@@ -1,21 +1,15 @@
 import { escapeHtml } from './utils.js';
+/** Dismissible notification banner with optional auto-hide timer and progress bar. */
 class Toast {
+    content;
+    header;
+    type;
+    closeable;
+    closureIcon = '<div class="icon icon-close close"></div>';
+    template;
+    toastElement = null;
+    timerId = null;
     constructor(contentOrOptions, header = '', type, closeable = true) {
-        this.closureIcon = '<div class="icon icon-close close"></div>';
-        this.toastElement = null;
-        this.timerId = null;
-        this.hide = () => {
-            if (this.timerId !== null) {
-                clearTimeout(this.timerId);
-                this.timerId = null;
-            }
-            this.toastElement?.classList.remove('show');
-            setTimeout(() => {
-                this.toastElement?.querySelector('.close')?.removeEventListener('click', this.hide);
-                this.toastElement?.remove();
-                this.toastElement = null;
-            }, 150);
-        };
         if (typeof contentOrOptions === 'object') {
             this.content = contentOrOptions.content;
             this.header = contentOrOptions.header ?? '';
@@ -52,6 +46,18 @@ class Toast {
             });
         });
     }
+    hide = () => {
+        if (this.timerId !== null) {
+            clearTimeout(this.timerId);
+            this.timerId = null;
+        }
+        this.toastElement?.classList.remove('show');
+        setTimeout(() => {
+            this.toastElement?.querySelector('.close')?.removeEventListener('click', this.hide);
+            this.toastElement?.remove();
+            this.toastElement = null;
+        }, 150);
+    };
     startTimer(ms, elapsed = 0) {
         const stepSize = 250;
         if (elapsed >= ms) {
@@ -68,6 +74,9 @@ class Toast {
             }
         }, stepSize);
     }
+    destroy() {
+        this.hide();
+    }
     buildTemplate() {
         const parts = ['<div class="bar"></div>'];
         if (this.closeable) {

package/js/tooltip.d.ts

@@ -1,3 +1,4 @@
+/** Configuration options for a Tooltip instance. */
 interface TooltipOptions {
     position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
     offset?: number;
@@ -7,6 +8,7 @@ interface TooltipOptions {
      *  Defaults to false — content is treated as plain text and escaped. */
     isHtml?: boolean;
 }
+/** Lightweight tooltip that positions itself relative to a trigger element. */
 declare class Tooltip {
     private static activeTooltip;
     private static idCounter;

package/js/tooltip.js

@@ -1,22 +1,15 @@
-// tooltip.ts
 import { computePosition } from './position.js';
+/** Lightweight tooltip that positions itself relative to a trigger element. */
 class Tooltip {
+    static activeTooltip = null;
+    static idCounter = 0;
+    trigger;
+    content;
+    options;
+    tooltipElement = null;
+    showTimeout = null;
+    isVisible = false;
     constructor(trigger, content, options = {}) {
-        this.tooltipElement = null;
-        this.showTimeout = null;
-        this.isVisible = false;
-        this.handleMouseEnter = () => {
-            this.show();
-        };
-        this.handleMouseLeave = () => {
-            this.hide();
-        };
-        this.handleFocus = () => {
-            this.show();
-        };
-        this.handleBlur = () => {
-            this.hide();
-        };
         this.trigger = trigger;
         this.content = content;
         this.options = {
@@ -38,7 +31,6 @@ class Tooltip {
                 new Tooltip(trigger, content, { position, className, isHtml: false });
             }
         });
-        // Also support content from separate elements
         const advancedTriggers = document.querySelectorAll('[data-tooltip-id]');
         advancedTriggers.forEach(trigger => {
             const contentId = trigger.getAttribute('data-tooltip-id');
@@ -127,6 +119,18 @@ class Tooltip {
         this.trigger.addEventListener('focus', this.handleFocus);
         this.trigger.addEventListener('blur', this.handleBlur);
     }
+    handleMouseEnter = () => {
+        this.show();
+    };
+    handleMouseLeave = () => {
+        this.hide();
+    };
+    handleFocus = () => {
+        this.show();
+    };
+    handleBlur = () => {
+        this.hide();
+    };
     destroy() {
         this.hide();
         this.trigger.removeEventListener('mouseenter', this.handleMouseEnter);
@@ -143,6 +147,4 @@ class Tooltip {
         this.trigger.removeAttribute('data-previous-describedby');
     }
 }
-Tooltip.activeTooltip = null;
-Tooltip.idCounter = 0;
 export { Tooltip };

package/js/tree.d.ts

@@ -1,7 +1,9 @@
 type NodeType = 'file' | 'folder';
+/** Configuration options for a TreeComponent instance. */
 interface TreeOptions {
     onSelect?: (node: TreeNode) => void;
 }
+/** Represents a single node in a tree structure, either a file or folder. */
 declare class TreeNode {
     label: string;
     type: NodeType;
@@ -12,6 +14,7 @@ declare class TreeNode {
     childrenContainer: HTMLUListElement | null;
     constructor(label: string, type?: NodeType, children?: TreeNode[]);
 }
+/** Renders an interactive collapsible tree view from a list of TreeNode objects. */
 declare class TreeComponent {
     private container;
     private data;

package/js/tree.js

@@ -1,4 +1,12 @@
+/** Represents a single node in a tree structure, either a file or folder. */
 class TreeNode {
+    label;
+    type;
+    children;
+    expanded;
+    selected;
+    element;
+    childrenContainer;
     constructor(label, type = 'file', children = []) {
         this.label = label;
         this.type = type;
@@ -9,7 +17,12 @@ class TreeNode {
         this.childrenContainer = null;
     }
 }
+/** Renders an interactive collapsible tree view from a list of TreeNode objects. */
 class TreeComponent {
+    container;
+    data;
+    selectedNode;
+    options;
     constructor(elementOrSelector, data, options = {}) {
         const container = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)

package/js/utils.d.ts

@@ -1,6 +1,4 @@
-/**
- * Utility functions for DOM manipulation and element handling
- */
+/** Shape of the `utils` helper object. */
 interface Utils {
     ready(fn: () => void): void;
     value(element: HTMLElement): string;

package/js/utils.js

@@ -1,6 +1,3 @@
-/**
- * Utility functions for DOM manipulation and element handling
- */
 const utils = {
     /**
      * Execute a function when the DOM is ready

package/js/virtual-dropdown.d.ts

@@ -1,7 +1,9 @@
+/** A single selectable option for a VirtualDropdown. */
 interface DropdownOption {
     label: string;
     value: string | number;
 }
+/** Configuration for a VirtualDropdown instance. */
 interface VirtualDropdownConfig {
     container: string | HTMLElement;
     options: DropdownOption[];
@@ -12,6 +14,7 @@ interface VirtualDropdownConfig {
     itemHeight?: number;
     onSelect?: (selectedValues: Array<string | number>) => void;
 }
+/** Virtualised dropdown that renders only visible items for performance with large option lists. */
 declare class VirtualDropdown {
     private readonly container;
     private readonly options;

package/js/virtual-dropdown.js

@@ -1,5 +1,30 @@
 import { escapeHtml } from './utils.js';
+/** Virtualised dropdown that renders only visible items for performance with large option lists. */
 class VirtualDropdown {
+    container;
+    options;
+    multiSelect;
+    searchable;
+    placeholder;
+    renderLimit;
+    itemHeight;
+    onSelect;
+    // Unique CSS anchor name for this instance — prevents conflicts when
+    // multiple dropdowns exist on the same page.
+    anchorName;
+    trigger;
+    triggerText;
+    menu;
+    listWrapper;
+    scroller;
+    spacer;
+    content;
+    searchInput;
+    selectedValues;
+    filteredOptions;
+    isOpen;
+    scrollTop;
+    boundHandlers;
     constructor(config) {
         const containerElement = typeof config.container === 'string'
             ? document.querySelector(config.container)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.",
   "exports": {
     "./css/*": "./css/*",
@@ -33,6 +33,6 @@
   },
   "homepage": "https://github.com/dodlhuat/basix#readme",
   "devDependencies": {
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.0"
   }
 }