@dodlhuat/basix 1.4.1 → 1.4.3

package/README.md

@@ -1,4 +1,4 @@
-# Basix 1.4.1
+# Basix 1.4.3
 
 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.
@@ -9,6 +9,24 @@ A demo can be found here: <a href="http://www.andibauer.at/basix/" target="_blan
 
 ## Migration Guide
 
+### 1.4.2 → 1.4.3
+
+No breaking changes.
+
+- **`DatePicker`** — the `timePicker: true` hour/minute picker is now an Android-style analog clock instead of up/down spinners. Tap or drag to pick the hour, then the minute, on a 24-hour dual-ring face (outer ring = even hours, inner ring = odd hours). `selectedHours`/`selectedMinutes` and all existing options are unchanged.
+- **`DatePicker`** — clock interactions (hour/minute selection, AM/PM-less 24h switching) now only re-render the time picker instead of rebuilding the whole calendar, avoiding unnecessary DOM churn.
+- **Internal** — the remaining per-component `AbortController` boilerplate (introduced in 1.4.1) has been consolidated into a small shared `ListenerGroup` utility (`src/listeners.ts`) used by every component's event lifecycle.
+- **CSS bug fix** — several component hover states (`DatePicker`'s Set button and nav buttons, `CodeViewer`'s copy button, `FlyoutMenu`'s close button) were silently overridden by the global button reset due to a CSS specificity collision, so the intended hover color/background never rendered. Fixed by scoping each rule against the global reset.
+- **CSS cleanup** — consolidated duplicated `box-shadow` glow/focus-ring declarations across `Calendar`, `Editor`, `Stepper`, `RangeSlider`, `TimePicker`, form fields, and `VirtualDropdown` into shared mixins (`field-shadow-rest`, `field-shadow-hover`, `field-shadow-focus`) in `mixins.scss`. No visual change.
+- **Cleanup** — removed unused legacy files (`form-builder.js`, `guitar-chords.js`/`.css`, `lazy-loader.js`, `request.js`) and a stale, pre-integration copy of `calendar.css`, plus dead `.datepicker-select` CSS.
+- **Type fixes** — resolved two pre-existing TypeScript errors in `Tabs` and `VirtualDropdown` (`keydown` listeners typed against `Element` instead of `HTMLElement`).
+
+### 1.4.1 → 1.4.2
+
+No breaking changes.
+
+- **`RangeSlider`** — added a two-thumb start/end variant, `RangeSliderRange`. Wrap two `<input type="range">` elements in `.range-slider.range-slider--range` and initialise with `new RangeSliderRange(container)`. The thumbs cannot cross each other; read the current values with `values()`, which returns `[start, end]`.
+
 ### 1.4.0 → 1.4.1
 
 No breaking changes. Internal code quality pass across all TypeScript source files:
@@ -189,6 +207,25 @@ new RangeSlider(document.querySelector('.range-slider input'));
 RangeSlider.initAll();
 ```
 
+**Range variant** — a two-thumb slider for selecting a start and end value. Wrap two range inputs in `.range-slider.range-slider--range` and initialise with `RangeSliderRange`. The thumbs cannot cross each other.
+
+``` html
+<div class="range-slider range-slider--range">
+    <input type="range" min="0" max="100" value="25" aria-label="Minimum value" />
+    <input type="range" min="0" max="100" value="75" aria-label="Maximum value" />
+</div>
+```
+
+``` js
+const slider = new RangeSliderRange(document.querySelector('.range-slider--range'));
+
+// Read the current [start, end] values
+const [start, end] = slider.values();
+
+// Or initialise all range sliders on the page at once
+RangeSliderRange.initAll();
+```
+
 ---
 
 ## Navigation

package/css/calendar.scss

@@ -1,4 +1,5 @@
 @use "parameters" as *;
+@use "mixins" as *;
 
 .cal {
   --cal-spacing-xs: 4px;
@@ -207,7 +208,7 @@
     color: var(--cal-accent-text);
     border-radius: 50%;
     font-weight: 700;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
+    @include focus-glow($tint: 20%, $size: 3px, $color: var(--cal-accent));
   }
 
   &.has-events::after {
@@ -402,7 +403,7 @@
   &.is-today span {
     background: var(--cal-today-ring);
     color: var(--cal-accent-text);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
+    @include focus-glow($tint: 20%, $size: 3px, $color: var(--cal-accent));
   }
 
 }
@@ -660,7 +661,7 @@
   &.is-today {
     background: var(--cal-today-ring);
     color: var(--cal-accent-text);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
+    @include focus-glow($tint: 20%, $size: 3px, $color: var(--cal-accent));
   }
 }
 

package/css/code-viewer.scss

@@ -36,7 +36,7 @@
   transition: background 0.2s;
 }
 
-.copy-button:hover {
+.copy-button:hover:not(:disabled) {
   background: #5a5a5a;
 }
 

package/css/datepicker.scss

@@ -42,7 +42,7 @@
   transition: background-color 0.2s;
 }
 
-.datepicker-nav:hover {
+.datepicker-nav:hover:not(:disabled) {
   background-color: var(--accent-color-lighten);
   color: var(--accent-color-text);
 }
@@ -53,21 +53,6 @@
   font-weight: 600;
 }
 
-.datepicker-select {
-  border: none;
-  background: none;
-  font-family: inherit;
-  font-weight: 600;
-  font-size: 1rem;
-  cursor: pointer;
-  padding: calc($spacing / 4);
-  border-radius: calc($spacing / 4);
-}
-
-.datepicker-select:hover {
-  background-color: var(--accent-color-lighten);
-}
-
 .datepicker-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -187,83 +172,111 @@
   transition: background-color 0.2s;
 }
 
-.datepicker-title-btn:hover {
+.datepicker-title-btn:hover:not(:disabled) {
   background-color: var(--accent-color-lighten);
 }
 
-.datepicker-time {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.datepicker-clock {
   border-top: 1px solid var(--divider);
   margin-top: $spacing;
   padding-top: $spacing;
 }
 
-.datepicker-time-label {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--primary-text);
-}
-
-.datepicker-time-controls {
+.datepicker-clock-header {
   display: flex;
   align-items: center;
-  gap: calc($spacing / 4);
-}
-
-.datepicker-time-separator {
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--primary-text);
-  padding: 0 calc($spacing / 8);
+  justify-content: center;
+  gap: $spacing;
+  margin-bottom: $spacing;
 }
 
-.datepicker-time-spinner {
+.datepicker-clock-display {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: calc($spacing / 8);
+  align-items: baseline;
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1;
 }
 
-.datepicker-time-btn {
-  background: none;
-  border: 1px solid var(--divider);
-  border-radius: $border-radius;
+.datepicker-clock-display-segment {
   cursor: pointer;
-  padding: calc($spacing / 8) calc($spacing / 2);
-  font-size: 0.6rem;
-  line-height: 1;
-  color: var(--primary-text);
-  transition: background-color 0.2s;
+  color: var(--text-muted);
+  border-radius: calc($border-radius / 2);
+  padding: 0 calc($spacing / 8);
+  transition: color 0.2s, background-color 0.2s;
 
   &:hover {
     background-color: var(--accent-color-lighten);
-    color: var(--accent-color-text);
+  }
+
+  &.active {
+    color: var(--accent-color);
   }
 }
 
-.datepicker-time-display {
-  width: 2.5rem;
-  text-align: center;
-  font-size: 1rem;
-  font-weight: 600;
-  font-family: inherit;
-  border: 1px solid var(--divider);
-  border-radius: $border-radius;
-  padding: calc($spacing / 4) 0;
-  background: var(--background);
+.datepicker-clock-display-separator {
+  color: var(--text-muted);
+}
+
+.datepicker-clock-face {
+  position: relative;
+  width: 240px;
+  height: 240px;
+  margin: 0 auto;
+  border-radius: 50%;
+  background-color: var(--accent-color-lighten);
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+}
+
+.datepicker-clock-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--accent-color);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.datepicker-clock-hand {
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  width: 2px;
+  height: 38%;
+  margin-left: -1px;
+  background-color: var(--accent-color);
+  transform-origin: bottom center;
+  pointer-events: none;
+}
+
+.datepicker-clock-number {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.875rem;
   color: var(--primary-text);
-  -moz-appearance: textfield;
+  pointer-events: none;
 
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  &.inner {
+    width: 26px;
+    height: 26px;
+    font-size: 0.75rem;
+    color: var(--text-muted);
   }
 
-  &:focus {
-    @include focus-ring(-1px);
+  &.selected {
+    background-color: var(--accent-color);
+    color: var(--accent-color-text);
   }
 }
 
@@ -279,10 +292,10 @@
   font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: background-color 0.2s;
 
-  &:hover {
-    opacity: 0.9;
+  &:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--accent-color) 85%, black);
   }
 }
 

package/css/editor.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 .editor {
   background: var(--secondary-background);
@@ -551,7 +552,7 @@
 
   &:focus {
     border-color: color-mix(in srgb, var(--accent-color) 60%, transparent);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 12%, transparent);
+    @include focus-glow($tint: 12%, $size: 2px);
   }
 
   &::placeholder {

package/css/flyout-menu.scss

@@ -157,7 +157,8 @@ body {
   transition: color 0.2s;
 }
 
-.close-menu:hover {
+.close-menu:hover:not(:disabled) {
+  background: none;
   color: #fff;
 }
 

package/css/form.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 @keyframes field-error-shake {
   0%, 100% { transform: translateX(0); }
@@ -41,9 +42,7 @@ textarea, select, .select .dropdown, input {
   min-height: calc($form-height * 1.3);
   font-size: $spacing;
   color: var(--primary-text);
-  box-shadow:
-    inset 0 1.5px 4px rgba(0, 0, 0, 0.05),
-    0 1px 2px rgba(0, 0, 0, 0.04);
+  @include field-shadow-rest();
   transition:
     border-color 0.16s ease,
     box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
@@ -58,17 +57,12 @@ textarea, select, .select .dropdown, input {
 
   &:hover:not(:focus):not(:disabled):not([readonly]) {
     border-color: color-mix(in srgb, var(--accent-color) 45%, var(--divider));
-    box-shadow:
-      inset 0 1.5px 4px rgba(0, 0, 0, 0.045),
-      0 2px 8px rgba(0, 0, 0, 0.07);
+    @include field-shadow-hover();
   }
 
   &:focus {
     border-color: var(--accent-color);
-    box-shadow:
-      inset 0 1px 3px rgba(0, 0, 0, 0.03),
-      0 0 0 3.5px color-mix(in srgb, var(--accent-color) 13%, transparent),
-      0 2px 12px rgba(0, 0, 0, 0.06);
+    @include field-shadow-focus();
   }
 
   &:disabled {
@@ -105,9 +99,7 @@ select {
     background: var(--background);
     height: calc($form-height * 1.3);
     line-height: calc($form-height * 1.3);
-    box-shadow:
-      inset 0 1.5px 4px rgba(0, 0, 0, 0.05),
-      0 1px 2px rgba(0, 0, 0, 0.04);
+    @include field-shadow-rest();
     transition:
       border-color 0.16s ease,
       box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
@@ -115,19 +107,14 @@ select {
 
     &:hover {
       border-color: color-mix(in srgb, var(--accent-color) 45%, var(--divider));
-      box-shadow:
-        inset 0 1.5px 4px rgba(0, 0, 0, 0.045),
-        0 2px 8px rgba(0, 0, 0, 0.07);
+      @include field-shadow-hover();
     }
 
     &:focus,
     &:focus-visible {
       outline: none;
       border-color: var(--accent-color);
-      box-shadow:
-        inset 0 1px 3px rgba(0, 0, 0, 0.03),
-        0 0 0 3.5px color-mix(in srgb, var(--accent-color) 13%, transparent),
-        0 2px 12px rgba(0, 0, 0, 0.06);
+      @include field-shadow-focus();
     }
 
     &::after {
@@ -142,9 +129,7 @@ select {
 
   .dropdown.open .dropdown-selected {
     border-color: var(--accent-color);
-    box-shadow:
-      inset 0 1px 3px rgba(0, 0, 0, 0.03),
-      0 0 0 3.5px color-mix(in srgb, var(--accent-color) 13%, transparent);
+    @include field-shadow-focus($ambient: false);
 
     &::after {
       transform: rotate(180deg);
@@ -315,16 +300,12 @@ select {
     input, textarea, select {
       border-color: var(--error);
       background-color: color-mix(in srgb, var(--error) 3%, var(--background));
-      box-shadow:
-        inset 0 1.5px 4px rgba(0, 0, 0, 0.05),
-        0 1px 2px rgba(0, 0, 0, 0.04);
+      @include field-shadow-rest();
       animation: field-error-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 
       &:focus {
         border-color: var(--error);
-        box-shadow:
-          inset 0 1px 3px rgba(0, 0, 0, 0.03),
-          0 0 0 3.5px color-mix(in srgb, var(--error) 13%, transparent);
+        @include field-shadow-focus($color: var(--error), $ambient: false);
       }
     }
 
@@ -347,9 +328,7 @@ select {
 
       &:focus {
         border-color: var(--success);
-        box-shadow:
-          inset 0 1px 3px rgba(0, 0, 0, 0.03),
-          0 0 0 3.5px color-mix(in srgb, var(--success) 13%, transparent);
+        @include field-shadow-focus($color: var(--success), $ambient: false);
       }
     }
 

package/css/mixins.scss

@@ -6,3 +6,28 @@
 @mixin focus-glow($tint: 35%, $size: 3px, $color: var(--accent-color)) {
   box-shadow: 0 0 0 #{$size} color-mix(in srgb, #{$color} #{$tint}, transparent);
 }
+
+@mixin field-shadow-rest() {
+  box-shadow:
+    inset 0 1.5px 4px rgba(0, 0, 0, 0.05),
+    0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+@mixin field-shadow-hover() {
+  box-shadow:
+    inset 0 1.5px 4px rgba(0, 0, 0, 0.045),
+    0 2px 8px rgba(0, 0, 0, 0.07);
+}
+
+@mixin field-shadow-focus($color: var(--accent-color), $ambient: true) {
+  @if $ambient {
+    box-shadow:
+      inset 0 1px 3px rgba(0, 0, 0, 0.03),
+      0 0 0 3.5px color-mix(in srgb, #{$color} 13%, transparent),
+      0 2px 12px rgba(0, 0, 0, 0.06);
+  } @else {
+    box-shadow:
+      inset 0 1px 3px rgba(0, 0, 0, 0.03),
+      0 0 0 3.5px color-mix(in srgb, #{$color} 13%, transparent);
+  }
+}

package/css/range-slider.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 $track-height: 4px;
 $thumb-size: 1.1rem;
@@ -70,30 +71,30 @@ $thumb-size: 1.1rem;
 
     &:hover::-webkit-slider-thumb {
       transform: scale(1.15);
-      box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 15%, transparent);
+      @include focus-glow($tint: 15%, $size: 6px);
     }
 
     &:hover::-moz-range-thumb {
       transform: scale(1.15);
-      box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 15%, transparent);
+      @include focus-glow($tint: 15%, $size: 6px);
     }
 
     &:active::-webkit-slider-thumb {
       transform: scale(1.22);
-      box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-color) 18%, transparent);
+      @include focus-glow($tint: 18%, $size: 9px);
     }
 
     &:active::-moz-range-thumb {
       transform: scale(1.22);
-      box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-color) 18%, transparent);
+      @include focus-glow($tint: 18%, $size: 9px);
     }
 
     &:focus-visible::-webkit-slider-thumb {
-      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 25%, transparent);
+      @include focus-glow($tint: 25%, $size: 4px);
     }
 
     &:focus-visible::-moz-range-thumb {
-      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 25%, transparent);
+      @include focus-glow($tint: 25%, $size: 4px);
     }
 
     &:disabled {
@@ -127,4 +128,60 @@ $thumb-size: 1.1rem;
       }
     }
   }
+
+  &.range-slider--range {
+    position: relative;
+    height: $thumb-size;
+    padding: 0;
+
+    input[type="range"] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      pointer-events: none;
+
+      &::-webkit-slider-runnable-track {
+        background: transparent;
+      }
+
+      &::-moz-range-track {
+        background: transparent;
+      }
+
+      &::-moz-range-progress {
+        background: transparent;
+      }
+
+      &::-webkit-slider-thumb {
+        pointer-events: auto;
+      }
+
+      &::-moz-range-thumb {
+        pointer-events: auto;
+      }
+    }
+
+    .range-slider-fill {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: $track-height;
+      transform: translateY(-50%);
+      border-radius: $track-height;
+      pointer-events: none;
+      background: linear-gradient(
+        to right,
+        var(--divider) 0%,
+        var(--divider) var(--range-start, 0%),
+        var(--accent-color) var(--range-start, 0%),
+        var(--accent-color) var(--range-end, 100%),
+        var(--divider) var(--range-end, 100%),
+        var(--divider) 100%
+      );
+    }
+  }
 }

package/css/stepper.scss

@@ -1,11 +1,12 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 $indicator-size: 2rem;
 $connector-thickness: 2px;
 
 @keyframes stepper-pulse {
-  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 35%, transparent); }
+  0%   { @include focus-glow($tint: 35%, $size: 0); }
   65%  { box-shadow: 0 0 0 6px transparent; }
   100% { box-shadow: 0 0 0 0 transparent; }
 }