@dodlhuat/basix 1.3.4 → 1.4.0

package/README.md

@@ -1,10 +1,38 @@
-# Basix 1.3.4
+# Basix 1.4.0
 
 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.
 
 A demo can be found here: <a href="http://www.andibauer.at/basix/" target="_blank">http://www.andibauer.at/basix/</a>
 
+---
+
+## Migration Guide
+
+### 1.3.5 → 1.4.0
+
+#### Breaking changes
+
+**`TimeSpanPicker` — option `toString` renamed to `toLabel`**
+
+The `toString` option shadowed `Object.prototype.toString` and is now renamed to `toLabel`. Update any call sites that pass this option:
+
+```js
+// Before (1.3.5)
+new TimeSpanPicker('container', { toString: 'Bis' });
+
+// After (1.4.0)
+new TimeSpanPicker('container', { toLabel: 'Bis' });
+```
+
+#### Bug fixes
+
+- **`MasonryGallery`** — the `reload` option was previously hard-coded to `2` and ignored. It now respects the value you pass. The default remains `2`, so existing usage without the option is unaffected.
+- **`Tabs`** — `destroy()` no longer operates on detached DOM nodes. Event listeners are now cleaned up via `AbortController`.
+- **`gallery`** — image-load errors no longer cause an unhandled promise rejection; they are logged to `console.error` instead.
+
+---
+
 ### Benefits
 
 * lightweight
@@ -479,8 +507,19 @@ The Tabs component creates accessible tabbed interfaces. Supports horizontal/ver
 
 | Option | Type | Default | Description |
 |---|---|---|---|
-| `layout` | string | `'horizontal'` | Layout of the tabs, either `'horizontal'` or `'vertical'` |
-| `defaultTab` | integer | `0` | Index of the default active tab (0-based) |
+| `layout` | string | `'horizontal'` | `'horizontal'` or `'vertical'` |
+| `defaultTab` | number | `0` | Index of the initially active tab (0-based) |
+| `menuPos` | string | `'top'` / `'left'` | Tab bar position: `'top'`, `'bottom'`, `'left'`, `'right'`. Defaults to `'top'` for horizontal layout, `'left'` for vertical. |
+| `onChange` | function | — | Callback fired on tab change: `(index: number) => void` |
+
+| Method | Description |
+|---|---|
+| `goToTab(index)` | Programmatically activate a tab and focus it |
+| `getCurrentTab()` | Returns the index of the currently active tab |
+| `getTabCount()` | Returns the total number of tabs |
+| `enableTab(index)` | Re-enables a disabled tab |
+| `disableTab(index)` | Disables a tab; if it was active, moves focus to the next enabled tab |
+| `destroy()` | Removes event listeners and cleans up ARIA attributes |
 
 ### Timeline
 
@@ -788,7 +827,7 @@ const picker = new TimeSpanPicker('my-container', {
     defaultStart: '09:00',
     defaultEnd:   '17:00',
     fromString:   'Von',   // optional — defaults to 'From'
-    toString:     'Bis',   // optional — defaults to 'To'
+    toLabel:      'Bis',   // optional — defaults to 'To'
     onChange: (start, end) => console.log(start, end),
 });
 
@@ -799,6 +838,36 @@ picker.isValid();             // boolean
 picker.destroy();
 ```
 
+### Color Picker
+
+The ColorPicker component renders a canvas-based HSB color picker with a hue slider and hex/RGB inputs. It builds its own DOM inside any container element and is fully mobile-friendly — drag gestures on the color field do not trigger page scroll.
+
+``` js
+import { ColorPicker } from '@dodlhuat/basix/js/color-picker.js';
+
+const picker = new ColorPicker('#my-picker', {
+    value: '#3d63dd',
+    onChange: (hex, rgb) => {
+        console.log(hex);                    // '#3d63dd'
+        console.log(rgb.r, rgb.g, rgb.b);   // 61, 99, 221
+    },
+});
+
+picker.getValue();           // current hex string, e.g. '#3d63dd'
+picker.setValue('#ff6b6b');  // set color programmatically
+picker.destroy();            // removes listeners, disconnects ResizeObserver, clears DOM
+```
+
+``` html
+<!-- Any empty container works — the component builds its own markup inside -->
+<div id="my-picker"></div>
+```
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `value` | string | `'#ff0000'` | Initial hex color (e.g. `'#3d63dd'`). Must be a 6-digit hex string. |
+| `onChange` | function | — | Called on every color change: `(hex: string, rgb: { r, g, b }) => void` |
+
 ### Select
 
 The Select component wraps a native `<select>` element with custom Basix styling. Supports single and multi-select.
@@ -813,9 +882,11 @@ The Select component wraps a native `<select>` element with custom Basix styling
 ``` js
 const sel = new Select('#my-select');
 sel.value();   // returns selected value string, or string[] for multi-select
+sel.destroy(); // removes the document click listener
 
-// Or initialise by passing the element directly
-Select.init(document.querySelector('#my-select'));
+// Static convenience form — returns a cleanup function to remove the document listener
+const cleanup = Select.init(document.querySelector('#my-select'));
+cleanup?.(); // call when the select is removed from the DOM
 ```
 
 ### Code Viewer
@@ -823,32 +894,103 @@ Select.init(document.querySelector('#my-select'));
 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');
+const viewer = new CodeViewer('#output', '<div class="card">Hello</div>', 'html');
 new CodeViewer('#output', 'const x = 42;', 'javascript');
 new CodeViewer('#output', '.card { padding: 1rem; }', 'css');
+
+viewer.destroy(); // removes event listeners and clears the container
 ```
 
 ### 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.
+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. Internal elements are located by `data-editor` attributes scoped to a `root` container — no globally unique IDs required, which makes multiple editors on the same page possible.
 
 ``` 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>
+<div class="editor" id="my-editor">
+    <div class="editor-toolbar">
+        <button data-editor-action="undo" title="Undo">↩</button>
+        <button data-editor-action="redo" title="Redo">↪</button>
+        <button data-cmd="bold">B</button>
+        <button data-cmd="italic">I</button>
+        <button data-editor-action="link">Link</button>
+        <!-- … -->
+    </div>
+    <div class="editor-body">
+        <div class="editor-main">
+            <div data-editor="editable" class="editable" contenteditable="true"></div>
+        </div>
+        <!-- Full mode: add side panel with code + preview -->
+        <div data-editor="side-panel" class="editor-side">
+            <div class="side-tabs">
+                <button class="side-tab active" data-tab="code-panel">HTML</button>
+                <button class="side-tab" data-tab="preview-panel">Preview</button>
+            </div>
+            <div class="side-panels">
+                <div class="side-panel active" data-editor="code-panel">
+                    <textarea data-editor="code"></textarea>
+                </div>
+                <div class="side-panel" data-editor="preview-panel">
+                    <div data-editor="preview" class="preview-content"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="editor-footer">
+        <span data-editor="wordcount">0 words</span>
+    </div>
+</div>
 ```
 
 ``` js
-// Full editor with side panel
-new Editor();
+// Single editor
+new Editor({ root: '#my-editor' });
+
+// Simple mode — only requires [data-editor="editable"], hides the side panel
+new Editor({ root: '#my-editor', simple: true });
+
+// Multiple editors on the same page
+const editor1 = new Editor({ root: '#editor-1' });
+const editor2 = new Editor({ root: '#editor-2' });
 
-// Simple mode — hides the side panel permanently
-new Editor({ simple: true });
+editor1.destroy();
 ```
 
+#### Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `root` | string \| HTMLElement | `document.body` | Root container. Required when multiple editors coexist on the same page. |
+| `simple` | boolean | `false` | Simple mode requires only `[data-editor="editable"]`. Full mode additionally requires `code`, `preview`, `side-panel`, `code-panel`, and `preview-panel` elements. |
+
+#### `data-editor` elements
+
+| Value | Element | Required |
+|---|---|---|
+| `editable` | `contenteditable` div — the writing area | always |
+| `code` | `<textarea>` — HTML source view | full mode |
+| `preview` | `<div>` — live preview | full mode |
+| `side-panel` | Side panel container | full mode |
+| `code-panel` | Code tab panel (matches `data-tab="code-panel"`) | full mode |
+| `preview-panel` | Preview tab panel | full mode |
+| `wordcount` | Word count display | optional |
+| `image-file` | `<input type="file">` for image insertion | optional |
+
+#### `data-editor-action` buttons
+
+| Value | Description |
+|---|---|
+| `undo` | Triggers undo |
+| `redo` | Triggers redo |
+| `link` | Opens URL prompt for link insertion |
+| `image` | Triggers the image file picker |
+| `save` | Downloads content as an HTML file (Ctrl+S) |
+| `clear` | Clears all content |
+| `clean` | Strips formatting from the current selection |
+| `toggle-code` | Shows / hides the HTML side panel |
+| `apply-code` | Applies the HTML source panel content to the editable area |
+| `sanitize-code` | Sanitizes the HTML source, then applies it to the editable area |
+| `minify-code` | Minifies the HTML source (removes whitespace and newlines) |
+
 ### 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/checkbox.scss

@@ -6,6 +6,13 @@
   position: absolute;
   opacity: 0;
   width: auto;
+  appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  box-shadow: none;
+  min-height: 0;
+  padding: 0;
+  background: transparent;
 
   & + label {
     position: relative;
@@ -29,7 +36,7 @@
     transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
   }
 
-  &:hover + label::before {
+  &:not(:disabled):hover + label::before {
     border-color: var(--accent-color);
   }
 
@@ -58,11 +65,12 @@
   &:disabled + label {
     color: var(--secondary-text);
     cursor: not-allowed;
+    pointer-events: none;
   }
 
   &:disabled + label::before {
     background-color: var(--secondary-background);
-    border-color: var(--disabled);
+    border-color: color-mix(in srgb, var(--secondary-text) 35%, transparent);
     box-shadow: none;
   }
 
@@ -70,4 +78,9 @@
     background-color: var(--disabled);
     border-color: var(--disabled);
   }
+
+  &:disabled:checked + label::after {
+    border-right-color: color-mix(in srgb, var(--primary-text) 40%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--primary-text) 40%, transparent);
+  }
 }

package/css/color-picker.scss

@@ -0,0 +1,278 @@
+@use "properties";
+@use "parameters" as *;
+
+$thumb-size:        18px;
+$thumb-size-touch:  22px;
+$track-height:      12px;
+$cursor-size:       14px;
+$preview-size:      40px;
+
+.color-picker {
+  width: 100%;
+  background: var(--background);
+  border: 1px solid var(--divider);
+  border-radius: $radius-lg;
+  padding: $spacing;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: calc($spacing * 0.75);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+// ─── Saturation / brightness field ────────────────────────────────────────────
+
+.color-picker__field {
+  position: relative;
+  overflow: hidden;
+  height: 180px;
+  border-radius: $border-radius;
+  cursor: crosshair;
+  touch-action: none;
+  flex-shrink: 0;
+
+  @media (min-width: 380px) {
+    height: 200px;
+  }
+}
+
+.color-picker__canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.color-picker__cursor {
+  position: absolute;
+  width: $cursor-size;
+  height: $cursor-size;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.3),
+    0 1px 4px rgba(0, 0, 0, 0.4);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  transition: none;
+
+  &--dark {
+    border-color: rgba(0, 0, 0, 0.6);
+  }
+}
+
+// ─── Controls row: hue slider + preview ───────────────────────────────────────
+
+.color-picker__controls {
+  display: flex;
+  align-items: center;
+  gap: $spacing;
+}
+
+// Rainbow strip is the track div itself — input sits absolutely centred over it
+// so the input never contributes to layout height.
+.color-picker__hue-track {
+  flex: 1;
+  position: relative;
+  height: $track-height;
+  border-radius: calc($track-height / 2);
+  background: linear-gradient(
+    to right,
+    #f00   0%,
+    #ff0  17%,
+    #0f0  33%,
+    #0ff  50%,
+    #00f  67%,
+    #f0f  83%,
+    #f00 100%
+  );
+}
+
+.color-picker__hue-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  height: $thumb-size;
+  background: transparent;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+
+  &::-webkit-slider-runnable-track {
+    height: $thumb-size;
+    background: transparent;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: $thumb-size;
+    height: $thumb-size;
+    border-radius: 50%;
+    background: #fff;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+    margin-top: 0;
+    transition: transform 0.12s ease, box-shadow 0.12s ease;
+  }
+
+  &::-moz-range-track {
+    height: $thumb-size;
+    background: transparent;
+  }
+
+  // ── Moz thumb ─────────────────────────────────────────────────────────────
+  &::-moz-range-thumb {
+    width: $thumb-size;
+    height: $thumb-size;
+    border-radius: 50%;
+    background: #fff;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+    transition: transform 0.12s ease, box-shadow 0.12s ease;
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible::-webkit-slider-thumb {
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.35),
+      0 0 0 3px var(--accent-color-tint);
+  }
+
+  &:focus-visible::-moz-range-thumb {
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.35),
+      0 0 0 3px var(--accent-color-tint);
+  }
+
+  &:hover::-webkit-slider-thumb {
+    transform: scale(1.15);
+  }
+
+  &:hover::-moz-range-thumb {
+    transform: scale(1.15);
+  }
+
+  &:active::-webkit-slider-thumb {
+    transform: scale(1.2);
+  }
+
+  &:active::-moz-range-thumb {
+    transform: scale(1.2);
+  }
+}
+
+.color-picker__preview {
+  width: $preview-size;
+  height: $preview-size;
+  border-radius: 50%;
+  border: 1px solid var(--divider);
+  flex-shrink: 0;
+}
+
+// ─── Text inputs ──────────────────────────────────────────────────────────────
+
+.color-picker__inputs {
+  display: flex;
+  gap: calc($spacing * 0.5);
+}
+
+.color-picker__input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+
+  &--hex {
+    flex: 2;
+  }
+
+  label {
+    font-size: 0.7rem;
+    font-weight: 500;
+    color: var(--secondary-text);
+    text-align: center;
+    line-height: 1;
+    user-select: none;
+  }
+}
+
+.color-picker__hex,
+.color-picker__r,
+.color-picker__g,
+.color-picker__b {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.35rem 0.4rem;
+  border: 1px solid var(--divider);
+  border-radius: $border-radius;
+  font-family: monospace;
+  font-size: 0.8rem;
+  text-align: center;
+  background: var(--secondary-background);
+  color: var(--primary-text);
+  transition: border-color 0.15s, box-shadow 0.15s;
+  outline: none;
+  -moz-appearance: textfield;
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &:focus {
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 2px var(--accent-color-tint);
+  }
+}
+
+// ─── Mobile ───────────────────────────────────────────────────────────────────
+
+@media (max-width: 480px) {
+  .color-picker__field {
+    height: 160px;
+  }
+
+  .color-picker__hue-slider {
+    height: $thumb-size-touch;
+
+    &::-webkit-slider-runnable-track { height: $thumb-size-touch; }
+    &::-webkit-slider-thumb          { width: $thumb-size-touch; height: $thumb-size-touch; }
+    &::-moz-range-track              { height: $thumb-size-touch; }
+    &::-moz-range-thumb              { width: $thumb-size-touch; height: $thumb-size-touch; }
+  }
+
+  .color-picker__hex,
+  .color-picker__r,
+  .color-picker__g,
+  .color-picker__b {
+    font-size: 0.75rem;
+    padding: 0.28rem 0.3rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .color-picker__hue-slider {
+    &::-webkit-slider-thumb,
+    &::-moz-range-thumb {
+      transition: none;
+    }
+  }
+
+  .color-picker__hex,
+  .color-picker__r,
+  .color-picker__g,
+  .color-picker__b {
+    transition: none;
+  }
+}

package/css/datepicker.scss

@@ -104,8 +104,8 @@
 }
 
 .datepicker-day.in-range {
-  background-color: var(--accent-color-lighten);
-  color: var(--accent-color-text);
+  background-color: color-mix(in srgb, var(--accent-color) 15%, transparent);
+  color: var(--primary-text);
   border-radius: 0;
 }
 
@@ -128,7 +128,9 @@
   color: var(--accent-color);
 }
 
-.datepicker-day.selected.today {
+.datepicker-day.selected.today,
+.datepicker-day.range-start.today,
+.datepicker-day.range-end.today {
   color: var(--accent-color-text);
 }
 

package/css/push-menu.scss

@@ -128,6 +128,13 @@ nav.push-menu {
 
 nav li {
   margin: 0;
+  list-style: none;
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
 nav a,

package/css/stepper.scss

@@ -118,7 +118,7 @@ $connector-thickness: 2px;
       border-color: var(--accent-color);
       background: color-mix(in srgb, var(--accent-color) 10%, var(--background));
       color: var(--accent-color);
-      animation: stepper-pulse 2.4s ease-out infinite;
+      animation: stepper-pulse 2.4s ease-out 3;
     }
 
     .stepper-title {