@dodlhuat/basix 1.3.3 → 1.3.5

package/README.md

@@ -1,4 +1,4 @@
-# Basix 1.3.3
+# Basix 1.3.5
 
 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.
@@ -830,25 +830,91 @@ 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.
+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 |
+
 ### 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/badge.scss

@@ -97,3 +97,11 @@
     &.badge-error   { background: var(--error); }
   }
 }
+
+[data-theme="dark"] {
+  .badge-solid {
+    &.badge-success { color: var(--background); }
+    &.badge-warning { color: var(--background); }
+    &.badge-error   { color: var(--background); }
+  }
+}

package/css/button.scss

@@ -60,7 +60,7 @@ button,
   }
 
   &.active {
-    background: var(--divider);
+    background: var(--accent-color-tint);
     color: var(--accent-color);
   }
 
@@ -172,29 +172,75 @@ button.button-error {
 
   .button-success,
   button.button-success {
-    @include button-variant-dark(var(--success));
+    color: var(--background);
+    &:hover:not(:disabled) { background: color-mix(in srgb, var(--success) 82%, white); }
+    &:active:not(:disabled) { background: color-mix(in srgb, var(--success) 70%, white); }
+    &.is-loading::after { color: var(--background); }
   }
 
   .button-warning,
   button.button-warning {
-    @include button-variant-dark(var(--warning));
+    color: var(--background);
+    &:hover:not(:disabled) { background: color-mix(in srgb, var(--warning) 82%, white); }
+    &:active:not(:disabled) { background: color-mix(in srgb, var(--warning) 70%, white); }
+    &.is-loading::after { color: var(--background); }
   }
 
   .button-error,
   button.button-error {
-    @include button-variant-dark(var(--error));
+    color: var(--background);
+    &:hover:not(:disabled) { background: color-mix(in srgb, var(--error) 82%, white); }
+    &:active:not(:disabled) { background: color-mix(in srgb, var(--error) 70%, white); }
+    &.is-loading::after { color: var(--background); }
   }
 
-  .button-primary,
-  button.button-primary,
-  .button-success,
-  button.button-success,
-  .button-warning,
-  button.button-warning,
-  .button-error,
-  button.button-error {
-    &.is-loading::after {
-      color: var(--primary-text);
-    }
+  .button-primary.is-loading::after,
+  button.button-primary.is-loading::after {
+    color: var(--primary-text);
+  }
+}
+
+// Size variants
+.button-sm,
+button.button-sm {
+  padding: calc($spacing * 0.35) calc($spacing * 0.75);
+  font-size: 0.8125rem;
+}
+
+.button-lg,
+button.button-lg {
+  padding: calc($spacing * 0.8) calc($spacing * 1.75);
+  font-size: 1.0625rem;
+}
+
+// Outline variant
+.button-outline,
+button.button-outline {
+  background: transparent;
+  border: 1px solid var(--divider);
+  color: var(--primary-text);
+
+  &:hover:not(:disabled) {
+    background: var(--hover);
+    border-color: color-mix(in srgb, var(--divider) 50%, var(--primary-text));
   }
+
+  &:active:not(:disabled) {
+    background: var(--secondary-background);
+  }
+}
+
+// Icon-only button — square, equal padding
+.button-icon,
+button.button-icon {
+  padding: calc($spacing * 0.5);
+  width: 2.25rem;
+  height: 2.25rem;
+  flex-shrink: 0;
+}
+
+// Pill variant
+.button-pill,
+button.button-pill {
+  border-radius: $radius-xl;
 }

package/css/chips.scss

@@ -39,6 +39,16 @@
         outline: none;
         @include focus-glow();
       }
+
+      &.selected {
+        background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+        color: var(--accent-color);
+        border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
+
+        &:hover {
+          background: color-mix(in srgb, var(--accent-color) 18%, var(--background));
+        }
+      }
     }
 
     &.closeable {

package/css/colors.scss

@@ -30,4 +30,8 @@ body {
 
 .default-bg {
   background: var(--divider);
+}
+
+.info-bg {
+  background: var(--accent-color);
 }

package/css/docs.scss

@@ -191,10 +191,6 @@
 
     code {
         font-size: 0.8em;
-        background: var(--secondary-background);
-        border: 1px solid var(--divider);
-        border-radius: 0.25rem;
-        padding: 0.1em 0.35em;
     }
 
     .docs-demo {

package/css/dropdown.scss

@@ -14,6 +14,20 @@
     }
   }
 
+  &.drop-up {
+    > .dropdown-menu {
+      top: auto;
+      bottom: 100%;
+      margin-top: 0;
+      margin-bottom: 6px;
+      transform: translateY(8px);
+    }
+
+    &.active > .dropdown-menu {
+      transform: translateY(0);
+    }
+  }
+
   .dropdown-menu {
     position: absolute;
     top: 100%;

package/css/modal.scss

@@ -88,6 +88,27 @@
   }
 }
 
+// Coloured variants — border echoes the type colour, close icon and header text go white
+.modal-success { border-color: color-mix(in srgb, var(--success)      35%, transparent); }
+.modal-error   { border-color: color-mix(in srgb, var(--error)        35%, transparent); }
+.modal-warning { border-color: color-mix(in srgb, var(--warning)      35%, transparent); }
+.modal-info    { border-color: color-mix(in srgb, var(--accent-color) 35%, transparent); }
+
+.modal-success,
+.modal-error,
+.modal-warning,
+.modal-info {
+  .close {
+    color: rgba(255, 255, 255, 0.8);
+    &:hover { color: #fff; }
+  }
+
+  .header {
+    color: #fff;
+    border-bottom-color: rgba(255, 255, 255, 0.2);
+  }
+}
+
 @media screen and (max-width: 768px) {
   .modal-wrapper.is-visible .modal {
     transform: translateY(0);

package/css/sidebar-nav.scss

@@ -57,6 +57,10 @@
   svg { display: block; }
 }
 
+.sidebar-close {
+  display: none;
+}
+
 @media (max-width: 768px) {
   .sidebar-toggle {
     display: flex;
@@ -77,4 +81,25 @@
   .sidebar-main {
     margin-left: 0;
   }
+
+  .sidebar-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--secondary-background);
+    border: none;
+    border-radius: $border-radius;
+    padding: 0.5rem 1.25rem;
+    cursor: pointer;
+    color: var(--primary-text);
+    gap: 0.4rem;
+    font-size: 0.875rem;
+    white-space: nowrap;
+
+    &:hover { background: var(--divider); }
+  }
 }