@wildwinter/app-shell 0.31.0 → 0.32.0

package/dist/index.d.cts

@@ -19,7 +19,20 @@ declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, classNameOrPr
  *  Its rollover is the THEMED one (`data-tip`), so an app that has called
  *  `initTooltips()` gets our bubble rather than the platform's. */
 declare function iconBtn(glyph: string, title: string, onClick: () => void, disabled?: boolean, danger?: boolean): HTMLButtonElement;
-/** A captioned field: `<label class="shell-labelled"><span class="shell-fieldcap">…</span>control</label>`. */
+/**
+ * A captioned field: `<label class="shell-labelled"><span class="shell-fieldcap">…</span>control</label>`.
+ *
+ * The label is pointed at the field it captions, EXPLICITLY, and never at a button. A `<label>` with no
+ * `for` forwards a click to its first labelable descendant, and buttons are labelable - so a caption
+ * wrapped around a control containing buttons (`tagChips`, whose every chip carries a remove button)
+ * turns every click on the row's dead space into a press of the FIRST button in it. That shipped:
+ * patterkit/patter#44, where clicking a Game Data list value anywhere but its ✕ deleted the first value
+ * in the list. Reported as "clicking a value removes the wrong one", which is not a wrong-index bug at
+ * all - the click never reached the chip.
+ *
+ * When the control holds no labelable field (a chips editor with the add input removed, say), this is a
+ * plain `<div>`: no caption behaviour is better than a caption that presses something.
+ */
 declare function labelled(label: string, control: HTMLElement): HTMLElement;
 /** Swap item `i` with its neighbour `i + delta` IN PLACE (the up/down reorder list editors share);
  *  a no-op when the target is out of range. Returns whether anything moved. */

package/dist/index.d.ts

@@ -19,7 +19,20 @@ declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, classNameOrPr
  *  Its rollover is the THEMED one (`data-tip`), so an app that has called
  *  `initTooltips()` gets our bubble rather than the platform's. */
 declare function iconBtn(glyph: string, title: string, onClick: () => void, disabled?: boolean, danger?: boolean): HTMLButtonElement;
-/** A captioned field: `<label class="shell-labelled"><span class="shell-fieldcap">…</span>control</label>`. */
+/**
+ * A captioned field: `<label class="shell-labelled"><span class="shell-fieldcap">…</span>control</label>`.
+ *
+ * The label is pointed at the field it captions, EXPLICITLY, and never at a button. A `<label>` with no
+ * `for` forwards a click to its first labelable descendant, and buttons are labelable - so a caption
+ * wrapped around a control containing buttons (`tagChips`, whose every chip carries a remove button)
+ * turns every click on the row's dead space into a press of the FIRST button in it. That shipped:
+ * patterkit/patter#44, where clicking a Game Data list value anywhere but its ✕ deleted the first value
+ * in the list. Reported as "clicking a value removes the wrong one", which is not a wrong-index bug at
+ * all - the click never reached the chip.
+ *
+ * When the control holds no labelable field (a chips editor with the add input removed, say), this is a
+ * plain `<div>`: no caption behaviour is better than a caption that presses something.
+ */
 declare function labelled(label: string, control: HTMLElement): HTMLElement;
 /** Swap item `i` with its neighbour `i + delta` IN PLACE (the up/down reorder list editors share);
  *  a no-op when the target is out of range. Returns whether anything moved. */

package/dist/index.js

@@ -181,8 +181,13 @@ function iconBtn(glyph, title, onClick, disabled = false, danger = false) {
   return b;
 }
 function labelled(label2, control) {
-  const w = el("label", "shell-labelled");
+  const target = control.matches("input, select, textarea") ? control : control.querySelector("input:not([type=button]):not([type=submit]), select, textarea");
+  const w = el(target ? "label" : "div", "shell-labelled");
   w.append(el("span", "shell-fieldcap", label2), control);
+  if (target) {
+    if (!target.id) target.id = `shell-f-${Math.random().toString(36).slice(2, 9)}`;
+    w.htmlFor = target.id;
+  }
   return w;
 }
 function moveItem(arr, i, delta) {
@@ -976,8 +981,11 @@ function bindPropertyRef(input, onCommit, opts) {
   const list = document.createElement("datalist");
   list.id = `shell-propref-${Math.random().toString(36).slice(2, 9)}`;
   input.setAttribute("list", list.id);
-  input.after(list);
+  const attach = () => {
+    if (!list.isConnected && input.parentNode) input.after(list);
+  };
   const sync = () => {
+    attach();
     const known = opts.known();
     list.replaceChildren(...known.map((k) => {
       const o = document.createElement("option");