--- a/light9/web/floating_color_picker.ts	Fri May 26 15:46:16 2023 -0700
+++ b/light9/web/floating_color_picker.ts	Fri May 26 16:29:29 2023 -0700
@@ -6,7 +6,7 @@
 import color from "onecolor";
 import { SubEvent } from "sub-events";
 
-const log = debug("control");
+const log = debug("control.color.pick");
 
 function clamp(x: number, lo: number, hi: number) {
   return Math.max(lo, Math.min(hi, x));
@@ -256,7 +256,6 @@
 
   private onOutsideMove(pos: ClientCoord) {
     const rp = this.toRainbow(pos);
-    log("rp", rp);
     this.onCanvasMove(rp);
   }
 
@@ -268,7 +267,6 @@
   }
 
   startPick(clickPoint: ClientCoord, startColor: string, onNewHueSatColor: (hsc: string) => void) {
-    log("start pick", clickPoint);
     const el = this.getFloatEl();
 
     let pos: RainbowCoord;
@@ -282,7 +280,6 @@
       clickPoint.x - clamp(pos.x, 0, 400), //
       clickPoint.y - clamp(pos.y, 0, 200)
     );
-    log("rainbow goes to", this.rainbowOrigin);
 
     el.placeRainbow(this.rainbowOrigin);
     setTimeout(() => {
@@ -290,7 +287,6 @@
     }, 1);
 
     el.style.display = "block";
-    log("set listener");
     this.currentListener = onNewHueSatColor;
   }
 

--- a/light9/web/light9-color-picker.ts	Fri May 26 15:46:16 2023 -0700
+++ b/light9/web/light9-color-picker.ts	Fri May 26 16:29:29 2023 -0700
@@ -1,12 +1,11 @@
 import debug from "debug";
 import { css, html, LitElement, PropertyValueMap } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, queryAsync, state } from "lit/decorators.js";
 import color from "onecolor";
-import { SubEvent } from "sub-events";
 import { ClientCoord, pickerFloat } from "./floating_color_picker";
-import { Slider } from "@material/mwc-slider";
+export { Slider } from "@material/mwc-slider";
 
-const log = debug("control");
+const log = debug("control.color");
 type int8 = number;
 
 @customElement("light9-color-picker")
@@ -42,15 +41,17 @@
   render() {
     return html`
       <div id="swatch" style="background-color: ${this.color}; border-color: ${this.hueSatColor}" @mousedown=${this.startFloatingPick}></div>
-      <span id="vee"> V: <mwc-slider id="value" step="1" min="0" max="255" @input=${this.onVSliderChange}></mwc-slider> </span>
+      <span id="vee"> V: <mwc-slider id="value" .value=${this.value} step="1" min="0" max="255" @input=${this.onVSliderChange}></mwc-slider> </span>
     `;
   }
-  @property() color: string = "#000"; // actual output color, computed by value*hueSatColor
-  @property() hueSatColor: string = "#fff"; // always V=1, to be scaled down
-  @property() value: int8 = 0;
+
+  // Selected color. Read/write. Equal to value*hueSatColor. Never null.
+  @property() color: string = "#000";
 
-  @query("#swatch") swatchEl!: HTMLElement;
-  @query("#outOfBounds") outOfBoundsEl!: HTMLElement;
+  @state() hueSatColor: string = "#fff"; // always full value
+  @state() value: int8 = 0;
+
+  @queryAsync("#swatch") swatchEl!: Promise<HTMLElement>;
 
   connectedCallback(): void {
     super.connectedCallback();
@@ -64,25 +65,22 @@
       this.color = color(this.hueSatColor)
         .value(this.value / 255)
         .hex();
-      const sl = this.shadowRoot?.querySelector("#value") as Slider;
-      if (sl) {
-        sl.value = this.value;
-      }
+
+      this.swatchEl.then((sw) => {
+        sw.style.borderColor = this.hueSatColor;
+      });
     }
     super.update(changedProperties);
   }
 
   private onVSliderChange(ev: CustomEvent) {
     this.value = ev.detail.value;
-    this.swatchEl.style.borderColor = this.hueSatColor;
   }
 
   // for outside users of the component
   setColor(col: string) {
-    log(`set color pick to color ${col}`);
-    if (col == "") {
-      col = "#000";
-    }
+    if (col === null) throw new Error("col===null");
+    if (typeof col !== "string") throw new Error("typeof col=" + typeof col);
     this.value = color(col).value() * 255;
 
     // don't update this if only the value changed, or we desaturate