@dodlhuat/basix 1.3.2 → 1.3.3

package/js/gallery.js

@@ -1,19 +1,15 @@
 import { escapeHtml } from './utils.js';
+/** Infinite-scroll masonry gallery that distributes images across dynamically sized columns. */
 class MasonryGallery {
+    container;
+    loader;
+    options;
+    columns = [];
+    isFetching = false;
+    resizeObserver = null;
+    abortController = null;
+    reloaded = 0;
     constructor(containerId, options) {
-        this.columns = [];
-        this.isFetching = false;
-        this.resizeObserver = null;
-        this.abortController = null;
-        this.reloaded = 0;
-        this.handleScroll = () => {
-            if (this.isFetching)
-                return;
-            const rect = this.container.getBoundingClientRect();
-            if (rect.bottom > 0 && rect.bottom <= window.innerHeight + this.options.scrollThreshold) {
-                this.loadMoreImages();
-            }
-        };
         const container = document.getElementById(containerId);
         if (!container) {
             throw new Error(`Container with id "${containerId}" not found`);
@@ -51,18 +47,14 @@ class MasonryGallery {
         }
     }
     addEventListeners() {
+        this.abortController = new AbortController();
+        const sig = this.abortController.signal;
         let resizeTimeout;
         window.addEventListener("resize", () => {
             clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(() => {
-                this.reLayout();
-            }, 200);
-        });
-        this.abortController = new AbortController();
-        window.addEventListener("scroll", this.handleScroll, {
-            passive: true,
-            signal: this.abortController.signal,
-        });
+            resizeTimeout = setTimeout(() => this.reLayout(), 200);
+        }, { signal: sig });
+        window.addEventListener("scroll", this.handleScroll, { passive: true, signal: sig });
     }
     reLayout() {
         const items = this.columns.flatMap(col => Array.from(col.children));
@@ -76,6 +68,14 @@ class MasonryGallery {
         }
         items.forEach(item => this.addToShortestColumn(item));
     }
+    handleScroll = () => {
+        if (this.isFetching)
+            return;
+        const rect = this.container.getBoundingClientRect();
+        if (rect.bottom > 0 && rect.bottom <= window.innerHeight + this.options.scrollThreshold) {
+            this.loadMoreImages();
+        }
+    };
     async loadMoreImages(isAutoFill = false) {
         if (!isAutoFill)
             this.reloaded++;
@@ -97,8 +97,6 @@ class MasonryGallery {
         finally {
             this.isFetching = false;
             this.toggleLoader(false);
-            // If the rendered content doesn't fill the viewport, auto-load the next
-            // batch without waiting for a scroll event (multi-column layout is shorter)
             requestAnimationFrame(() => {
                 const rect = this.container.getBoundingClientRect();
                 if (rect.bottom <= window.innerHeight + this.options.scrollThreshold) {

package/js/group-picker.d.ts

@@ -1,12 +1,15 @@
+/** A single subgroup item within a GroupPicker group. */
 interface SubgroupData {
     id: string;
     label: string;
 }
+/** A group with an optional list of subgroups for GroupPicker. */
 interface GroupData {
     id: string;
     label: string;
     subgroups?: SubgroupData[];
 }
+/** The current selection state returned by GroupPicker. */
 interface GroupPickerSelection {
     parentGroups: string[];
     subgroups: {
@@ -14,6 +17,7 @@ interface GroupPickerSelection {
         subgroupId: string;
     }[];
 }
+/** Configuration options for the GroupPicker component. */
 interface GroupPickerOptions {
     onSelectionChange?: (selection: GroupPickerSelection) => void;
     searchPlaceholder?: string;
@@ -22,6 +26,7 @@ interface GroupPickerOptions {
     emptyLabel?: string;
     selectionPlaceholder?: string;
 }
+/** Searchable picker for selecting groups and their subgroups. */
 declare class GroupPicker {
     private container;
     private data;

package/js/group-picker.js

@@ -1,11 +1,18 @@
 import { escapeHtml } from './utils.js';
+/** Searchable picker for selecting groups and their subgroups. */
 class GroupPicker {
+    container;
+    data;
+    options;
+    abortController;
+    selectedParents = new Set();
+    selectedSubs = new Map();
+    expandedGroups = new Set();
+    searchQuery = '';
+    searchInput;
+    listEl;
+    selectionEl;
     constructor(selector, data, options = {}) {
-        // State
-        this.selectedParents = new Set();
-        this.selectedSubs = new Map();
-        this.expandedGroups = new Set();
-        this.searchQuery = '';
         const el = typeof selector === 'string'
             ? document.querySelector(selector)
             : selector;
@@ -31,11 +38,9 @@ class GroupPicker {
     }
     render() {
         this.container.innerHTML = '';
-        // Selection summary — Basix .chips container
         this.selectionEl = document.createElement('div');
         this.selectionEl.className = 'chips group-picker__selection';
         this.selectionEl.dataset.placeholder = this.options.selectionPlaceholder;
-        // Search — Basix form input with font icon overlay
         const searchWrap = document.createElement('div');
         searchWrap.className = 'group-picker__search';
         searchWrap.innerHTML = `
@@ -44,7 +49,6 @@ class GroupPicker {
     `;
         this.searchInput = searchWrap.querySelector('input');
         this.searchInput.placeholder = this.options.searchPlaceholder;
-        // List
         this.listEl = document.createElement('div');
         this.listEl.className = 'group-picker__list';
         this.container.append(this.selectionEl, searchWrap, this.listEl);
@@ -99,15 +103,12 @@ class GroupPicker {
             ? this.highlightText(group.label, query)
             : escapeHtml(group.label);
         if (hasChildren) {
-            // Chevron — Basix font icon
             const chevron = document.createElement('span');
             chevron.className = 'icon icon-navigate_next group-picker__chevron';
             chevron.setAttribute('aria-hidden', 'true');
-            // Count — Basix badge
             const count = document.createElement('span');
             count.className = 'badge badge-sm';
             count.textContent = `${subs.length}`;
-            // Action button — Basix button, button-primary when selected
             const actionBtn = document.createElement('button');
             actionBtn.className = 'group-picker__group-action';
             if (isParentSelected) {
@@ -125,14 +126,12 @@ class GroupPicker {
             header.addEventListener('click', () => {
                 this.toggleExpand(group.id);
             }, { signal: this.abortController.signal });
-            // Subgroups — Basix .chips container
             const subsContainer = document.createElement('div');
             subsContainer.className = 'group-picker__subgroups';
             const subsList = document.createElement('div');
             subsList.className = 'chips group-picker__subgroup-list';
             const displaySubs = query && !groupMatches ? matchingSubs : subs;
             for (const sub of displaySubs) {
-                // Subgroup chip — Basix .chip.clickable
                 const subEl = document.createElement('span');
                 subEl.className = 'chip clickable group-picker__subgroup';
                 subEl.dataset.subId = sub.id;
@@ -162,7 +161,6 @@ class GroupPicker {
             }
         }
         else {
-            // Leaf group — Basix font icon check mark
             const checkEl = document.createElement('span');
             checkEl.className = 'icon icon-check group-picker__leaf-check';
             checkEl.setAttribute('aria-hidden', 'true');
@@ -194,7 +192,6 @@ class GroupPicker {
             }
         }
     }
-    // Basix .chip.closeable structure
     createChip(label, isParent, onRemove) {
         const chip = document.createElement('span');
         chip.className = isParent
@@ -210,7 +207,6 @@ class GroupPicker {
         chip.append(document.createTextNode(label), btn);
         return chip;
     }
-    // State management
     toggleParentGroup(groupId) {
         if (this.selectedParents.has(groupId)) {
             this.selectedParents.delete(groupId);
@@ -299,7 +295,6 @@ class GroupPicker {
         const regex = new RegExp(`(${escapedQuery})`, 'gi');
         return safeText.replace(regex, '<mark>$1</mark>');
     }
-    // Public API
     getSelection() {
         const parentGroups = [...this.selectedParents];
         const subgroups = [];

package/js/lightbox.d.ts

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

package/js/lightbox.js

@@ -1,11 +1,17 @@
+/** Full-screen image viewer with gallery navigation, zoom, and touch support. */
 class Lightbox {
+    images;
+    currentIndex;
+    closeable;
+    onOpen;
+    onClose;
+    wrapper = null;
+    imgEl = null;
+    captionEl = null;
+    counterEl = null;
+    isZoomed = false;
+    abortController = new AbortController();
     constructor(options) {
-        this.wrapper = null;
-        this.imgEl = null;
-        this.captionEl = null;
-        this.counterEl = null;
-        this.isZoomed = false;
-        this.abortController = new AbortController();
         if (options.images && options.images.length > 0) {
             this.images = options.images;
         }

package/js/modal.d.ts

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

package/js/modal.js

@@ -1,8 +1,15 @@
 import { sanitizeHtml } from './utils.js';
 const CLOSE_ICON = '<div class="icon icon-close close"></div>';
+/** Overlay dialog with optional header, footer, close button, and type variants. */
 class Modal {
+    content;
+    header;
+    footer;
+    closeable;
+    type;
+    template;
+    modalWrapper = null;
     constructor(contentOrOptions, header, footer, closeable = true, type = 'default') {
-        this.modalWrapper = null;
         if (typeof contentOrOptions === 'object') {
             this.content = contentOrOptions.content;
             this.header = contentOrOptions.header;
@@ -18,9 +25,6 @@ class Modal {
             this.type = type;
         }
         this.template = this.buildTemplate();
-        this.hide = this.hide.bind(this);
-        this.handleEscape = this.handleEscape.bind(this);
-        this.handleBackgroundClick = this.handleBackgroundClick.bind(this);
     }
     show() {
         this.hide();
@@ -45,11 +49,10 @@ class Modal {
             wrapper.classList.add('is-visible');
         });
     }
-    hide() {
+    hide = () => {
         const wrapper = this.modalWrapper;
         if (!wrapper)
             return;
-        // Remove event listeners
         const closeBtn = wrapper.querySelector('.close');
         closeBtn?.removeEventListener('click', this.hide);
         const background = wrapper.querySelector('.modal-background');
@@ -63,17 +66,17 @@ class Modal {
                 this.modalWrapper = null;
             }
         }, 300);
-    }
-    handleEscape(e) {
+    };
+    handleEscape = (e) => {
         if (e.key === 'Escape') {
             this.hide();
         }
-    }
-    handleBackgroundClick(e) {
+    };
+    handleBackgroundClick = (e) => {
         if (e.target?.classList.contains('modal-background')) {
             this.hide();
         }
-    }
+    };
     buildTemplate() {
         const parts = ['<div class="modal">'];
         if (this.closeable) {

package/js/popover.d.ts

@@ -2,6 +2,7 @@ import type { Placement } from './position.js';
 type PopoverPlacement = Placement | 'auto';
 type PopoverAlign = 'start' | 'center' | 'end';
 type PopoverTrigger = 'click' | 'hover';
+/** Configuration options for a Popover instance. */
 interface PopoverOptions {
     content: string;
     placement?: PopoverPlacement;
@@ -15,6 +16,7 @@ interface PopoverOptions {
     onOpen?: () => void;
     onClose?: () => void;
 }
+/** Anchored popover triggered by click or hover, with auto-placement and optional arrow. */
 declare class Popover {
     private static openPopovers;
     private static idCounter;

package/js/popover.js

@@ -1,31 +1,16 @@
 import { computePosition } from './position.js';
 import { sanitizeHtml } from './utils.js';
-// Must match $arrow in popover.scss
 const ARROW_SIZE = 6;
+/** Anchored popover triggered by click or hover, with auto-placement and optional arrow. */
 class Popover {
+    static openPopovers = new Set();
+    static idCounter = 0;
+    trigger;
+    opts;
+    popoverEl = null;
+    _isOpen = false;
+    hoverTimer = null;
     constructor(triggerEl, options) {
-        this.popoverEl = null;
-        this._isOpen = false;
-        this.hoverTimer = null;
-        // ── Event handlers ─────────────────────────────────────────────────────────
-        this.onClick = () => { this.toggle(); };
-        this.onMouseEnter = () => {
-            if (this.hoverTimer !== null)
-                clearTimeout(this.hoverTimer);
-            this.open();
-        };
-        this.onMouseLeave = () => {
-            this.hoverTimer = window.setTimeout(() => this.close(), 120);
-        };
-        this.onOutsideClick = (e) => {
-            const t = e.target;
-            if (!this.popoverEl?.contains(t) && !this.trigger.contains(t))
-                this.close();
-        };
-        this.onEscape = (e) => {
-            if (e.key === 'Escape')
-                this.close();
-        };
         const el = typeof triggerEl === 'string'
             ? document.querySelector(triggerEl)
             : triggerEl;
@@ -47,7 +32,6 @@ class Popover {
         };
         this.attachTrigger();
     }
-    // ── Public API ─────────────────────────────────────────────────────────────
     get isOpen() { return this._isOpen; }
     open() {
         if (this._isOpen)
@@ -109,7 +93,6 @@ class Popover {
             });
         });
     }
-    // ── Build ──────────────────────────────────────────────────────────────────
     buildEl() {
         const id = `popover-${++Popover.idCounter}`;
         const el = document.createElement('div');
@@ -117,8 +100,6 @@ class Popover {
         el.id = id;
         el.setAttribute('role', 'dialog');
         el.setAttribute('data-arrow', String(this.opts.arrow));
-        // Wrap plain content in .popover-body so it gets proper padding.
-        // Skip wrapping when content already uses structured popover elements.
         const hasStructure = /class="popover-(header|body|footer|menu)/.test(this.opts.content);
         const safeContent = sanitizeHtml(this.opts.content);
         el.innerHTML = hasStructure
@@ -128,7 +109,6 @@ class Popover {
         this.trigger.setAttribute('aria-controls', id);
         return el;
     }
-    // ── Positioning ────────────────────────────────────────────────────────────
     reposition() {
         if (!this.popoverEl)
             return;
@@ -145,6 +125,24 @@ class Popover {
         this.popoverEl.style.left = `${left}px`;
         this.popoverEl.style.top = `${top}px`;
     }
+    onClick = () => { this.toggle(); };
+    onMouseEnter = () => {
+        if (this.hoverTimer !== null)
+            clearTimeout(this.hoverTimer);
+        this.open();
+    };
+    onMouseLeave = () => {
+        this.hoverTimer = window.setTimeout(() => this.close(), 120);
+    };
+    onOutsideClick = (e) => {
+        const t = e.target;
+        if (!this.popoverEl?.contains(t) && !this.trigger.contains(t))
+            this.close();
+    };
+    onEscape = (e) => {
+        if (e.key === 'Escape')
+            this.close();
+    };
     attachTrigger() {
         if (this.opts.triggerMode === 'click') {
             this.trigger.addEventListener('click', this.onClick);
@@ -160,6 +158,4 @@ class Popover {
         this.trigger.removeEventListener('mouseleave', this.onMouseLeave);
     }
 }
-Popover.openPopovers = new Set();
-Popover.idCounter = 0;
 export { Popover };

package/js/position.d.ts

@@ -4,6 +4,7 @@
  */
 type Placement = 'top' | 'bottom' | 'left' | 'right';
 type Align = 'start' | 'center' | 'end';
+/** Options accepted by `computePosition`. */
 interface PositionOptions {
     placement: Placement | 'auto';
     align?: Align;
@@ -11,6 +12,7 @@ interface PositionOptions {
     margin?: number;
     arrowSize?: number;
 }
+/** Result returned by `computePosition`. */
 interface PositionResult {
     left: number;
     top: number;

package/js/position.js

@@ -44,7 +44,6 @@ function computePosition(trigger, floating, opts) {
     const placement = opts.placement === 'auto'
         ? bestPlacement(trigger, floating, offset)
         : maybeFlip(opts.placement, trigger, floating, offset);
-    // Main-axis offset
     let left = 0, top = 0;
     switch (placement) {
         case 'top':
@@ -60,7 +59,6 @@ function computePosition(trigger, floating, opts) {
             left = trigger.right + offset;
             break;
     }
-    // Cross-axis alignment
     if (placement === 'top' || placement === 'bottom') {
         switch (align) {
             case 'start':
@@ -87,13 +85,11 @@ function computePosition(trigger, floating, opts) {
                 break;
         }
     }
-    // Clamp to viewport
     const l = Math.max(margin, Math.min(window.innerWidth - floating.width - margin, left));
     const t = Math.max(margin, Math.min(window.innerHeight - floating.height - margin, top));
-    // Arrow offset: keep arrow centred on the trigger even after viewport clamping
     let arrowOffset;
     if (opts.arrowSize !== undefined) {
-        const minOff = opts.arrowSize + 8; // min distance from rounded corner
+        const minOff = opts.arrowSize + 8;
         if (placement === 'top' || placement === 'bottom') {
             const raw = trigger.left + trigger.width / 2 - l;
             arrowOffset = Math.max(minOff, Math.min(floating.width - minOff, raw));

package/js/push-menu.d.ts

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

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) {
@@ -154,6 +151,16 @@ class PushMenu {
             }
         }
     }
+    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();
@@ -194,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);