1.8.3

Filter colours to match group
Expand units tick box

assets/js/components.js

@@ -39,7 +39,7 @@ const html = htm.bind(h);
 //    groupedLeft  - bool - fuse right side with a VentPill
 //    isLastChild  - bool - restore right border-radius when no sibling follows
 // -------------------------------------------------------------------
-export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel, buttonLabel, isOn, noHide, groupedLeft, isLastChild }) {
+export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel, buttonLabel, isOn, noHide, groupedLeft, isLastChild, grpClass }) {
   const [open, setOpen] = useState(false);
   const wrapRef = useRef(null);
 
@@ -68,6 +68,7 @@ export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel,
 
   const btnClass = [
     'cs-btn',
+    grpClass || '',
     isOn ? 'on' : '',
     groupedLeft ? 'grouped-left' : '',
     (groupedLeft && isLastChild) ? 'last-child' : '',
@@ -120,9 +121,9 @@ export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel,
 //    label    - string
 //    title    - tooltip string
 // -------------------------------------------------------------------
-export function VentPill({ checked, onChange, label, title }) {
+export function VentPill({ checked, onChange, label, title, grpClass }) {
   return html`
-    <label class=${`cs-vent${checked ? ' on' : ''}`} title=${title}>
+    <label class=${[`cs-vent`, grpClass || '', checked ? 'on' : ''].filter(Boolean).join(' ')} title=${title}>
       <input
         type="checkbox"
         checked=${checked}