3.7

Updated event banner to fit top screen
Updated table thermal colours to max hot and min cold for 2h, 3h & 4h
Ground Lab preview

assets/js/components.js

@@ -7,7 +7,7 @@
 //  Exports (in order of appearance):
 //    CustomSelect({ value, options, onChange, ... })   styled dropdown pill
 //    VentPill({ checked, onChange, label, title })     checkbox fused to pill
-//    RowStepper({ value, onChange, showLabel })        table row-interval stepper
+//    RowStepper({ value, onChange, showLabel, label }) table row-interval stepper
 //    SkyScope({ elev, dt, glob, size })                small porthole per hour
 //    WindVane({ bearing, size })                       compass-arrow widget
 //    CloudIcon({ category, size, elev, dt })           cloud/sun glyph
@@ -271,16 +271,18 @@ export function VentPill({ checked, onChange, label, title, grpClass }) {
 //  props:
 //    value     - 1..4
 //    onChange  - fn(n)
-//    showLabel - draw the "Rows" caption (off inside the Hour header,
+//    showLabel - draw the caption (off inside the table's Rows header,
 //                where the column title already supplies the context)
+//    label     - caption text: "Rows" by default, "Hours" in quick view,
+//                where each card is an hour rather than a table row
 //    min/max   - bounds, so 6h/12h can be added without a redesign
 // -------------------------------------------------------------------
-export function RowStepper({ value, onChange, showLabel = true, min = 1, max = 4 }) {
+export function RowStepper({ value, onChange, showLabel = true, label = 'Rows', min = 1, max = 4 }) {
   const v = Math.min(max, Math.max(min, Number(value) || min));
   const step = (n) => { const next = Math.min(max, Math.max(min, n)); if (next !== v) onChange(next); };
   return html`
     <span class="row-stepper" role="group" aria-label="Row interval">
-      ${showLabel && html`<span class="row-stepper-label">Rows</span>`}
+      ${showLabel && html`<span class="row-stepper-label">${label}</span>`}
       <button type="button" class="row-stepper-btn" disabled=${v <= min}
         title="Finer rows" aria-label="Finer rows - fewer hours per row"
         onClick=${() => step(v - 1)}>−</button>