Remove inline-handler → window.* contract (issue #28)

Finish the behavioural refactor from #28: no first-party JS lives on the
global object solely to be reachable from a server-rendered inline on*
attribute, and no inline Alpine blobs remain in the filter bar / year picker.

- Filter-bar collapse: drop the inline onclick for a delegated click listener
  on the persistent <filter-bar> custom element (data-filter-bar-toggle). The
  inner #filter-bar body is htmx-swapped while connectedCallback does not re-run,
  so delegation on the host preserves the swap-survival the inline handler had.
- YearPicker: convert the Alpine x-data/x-on/x-ref/_pickerInstance f-string into
  a <year-picker> custom element with typed props (YearPickerProps). Behavior
  moves to ts/elements/year-picker.ts; ts/year_picker.ts and _YEAR_PICKER_MEDIA
  are removed. The builder lives in primitives.py (next to YearPicker) to avoid a
  circular import; registration stays in custom_elements.py for codegen.
- Add bindPopupDismiss (ts/utils.ts): shared Escape + outside-click dismiss with
  a cleanup return and an extraInside hook for popups mounted on document.body.
  Adopted by date-range-picker.ts (1:1) and year-picker.ts (Datepicker popup is
  body-mounted, passed as an extra inside root).

Follow-up #49 tracks unifying popup/dismiss/positioning across the remaining
dropdown/search-select/Flowbite cases.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

ts/elements/date-range-picker.ts

@@ -20,6 +20,7 @@
  * NB: class strings below are emitted verbatim so the Tailwind scanner picks
  * them up — keep them as plain literals.
  */
+import { bindPopupDismiss } from "../utils.js";
 
 type Anchor = "" | "start" | "end";
 
@@ -517,22 +518,13 @@ function createCalendarState(
       closePopup();
     });
 
-  const onKeyDown = (event: KeyboardEvent): void => {
-    if (event.key === "Escape" && state.open) closePopup();
-  };
-  const onMouseDown = (event: MouseEvent): void => {
-    if (state.open && !picker.contains(event.target as Node)) closePopup();
-  };
-  document.addEventListener("keydown", onKeyDown);
-  document.addEventListener("mousedown", onMouseDown);
+  const cleanup = bindPopupDismiss({
+    host: picker,
+    isOpen: () => state.open,
+    close: closePopup,
+  });
 
-  return {
-    state,
-    cleanup() {
-      document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("mousedown", onMouseDown);
-    },
-  };
+  return { state, cleanup };
 }
 
 function initPicker(picker: HTMLElement): () => void {

ts/elements/filter-bar.ts

@@ -403,6 +403,16 @@ class FilterBarElement extends HTMLElement {
     const form = this.querySelector<HTMLFormElement>("form");
     if (!form) return;
 
+    // Delegated on the persistent custom element so the toggle keeps working
+    // after the inner #filter-bar body is htmx-swapped — connectedCallback does
+    // not re-run for inner swaps, so a direct listener on the button would be
+    // lost (this is why the toggle was previously an inline onclick).
+    this.addEventListener("click", (event) => {
+      if ((event.target as Element).closest("[data-filter-bar-toggle]")) {
+        this.querySelector("#filter-bar-body")?.classList.toggle("hidden");
+      }
+    });
+
     form.addEventListener("submit", (event) => {
       event.preventDefault();
       const filter = buildFilterJSON(form);

ts/elements/year-picker.ts

@@ -0,0 +1,81 @@
+/**
+ * YearPicker — custom element wrapping the Flowbite-datepicker year grid behind
+ * the YearPicker component (common/components/primitives.py).
+ *
+ * The component renders a toggle <button> plus a hidden #year-picker-input and
+ * carries selected-year / available-years / url-template as typed props. This
+ * turns the input into a year-level Datepicker, toggles it from the button, and
+ * navigates to the chosen year's URL. Datepicker comes from the vendored UMD
+ * bundle (datepicker.umd.js), a classic script loaded before this module runs.
+ *
+ * The Datepicker popup is appended to document.body, so its built-in
+ * outside-click handler is bypassed (it only fires when the input is focused,
+ * and our input is unfocusable). bindPopupDismiss handles Escape + outside
+ * click instead, treating the body-mounted popup as "inside".
+ */
+import { readYearPickerProps } from "../generated/props.js";
+import { bindPopupDismiss } from "../utils.js";
+
+declare const Datepicker: any;
+
+class YearPickerElement extends HTMLElement {
+  private cleanup: (() => void) | null = null;
+
+  connectedCallback(): void {
+    const { selectedYear, availableYears, urlTemplate } = readYearPickerProps(this);
+    const input = this.querySelector<HTMLInputElement>("#year-picker-input");
+    const toggle = this.querySelector<HTMLElement>("[data-year-picker-toggle]");
+    if (!input || !toggle) return;
+
+    const currentYear = new Date().getFullYear();
+    const enabledYears = new Set(
+      availableYears
+        .split(",")
+        .map((part) => parseInt(part.trim(), 10))
+        .filter((year) => !isNaN(year))
+    );
+
+    const picker = new Datepicker(input, {
+      pickLevel: 2,
+      format: "yyyy",
+      minDate: new Date(1999, 0, 1),
+      maxDate: new Date(currentYear, 11, 31),
+      autohide: false,
+      orientation: "bottom end",
+      showOnClick: false,
+      showOnFocus: false,
+      beforeShowYear: (date: Date) => ({ enabled: enabledYears.has(date.getFullYear()) }),
+    });
+
+    picker.element.addEventListener("changeDate", (event: Event) => {
+      const year = (event as CustomEvent).detail.date?.getFullYear();
+      if (year && urlTemplate) {
+        window.location.href = urlTemplate.replace("__year__", String(year));
+      }
+    });
+
+    if (selectedYear) {
+      picker.dates = [new Date(parseInt(selectedYear, 10), 0, 1)];
+      picker.update();
+    }
+
+    toggle.addEventListener("click", () => {
+      if (picker.active) picker.hide();
+      else picker.show();
+    });
+
+    this.cleanup = bindPopupDismiss({
+      host: this,
+      isOpen: () => picker.active,
+      close: () => picker.hide(),
+      extraInside: () => [picker.picker?.element],
+    });
+  }
+
+  disconnectedCallback(): void {
+    this.cleanup?.();
+    this.cleanup = null;
+  }
+}
+
+customElements.define("year-picker", YearPickerElement);