@dodlhuat/basix 1.3.2 → 1.3.4

package/css/virtual-dropdown.scss

@@ -1,8 +1,6 @@
-@use "parameters" as *;
 @use "properties";
+@use "parameters" as *;
 
-// Flip-above fallback: used when there isn't enough space below the trigger.
-// The browser tries this when the default (below) position overflows the viewport.
 @position-try --vd-above {
   top: auto;
   bottom: anchor(top);
@@ -10,15 +8,12 @@
   margin-bottom: 6px;
 }
 
-// All selectors scoped under .custom-dropdown to avoid conflicts with dropdown.scss
 .custom-dropdown {
   position: relative;
   width: 100%;
   user-select: none;
   display: inline-block;
 
-  // ── Trigger ──────────────────────────────────────────────────────────
-
   .dropdown-trigger {
     background: var(--background);
     border: 1.5px solid var(--divider);
@@ -87,22 +82,13 @@
     transform: rotate(180deg);
   }
 
-  // ── Menu ─────────────────────────────────────────────────────────────
-  //
-  // The menu is a popover (top-layer) element. Anchor positioning places it
-  // below the trigger and automatically flips above when there isn't room.
-  //
-  // anchor-name / position-anchor are unique per instance and set as inline
-  // styles by VirtualDropdown so multiple instances don't conflict.
-
   .dropdown-menu {
-    // Reset browser popover UA defaults
+
     inset: unset;
     margin: 0;
     padding: 0;
     border: none;
 
-    // Anchor positioning: default = below trigger, fallback = above
     position: fixed;
     top: anchor(bottom);
     left: anchor(left);
@@ -110,7 +96,6 @@
     margin-top: 6px;
     position-try-fallbacks: --vd-above;
 
-    // Appearance
     background: var(--background);
     border: 1.5px solid var(--divider);
     border-radius: calc($border-radius * 1.5);
@@ -119,10 +104,6 @@
       0 2px 8px rgba(0, 0, 0, 0.06);
     transform-origin: top center;
 
-    // Entry / exit animation.
-    // Closed state = exit target (browser transitions to this on close).
-    // @starting-style defines the entry start point (same values, so it
-    // fades/slides in from the same position it would exit to).
     opacity: 0;
     transform: translateY(-6px) scale(0.975);
 
@@ -143,8 +124,6 @@
     }
   }
 
-  // ── Search ───────────────────────────────────────────────────────────
-
   .dropdown-search {
     padding: calc($spacing * 0.4);
     border-bottom: 1.5px solid var(--divider);
@@ -179,8 +158,6 @@
     }
   }
 
-  // ── Virtual list ─────────────────────────────────────────────────────
-
   .dropdown-list-wrapper {
     max-height: 250px;
     overflow-y: auto;
@@ -200,8 +177,6 @@
     width: 100%;
   }
 
-  // ── Items ─────────────────────────────────────────────────────────────
-
   .dropdown-item {
     padding: 0 calc($spacing * 0.65);
     cursor: pointer;
@@ -237,7 +212,7 @@
       padding: 0;
       box-shadow: none;
       border: 1.5px solid var(--divider);
-      border-radius: calc($border-radius / 2);
+      border-radius: $radius-sm;
       background: var(--background);
       margin-right: calc($spacing * 0.6);
       pointer-events: none;

package/js/bottom-sheet.d.ts

@@ -1,3 +1,4 @@
+/** Options for configuring a BottomSheet instance. */
 interface BottomSheetOptions {
     content: string;
     header?: string;
@@ -6,6 +7,7 @@ interface BottomSheetOptions {
     snapHeight?: 'auto' | 'half' | 'full';
     onClose?: () => void;
 }
+/** Slide-up sheet that attaches to the bottom of the viewport. */
 declare class BottomSheet {
     private readonly content;
     private readonly header?;
@@ -22,7 +24,7 @@ declare class BottomSheet {
     private isDragging;
     constructor(options: BottomSheetOptions);
     show(): void;
-    hide(): void;
+    hide: () => void;
     snapTo(height: 'auto' | 'half' | 'full'): void;
     private handleEscape;
     private handleBackdropClick;

package/js/bottom-sheet.js

@@ -1,26 +1,26 @@
 import { sanitizeHtml } from './utils.js';
+/** Slide-up sheet that attaches to the bottom of the viewport. */
 class BottomSheet {
+    content;
+    header;
+    footer;
+    closeable;
+    snapHeight;
+    onClose;
+    wrapper = null;
+    sheet = null;
+    handle = null;
+    body = null;
+    dragStartY = 0;
+    currentDragY = 0;
+    isDragging = false;
     constructor(options) {
-        this.wrapper = null;
-        this.sheet = null;
-        this.handle = null;
-        this.body = null;
-        // Touch drag state
-        this.dragStartY = 0;
-        this.currentDragY = 0;
-        this.isDragging = false;
         this.content = options.content;
         this.header = options.header;
         this.footer = options.footer;
         this.closeable = options.closeable ?? true;
         this.snapHeight = options.snapHeight ?? 'auto';
         this.onClose = options.onClose;
-        this.hide = this.hide.bind(this);
-        this.handleEscape = this.handleEscape.bind(this);
-        this.handleBackdropClick = this.handleBackdropClick.bind(this);
-        this.handleTouchStart = this.handleTouchStart.bind(this);
-        this.handleTouchMove = this.handleTouchMove.bind(this);
-        this.handleTouchEnd = this.handleTouchEnd.bind(this);
     }
     show() {
         this.hide();
@@ -53,7 +53,7 @@ class BottomSheet {
             wrapper.classList.add('is-visible');
         });
     }
-    hide() {
+    hide = () => {
         if (!this.wrapper)
             return;
         const backdrop = this.wrapper.querySelector('.bottom-sheet-backdrop');
@@ -75,7 +75,7 @@ class BottomSheet {
             wrapper.remove();
             this.onClose?.();
         }, 420);
-    }
+    };
     snapTo(height) {
         if (!this.sheet)
             return;
@@ -85,24 +85,24 @@ class BottomSheet {
             this.sheet.classList.add(`snap-${height}`);
         }
     }
-    handleEscape(e) {
+    handleEscape = (e) => {
         if (e.key === 'Escape')
             this.hide();
-    }
-    handleBackdropClick(e) {
+    };
+    handleBackdropClick = (e) => {
         if (e.target?.classList.contains('bottom-sheet-backdrop')) {
             this.hide();
         }
-    }
-    handleTouchStart(e) {
+    };
+    handleTouchStart = (e) => {
         this.dragStartY = e.touches[0].clientY;
         this.currentDragY = 0;
         this.isDragging = true;
         if (this.sheet) {
             this.sheet.style.transition = 'none';
         }
-    }
-    handleTouchMove(e) {
+    };
+    handleTouchMove = (e) => {
         if (!this.isDragging || !this.sheet)
             return;
         const deltaY = e.touches[0].clientY - this.dragStartY;
@@ -118,8 +118,8 @@ class BottomSheet {
         const translateX = isDesktop ? '-50%' : '0';
         this.sheet.style.transform = `translateX(${translateX}) translateY(${this.currentDragY}px)`;
         e.preventDefault();
-    }
-    handleTouchEnd() {
+    };
+    handleTouchEnd = () => {
         if (!this.isDragging || !this.sheet)
             return;
         this.isDragging = false;
@@ -128,11 +128,10 @@ class BottomSheet {
             this.hide();
         }
         else {
-            // Spring back
             this.sheet.style.transition = '';
             this.sheet.style.transform = '';
         }
-    }
+    };
     updateScrollMask() {
         if (!this.body)
             return;

package/js/calendar.d.ts

@@ -1,3 +1,4 @@
+/** Represents a single calendar event with a start/end date. */
 export interface CalendarEvent {
     id: string;
     title: string;
@@ -7,6 +8,7 @@ export interface CalendarEvent {
     className?: string;
 }
 export type CalendarView = 'month' | 'week' | 'agenda';
+/** Localisation strings and week-start configuration for the Calendar. */
 export interface CalendarLocale {
     monthNames: string[];
     dayNamesShort: string[];
@@ -19,6 +21,7 @@ export interface CalendarLocale {
     allDay: string;
     noEvents: string;
 }
+/** Configuration options for the Calendar component. */
 export interface CalendarOptions {
     container: HTMLElement | string;
     events?: CalendarEvent[];
@@ -31,6 +34,7 @@ export interface CalendarOptions {
     className?: string;
     iconBasePath?: string;
 }
+/** Layout descriptor for a multi-day event spanning columns in a week row. */
 interface SpanLayout {
     event: CalendarEvent;
     colStart: number;
@@ -39,6 +43,7 @@ interface SpanLayout {
     continuesBefore: boolean;
     continuesAfter: boolean;
 }
+/** Layout descriptor for a timed event positioned in a day column. */
 interface TimedEventLayout {
     event: CalendarEvent;
     top: number;
@@ -68,6 +73,7 @@ export declare const CalendarLogic: {
     computeTimedLayout(events: CalendarEvent[], day: Date): TimedEventLayout[];
     nowLinePct(): number;
 };
+/** Produces HTML strings for each Calendar view (month, week, agenda). */
 export declare class CalendarRenderer {
     private locale;
     constructor(locale: CalendarLocale);
@@ -80,6 +86,7 @@ export declare class CalendarRenderer {
     renderWeekView(date: Date, events: CalendarEvent[], firstDayOfWeek: number, showNowLine?: boolean): string;
     renderAgendaView(year: number, month: number, events: CalendarEvent[]): string;
 }
+/** Main Calendar controller — manages state, rendering, and event delegation. */
 export declare class Calendar {
     private container;
     private options;

package/js/calendar.js

@@ -1,9 +1,3 @@
-// ============================================================
-// calendar.ts — Basix Calendar Component
-// ============================================================
-// -----------------------------------------------------------
-// Date Logic
-// -----------------------------------------------------------
 export const CalendarLogic = {
     getMonthGrid(year, month, firstDayOfWeek) {
         const firstOfMonth = new Date(year, month, 1);
@@ -146,7 +140,6 @@ export const CalendarLogic = {
                 return diff;
             return (b.end.getTime() - b.start.getTime()) - (a.end.getTime() - a.start.getTime());
         });
-        // Greedy sub-column assignment
         const colEnds = [];
         const assigns = [];
         for (const event of sorted) {
@@ -160,7 +153,6 @@ export const CalendarLogic = {
             assigns.push({ event, col });
         }
         return assigns.map(({ event, col }) => {
-            // cols = highest sub-column among events that overlap this one + 1
             const cols = assigns
                 .filter(a => a.event.start < event.end && a.event.end > event.start)
                 .reduce((max, a) => Math.max(max, a.col), 0) + 1;
@@ -173,9 +165,6 @@ export const CalendarLogic = {
         return (now.getHours() * 60 + now.getMinutes()) / 1440 * 100;
     },
 };
-// -----------------------------------------------------------
-// Default Locale
-// -----------------------------------------------------------
 const DEFAULT_LOCALE = {
     monthNames: [
         'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
@@ -191,10 +180,9 @@ const DEFAULT_LOCALE = {
     allDay: 'Ganztägig',
     noEvents: 'Keine Termine',
 };
-// -----------------------------------------------------------
-// Renderer
-// -----------------------------------------------------------
+/** Produces HTML strings for each Calendar view (month, week, agenda). */
 export class CalendarRenderer {
+    locale;
     constructor(locale) {
         this.locale = locale;
     }
@@ -288,7 +276,6 @@ export class CalendarRenderer {
             const dow = this.locale.dayNamesShort[(d.getDay() + 7) % 7];
             return `<div class="${cls}">${dow}<span>${d.getDate()}</span></div>`;
         }).join('');
-        // All-day row: span layout for all allDay events (both single-day and multi-day)
         const allDayEvents = events.filter(e => e.allDay);
         const allDayLayouts = CalendarLogic.computeSpanLayout(days, allDayEvents);
         const allDayLanes = allDayLayouts.length > 0 ? Math.max(...allDayLayouts.map(l => l.lane)) + 1 : 0;
@@ -349,7 +336,6 @@ export class CalendarRenderer {
         for (let d = 1; d <= daysInMonth; d++) {
             const day = new Date(year, month, d);
             const dayEvents = CalendarLogic.getEventsForDay(events, day);
-            // Multi-day events show only once (first occurrence in this month)
             const filtered = dayEvents.filter(e => {
                 if (!CalendarLogic.isMultiDay(e))
                     return true;
@@ -394,18 +380,17 @@ export class CalendarRenderer {
         return `<div class="cal__agenda">${html}</div>`;
     }
 }
-// -----------------------------------------------------------
-// Calendar — main controller
-// -----------------------------------------------------------
+/** Main Calendar controller — manages state, rendering, and event delegation. */
 export class Calendar {
+    container;
+    options;
+    locale;
+    renderer;
+    currentDate;
+    currentView;
+    events = [];
+    nowLineTimer = null;
     constructor(options) {
-        this.events = [];
-        this.nowLineTimer = null;
-        // ----------------------------------------------------------
-        // Event delegation
-        // ----------------------------------------------------------
-        this.boundHandleClick = (e) => this.handleClick(e);
-        this.boundHandleKeydown = (e) => this.handleKeydown(e);
         if (typeof options.container === 'string') {
             const el = document.querySelector(options.container);
             if (!el)
@@ -435,9 +420,6 @@ export class Calendar {
         this.render();
         this.attachEvents();
     }
-    // ----------------------------------------------------------
-    // Public API
-    // ----------------------------------------------------------
     setView(view) {
         this.currentView = view;
         this.render();
@@ -490,9 +472,6 @@ export class Calendar {
         this.container.innerHTML = '';
         this.container.removeAttribute('data-cal');
     }
-    // ----------------------------------------------------------
-    // Rendering
-    // ----------------------------------------------------------
     getTitle() {
         const { monthNames } = this.locale;
         const y = this.currentDate.getFullYear();
@@ -571,7 +550,7 @@ export class Calendar {
             const line = this.container.querySelector('.cal__now-line');
             if (line)
                 line.style.top = `${CalendarLogic.nowLinePct().toFixed(3)}%`;
-        }, 60000);
+        }, 60_000);
     }
     clearNowLineTimer() {
         if (this.nowLineTimer !== null) {
@@ -579,6 +558,8 @@ export class Calendar {
             this.nowLineTimer = null;
         }
     }
+    boundHandleClick = (e) => this.handleClick(e);
+    boundHandleKeydown = (e) => this.handleKeydown(e);
     attachEvents() {
         this.container.addEventListener('click', this.boundHandleClick);
         this.container.addEventListener('keydown', this.boundHandleKeydown);

package/js/carousel.d.ts

@@ -1,8 +1,10 @@
+/** Options for configuring a Carousel instance. */
 interface CarouselOptions {
     loop?: boolean;
     autoPlay?: boolean;
     autoPlayInterval?: number;
 }
+/** Slide-based carousel with optional autoplay, loop, dot navigation, and touch support. */
 declare class Carousel {
     private root;
     private options;

package/js/carousel.js

@@ -1,7 +1,18 @@
+/** Slide-based carousel with optional autoplay, loop, dot navigation, and touch support. */
 class Carousel {
+    root;
+    options;
+    track;
+    slides;
+    slideWidth;
+    currentIndex;
+    prevButton;
+    nextButton;
+    dotsNav;
+    dots;
+    autoPlayTimer = null;
+    abortController = new AbortController();
     constructor(elementOrSelector, options = {}) {
-        this.autoPlayTimer = null;
-        this.abortController = new AbortController();
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -60,7 +71,6 @@ class Carousel {
             this.dots.push(dot);
         });
         this.root.appendChild(this.dotsNav);
-        // Make focusable for keyboard nav
         this.root.setAttribute('tabindex', '0');
     }
     bindEvents() {
@@ -78,14 +88,12 @@ class Carousel {
             this.slideWidth = this.slides[0].getBoundingClientRect().width;
             this.moveToSlide(this.currentIndex, false);
         }, sig);
-        // Keyboard navigation
         this.root.addEventListener('keydown', (e) => {
             if (e.key === 'ArrowLeft')
                 this.moveToPrevSlide();
             if (e.key === 'ArrowRight')
                 this.moveToNextSlide();
         }, sig);
-        // Pause autoplay on hover / focus
         if (this.options.autoPlay) {
             this.root.addEventListener('mouseenter', () => this.pauseAutoPlay(), sig);
             this.root.addEventListener('mouseleave', () => this.resumeAutoPlay(), sig);

package/js/chart.d.ts

@@ -1,14 +1,17 @@
 export type ChartType = 'line' | 'area' | 'column' | 'bar' | 'pie';
 export type ChartCurve = 'smooth' | 'linear' | 'step';
+/** A single labelled data value within a chart series. */
 export interface ChartDataPoint {
     label: string;
     value: number;
 }
+/** A named data series with optional per-series colour override. */
 export interface ChartSeries {
     name: string;
     data: ChartDataPoint[];
     color?: string;
 }
+/** Configuration options for a Chart instance. */
 export interface ChartOptions {
     type: ChartType;
     series: ChartSeries[];
@@ -27,6 +30,7 @@ export interface ChartOptions {
     yMax?: number;
     onPointClick?: (series: ChartSeries, point: ChartDataPoint, index: number) => void;
 }
+/** SVG-based chart component supporting line, area, column, bar, and pie types. */
 declare class Chart {
     private container;
     private opts;