@unabridged/midwest 0.21.1 → 0.22.1

package/app/assets/javascript/midwest.js

@@ -569,10 +569,11 @@ const FORMATTERS = {
   }
 };
 class Input extends Controller {
-  static targets = ["input", "counter", "capsLockWarning", "matchError"];
+  static targets = ["input", "counter", "capsLockWarning", "matchError", "validationError", "validationMessage"];
   static values = {
     match: { type: String, default: "" },
-    autoformat: { type: String, default: "" }
+    autoformat: { type: String, default: "" },
+    validate: { type: Boolean, default: false }
   };
   updateClearButton = null;
   updateCounter = null;
@@ -583,6 +584,10 @@ class Input extends Controller {
   matchSourceListener = null;
   matchSourceElement = null;
   autoformatListener = null;
+  validateBlurListener = null;
+  validateInputListener = null;
+  validateInvalidListener = null;
+  hasTouched = false;
   connect() {
     this.applyColor();
     this.applySearchClear();
@@ -590,6 +595,7 @@ class Input extends Controller {
     this.applyPassword();
     this.applyMatch();
     this.applyAutoformat();
+    this.applyValidation();
   }
   disconnect() {
     if (this.updateClearButton) {
@@ -628,6 +634,18 @@ class Input extends Controller {
       this.inputTarget.removeEventListener("blur", this.autoformatListener);
       this.autoformatListener = null;
     }
+    if (this.validateBlurListener) {
+      this.inputTarget.removeEventListener("blur", this.validateBlurListener);
+      this.validateBlurListener = null;
+    }
+    if (this.validateInputListener) {
+      this.inputTarget.removeEventListener("input", this.validateInputListener);
+      this.validateInputListener = null;
+    }
+    if (this.validateInvalidListener) {
+      this.inputTarget.removeEventListener("invalid", this.validateInvalidListener);
+      this.validateInvalidListener = null;
+    }
   }
   increment() {
     const input = this.inputTarget;
@@ -788,10 +806,63 @@ class Input extends Controller {
     };
     this.inputTarget.addEventListener("blur", this.autoformatListener);
   }
+  // Shopify-style inline validation: validates on blur using the HTML5
+  // Constraint Validation API. Errors are shown inline after the first
+  // blur ("touched"), then re-validated on each input keystroke so the
+  // error clears as soon as the field becomes valid.
+  applyValidation() {
+    if (!this.validateValue)
+      return;
+    const showValidationError = (message) => {
+      this.element.classList.add("has-error", "theme-red");
+      this.element.classList.remove("is-valid");
+      if (this.hasValidationErrorTarget)
+        this.validationErrorTarget.hidden = false;
+      if (this.hasValidationMessageTarget)
+        this.validationMessageTarget.textContent = message;
+    };
+    const clearValidationError = () => {
+      this.element.classList.remove("has-error", "theme-red");
+      if (this.hasValidationErrorTarget)
+        this.validationErrorTarget.hidden = true;
+      if (this.hasValidationMessageTarget)
+        this.validationMessageTarget.textContent = "";
+      if (this.inputTarget.value) {
+        this.element.classList.add("is-valid");
+      } else {
+        this.element.classList.remove("is-valid");
+      }
+    };
+    const validate = () => {
+      if (!this.inputTarget.checkValidity()) {
+        showValidationError(this.inputTarget.validationMessage);
+      } else {
+        clearValidationError();
+      }
+    };
+    this.validateBlurListener = () => {
+      this.hasTouched = true;
+      validate();
+    };
+    this.validateInputListener = () => {
+      if (!this.hasTouched)
+        return;
+      validate();
+    };
+    this.validateInvalidListener = (e) => {
+      e.preventDefault();
+      this.hasTouched = true;
+      showValidationError(this.inputTarget.validationMessage);
+    };
+    this.inputTarget.addEventListener("blur", this.validateBlurListener);
+    this.inputTarget.addEventListener("input", this.validateInputListener);
+    this.inputTarget.addEventListener("invalid", this.validateInvalidListener);
+  }
 }
 
 class File extends Controller {
-  static targets = ["input", "output"];
+  static targets = ["input", "output", "dropzone"];
+  dragCounter = 0;
   // Arrow function so `this` is stable for add/removeEventListener pairing.
   handleChange = () => {
     this.renderPreviews();
@@ -801,8 +872,41 @@ class File extends Controller {
   }
   disconnect() {
     this.inputTarget.removeEventListener("change", this.handleChange);
+    this.dragCounter = 0;
+  }
+  // --- Drag-and-drop ---
+  dragenter(e) {
+    e.preventDefault();
+    this.dragCounter++;
+    this.dropzoneTarget.classList.add("is-dragover");
+  }
+  dragover(e) {
+    e.preventDefault();
+  }
+  dragleave(e) {
+    e.preventDefault();
+    this.dragCounter--;
+    if (this.dragCounter <= 0) {
+      this.dragCounter = 0;
+      this.dropzoneTarget.classList.remove("is-dragover");
+    }
+  }
+  drop(e) {
+    e.preventDefault();
+    this.dragCounter = 0;
+    this.dropzoneTarget.classList.remove("is-dragover");
+    if (!e.dataTransfer?.files.length)
+      return;
+    this.inputTarget.files = e.dataTransfer.files;
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  browse() {
+    this.inputTarget.click();
   }
+  // --- Preview rendering ---
   renderPreviews() {
+    if (!this.hasOutputTarget)
+      return;
     this.outputTarget.innerHTML = "";
     this.files.forEach((file) => {
       this.outputTarget.appendChild(this.buildPreview(file));
@@ -3314,6 +3418,18 @@ class FormLiveSummary extends Controller {
       const selected = Array.from(ac.querySelectorAll(".midwest-autocomplete-tokens .value")).map((el) => el.textContent?.trim()).filter(Boolean).join(", ");
       fields.push({ label, value: selected || "\u2014" });
     });
+    form.querySelectorAll(".midwest-date-picker").forEach((picker) => {
+      if (this.element.contains(picker))
+        return;
+      const input = picker.querySelector('[data-midwest-date-picker-target="input"]');
+      if (!input?.name)
+        return;
+      const labelEl = picker.querySelector(".midwest-form-group__top label");
+      const label = labelEl?.textContent?.trim() || this.prettifyName(input.name.replace(/\[.*\]$/, ""));
+      const display = picker.querySelector('[data-midwest-date-picker-target="display"] .value');
+      const value = display?.textContent?.trim() || "";
+      fields.push({ label, value: value || "\u2014" });
+    });
     const seenTreeNames = /* @__PURE__ */ new Set();
     form.querySelectorAll(".midwest-tree-view").forEach((tree) => {
       if (this.element.contains(tree))
@@ -3502,22 +3618,6 @@ class ConfirmationController extends Controller {
   }
 }
 
-class AvatarGroup extends Controller {
-  static targets = ["overflow", "hidden"];
-  expand() {
-    this.element.classList.add("is-expanding");
-    this.hiddenTargets.forEach((wrapper) => {
-      wrapper.classList.add("is-visible");
-    });
-    if (this.hasOverflowTarget) {
-      this.overflowTarget.classList.add("avatar-overflow-hiding");
-      this.overflowTarget.addEventListener("transitionend", () => {
-        this.overflowTarget.remove();
-      }, { once: true });
-    }
-  }
-}
-
 class Chart extends Controller {
   static targets = ["tooltip", "svg"];
   static values = { tooltipEnabled: { type: Boolean, default: true } };
@@ -5853,6 +5953,608 @@ class Repeatable extends Controller {
   }
 }
 
+const VALIDATORS = {
+  min_length: (v, n) => v.length >= n,
+  uppercase: (v, n) => (v.match(/[A-Z]/g) || []).length >= n,
+  lowercase: (v, n) => (v.match(/[a-z]/g) || []).length >= n,
+  number: (v, n) => (v.match(/[0-9]/g) || []).length >= n,
+  special: (v, n) => (v.match(/[^A-Za-z0-9]/g) || []).length >= n
+};
+class PasswordRequirements extends Controller {
+  static targets = ["requirement", "list", "complete", "strength", "strengthLabel", "inline", "panel"];
+  static values = {
+    input: { type: String, default: "" },
+    anchored: { type: Boolean, default: false },
+    anchorName: { type: String, default: "" },
+    inline: { type: Boolean, default: false },
+    inlineAnchorName: { type: String, default: "" }
+  };
+  sourceElement = null;
+  inputListener = null;
+  focusListener = null;
+  blurListener = null;
+  connect() {
+    if (!this.inputValue)
+      return;
+    this.sourceElement = document.querySelector(this.inputValue);
+    if (!this.sourceElement)
+      return;
+    this.inputListener = () => this.validate();
+    this.sourceElement.addEventListener("input", this.inputListener);
+    this.applyAnchorNames();
+    if (this.inlineValue) {
+      this.sourceElement.classList.add("has-inline-password-requirements");
+    }
+    if (this.anchoredValue) {
+      this.applyAnchor();
+    }
+    this.validate();
+  }
+  disconnect() {
+    if (this.sourceElement) {
+      if (this.inputListener)
+        this.sourceElement.removeEventListener("input", this.inputListener);
+      if (this.focusListener)
+        this.sourceElement.removeEventListener("focus", this.focusListener);
+      if (this.blurListener)
+        this.sourceElement.removeEventListener("blur", this.blurListener);
+      if (this.anchoredValue || this.inlineValue) {
+        this.sourceElement.style.removeProperty("anchor-name");
+      }
+      if (this.inlineValue) {
+        this.sourceElement.classList.remove("has-inline-password-requirements");
+      }
+    }
+    this.inputListener = null;
+    this.focusListener = null;
+    this.blurListener = null;
+    this.sourceElement = null;
+  }
+  applyAnchorNames() {
+    if (!this.sourceElement)
+      return;
+    const names = [];
+    if (this.anchoredValue && this.anchorNameValue)
+      names.push(this.anchorNameValue);
+    if (this.inlineValue && this.inlineAnchorNameValue)
+      names.push(this.inlineAnchorNameValue);
+    if (names.length > 0) {
+      this.sourceElement.style.setProperty("anchor-name", names.join(", "));
+    }
+  }
+  applyAnchor() {
+    if (!this.sourceElement || !this.anchorNameValue)
+      return;
+    this.focusListener = () => this.showPopover();
+    this.blurListener = () => this.hidePopover();
+    this.sourceElement.addEventListener("focus", this.focusListener);
+    this.sourceElement.addEventListener("blur", this.blurListener);
+    if (document.activeElement === this.sourceElement) {
+      this.showPopover();
+    }
+  }
+  get popoverElement() {
+    return this.hasPanelTarget ? this.panelTarget : this.element;
+  }
+  showPopover() {
+    try {
+      this.popoverElement.showPopover?.();
+    } catch {
+    }
+  }
+  hidePopover() {
+    try {
+      this.popoverElement.hidePopover?.();
+    } catch {
+    }
+  }
+  validate() {
+    const value = this.sourceElement?.value ?? "";
+    let allMet = true;
+    let metCount = 0;
+    const total = this.requirementTargets.length;
+    this.requirementTargets.forEach((li) => {
+      const type = li.dataset.requirementType ?? "";
+      let met = false;
+      if (type === "pattern") {
+        const pattern = li.dataset.requirementPattern;
+        if (pattern) {
+          try {
+            met = new RegExp(pattern).test(value);
+          } catch {
+            met = false;
+          }
+        }
+      } else {
+        const count = parseInt(li.dataset.requirementCount ?? "1", 10);
+        const validator = VALIDATORS[type];
+        met = validator ? validator(value, count) : false;
+      }
+      li.classList.toggle("is-met", met);
+      const label = li.querySelector(".requirement-label")?.textContent ?? "";
+      li.setAttribute("aria-label", `${label}: ${met ? "met" : "not met"}`);
+      if (met)
+        metCount++;
+      if (!met)
+        allMet = false;
+    });
+    const complete = allMet && value.length > 0;
+    this.popoverElement.classList.toggle("is-complete", complete);
+    if (this.hasListTarget)
+      this.listTarget.hidden = complete;
+    if (this.hasCompleteTarget)
+      this.completeTarget.hidden = !complete;
+    if (this.hasStrengthTarget)
+      this.updateStrength(metCount, total, value.length > 0);
+    if (this.inlineValue)
+      this.updateInlineIndicator(metCount, total, value.length > 0);
+  }
+  updateStrength(met, total, hasValue) {
+    const percentage = total > 0 && hasValue ? Math.round(met / total * 100) : 0;
+    const fill = this.strengthTarget.querySelector(".progress-fill");
+    const track = this.strengthTarget.querySelector('[role="progressbar"]');
+    if (fill)
+      fill.style.width = `${percentage}%`;
+    if (track)
+      track.setAttribute("aria-valuenow", String(percentage));
+    let state = "danger";
+    let label = "Weak";
+    if (percentage >= 100) {
+      state = "success";
+      label = "Strong";
+    } else if (percentage >= 60) {
+      state = "alert";
+      label = "Fair";
+    }
+    const meter = this.strengthTarget.querySelector(".midwest-progress-bar");
+    if (meter) {
+      meter.classList.remove("theme-red", "theme-yellow", "theme-green");
+      const themeClass = { danger: "theme-red", alert: "theme-yellow", success: "theme-green" }[state];
+      if (themeClass)
+        meter.classList.add(themeClass);
+    }
+    if (this.hasStrengthLabelTarget) {
+      this.strengthLabelTarget.textContent = label;
+    }
+  }
+  updateInlineIndicator(met, total, hasValue) {
+    if (!this.hasInlineTarget)
+      return;
+    const el = this.inlineTarget;
+    const percentage = total > 0 && hasValue ? Math.round(met / total * 100) : 0;
+    const fill = el.querySelector(".progress-circular-fill");
+    const svg = el.querySelector('[role="progressbar"]');
+    if (fill) {
+      const r = parseFloat(fill.getAttribute("r") ?? "0");
+      const circumference = 2 * Math.PI * r;
+      const offset = circumference * (1 - percentage / 100);
+      fill.setAttribute("stroke-dashoffset", String(offset));
+    }
+    if (svg)
+      svg.setAttribute("aria-valuenow", String(percentage));
+    let themeClass = "theme-red";
+    if (percentage >= 100) {
+      themeClass = "theme-green";
+    } else if (percentage >= 60) {
+      themeClass = "theme-yellow";
+    }
+    el.classList.remove("theme-red", "theme-yellow", "theme-green");
+    el.classList.add(themeClass);
+  }
+}
+
+class CodeBlock extends Controller {
+  static targets = ["source"];
+  async copy() {
+    const text = this.sourceTarget.textContent || "";
+    await navigator.clipboard.writeText(text.trim());
+    const button = this.element.querySelector(".code-block-copy");
+    if (!button)
+      return;
+    button.classList.add("is-copied");
+    setTimeout(() => button.classList.remove("is-copied"), 2e3);
+  }
+}
+
+class DatePicker extends Controller {
+  static targets = ["input", "display", "trigger", "popover", "grid", "monthLabel"];
+  static values = {
+    month: String,
+    min: String,
+    max: String
+  };
+  currentMonth = /* @__PURE__ */ new Date();
+  connect() {
+    if (this.monthValue) {
+      this.currentMonth = this.parseDate(this.monthValue) || /* @__PURE__ */ new Date();
+    }
+    this.popoverTarget.addEventListener("toggle", this.handleToggle);
+    this.gridTarget.addEventListener("keydown", this.handleGridKeydown);
+  }
+  disconnect() {
+    this.popoverTarget.removeEventListener("toggle", this.handleToggle);
+    this.gridTarget.removeEventListener("keydown", this.handleGridKeydown);
+  }
+  toggle() {
+    this.popoverTarget.togglePopover();
+  }
+  handleToggle = (event) => {
+    const popover = event.target;
+    const open = popover.matches(":popover-open");
+    this.triggerTarget.setAttribute("aria-expanded", String(open));
+    if (open) {
+      requestAnimationFrame(() => this.focusGridDate());
+    } else {
+      this.triggerTarget.focus();
+    }
+  };
+  selectDate(event) {
+    const button = event.currentTarget;
+    const dateStr = button.dataset.date;
+    if (!dateStr)
+      return;
+    this.inputTarget.value = dateStr;
+    const date = this.parseDate(dateStr);
+    if (date) {
+      this.updateDisplayText(this.formatDisplay(date));
+      this.currentMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+      this.monthValue = this.formatISO(this.currentMonth);
+    }
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }));
+    this.renderCalendar();
+    this.popoverTarget.hidePopover();
+  }
+  selectToday() {
+    const today = /* @__PURE__ */ new Date();
+    const dateStr = this.formatISO(today);
+    if (this.isDisabledDate(today))
+      return;
+    this.inputTarget.value = dateStr;
+    this.updateDisplayText(this.formatDisplay(today));
+    this.currentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+    this.monthValue = this.formatISO(this.currentMonth);
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }));
+    this.renderCalendar();
+    this.popoverTarget.hidePopover();
+  }
+  clear() {
+    this.inputTarget.value = "";
+    this.updateDisplayText(this.element.dataset.placeholder || "Select a date");
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }));
+    this.renderCalendar();
+    this.popoverTarget.hidePopover();
+  }
+  prevMonth() {
+    this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1, 1);
+    this.monthValue = this.formatISO(this.currentMonth);
+    this.renderCalendar();
+  }
+  nextMonth() {
+    this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1, 1);
+    this.monthValue = this.formatISO(this.currentMonth);
+    this.renderCalendar();
+  }
+  // -- Keyboard navigation (WAI-ARIA grid pattern) --
+  handleGridKeydown = (event) => {
+    const button = event.target;
+    if (!button.dataset?.date)
+      return;
+    const current = this.parseDate(button.dataset.date);
+    if (!current)
+      return;
+    const next = this.nextDateForKey(event.key, current, event.shiftKey);
+    if (!next)
+      return;
+    event.preventDefault();
+    if (this.isDisabledDate(next))
+      return;
+    if (next.getMonth() !== this.currentMonth.getMonth() || next.getFullYear() !== this.currentMonth.getFullYear()) {
+      this.currentMonth = new Date(next.getFullYear(), next.getMonth(), 1);
+      this.monthValue = this.formatISO(this.currentMonth);
+      this.renderCalendar();
+    }
+    this.focusButton(next);
+  };
+  // -- Calendar rendering --
+  renderCalendar() {
+    const year = this.currentMonth.getFullYear();
+    const month = this.currentMonth.getMonth();
+    this.monthLabelTarget.textContent = new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(this.currentMonth);
+    const firstDay = new Date(year, month, 1);
+    const startDate = new Date(firstDay);
+    startDate.setDate(startDate.getDate() - startDate.getDay());
+    const lastDay = new Date(year, month + 1, 0);
+    const endDate = new Date(lastDay);
+    endDate.setDate(endDate.getDate() + (6 - endDate.getDay()));
+    const selectedValue = this.inputTarget.value;
+    const today = this.formatISO(/* @__PURE__ */ new Date());
+    let html = "";
+    const cursor = new Date(startDate);
+    while (cursor <= endDate) {
+      html += "<tr>";
+      for (let i = 0; i < 7; i++) {
+        const dateStr = this.formatISO(cursor);
+        const isOutside = cursor.getMonth() !== month;
+        const isSelected = dateStr === selectedValue;
+        const isToday = dateStr === today;
+        const isDisabled = this.isDisabledDate(cursor);
+        const classes = ["date-picker-day"];
+        if (isOutside)
+          classes.push("is-outside");
+        if (isSelected)
+          classes.push("is-selected");
+        if (isToday)
+          classes.push("is-today");
+        if (isDisabled)
+          classes.push("is-disabled");
+        const ariaLabel = new Intl.DateTimeFormat("en-US", { month: "long", day: "numeric", year: "numeric" }).format(cursor);
+        html += `<td role="gridcell">`;
+        html += `<button type="button" class="${classes.join(" ")}"${isDisabled ? " disabled" : ""}`;
+        html += ` tabindex="-1"`;
+        html += ` data-date="${dateStr}" data-action="midwest-date-picker#selectDate"`;
+        html += ` aria-label="${ariaLabel}"${isSelected ? ' aria-selected="true"' : ""}>`;
+        html += `${cursor.getDate()}</button></td>`;
+        cursor.setDate(cursor.getDate() + 1);
+      }
+      html += "</tr>";
+    }
+    this.gridTarget.innerHTML = html;
+    this.setRovingTabindex();
+  }
+  // -- Focus helpers --
+  focusGridDate() {
+    this.setRovingTabindex();
+    const target = this.gridTarget.querySelector('.date-picker-day[tabindex="0"]');
+    target?.focus();
+  }
+  focusButton(date) {
+    const dateStr = this.formatISO(date);
+    const button = this.gridTarget.querySelector(`[data-date="${dateStr}"]`);
+    if (!button)
+      return;
+    this.gridTarget.querySelectorAll('.date-picker-day[tabindex="0"]').forEach((b) => {
+      b.tabIndex = -1;
+    });
+    button.tabIndex = 0;
+    button.focus();
+  }
+  setRovingTabindex() {
+    const selected = this.gridTarget.querySelector(".is-selected");
+    const today = this.gridTarget.querySelector(".is-today:not(.is-outside)");
+    const firstDay = this.gridTarget.querySelector(".date-picker-day:not(.is-outside):not(:disabled)");
+    const target = selected || today || firstDay;
+    if (target)
+      target.tabIndex = 0;
+  }
+  nextDateForKey(key, current, shift) {
+    switch (key) {
+      case "ArrowRight":
+        return this.addDays(current, 1);
+      case "ArrowLeft":
+        return this.addDays(current, -1);
+      case "ArrowDown":
+        return this.addDays(current, 7);
+      case "ArrowUp":
+        return this.addDays(current, -7);
+      case "Home":
+        return this.addDays(current, -current.getDay());
+      case "End":
+        return this.addDays(current, 6 - current.getDay());
+      case "PageUp":
+        return this.shiftMonth(current, shift ? -12 : -1);
+      case "PageDown":
+        return this.shiftMonth(current, shift ? 12 : 1);
+      default:
+        return null;
+    }
+  }
+  // -- Date arithmetic --
+  addDays(date, days) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+  }
+  shiftMonth(date, delta) {
+    const target = new Date(date.getFullYear(), date.getMonth() + delta, 1);
+    const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+    const day = Math.min(date.getDate(), lastDay);
+    return new Date(target.getFullYear(), target.getMonth(), day);
+  }
+  // -- Utilities --
+  isDisabledDate(date) {
+    if (this.hasMinValue) {
+      const min = this.parseDate(this.minValue);
+      if (min && date < min)
+        return true;
+    }
+    if (this.hasMaxValue) {
+      const max = this.parseDate(this.maxValue);
+      if (max && date > max)
+        return true;
+    }
+    return false;
+  }
+  parseDate(str) {
+    const parts = str.split("-").map(Number);
+    if (parts.length < 3)
+      return null;
+    return new Date(parts[0], parts[1] - 1, parts[2]);
+  }
+  formatISO(date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  }
+  updateDisplayText(text) {
+    const valueEl = this.displayTarget.querySelector(".value");
+    if (valueEl) {
+      valueEl.textContent = text;
+    }
+  }
+  formatDisplay(date) {
+    return new Intl.DateTimeFormat("en-US", { month: "long", day: "numeric", year: "numeric" }).format(date);
+  }
+}
+
+class TimePicker extends Controller {
+  static targets = ["input", "display", "trigger", "popover", "list", "periodGroup"];
+  static values = {
+    step: { type: Number, default: 15 },
+    period: { type: String, default: "AM" },
+    min: String,
+    max: String
+  };
+  selectedHour12 = null;
+  selectedMinutes = null;
+  connect() {
+    this.popoverTarget.addEventListener("toggle", this.handleToggle);
+    this.listTarget.addEventListener("keydown", this.handleKeydown);
+    const currentValue = this.inputTarget.value;
+    if (currentValue) {
+      const [h, m] = currentValue.split(":").map(Number);
+      this.periodValue = h >= 12 ? "PM" : "AM";
+      this.selectedHour12 = h % 12 || 12;
+      this.selectedMinutes = m;
+    }
+  }
+  disconnect() {
+    this.popoverTarget.removeEventListener("toggle", this.handleToggle);
+    this.listTarget.removeEventListener("keydown", this.handleKeydown);
+  }
+  handleToggle = (event) => {
+    const popover = event.target;
+    const open = popover.matches(":popover-open");
+    this.triggerTarget.setAttribute("aria-expanded", String(open));
+    if (open) {
+      requestAnimationFrame(() => this.focusSelectedOption());
+    } else {
+      this.triggerTarget.focus();
+    }
+  };
+  selectTime(event) {
+    const option = event.currentTarget;
+    this.selectOption(option);
+  }
+  setPeriod(event) {
+    const button = event.currentTarget;
+    const period = button.dataset.period;
+    if (!period)
+      return;
+    this.periodValue = period;
+    this.updatePeriodButtons();
+    this.commitValue();
+  }
+  selectOption(option) {
+    const hour = Number(option.dataset.hour);
+    const minutes = Number(option.dataset.minutes);
+    this.selectedHour12 = hour;
+    this.selectedMinutes = minutes;
+    this.updateSelectedOption(option);
+    this.commitValue();
+    this.popoverTarget.hidePopover();
+  }
+  commitValue() {
+    if (this.selectedHour12 === null || this.selectedMinutes === null)
+      return;
+    const hour24 = this.to24h(this.selectedHour12, this.periodValue);
+    const timeStr = `${String(hour24).padStart(2, "0")}:${String(this.selectedMinutes).padStart(2, "0")}`;
+    this.inputTarget.value = timeStr;
+    this.updateDisplayText(this.formatDisplay(this.selectedHour12, this.selectedMinutes, this.periodValue));
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  to24h(hour12, period) {
+    if (period === "AM") {
+      return hour12 === 12 ? 0 : hour12;
+    }
+    return hour12 === 12 ? 12 : hour12 + 12;
+  }
+  formatDisplay(hour12, minutes, period) {
+    return `${hour12}:${String(minutes).padStart(2, "0")} ${period}`;
+  }
+  updatePeriodButtons() {
+    this.periodGroupTarget.querySelectorAll(".time-picker-period-btn").forEach((btn) => {
+      const isActive = btn.dataset.period === this.periodValue;
+      btn.classList.toggle("is-active", isActive);
+      btn.setAttribute("aria-checked", String(isActive));
+    });
+  }
+  updateSelectedOption(selected) {
+    this.listTarget.querySelectorAll(".time-picker-option").forEach((opt) => {
+      const isMatch = opt === selected;
+      opt.classList.toggle("is-selected", isMatch);
+      opt.setAttribute("aria-selected", String(isMatch));
+      opt.tabIndex = isMatch ? 0 : -1;
+    });
+  }
+  focusSelectedOption() {
+    const selected = this.listTarget.querySelector(".is-selected");
+    const target = selected || this.listTarget.querySelector(".time-picker-option");
+    if (!target)
+      return;
+    if (!selected) {
+      target.tabIndex = 0;
+    }
+    target.focus();
+    this.scrollToOption(target);
+  }
+  scrollToOption(option) {
+    const container = this.listTarget;
+    const optionTop = option.offsetTop;
+    const optionHeight = option.offsetHeight;
+    const containerHeight = container.clientHeight;
+    const scrollTop = container.scrollTop;
+    if (optionTop < scrollTop) {
+      container.scrollTop = optionTop;
+    } else if (optionTop + optionHeight > scrollTop + containerHeight) {
+      container.scrollTop = optionTop + optionHeight - containerHeight;
+    }
+  }
+  handleKeydown = (event) => {
+    const current = event.target;
+    if (!current.classList.contains("time-picker-option"))
+      return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.selectOption(current);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.popoverTarget.hidePopover();
+      return;
+    }
+    const next = this.nextOptionForKey(event.key, current);
+    if (next) {
+      event.preventDefault();
+      current.tabIndex = -1;
+      next.tabIndex = 0;
+      next.focus();
+      this.scrollToOption(next);
+    }
+  };
+  nextOptionForKey(key, current) {
+    const options = Array.from(this.listTarget.querySelectorAll(".time-picker-option"));
+    const index = options.indexOf(current);
+    switch (key) {
+      case "ArrowDown":
+        return options[index + 1] || null;
+      case "ArrowUp":
+        return options[index - 1] || null;
+      case "Home":
+        return options[0] || null;
+      case "End":
+        return options[options.length - 1] || null;
+      default:
+        return null;
+    }
+  }
+  updateDisplayText(text) {
+    const valueEl = this.displayTarget.querySelector(".value");
+    if (valueEl) {
+      valueEl.textContent = text;
+    }
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -5869,7 +6571,6 @@ function registerMidwestControllers(application) {
   application.register("midwest-form", Form);
   application.register("midwest-badge", Badge);
   application.register("midwest-confirmation", ConfirmationController);
-  application.register("midwest-avatar-group", AvatarGroup);
   application.register("midwest-chart", Chart);
   application.register("midwest-range", Range);
   application.register("midwest-rating", Rating);
@@ -5885,6 +6586,10 @@ function registerMidwestControllers(application) {
   application.register("midwest-tree-view", TreeView);
   application.register("midwest-command-palette", CommandPalette);
   application.register("midwest-repeatable", Repeatable);
+  application.register("midwest-password-requirements", PasswordRequirements);
+  application.register("midwest-code-block", CodeBlock);
+  application.register("midwest-date-picker", DatePicker);
+  application.register("midwest-time-picker", TimePicker);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };