@dodlhuat/basix 1.2.1 → 1.2.3

package/README.md

@@ -16,12 +16,23 @@ A demo can be found here: <a href="http://www.andibauer.at/basix/" target="_blan
 Take a look at style.scss for a glimpse on a full import. reset, parameters, colors & defaults are mandatory, anything
 else can be added as needed.
 
-To use the import functionality of javascript files you need to import your main script as a module. And either build
-your own css or include the existing full style.css (or min)
+Include the stylesheet and import individual components as ES modules. There is no bundled entry point — only the components you use are loaded.
 
 ``` html
 <link rel="stylesheet" href="css/style.css" type="text/css">
-<script src="js/index.js" type="module"></script>
+<script type="module">
+    import { Chart }   from './js/chart.js';
+    import { Modal }   from './js/modal.js';
+    import { Stepper } from './js/stepper.js';
+    // … add only what you need
+</script>
+```
+
+When installed via npm, import from the package:
+
+``` js
+import { Chart }   from '@dodlhuat/basix/js/chart.js';
+import { Modal }   from '@dodlhuat/basix/js/modal.js';
 ```
 
 ---
@@ -125,10 +136,20 @@ The Switch component creates styled toggle switches based on checkboxes.
 
 ### Range Slider
 
-The Range Slider component creates a simple styled slider.
+The Range Slider component creates a styled slider with a CSS custom property `--range-fill` that tracks the current value for fill styling. Use the JS class to initialise fill tracking automatically.
 
 ``` html
-<input type="range" min="1" max="100" value="50" />
+<div class="range-slider">
+    <input type="range" min="1" max="100" value="50" />
+</div>
+```
+
+``` js
+// Initialise a single slider
+new RangeSlider(document.querySelector('.range-slider input'));
+
+// Or initialise all sliders on the page at once
+RangeSlider.initAll();
 ```
 
 ---
@@ -155,6 +176,37 @@ The Flyout Menu component creates slide-in navigation menus with nested submenus
 | `footerText` | string | `'© 2025 Brand Inc.'` | Shown in the footer if enabled |
 | `enableFooter` | boolean | `true` | Shows the menu footer |
 
+### Popover
+
+The Popover component attaches a floating content panel to any trigger element. Supports click and hover trigger modes, four placement directions, optional arrow, and stacks correctly when multiple popovers exist.
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `content` | string | — | HTML content rendered inside the popover |
+| `placement` | string | `'top'` | Preferred placement: `'top'`, `'bottom'`, `'left'`, `'right'`, or `'auto'` |
+| `align` | string | `'center'` | Alignment along the axis: `'start'`, `'center'`, `'end'` |
+| `offset` | number | `8` | Distance in px between the trigger and the popover |
+| `arrow` | boolean | `true` | Shows a directional arrow |
+| `triggerMode` | string | `'click'` | `'click'` or `'hover'` |
+| `closeOnOutsideClick` | boolean | `true` | Closes when clicking outside |
+| `closeOnEscape` | boolean | `true` | Closes on Escape key |
+| `className` | string | — | Extra CSS class on the popover element |
+| `onOpen` | function | — | Callback fired when the popover opens |
+| `onClose` | function | — | Callback fired when the popover closes |
+
+``` js
+const pop = new Popover('#my-trigger', {
+    content: '<p>Popover content</p>',
+    placement: 'bottom',
+    triggerMode: 'click',
+});
+
+pop.open();
+pop.close();
+pop.toggle();
+pop.destroy();
+```
+
 ### Dropdown Menu
 
 The Dropdown Menu allows to create multi-level dropdown menus with nested submenus. The menu fires custom events `CustomEvent<DropdownSelectDetail>` that can be listened to in order to react to user selections.
@@ -228,6 +280,48 @@ sheet.hide();
 sheet.snapTo('full');
 ```
 
+### Lightbox
+
+The Lightbox component opens images in a fullscreen overlay with an optional gallery mode. Supports keyboard navigation (← →, Escape), touch swipe, click-to-zoom, adjacent image preloading, focus trap, and a static `bind()` method for declarative HTML wiring.
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `src` | string | — | Image URL for single-image mode |
+| `alt` | string | — | Alt text for the image |
+| `caption` | string | — | Optional caption below the image |
+| `images` | LightboxImage[] | — | Array of `{ src, alt?, caption? }` for gallery mode |
+| `startIndex` | number | `0` | Starting index when opening a gallery |
+| `closeable` | boolean | `true` | Shows × button and enables backdrop/Escape dismissal |
+| `onOpen` | function | — | Callback fired when the lightbox opens |
+| `onClose` | function | — | Callback fired after the close animation completes |
+
+``` js
+import { Lightbox } from '@dodlhuat/basix/js/lightbox.js';
+
+// Single image
+new Lightbox({ src: 'photo.jpg', alt: 'A landscape', caption: 'Taken at sunrise' }).show();
+
+// Gallery
+new Lightbox({
+    images: [
+        { src: 'photo1.jpg', alt: 'Photo 1', caption: 'Day one' },
+        { src: 'photo2.jpg', alt: 'Photo 2' },
+    ],
+    startIndex: 0,
+    onClose: () => console.log('closed'),
+}).show();
+
+// Declarative binding — groups elements by data-lightbox value into galleries
+Lightbox.bind();
+```
+
+``` html
+<!-- Declarative usage -->
+<a href="full.jpg" data-lightbox="trip" data-lightbox-caption="Arrival day">
+    <img src="thumb.jpg" alt="Arrival" />
+</a>
+```
+
 ### Tooltip
 
 The Tooltip component shows contextual information on hover.
@@ -426,6 +520,91 @@ The Placeholder component creates skeleton loading states. Use `.placeholder` wi
 
 ## Advanced Components
 
+### Chart
+
+The Chart component renders SVG-based charts with no external dependencies. Supports line, area, column, bar, and pie chart types. Animates on first render and redraws on container resize.
+
+``` js
+const chart = new Chart('#chart-container', {
+    type: 'line',
+    title: 'Monthly Revenue',
+    series: [
+        {
+            name: 'Product A',
+            data: [
+                { label: 'Jan', value: 120 },
+                { label: 'Feb', value: 180 },
+                { label: 'Mar', value: 150 },
+            ],
+        },
+    ],
+});
+
+chart.update(newSeries);   // replace data and redraw
+chart.setType('bar');      // switch chart type
+chart.destroy();           // remove listeners and DOM
+```
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `type` | ChartType | — | `'line'`, `'area'`, `'column'`, `'bar'`, or `'pie'` |
+| `series` | ChartSeries[] | — | Array of `{ name, data, color? }` objects |
+| `title` | string | — | Optional chart title |
+| `subtitle` | string | — | Optional subtitle below the title |
+| `height` | number | `280` | Inner chart height in px |
+| `showLegend` | boolean | `true` | Renders the series legend |
+| `showGrid` | boolean | `true` | Renders background grid lines |
+| `animate` | boolean | `true` | Animates on first render |
+| `curve` | string | `'smooth'` | Line interpolation for line/area: `'smooth'`, `'linear'`, `'step'` |
+| `yMin` | number | `0` | Fixed y-axis minimum |
+| `yMax` | number | auto | Fixed y-axis maximum (defaults to max value × 1.1) |
+| `onPointClick` | function | — | Callback `(series, point, index) => void` fired on data point click |
+
+### Calendar
+
+The Calendar component renders a full interactive calendar with month, week, and agenda views. Supports event display, keyboard navigation, and locale configuration.
+
+``` js
+const cal = new Calendar({
+    container: '#my-calendar',
+    view: 'month',
+    events: [
+        {
+            id: '1',
+            title: 'Team Meeting',
+            start: new Date(2026, 3, 20, 10, 0),
+            end:   new Date(2026, 3, 20, 11, 0),
+            className: 'badge-success',
+        },
+    ],
+    onEventClick: (event) => console.log(event),
+    onDayClick:   (date)  => console.log(date),
+    onChange:     (date, view) => console.log(date, view),
+});
+
+cal.next();
+cal.prev();
+cal.today();
+cal.setView('week');
+cal.addEvent({ id: '2', title: 'Lunch', start: new Date(), end: new Date() });
+cal.removeEvent('2');
+cal.setEvents(events);
+cal.getEvents();
+cal.destroy();
+```
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `container` | HTMLElement \| string | — | Target container element or CSS selector |
+| `events` | CalendarEvent[] | `[]` | Initial events |
+| `view` | string | `'month'` | Initial view: `'month'`, `'week'`, or `'agenda'` |
+| `showOutsideDays` | boolean | `true` | Show days from adjacent months in the month grid |
+| `locale` | object | — | Override locale strings (day names, month names, labels) |
+| `onDayClick` | function | — | Callback `(date: Date) => void` |
+| `onEventClick` | function | — | Callback `(event: CalendarEvent) => void` |
+| `onChange` | function | — | Callback `(date: Date, view: CalendarView) => void` |
+| `className` | string | — | Extra CSS class on the root element |
+
 ### Context Menu
 
 The Context Menu component shows a custom right-click menu on any target element. Supports icons, keyboard shortcuts, group labels, separators, submenus, destructive items, and disabled items. Automatically flips to avoid viewport overflow and animates in from the click origin.
@@ -594,6 +773,74 @@ const picker = new GroupPicker('#group-picker-demo', data, {
 | `collapseAll()` | Collapse all groups |
 | `destroy()` | Remove event listeners and clear the DOM |
 
+### Time Span Picker
+
+The TimeSpanPicker component provides a paired start/end time input for selecting a time range.
+
+``` js
+const picker = new TimeSpanPicker('my-container', {
+    defaultStart: '09:00',
+    defaultEnd:   '17:00',
+    onChange: (start, end) => console.log(start, end),
+});
+
+picker.getValue();            // { start: '09:00', end: '17:00' }
+picker.setValue('10:00', '18:00');
+picker.reset();
+picker.isValid();             // boolean
+picker.destroy();
+```
+
+### Select
+
+The Select component wraps a native `<select>` element with custom Basix styling. Supports single and multi-select.
+
+``` html
+<select id="my-select">
+    <option value="a">Option A</option>
+    <option value="b">Option B</option>
+</select>
+```
+
+``` js
+const sel = new Select('#my-select');
+sel.value();   // returns selected value string, or string[] for multi-select
+
+// Or initialise by passing the element directly
+Select.init(document.querySelector('#my-select'));
+```
+
+### Code Viewer
+
+The CodeViewer component renders syntax-highlighted code blocks inside any container. Supports JavaScript, HTML, and CSS.
+
+``` js
+new CodeViewer('#output', '<div class="card">Hello</div>', 'html');
+new CodeViewer('#output', 'const x = 42;', 'javascript');
+new CodeViewer('#output', '.card { padding: 1rem; }', 'css');
+```
+
+### Editor
+
+The Editor component provides a contenteditable rich-text editing area with undo/redo, word count, and an optional side panel showing the raw HTML source and a live preview. Requires a `#editable` element in the DOM.
+
+``` html
+<div id="editable" contenteditable="true"></div>
+<!-- Optional side panel elements -->
+<textarea id="code"></textarea>
+<div id="preview"></div>
+<div id="sidePanel"></div>
+<span id="wordCount"></span>
+```
+
+``` js
+// Full editor with side panel
+new Editor();
+
+// Simple mode — hides the side panel permanently
+new Editor({ simple: true });
+```
+
 ### Custom Scrollbar
 
 The Scrollbar component creates custom-styled scrollbars. Supports pointer/touch dragging, track clicking, and automatic thumb sizing. Can be used with any class.

package/css/lightbox.scss

@@ -0,0 +1,272 @@
+@use "properties";
+@use "parameters" as *;
+
+.lightbox-wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.is-visible {
+    pointer-events: auto;
+
+    .lightbox-background {
+      opacity: 1;
+    }
+
+    .lightbox {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .lightbox-close,
+    .lightbox-prev,
+    .lightbox-next {
+      opacity: 1;
+    }
+  }
+}
+
+.lightbox-background {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.88);
+  opacity: 0;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: opacity 0.3s ease;
+}
+
+.lightbox-close {
+  position: absolute;
+  top: $spacing;
+  right: $spacing;
+  z-index: 1002;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  opacity: 0;
+  transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease;
+  -webkit-tap-highlight-color: transparent;
+
+  .icon {
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.22);
+    color: #fff;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.6);
+    outline-offset: 2px;
+  }
+}
+
+.lightbox {
+  position: relative;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: min(90vw, 1280px);
+  opacity: 0;
+  transform: scale(0.97);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.lightbox-img-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  max-height: calc(90dvh - 3.5rem);
+  cursor: zoom-in;
+  border-radius: calc($border-radius * 2);
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.04);
+
+  &.is-loading {
+    min-width: 6rem;
+    min-height: 6rem;
+
+    .lightbox-img {
+      opacity: 0;
+    }
+
+    .lightbox-spinner {
+      display: flex;
+    }
+  }
+
+  &.is-error {
+    min-width: 14rem;
+    min-height: 8rem;
+    cursor: default;
+
+    .lightbox-img {
+      display: none;
+    }
+
+    .lightbox-spinner {
+      display: none;
+    }
+
+    &::after {
+      content: 'Failed to load image';
+      color: rgba(255, 255, 255, 0.4);
+      font-size: 0.875rem;
+      padding: $spacing * 2;
+    }
+  }
+
+  &.is-zoomed {
+    cursor: zoom-out;
+    overflow: auto;
+    max-height: 90dvh;
+    border-radius: 0;
+  }
+}
+
+.lightbox-spinner {
+  position: absolute;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+
+  // Override spinner colors for the dark overlay
+  .spinner {
+    border-color: rgba(255, 255, 255, 0.15);
+    border-top-color: rgba(255, 255, 255, 0.7);
+  }
+}
+
+.lightbox-img {
+  display: block;
+  max-width: 100%;
+  max-height: calc(90dvh - 3.5rem);
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  border-radius: calc($border-radius * 2);
+  user-select: none;
+  -webkit-user-drag: none;
+
+  &.is-loaded {
+    opacity: 1;
+  }
+
+  &.is-zoomed {
+    max-width: none;
+    max-height: none;
+    border-radius: 0;
+  }
+}
+
+.lightbox-caption {
+  margin: calc($spacing * 0.6) 0 0;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.875rem;
+  text-align: center;
+  max-width: 60ch;
+  line-height: 1.5;
+}
+
+.lightbox-counter {
+  margin-top: calc($spacing * 0.5);
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  text-align: center;
+  user-select: none;
+}
+
+// Prev/Next buttons — glass pill, matches carousel style
+.lightbox-prev,
+.lightbox-next {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.32);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+  opacity: 0;
+  transition: background 0.2s ease,
+              opacity 0.3s ease,
+              transform 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+
+  .icon {
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.55);
+  }
+
+  &:active {
+    transform: translateY(-50%) scale(0.93);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.6);
+    outline-offset: 2px;
+  }
+}
+
+.lightbox-prev { left: $spacing; }
+.lightbox-next { right: $spacing; }
+
+@media (max-width: 768px) {
+  .lightbox-prev,
+  .lightbox-next {
+    width: 2rem;
+    height: 2rem;
+
+    .icon { font-size: 1.25rem; }
+  }
+
+  .lightbox-prev { left: calc($spacing * 0.5); }
+  .lightbox-next { right: calc($spacing * 0.5); }
+
+  .lightbox {
+    max-width: 100vw;
+  }
+
+  .lightbox-img,
+  .lightbox-img-wrap {
+    max-height: 82dvh;
+    border-radius: $border-radius;
+  }
+
+  .lightbox-close {
+    top: calc($spacing * 0.75);
+    right: calc($spacing * 0.75);
+  }
+}