@dodlhuat/basix 1.2.0 → 1.2.2

package/README.md

@@ -1,4 +1,4 @@
-# Basix 1.2.0
+# Basix 1.2.1
 
 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.
@@ -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.
@@ -426,6 +478,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.
@@ -539,6 +676,129 @@ The FileUploader component provides drag-and-drop file upload functionality with
 
 Virtual Dropdown is a performant, virtualized dropdown component that efficiently renders large option lists by only drawing visible items in the DOM. Supports single and multi-select modes, built-in search/filtering, keyboard navigation, and configurable item height and render limits — making it ideal for scenarios with hundreds or thousands of selectable options.
 
+### Group Picker
+
+The GroupPicker component enables hierarchical group and subgroup selection. Users can either select an entire parent group (covering all subgroups) or pick individual subgroups. Groups without children are directly selectable. Selecting all subgroups automatically promotes to a parent selection. Includes debounced search with match highlighting, expand/collapse, and a chip-based selection summary.
+
+``` html
+<div id="group-picker-demo"></div>
+```
+
+``` js
+const data: GroupData[] = [
+  {
+    id: 'gruppenspiele', label: 'Gruppenspiele',
+    subgroups: [
+      { id: 'grossgruppe', label: 'Grossgruppenspiele' },
+      { id: 'trinkspiele', label: 'Trinkspiele' },
+    ]
+  },
+  { id: 'schach', label: 'Schach' }, // no subgroups — directly selectable
+];
+
+const picker = new GroupPicker('#group-picker-demo', data, {
+  onSelectionChange: (selection) => console.log(selection),
+});
+```
+
+#### GroupData
+
+| Property | Type | Description |
+|---|---|---|
+| `id` | string | Unique identifier for the group |
+| `label` | string | Display name |
+| `subgroups` | SubgroupData[] | Optional array of `{ id, label }` child items |
+
+#### GroupPickerOptions
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `onSelectionChange` | function | — | Callback fired on selection change with `GroupPickerSelection` |
+| `searchPlaceholder` | string | `'Gruppen durchsuchen...'` | Placeholder text for the search input |
+| `selectAllLabel` | string | `'Alle'` | Label for the select-all button |
+| `deselectLabel` | string | `'Abwahlen'` | Label shown when a parent group is selected |
+| `emptyLabel` | string | `'Keine Ergebnisse'` | Shown when search yields no results |
+| `selectionPlaceholder` | string | `'Noch keine Auswahl getroffen'` | Placeholder in the selection summary area |
+
+#### Public API
+
+| Method | Description |
+|---|---|
+| `getSelection()` | Returns `{ parentGroups: string[], subgroups: { groupId, subgroupId }[] }` |
+| `setSelection(selection)` | Programmatically set the selection state |
+| `clearSelection()` | Clear all selections |
+| `expandAll()` | Expand all groups |
+| `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/accordion.scss

@@ -1,87 +1,86 @@
-@use "properties";
-@use "parameters" as *;
-
-.accordion {
-  margin: 0 auto;
-  border: 1px solid var(--divider);
-  border-radius: $border-radius;
-  overflow: hidden;
-}
-
-.accordion-item {
-  border-bottom: 1px solid var(--divider);
-}
-
-.accordion-item:last-child {
-  border-bottom: none;
-}
-
-.accordion-input {
-  display: none;
-}
-
-.accordion-label {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: calc($spacing * 0.85) calc($spacing * 1.25);
-  background: transparent;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 160ms ease,
-              color 160ms ease;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-
-  &:hover {
-    background: var(--hover);
-  }
-
-  &:active {
-    background: var(--hover);
-  }
-}
-
-.accordion-label::after {
-  content: '';
-  width: 8px;
-  height: 8px;
-  border-right: 1.5px solid var(--secondary-text);
-  border-bottom: 1.5px solid var(--secondary-text);
-  transform: rotate(45deg);
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
-              border-color 160ms ease;
-  margin-left: $spacing;
-  flex-shrink: 0;
-}
-
-.accordion-input:checked + .accordion-label {
-  color: var(--accent-color);
-
-  &::after {
-    transform: rotate(-135deg);
-    border-color: var(--accent-color);
-  }
-}
-
-.accordion-content {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-}
-
-.accordion-body {
-  min-height: 0;
-}
-
-.accordion-body > div {
-  padding: 0 calc($spacing * 1.25) calc($spacing * 1.25);
-  color: var(--secondary-text);
-  font-size: 0.9rem;
-  line-height: 1.6;
-}
-
-.accordion-input:checked ~ .accordion-content {
-  grid-template-rows: 1fr;
-}
+@use "properties";
+@use "parameters" as *;
+
+.accordion {
+  margin: 0 auto;
+  border: 1px solid var(--divider);
+  border-radius: $border-radius;
+  overflow: hidden;
+}
+
+.accordion-item {
+  border-bottom: 1px solid var(--divider);
+
+  &:last-child { border-bottom: none; }
+}
+
+// Hidden checkbox toggle
+.accordion-toggle {
+  display: none;
+}
+
+// Clickable header / trigger
+.accordion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: calc($spacing * 0.85) calc($spacing * 1.25);
+  background: transparent;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 160ms ease, color 160ms ease;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+
+  &:hover  { background: var(--hover); }
+  &:active { background: var(--hover); }
+
+  &::after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-right: 1.5px solid var(--secondary-text);
+    border-bottom: 1.5px solid var(--secondary-text);
+    transform: rotate(45deg);
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-color 160ms ease;
+    margin-left: $spacing;
+    flex-shrink: 0;
+  }
+}
+
+// Active state
+.accordion-toggle:checked + .accordion-header {
+  color: var(--accent-color);
+
+  &::after {
+    transform: rotate(-135deg);
+    border-color: var(--accent-color);
+  }
+}
+
+// Grid wrapper — animates height via grid-template-rows
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.accordion-toggle:checked ~ .accordion-content {
+  grid-template-rows: 1fr;
+}
+
+// Inner body — min-height:0 is required for grid 0fr to collapse
+.accordion-body {
+  min-height: 0;
+  padding: 0;
+  overflow: hidden;
+
+  > * {
+    padding: 0 calc($spacing * 1.25) calc($spacing * 1.25);
+    color: var(--secondary-text);
+    font-size: 0.9rem;
+    line-height: 1.6;
+  }
+}