@dodlhuat/basix 1.4.2 → 1.4.3

package/js/chart.js

@@ -1,24 +1,20 @@
 import { escapeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 const MARGIN_XY = { top: 16, right: 24, bottom: 44, left: 52 };
 const MARGIN_BAR = { top: 8, right: 52, bottom: 24, left: 120 };
 const MARGIN_PIE = { top: 8, right: 8, bottom: 8, left: 8 };
-const FALLBACK_COLORS = [
-    '#3D63DD', '#2E8B57', '#C28A00', '#D64545',
-    '#8B5CF6', '#06B6D4', '#F97316', '#EC4899',
-];
+const FALLBACK_COLORS = ['#3D63DD', '#2E8B57', '#C28A00', '#D64545', '#8B5CF6', '#06B6D4', '#F97316', '#EC4899'];
 const SVG_NS = 'http://www.w3.org/2000/svg';
 class Chart {
     container;
     opts;
     tooltip;
     colors = [];
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     resizeTimer = null;
     resizeObserver = null;
     constructor(selector, options) {
-        const el = typeof selector === 'string'
-            ? document.querySelector(selector)
-            : selector;
+        const el = typeof selector === 'string' ? document.querySelector(selector) : selector;
         if (!el)
             throw new Error(`Chart: element not found for "${selector}"`);
         this.container = el;
@@ -40,8 +36,7 @@ class Chart {
         this.attachResizeObserver();
     }
     render() {
-        this.abortController.abort();
-        this.abortController = new AbortController();
+        this.listeners.reset();
         this.container.innerHTML = '';
         this.container.classList.add('chart');
         this.resolveColors();
@@ -82,12 +77,12 @@ class Chart {
         const svgH = height + m.top + m.bottom;
         const w = svgW - m.left - m.right;
         const h = height;
-        const allValues = series.flatMap(s => s.data.map(d => d.value));
+        const allValues = series.flatMap((s) => s.data.map((d) => d.value));
         const yMax = this.opts.yMax ?? Math.max(...allValues) * 1.1;
-        const labels = series[0].data.map(d => d.label);
+        const labels = series[0].data.map((d) => d.label);
         const svg = this.createSVG(canvas, svgW, svgH);
         if (showGrid)
-            this.renderHGrid(svg, m, w, h, yMin, yMax);
+            this.renderHGrid(svg, m, w, h);
         this.renderXAxisLine(svg, m, w, h);
         this.renderXLabels(svg, m, w, h, labels);
         this.renderYLabels(svg, m, h, yMin, yMax);
@@ -101,15 +96,20 @@ class Chart {
             if (isArea) {
                 const areaD = `${this.buildPath(pts)} L ${pts[pts.length - 1].x} ${m.top + h} L ${pts[0].x} ${m.top + h} Z`;
                 svg.appendChild(this.svgEl('path', {
-                    d: areaD, fill: color,
-                    'fill-opacity': '0.12', stroke: 'none',
+                    d: areaD,
+                    fill: color,
+                    'fill-opacity': '0.12',
+                    stroke: 'none',
                     class: 'chart-area',
                 }));
             }
             const linePath = this.svgEl('path', {
-                d: this.buildPath(pts), fill: 'none',
-                stroke: color, 'stroke-width': '2.5',
-                'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+                d: this.buildPath(pts),
+                fill: 'none',
+                stroke: color,
+                'stroke-width': '2.5',
+                'stroke-linecap': 'round',
+                'stroke-linejoin': 'round',
                 class: 'chart-line',
             });
             if (animate) {
@@ -126,17 +126,28 @@ class Chart {
                 });
                 const { x, y } = pts[i];
                 g.appendChild(this.svgEl('circle', {
-                    cx: x, cy: y, r: 14,
-                    fill: 'transparent', class: 'chart-hit',
+                    cx: x,
+                    cy: y,
+                    r: 14,
+                    fill: 'transparent',
+                    class: 'chart-hit',
                 }));
                 g.appendChild(this.svgEl('circle', {
-                    cx: x, cy: y, r: 7,
-                    fill: 'none', stroke: color, 'stroke-width': '2',
+                    cx: x,
+                    cy: y,
+                    r: 7,
+                    fill: 'none',
+                    stroke: color,
+                    'stroke-width': '2',
                     class: 'chart-point-ring',
                 }));
                 g.appendChild(this.svgEl('circle', {
-                    cx: x, cy: y, r: 4,
-                    fill: color, stroke: 'var(--background)', 'stroke-width': '2',
+                    cx: x,
+                    cy: y,
+                    r: 4,
+                    fill: color,
+                    stroke: 'var(--background)',
+                    'stroke-width': '2',
                     class: 'chart-point-dot',
                 }));
                 this.onPoint(g, s, d, i);
@@ -153,14 +164,14 @@ class Chart {
         const svgH = height + m.top + m.bottom;
         const w = svgW - m.left - m.right;
         const h = height;
-        const allValues = series.flatMap(s => s.data.map(d => d.value));
+        const allValues = series.flatMap((s) => s.data.map((d) => d.value));
         const yMax = this.opts.yMax ?? Math.max(...allValues) * 1.1;
-        const labels = series[0].data.map(d => d.label);
+        const labels = series[0].data.map((d) => d.label);
         const numPts = labels.length;
         const numSeries = series.length;
         const svg = this.createSVG(canvas, svgW, svgH);
         if (showGrid)
-            this.renderHGrid(svg, m, w, h, yMin, yMax);
+            this.renderHGrid(svg, m, w, h);
         this.renderXAxisLine(svg, m, w, h);
         this.renderXLabels(svg, m, w, h, labels);
         this.renderYLabels(svg, m, h, yMin, yMax);
@@ -174,8 +185,12 @@ class Chart {
                 const x = m.left + i * groupW + innerPad / 2 + si * (barW + 2);
                 const y = m.top + h - barH;
                 const rect = this.svgEl('rect', {
-                    x, y, width: barW, height: barH,
-                    fill: color, rx: 3,
+                    x,
+                    y,
+                    width: barW,
+                    height: barH,
+                    fill: color,
+                    rx: 3,
                     class: 'chart-bar chart-bar--vertical',
                 });
                 if (animate) {
@@ -197,9 +212,9 @@ class Chart {
         const svgH = height + m.top + m.bottom;
         const w = svgW - m.left - m.right;
         const h = height;
-        const allValues = series.flatMap(s => s.data.map(d => d.value));
-        const xMax = this.opts.yMax || Math.max(...allValues) * 1.1;
-        const labels = series[0].data.map(d => d.label);
+        const allValues = series.flatMap((s) => s.data.map((d) => d.value));
+        const xMax = this.opts.yMax ?? Math.max(...allValues) * 1.1;
+        const labels = series[0].data.map((d) => d.label);
         const numPts = labels.length;
         const numSeries = series.length;
         const svg = this.createSVG(canvas, svgW, svgH);
@@ -207,24 +222,32 @@ class Chart {
         for (let t = 0; t <= numTicks; t++) {
             const x = m.left + (t / numTicks) * w;
             svg.appendChild(this.svgEl('line', {
-                x1: x, x2: x, y1: m.top, y2: m.top + h,
-                stroke: 'var(--divider)', 'stroke-width': '1',
+                x1: x,
+                x2: x,
+                y1: m.top,
+                y2: m.top + h,
+                stroke: 'var(--divider)',
+                'stroke-width': '1',
                 'stroke-dasharray': t === 0 ? 'none' : '3 4',
                 class: 'chart-grid-line',
             }));
             const label = this.svgEl('text', {
-                x, y: m.top + h + 14,
-                'text-anchor': 'middle', class: 'chart-axis-label',
+                x,
+                y: m.top + h + 14,
+                'text-anchor': 'middle',
+                class: 'chart-axis-label',
             });
-            label.textContent = this.fmt(xMax * t / numTicks);
+            label.textContent = this.fmt((xMax * t) / numTicks);
             svg.appendChild(label);
         }
         const groupH = h / numPts;
         labels.forEach((label, i) => {
             const y = m.top + i * groupH + groupH / 2;
             const text = this.svgEl('text', {
-                x: m.left - 10, y,
-                'text-anchor': 'end', 'dominant-baseline': 'middle',
+                x: m.left - 10,
+                y,
+                'text-anchor': 'end',
+                'dominant-baseline': 'middle',
                 class: 'chart-axis-label',
             });
             text.textContent = label;
@@ -239,8 +262,12 @@ class Chart {
                 const x = m.left;
                 const y = m.top + i * groupH + innerPad / 2 + si * (barH + 2);
                 const rect = this.svgEl('rect', {
-                    x, y, width: barW, height: barH,
-                    fill: color, rx: 3,
+                    x,
+                    y,
+                    width: barW,
+                    height: barH,
+                    fill: color,
+                    rx: 3,
                     class: 'chart-bar chart-bar--horizontal',
                 });
                 if (animate) {
@@ -284,17 +311,18 @@ class Chart {
                 path.style.animationDelay = `${delay}ms`;
             }
             const { x: dx, y: dy } = this.polar(0, 0, 8, midAngle);
+            const sig = { signal: this.listeners.signal };
+            const tipHtml = `<strong>${escapeHtml(d.label)}</strong>${this.fmt(d.value)} &nbsp;·&nbsp; ${((d.value / total) * 100).toFixed(1)}%`;
             path.addEventListener('mouseenter', (e) => {
                 path.style.transform = `translate(${dx}px, ${dy}px)`;
-                this.showTooltip(e, `<strong>${escapeHtml(d.label)}</strong>${this.fmt(d.value)} &nbsp;·&nbsp; ${((d.value / total) * 100).toFixed(1)}%`);
-            }, { signal: this.abortController.signal });
+                this.showTooltip(e, tipHtml);
+            }, sig);
+            path.addEventListener('mousemove', (e) => this.moveTooltip(e), sig);
             path.addEventListener('mouseleave', () => {
                 path.style.transform = '';
                 this.hideTooltip();
-            }, { signal: this.abortController.signal });
-            path.addEventListener('click', () => {
-                this.opts.onPointClick(s, d, i);
-            }, { signal: this.abortController.signal });
+            }, sig);
+            path.addEventListener('click', () => this.opts.onPointClick(s, d, i), sig);
             svg.appendChild(path);
             startAngle = endAngle;
         });
@@ -302,20 +330,25 @@ class Chart {
             this.container.appendChild(this.buildPieLegend(s, total));
         }
     }
-    renderHGrid(svg, m, w, h, yMin, yMax) {
+    renderHGrid(svg, m, w, h) {
         const numTicks = 5;
         for (let i = 0; i <= numTicks; i++) {
             const y = m.top + h - (i / numTicks) * h;
             svg.appendChild(this.svgEl('line', {
-                x1: m.left, x2: m.left + w, y1: y, y2: y,
+                x1: m.left,
+                x2: m.left + w,
+                y1: y,
+                y2: y,
                 class: i === 0 ? 'chart-axis-line' : 'chart-grid-line',
             }));
         }
     }
     renderXAxisLine(svg, m, w, h) {
         svg.appendChild(this.svgEl('line', {
-            x1: m.left, x2: m.left + w,
-            y1: m.top + h, y2: m.top + h,
+            x1: m.left,
+            x2: m.left + w,
+            y1: m.top + h,
+            y2: m.top + h,
             class: 'chart-axis-line',
         }));
     }
@@ -325,8 +358,10 @@ class Chart {
         labels.forEach((label, i) => {
             const x = m.left + (n > 1 ? i * step : w / 2);
             const text = this.svgEl('text', {
-                x, y: m.top + h + 18,
-                'text-anchor': 'middle', class: 'chart-axis-label',
+                x,
+                y: m.top + h + 18,
+                'text-anchor': 'middle',
+                class: 'chart-axis-label',
             });
             text.textContent = label;
             svg.appendChild(text);
@@ -338,8 +373,10 @@ class Chart {
             const val = yMin + (yMax - yMin) * (i / numTicks);
             const y = m.top + h - (i / numTicks) * h;
             const text = this.svgEl('text', {
-                x: m.left - 8, y,
-                'text-anchor': 'end', 'dominant-baseline': 'middle',
+                x: m.left - 8,
+                y,
+                'text-anchor': 'end',
+                'dominant-baseline': 'middle',
                 class: 'chart-axis-label',
             });
             text.textContent = this.fmt(val);
@@ -348,9 +385,12 @@ class Chart {
     }
     buildPath(pts) {
         switch (this.opts.curve) {
-            case 'linear': return this.linearPath(pts);
-            case 'step': return this.stepPath(pts);
-            default: return this.smoothPath(pts);
+            case 'linear':
+                return this.linearPath(pts);
+            case 'step':
+                return this.stepPath(pts);
+            default:
+                return this.smoothPath(pts);
         }
     }
     linearPath(pts) {
@@ -392,11 +432,11 @@ class Chart {
     arcPath(cx, cy, r, startDeg, endDeg) {
         const start = this.polar(cx, cy, r, startDeg);
         const end = this.polar(cx, cy, r, endDeg);
-        const large = (endDeg - startDeg) > 180 ? 1 : 0;
+        const large = endDeg - startDeg > 180 ? 1 : 0;
         return `M ${cx} ${cy} L ${start.x.toFixed(2)} ${start.y.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)} Z`;
     }
     polar(cx, cy, r, deg) {
-        const rad = deg * Math.PI / 180;
+        const rad = (deg * Math.PI) / 180;
         return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
     }
     buildHeader() {
@@ -466,7 +506,7 @@ class Chart {
         this.tooltip.classList.remove('is-visible');
     }
     onPoint(g, s, d, i) {
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         g.addEventListener('mouseenter', (e) => {
             this.showTooltip(e, `<strong>${escapeHtml(d.label)}</strong>${escapeHtml(s.name)}: ${this.fmt(d.value)}`);
         }, sig);
@@ -475,7 +515,7 @@ class Chart {
         g.addEventListener('click', () => this.opts.onPointClick(s, d, i), sig);
     }
     onBar(rect, s, d, i) {
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         rect.style.cursor = 'pointer';
         rect.addEventListener('mouseenter', (e) => {
             this.showTooltip(e, `<strong>${escapeHtml(d.label)}</strong>${escapeHtml(s.name)}: ${this.fmt(d.value)}`);
@@ -486,8 +526,7 @@ class Chart {
     }
     resolveColors() {
         const style = getComputedStyle(this.container);
-        this.colors = (this.opts.type === 'pie' ? this.opts.series[0]?.data ?? [] : this.opts.series)
-            .map((_, i) => {
+        this.colors = (this.opts.type === 'pie' ? (this.opts.series[0]?.data ?? []) : this.opts.series).map((_, i) => {
             const css = style.getPropertyValue(`--chart-color-${i + 1}`).trim();
             return css || FALLBACK_COLORS[i % FALLBACK_COLORS.length];
         });
@@ -542,7 +581,7 @@ class Chart {
         this.render();
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.resizeObserver?.disconnect();
         if (this.resizeTimer)
             clearTimeout(this.resizeTimer);

package/js/code-viewer.d.ts

@@ -3,6 +3,7 @@ declare class CodeViewer {
     private container;
     private code;
     private language;
+    private listeners;
     constructor(elementOrSelector: string | HTMLElement, code: string, language?: SupportedLanguage);
     private highlight;
     private escape;
@@ -11,7 +12,6 @@ declare class CodeViewer {
     private highlightCSS;
     private copyCode;
     private render;
-    private handleCopy;
     destroy(): void;
 }
 export { CodeViewer };

package/js/code-viewer.js

@@ -1,11 +1,11 @@
+import { ListenerGroup } from './listeners.js';
 class CodeViewer {
     container;
     code;
     language;
+    listeners = new ListenerGroup();
     constructor(elementOrSelector, code, language = 'javascript') {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const element = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!element) {
             throw new Error(`CodeViewer: Element not found for selector "${elementOrSelector}"`);
         }
@@ -28,12 +28,7 @@ class CodeViewer {
         }
     }
     escape(str) {
-        return str
-            .replace(/&/g, '&')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#039;');
+        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
     }
     highlightJavaScript(code) {
         const strings = [];
@@ -88,7 +83,6 @@ class CodeViewer {
         return code;
     }
     highlightCSS(code) {
-        code = this.escape(code);
         const comments = [];
         code = code.replace(/(\/\*[\s\S]*?\*\/)/g, (match) => {
             comments.push(match);
@@ -99,6 +93,7 @@ class CodeViewer {
             strings.push(match);
             return `###STRING${strings.length - 1}###`;
         });
+        code = this.escape(code);
         code = code.replace(/^([^{]+)(?={)/gm, (match) => {
             return '<span class="selector">' + match.trim() + '</span>';
         });
@@ -143,16 +138,10 @@ class CodeViewer {
                     </div>
                 `;
         const copyButton = this.container.querySelector('.copy-button');
-        if (copyButton) {
-            copyButton.addEventListener('click', this.handleCopy);
-        }
+        copyButton?.addEventListener('click', () => this.copyCode(), { signal: this.listeners.signal });
     }
-    handleCopy = () => {
-        this.copyCode();
-    };
     destroy() {
-        const copyButton = this.container.querySelector('.copy-button');
-        copyButton?.removeEventListener('click', this.handleCopy);
+        this.listeners.destroy();
     }
 }
 export { CodeViewer };

package/js/color-picker.d.ts

@@ -23,8 +23,8 @@ declare class ColorPicker {
     private saturation;
     private brightness;
     private isDragging;
-    private abortController;
-    private ro;
+    private listeners;
+    private resizeObserver;
     constructor(elementOrSelector: string | HTMLElement, options?: ColorPickerOptions);
     private build;
     private bindEvents;

package/js/color-picker.js

@@ -1,3 +1,4 @@
+import { ListenerGroup } from './listeners.js';
 class ColorPicker {
     container;
     onChange;
@@ -14,20 +15,18 @@ class ColorPicker {
     saturation = 100;
     brightness = 100;
     isDragging = false;
-    abortController = new AbortController();
-    ro;
+    listeners = new ListenerGroup();
+    resizeObserver;
     constructor(elementOrSelector, options = {}) {
-        const el = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const el = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!el)
             throw new Error(`ColorPicker: element not found for "${elementOrSelector}"`);
         this.container = el;
         this.onChange = options.onChange;
         this.build();
         this.bindEvents();
-        this.ro = new ResizeObserver(() => this.resizeCanvas());
-        this.ro.observe(this.canvas.parentElement);
+        this.resizeObserver = new ResizeObserver(() => this.resizeCanvas());
+        this.resizeObserver.observe(this.canvas.parentElement);
         this.resizeCanvas();
         if (options.value) {
             this.setValue(options.value);
@@ -83,7 +82,7 @@ class ColorPicker {
         this.preview = this.container.querySelector('.color-picker__preview');
     }
     bindEvents() {
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         this.canvas.addEventListener('pointerdown', (e) => {
             e.preventDefault();
             this.canvas.setPointerCapture(e.pointerId);
@@ -95,12 +94,11 @@ class ColorPicker {
                 return;
             this.handleFieldInteraction(e);
         }, sig);
-        this.canvas.addEventListener('pointerup', () => {
-            this.isDragging = false;
-        }, sig);
-        this.canvas.addEventListener('pointercancel', () => {
-            this.isDragging = false;
-        }, sig);
+        for (const type of ['pointerup', 'pointercancel']) {
+            this.canvas.addEventListener(type, () => {
+                this.isDragging = false;
+            }, sig);
+        }
         this.hueSlider.addEventListener('input', () => {
             this.hue = +this.hueSlider.value;
             this.drawField();
@@ -144,13 +142,13 @@ class ColorPicker {
         const y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
         this.saturation = (x / rect.width) * 100;
         this.brightness = 100 - (y / rect.height) * 100;
-        this.updateCursor();
+        this.updateCursor(rect);
         this.updateFromHSB();
     }
-    updateCursor() {
-        const rect = this.canvas.getBoundingClientRect();
-        const x = (this.saturation / 100) * rect.width;
-        const y = (1 - this.brightness / 100) * rect.height;
+    updateCursor(rect) {
+        const r = rect ?? this.canvas.getBoundingClientRect();
+        const x = (this.saturation / 100) * r.width;
+        const y = (1 - this.brightness / 100) * r.height;
         this.cursor.style.left = `${x}px`;
         this.cursor.style.top = `${y}px`;
         this.cursor.classList.toggle('color-picker__cursor--dark', this.brightness > 50 && this.saturation < 80);
@@ -207,8 +205,8 @@ class ColorPicker {
         this.setFromRGB(this.hexToRgb(hex));
     }
     destroy() {
-        this.abortController.abort();
-        this.ro.disconnect();
+        this.listeners.destroy();
+        this.resizeObserver.disconnect();
         this.container.classList.remove('color-picker');
         this.container.innerHTML = '';
     }
@@ -281,7 +279,7 @@ class ColorPicker {
         };
     }
     rgbToHex({ r, g, b }) {
-        return '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('');
+        return '#' + [r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('');
     }
     hexToRgb(hex) {
         const m = hex.match(/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);

package/js/context-menu.d.ts

@@ -18,7 +18,7 @@ declare class ContextMenu {
     private targets;
     private menuEl;
     private currentTarget;
-    private abortController;
+    private listeners;
     private spritePath;
     constructor(selectorOrElement: string | HTMLElement | HTMLElement[], items: ContextMenuInput[], options?: ContextMenuOptions);
     private init;

package/js/context-menu.js

@@ -1,9 +1,10 @@
+import { ListenerGroup } from './listeners.js';
 class ContextMenu {
     items;
     targets;
     menuEl = null;
     currentTarget = null;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     spritePath;
     constructor(selectorOrElement, items, options = {}) {
         this.items = items;
@@ -20,7 +21,7 @@ class ContextMenu {
         this.init();
     }
     init() {
-        const { signal } = this.abortController;
+        const { signal } = this.listeners;
         this.targets.forEach((target) => {
             target.addEventListener('contextmenu', (e) => {
                 e.preventDefault();
@@ -40,15 +41,15 @@ class ContextMenu {
             if (e.key === 'Escape') {
                 this.close();
             }
-            if (e.key === 'ArrowDown') {
+            else if (e.key === 'ArrowDown') {
                 e.preventDefault();
                 this.moveFocus(1);
             }
-            if (e.key === 'ArrowUp') {
+            else if (e.key === 'ArrowUp') {
                 e.preventDefault();
                 this.moveFocus(-1);
             }
-            if (e.key === 'Enter') {
+            else if (e.key === 'Enter') {
                 e.preventDefault();
                 this.activateFocused();
             }
@@ -187,26 +188,23 @@ class ContextMenu {
     getFocusableItems() {
         if (!this.menuEl)
             return [];
-        return Array.from(this.menuEl.children).filter((el) => el.classList.contains('context-menu-item') &&
-            !el.classList.contains('is-disabled'));
+        return Array.from(this.menuEl.children).filter((el) => el.classList.contains('context-menu-item') && !el.classList.contains('is-disabled'));
     }
     moveFocus(direction) {
         const items = this.getFocusableItems();
         if (!items.length)
             return;
         const currentIndex = items.findIndex((el) => el.classList.contains('is-focused'));
-        const nextIndex = (currentIndex + direction + items.length) % items.length;
+        const nextIndex = currentIndex === -1 ? (direction === 1 ? 0 : items.length - 1) : (currentIndex + direction + items.length) % items.length;
         items[currentIndex]?.classList.remove('is-focused');
         items[nextIndex].classList.add('is-focused');
     }
     activateFocused() {
-        this.menuEl
-            ?.querySelector('.context-menu-item.is-focused')
-            ?.click();
+        this.menuEl?.querySelector('.context-menu-item.is-focused')?.click();
     }
     destroy() {
         this.close();
-        this.abortController.abort();
+        this.listeners.destroy();
     }
 }
 export { ContextMenu };

package/js/datepicker.d.ts

@@ -15,6 +15,8 @@ interface DateRange {
     end: Date | null;
 }
 declare class DatePicker {
+    private static readonly CLOCK_OUTER_RADIUS_PERCENT;
+    private static readonly CLOCK_INNER_RADIUS_PERCENT;
     private input;
     private options;
     private currentDate;
@@ -29,8 +31,10 @@ declare class DatePicker {
     private selectedMinutes;
     private calendar;
     private backdrop;
-    private handleDocumentClick;
-    private abortController;
+    private clockMode;
+    private listeners;
+    private showListeners;
+    private clockListeners;
     constructor(elementOrSelector: string | HTMLInputElement, options?: DatePickerOptions);
     private init;
     private createCalendarElement;
@@ -38,13 +42,20 @@ declare class DatePicker {
     private show;
     private hide;
     private render;
+    private renderTimePicker;
     private createHeader;
     private navigate;
     private createMonthGrid;
     private createYearGrid;
     private createGrid;
     private createTimePicker;
-    private createSpinner;
+    private createClockHeader;
+    private createClockFace;
+    private createClockNumber;
+    private clockPosition;
+    private positionHand;
+    private bindClockDrag;
+    private selectClockValue;
     private applyTimeToSelection;
     private changeMonth;
     private handleDateClick;