@unabridged/midwest 0.17.0 → 0.19.0

package/dist/javascript/midwest.js

@@ -548,14 +548,48 @@ class Banner extends Controller {
   }
 }
 
+const FORMATTERS = {
+  phone: (v) => {
+    const d = v.replace(/\D/g, "").slice(0, 10);
+    if (d.length <= 3)
+      return d;
+    if (d.length <= 6)
+      return `(${d.slice(0, 3)}) ${d.slice(3)}`;
+    return `(${d.slice(0, 3)}) ${d.slice(3, 6)}-${d.slice(6)}`;
+  },
+  credit_card: (v) => {
+    const d = v.replace(/\D/g, "").slice(0, 16);
+    return d.match(/.{1,4}/g)?.join(" ") ?? d;
+  },
+  zip: (v) => {
+    const d = v.replace(/\D/g, "");
+    if (d.length <= 5)
+      return d;
+    return `${d.slice(0, 5)}-${d.slice(5, 9)}`;
+  }
+};
 class Input extends Controller {
-  static targets = ["input", "counter"];
+  static targets = ["input", "counter", "capsLockWarning", "matchError"];
+  static values = {
+    match: { type: String, default: "" },
+    autoformat: { type: String, default: "" }
+  };
   updateClearButton = null;
   updateCounter = null;
+  updateCapsLock = null;
+  hideCapsLock = null;
+  matchListener = null;
+  matchInvalidListener = null;
+  matchSourceListener = null;
+  matchSourceElement = null;
+  autoformatListener = null;
   connect() {
     this.applyColor();
     this.applySearchClear();
     this.applyCounter();
+    this.applyPassword();
+    this.applyMatch();
+    this.applyAutoformat();
   }
   disconnect() {
     if (this.updateClearButton) {
@@ -566,6 +600,56 @@ class Input extends Controller {
       this.inputTarget.removeEventListener("input", this.updateCounter);
       this.updateCounter = null;
     }
+    if (this.updateCapsLock) {
+      this.inputTarget.removeEventListener("keydown", this.updateCapsLock);
+      this.inputTarget.removeEventListener("keyup", this.updateCapsLock);
+      this.inputTarget.removeEventListener("mousedown", this.updateCapsLock);
+      this.updateCapsLock = null;
+    }
+    if (this.hideCapsLock) {
+      this.inputTarget.removeEventListener("blur", this.hideCapsLock);
+      this.hideCapsLock = null;
+    }
+    if (this.matchListener) {
+      this.inputTarget.removeEventListener("input", this.matchListener);
+      this.inputTarget.removeEventListener("blur", this.matchListener);
+      this.matchListener = null;
+    }
+    if (this.matchInvalidListener) {
+      this.inputTarget.removeEventListener("invalid", this.matchInvalidListener);
+      this.matchInvalidListener = null;
+    }
+    if (this.matchSourceListener && this.matchSourceElement) {
+      this.matchSourceElement.removeEventListener("input", this.matchSourceListener);
+      this.matchSourceListener = null;
+      this.matchSourceElement = null;
+    }
+    if (this.autoformatListener) {
+      this.inputTarget.removeEventListener("blur", this.autoformatListener);
+      this.autoformatListener = null;
+    }
+  }
+  increment() {
+    const input = this.inputTarget;
+    const step = parseFloat(input.step) || 1;
+    const max = input.max !== "" ? parseFloat(input.max) : Infinity;
+    const newValue = (parseFloat(input.value) || 0) + step;
+    if (newValue <= max) {
+      input.value = String(newValue);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }
+  decrement() {
+    const input = this.inputTarget;
+    const step = parseFloat(input.step) || 1;
+    const min = input.min !== "" ? parseFloat(input.min) : -Infinity;
+    const newValue = (parseFloat(input.value) || 0) - step;
+    if (newValue >= min) {
+      input.value = String(newValue);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
   }
   applyColor() {
     if (this.inputTarget.type !== "color") {
@@ -584,6 +668,20 @@ class Input extends Controller {
     };
     this.inputTarget.addEventListener("input", this.updateCounter);
   }
+  applyPassword() {
+    if (!this.hasCapsLockWarningTarget)
+      return;
+    this.updateCapsLock = (e) => {
+      this.capsLockWarningTarget.hidden = !e.getModifierState("CapsLock");
+    };
+    this.hideCapsLock = () => {
+      this.capsLockWarningTarget.hidden = true;
+    };
+    this.inputTarget.addEventListener("keydown", this.updateCapsLock);
+    this.inputTarget.addEventListener("keyup", this.updateCapsLock);
+    this.inputTarget.addEventListener("mousedown", this.updateCapsLock);
+    this.inputTarget.addEventListener("blur", this.hideCapsLock);
+  }
   applySearchClear() {
     if (this.inputTarget.type !== "search")
       return;
@@ -624,6 +722,72 @@ class Input extends Controller {
       this.inputTarget.focus();
     });
   }
+  // Validates that this field's value matches the value of the element
+  // identified by matchValue (a CSS selector). Uses setCustomValidity to
+  // block form submission. Shows the error inline via the matchError target
+  // rather than the browser's native tooltip (invalid event is suppressed).
+  applyMatch() {
+    if (!this.matchValue)
+      return;
+    const showError = () => {
+      this.element.classList.add("has-error", "theme-red");
+      if (this.hasMatchErrorTarget)
+        this.matchErrorTarget.hidden = false;
+    };
+    const clearError = () => {
+      this.element.classList.remove("has-error", "theme-red");
+      if (this.hasMatchErrorTarget)
+        this.matchErrorTarget.hidden = true;
+    };
+    const validate = () => {
+      const other2 = document.querySelector(this.matchValue);
+      if (!this.inputTarget.value) {
+        this.inputTarget.setCustomValidity("");
+        clearError();
+        return;
+      }
+      if (!other2 || this.inputTarget.value === other2.value) {
+        this.inputTarget.setCustomValidity("");
+        clearError();
+      } else {
+        this.inputTarget.setCustomValidity("Values do not match");
+        showError();
+      }
+    };
+    this.matchListener = validate;
+    this.inputTarget.addEventListener("input", validate);
+    this.inputTarget.addEventListener("blur", validate);
+    this.matchInvalidListener = (e) => {
+      e.preventDefault();
+      showError();
+    };
+    this.inputTarget.addEventListener("invalid", this.matchInvalidListener);
+    const other = document.querySelector(this.matchValue);
+    if (other) {
+      this.matchSourceElement = other;
+      this.matchSourceListener = validate;
+      other.addEventListener("input", validate);
+    }
+  }
+  // Reformats the input value on blur using a named formatter from FORMATTERS.
+  // Dispatches input + change events after reformatting so downstream
+  // listeners (counters, form state) stay in sync.
+  applyAutoformat() {
+    if (!this.autoformatValue)
+      return;
+    const fmt = FORMATTERS[this.autoformatValue];
+    if (!fmt)
+      return;
+    this.autoformatListener = () => {
+      const formatted = fmt(this.inputTarget.value);
+      if (formatted !== this.inputTarget.value) {
+        this.inputTarget.value = formatted;
+        this.inputTarget.dispatchEvent(new Event("input", { bubbles: true }));
+        this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    };
+    this.inputTarget.addEventListener("blur", this.autoformatListener);
+  }
 }
 
 class File extends Controller {
@@ -749,41 +913,9 @@ function getAlignmentSides(placement, rects, rtl) {
   }
   return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
 }
-function getExpandedPlacements(placement) {
-  const oppositePlacement = getOppositePlacement(placement);
-  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
-}
 function getOppositeAlignmentPlacement(placement) {
   return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
 }
-const lrPlacement = ['left', 'right'];
-const rlPlacement = ['right', 'left'];
-const tbPlacement = ['top', 'bottom'];
-const btPlacement = ['bottom', 'top'];
-function getSideList(side, isStart, rtl) {
-  switch (side) {
-    case 'top':
-    case 'bottom':
-      if (rtl) return isStart ? rlPlacement : lrPlacement;
-      return isStart ? lrPlacement : rlPlacement;
-    case 'left':
-    case 'right':
-      return isStart ? tbPlacement : btPlacement;
-    default:
-      return [];
-  }
-}
-function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
-  const alignment = getAlignment(placement);
-  let list = getSideList(getSide(placement), direction === 'start', rtl);
-  if (alignment) {
-    list = list.map(side => side + "-" + alignment);
-    if (flipAlignment) {
-      list = list.concat(list.map(getOppositeAlignmentPlacement));
-    }
-  }
-  return list;
-}
 function getOppositePlacement(placement) {
   const side = getSide(placement);
   return oppositeSideMap[side] + placement.slice(side.length);
@@ -1043,88 +1175,6 @@ const computePosition$1 = async (reference, floating, config) => {
   };
 };
 
-/**
- * Provides data to position an inner element of the floating element so that it
- * appears centered to the reference element.
- * @see https://floating-ui.com/docs/arrow
- */
-const arrow = options => ({
-  name: 'arrow',
-  options,
-  async fn(state) {
-    const {
-      x,
-      y,
-      placement,
-      rects,
-      platform,
-      elements,
-      middlewareData
-    } = state;
-    // Since `element` is required, we don't Partial<> the type.
-    const {
-      element,
-      padding = 0
-    } = evaluate(options, state) || {};
-    if (element == null) {
-      return {};
-    }
-    const paddingObject = getPaddingObject(padding);
-    const coords = {
-      x,
-      y
-    };
-    const axis = getAlignmentAxis(placement);
-    const length = getAxisLength(axis);
-    const arrowDimensions = await platform.getDimensions(element);
-    const isYAxis = axis === 'y';
-    const minProp = isYAxis ? 'top' : 'left';
-    const maxProp = isYAxis ? 'bottom' : 'right';
-    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
-    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
-    const startDiff = coords[axis] - rects.reference[axis];
-    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
-    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
-
-    // DOM platform can return `window` as the `offsetParent`.
-    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
-      clientSize = elements.floating[clientProp] || rects.floating[length];
-    }
-    const centerToReference = endDiff / 2 - startDiff / 2;
-
-    // If the padding is large enough that it causes the arrow to no longer be
-    // centered, modify the padding so that it is centered.
-    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
-    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
-    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
-
-    // Make sure the arrow doesn't overflow the floating element if the center
-    // point is outside the floating element's bounds.
-    const min$1 = minPadding;
-    const max = clientSize - arrowDimensions[length] - maxPadding;
-    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset = clamp(min$1, center, max);
-
-    // If the reference is small enough that the arrow's padding causes it to
-    // to point to nothing for an aligned placement, adjust the offset of the
-    // floating element itself. To ensure `shift()` continues to take action,
-    // a single reset is performed when this is true.
-    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
-    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
-    return {
-      [axis]: coords[axis] + alignmentOffset,
-      data: {
-        [axis]: offset,
-        centerOffset: center - offset - alignmentOffset,
-        ...(shouldAddOffset && {
-          alignmentOffset
-        })
-      },
-      reset: shouldAddOffset
-    };
-  }
-});
-
 function getPlacementList(alignment, autoAlignment, allowedPlacements) {
   const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
   return allowedPlacementsSortedByAlignment.filter(placement => {
@@ -1228,138 +1278,6 @@ const autoPlacement$1 = function (options) {
   };
 };
 
-/**
- * Optimizes the visibility of the floating element by flipping the `placement`
- * in order to keep it in view when the preferred placement(s) will overflow the
- * clipping boundary. Alternative to `autoPlacement`.
- * @see https://floating-ui.com/docs/flip
- */
-const flip = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: 'flip',
-    options,
-    async fn(state) {
-      var _middlewareData$arrow, _middlewareData$flip;
-      const {
-        placement,
-        middlewareData,
-        rects,
-        initialPlacement,
-        platform,
-        elements
-      } = state;
-      const {
-        mainAxis: checkMainAxis = true,
-        crossAxis: checkCrossAxis = true,
-        fallbackPlacements: specifiedFallbackPlacements,
-        fallbackStrategy = 'bestFit',
-        fallbackAxisSideDirection = 'none',
-        flipAlignment = true,
-        ...detectOverflowOptions
-      } = evaluate(options, state);
-
-      // If a reset by the arrow was caused due to an alignment offset being
-      // added, we should skip any logic now since `flip()` has already done its
-      // work.
-      // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
-      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
-        return {};
-      }
-      const side = getSide(placement);
-      const initialSideAxis = getSideAxis(initialPlacement);
-      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
-      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
-      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
-      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
-        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
-      }
-      const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
-      const overflows = [];
-      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
-      if (checkMainAxis) {
-        overflows.push(overflow[side]);
-      }
-      if (checkCrossAxis) {
-        const sides = getAlignmentSides(placement, rects, rtl);
-        overflows.push(overflow[sides[0]], overflow[sides[1]]);
-      }
-      overflowsData = [...overflowsData, {
-        placement,
-        overflows
-      }];
-
-      // One or more sides is overflowing.
-      if (!overflows.every(side => side <= 0)) {
-        var _middlewareData$flip2, _overflowsData$filter;
-        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
-        const nextPlacement = placements[nextIndex];
-        if (nextPlacement) {
-          const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
-          if (!ignoreCrossAxisOverflow ||
-          // We leave the current main axis only if every placement on that axis
-          // overflows the main axis.
-          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
-            // Try next placement and re-run the lifecycle.
-            return {
-              data: {
-                index: nextIndex,
-                overflows: overflowsData
-              },
-              reset: {
-                placement: nextPlacement
-              }
-            };
-          }
-        }
-
-        // First, find the candidates that fit on the mainAxis side of overflow,
-        // then find the placement that fits the best on the main crossAxis side.
-        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
-
-        // Otherwise fallback.
-        if (!resetPlacement) {
-          switch (fallbackStrategy) {
-            case 'bestFit':
-              {
-                var _overflowsData$filter2;
-                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
-                  if (hasFallbackAxisSideDirection) {
-                    const currentSideAxis = getSideAxis(d.placement);
-                    return currentSideAxis === initialSideAxis ||
-                    // Create a bias to the `y` side axis due to horizontal
-                    // reading directions favoring greater width.
-                    currentSideAxis === 'y';
-                  }
-                  return true;
-                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
-                if (placement) {
-                  resetPlacement = placement;
-                }
-                break;
-              }
-            case 'initialPlacement':
-              resetPlacement = initialPlacement;
-              break;
-          }
-        }
-        if (placement !== resetPlacement) {
-          return {
-            reset: {
-              placement: resetPlacement
-            }
-          };
-        }
-      }
-      return {};
-    }
-  };
-};
-
 function getSideOffsets(overflow, rect) {
   return {
     top: overflow.top - rect.height,
@@ -1430,137 +1348,6 @@ const hide$1 = function (options) {
   };
 };
 
-function getBoundingRect(rects) {
-  const minX = min(...rects.map(rect => rect.left));
-  const minY = min(...rects.map(rect => rect.top));
-  const maxX = max(...rects.map(rect => rect.right));
-  const maxY = max(...rects.map(rect => rect.bottom));
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY
-  };
-}
-function getRectsByLine(rects) {
-  const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
-  const groups = [];
-  let prevRect = null;
-  for (let i = 0; i < sortedRects.length; i++) {
-    const rect = sortedRects[i];
-    if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
-      groups.push([rect]);
-    } else {
-      groups[groups.length - 1].push(rect);
-    }
-    prevRect = rect;
-  }
-  return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
-}
-/**
- * Provides improved positioning for inline reference elements that can span
- * over multiple lines, such as hyperlinks or range selections.
- * @see https://floating-ui.com/docs/inline
- */
-const inline = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: 'inline',
-    options,
-    async fn(state) {
-      const {
-        placement,
-        elements,
-        rects,
-        platform,
-        strategy
-      } = state;
-      // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
-      // ClientRect's bounds, despite the event listener being triggered. A
-      // padding of 2 seems to handle this issue.
-      const {
-        padding = 2,
-        x,
-        y
-      } = evaluate(options, state);
-      const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
-      const clientRects = getRectsByLine(nativeClientRects);
-      const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
-      const paddingObject = getPaddingObject(padding);
-      function getBoundingClientRect() {
-        // There are two rects and they are disjoined.
-        if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
-          // Find the first rect in which the point is fully inside.
-          return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback;
-        }
-
-        // There are 2 or more connected rects.
-        if (clientRects.length >= 2) {
-          if (getSideAxis(placement) === 'y') {
-            const firstRect = clientRects[0];
-            const lastRect = clientRects[clientRects.length - 1];
-            const isTop = getSide(placement) === 'top';
-            const top = firstRect.top;
-            const bottom = lastRect.bottom;
-            const left = isTop ? firstRect.left : lastRect.left;
-            const right = isTop ? firstRect.right : lastRect.right;
-            const width = right - left;
-            const height = bottom - top;
-            return {
-              top,
-              bottom,
-              left,
-              right,
-              width,
-              height,
-              x: left,
-              y: top
-            };
-          }
-          const isLeftSide = getSide(placement) === 'left';
-          const maxRight = max(...clientRects.map(rect => rect.right));
-          const minLeft = min(...clientRects.map(rect => rect.left));
-          const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
-          const top = measureRects[0].top;
-          const bottom = measureRects[measureRects.length - 1].bottom;
-          const left = minLeft;
-          const right = maxRight;
-          const width = right - left;
-          const height = bottom - top;
-          return {
-            top,
-            bottom,
-            left,
-            right,
-            width,
-            height,
-            x: left,
-            y: top
-          };
-        }
-        return fallback;
-      }
-      const resetRects = await platform.getElementRects({
-        reference: {
-          getBoundingClientRect
-        },
-        floating: elements.floating,
-        strategy
-      });
-      if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
-        return {
-          reset: {
-            rects: resetRects
-          }
-        };
-      }
-      return {};
-    }
-  };
-};
-
 const originSides = /*#__PURE__*/new Set(['left', 'top']);
 
 // For type backwards-compatibility, the `OffsetOptions` type was also
@@ -1725,158 +1512,6 @@ const shift$1 = function (options) {
     }
   };
 };
-/**
- * Built-in `limiter` that will stop `shift()` at a certain point.
- */
-const limitShift = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    options,
-    fn(state) {
-      const {
-        x,
-        y,
-        placement,
-        rects,
-        middlewareData
-      } = state;
-      const {
-        offset = 0,
-        mainAxis: checkMainAxis = true,
-        crossAxis: checkCrossAxis = true
-      } = evaluate(options, state);
-      const coords = {
-        x,
-        y
-      };
-      const crossAxis = getSideAxis(placement);
-      const mainAxis = getOppositeAxis(crossAxis);
-      let mainAxisCoord = coords[mainAxis];
-      let crossAxisCoord = coords[crossAxis];
-      const rawOffset = evaluate(offset, state);
-      const computedOffset = typeof rawOffset === 'number' ? {
-        mainAxis: rawOffset,
-        crossAxis: 0
-      } : {
-        mainAxis: 0,
-        crossAxis: 0,
-        ...rawOffset
-      };
-      if (checkMainAxis) {
-        const len = mainAxis === 'y' ? 'height' : 'width';
-        const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
-        const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
-        if (mainAxisCoord < limitMin) {
-          mainAxisCoord = limitMin;
-        } else if (mainAxisCoord > limitMax) {
-          mainAxisCoord = limitMax;
-        }
-      }
-      if (checkCrossAxis) {
-        var _middlewareData$offse, _middlewareData$offse2;
-        const len = mainAxis === 'y' ? 'width' : 'height';
-        const isOriginSide = originSides.has(getSide(placement));
-        const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
-        const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
-        if (crossAxisCoord < limitMin) {
-          crossAxisCoord = limitMin;
-        } else if (crossAxisCoord > limitMax) {
-          crossAxisCoord = limitMax;
-        }
-      }
-      return {
-        [mainAxis]: mainAxisCoord,
-        [crossAxis]: crossAxisCoord
-      };
-    }
-  };
-};
-
-/**
- * Provides data that allows you to change the size of the floating element —
- * for instance, prevent it from overflowing the clipping boundary or match the
- * width of the reference element.
- * @see https://floating-ui.com/docs/size
- */
-const size = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: 'size',
-    options,
-    async fn(state) {
-      var _state$middlewareData, _state$middlewareData2;
-      const {
-        placement,
-        rects,
-        platform,
-        elements
-      } = state;
-      const {
-        apply = () => {},
-        ...detectOverflowOptions
-      } = evaluate(options, state);
-      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
-      const side = getSide(placement);
-      const alignment = getAlignment(placement);
-      const isYAxis = getSideAxis(placement) === 'y';
-      const {
-        width,
-        height
-      } = rects.floating;
-      let heightSide;
-      let widthSide;
-      if (side === 'top' || side === 'bottom') {
-        heightSide = side;
-        widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
-      } else {
-        widthSide = side;
-        heightSide = alignment === 'end' ? 'top' : 'bottom';
-      }
-      const maximumClippingHeight = height - overflow.top - overflow.bottom;
-      const maximumClippingWidth = width - overflow.left - overflow.right;
-      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
-      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
-      const noShift = !state.middlewareData.shift;
-      let availableHeight = overflowAvailableHeight;
-      let availableWidth = overflowAvailableWidth;
-      if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
-        availableWidth = maximumClippingWidth;
-      }
-      if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
-        availableHeight = maximumClippingHeight;
-      }
-      if (noShift && !alignment) {
-        const xMin = max(overflow.left, 0);
-        const xMax = max(overflow.right, 0);
-        const yMin = max(overflow.top, 0);
-        const yMax = max(overflow.bottom, 0);
-        if (isYAxis) {
-          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
-        } else {
-          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
-        }
-      }
-      await apply({
-        ...state,
-        availableWidth,
-        availableHeight
-      });
-      const nextDimensions = await platform.getDimensions(elements.floating);
-      if (width !== nextDimensions.width || height !== nextDimensions.height) {
-        return {
-          reset: {
-            rects: true
-          }
-        };
-      }
-      return {};
-    }
-  };
-};
 
 function hasWindow() {
   return typeof window !== 'undefined';
@@ -2742,22 +2377,6 @@ const autoPlacement = autoPlacement$1;
  */
 const shift = shift$1;
 
-/**
- * Optimizes the visibility of the floating element by flipping the `placement`
- * in order to keep it in view when the preferred placement(s) will overflow the
- * clipping boundary. Alternative to `autoPlacement`.
- * @see https://floating-ui.com/docs/flip
- */
-flip;
-
-/**
- * Provides data that allows you to change the size of the floating element —
- * for instance, prevent it from overflowing the clipping boundary or match the
- * width of the reference element.
- * @see https://floating-ui.com/docs/size
- */
-size;
-
 /**
  * Provides data to hide the floating element in applicable situations, such as
  * when it is not in the same clipping context as the reference element.
@@ -2765,25 +2384,6 @@ size;
  */
 const hide = hide$1;
 
-/**
- * Provides data to position an inner element of the floating element so that it
- * appears centered to the reference element.
- * @see https://floating-ui.com/docs/arrow
- */
-arrow;
-
-/**
- * Provides improved positioning for inline reference elements that can span
- * over multiple lines, such as hyperlinks or range selections.
- * @see https://floating-ui.com/docs/inline
- */
-inline;
-
-/**
- * Built-in `limiter` that will stop `shift()` at a certain point.
- */
-limitShift;
-
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -3241,11 +2841,12 @@ const NON_SUBMITTING_INPUT_TYPES = /* @__PURE__ */ new Set([
 ]);
 const FORM_ELEMENT_TAGS = /* @__PURE__ */ new Set(["INPUT", "TEXTAREA", "SELECT"]);
 class Carousel extends Controller {
-  static targets = ["track", "prev", "next", "dot"];
+  static targets = ["track", "prev", "next", "dot", "status"];
   static values = {
     wizard: { type: Boolean, default: false },
     autoplay: { type: Number, default: 0 },
-    loop: { type: Boolean, default: false }
+    loop: { type: Boolean, default: false },
+    fade: { type: Boolean, default: false }
   };
   observer = null;
   _currentIndex = 0;
@@ -3253,7 +2854,11 @@ class Carousel extends Controller {
   _lastTouchX = 0;
   _autoplayTimer = null;
   connect() {
-    this.setupObserver();
+    if (this.fadeValue) {
+      this.initFade();
+    } else {
+      this.setupObserver();
+    }
     this.updateNavigation();
     this.element.addEventListener("keydown", this.handleArrowKeys);
     if (this.wizardValue) {
@@ -3267,6 +2872,8 @@ class Carousel extends Controller {
       this.startAutoplay();
       this.element.addEventListener("mouseenter", this.pauseAutoplay);
       this.element.addEventListener("mouseleave", this.resumeAutoplay);
+      this.element.addEventListener("focusin", this.pauseAutoplay);
+      this.element.addEventListener("focusout", this.resumeAutoplay);
     }
   }
   disconnect() {
@@ -3275,12 +2882,20 @@ class Carousel extends Controller {
     this.element.removeEventListener("keydown", this.handleKeydown);
     this.element.removeEventListener("mouseenter", this.pauseAutoplay);
     this.element.removeEventListener("mouseleave", this.resumeAutoplay);
+    this.element.removeEventListener("focusin", this.pauseAutoplay);
+    this.element.removeEventListener("focusout", this.resumeAutoplay);
     this.trackTarget.removeEventListener("wheel", this.handleWheel);
     this.trackTarget.removeEventListener("touchstart", this.handleTouchStart);
     this.trackTarget.removeEventListener("touchmove", this.handleTouchMove);
     this.stopAutoplay();
   }
   next() {
+    if (this.fadeValue) {
+      const atEnd2 = this._currentIndex >= this.slides.length - 1;
+      const nextIndex = this.loopValue && atEnd2 ? 0 : Math.min(this._currentIndex + 1, this.slides.length - 1);
+      this.activateSlide(nextIndex);
+      return;
+    }
     const atEnd = this._currentIndex >= this.slides.length - 1;
     if (this.loopValue && atEnd) {
       this.slides[0]?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
@@ -3289,6 +2904,12 @@ class Carousel extends Controller {
     }
   }
   previous() {
+    if (this.fadeValue) {
+      const atStart2 = this._currentIndex <= 0;
+      const prevIndex = this.loopValue && atStart2 ? this.slides.length - 1 : Math.max(this._currentIndex - 1, 0);
+      this.activateSlide(prevIndex);
+      return;
+    }
     const atStart = this._currentIndex <= 0;
     if (this.loopValue && atStart) {
       const last = this.slides[this.slides.length - 1];
@@ -3300,6 +2921,10 @@ class Carousel extends Controller {
   goto(event) {
     const button = event.currentTarget;
     const index = parseInt(button.dataset.index ?? "0", 10);
+    if (this.fadeValue) {
+      this.activateSlide(index);
+      return;
+    }
     const slide = this.slides[index];
     slide?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
   }
@@ -3319,10 +2944,13 @@ class Carousel extends Controller {
     this.next();
   }
   scrolled() {
+    if (this.fadeValue)
+      return;
     if (this.wizardValue)
       this.clampToFrontier();
     this.updateCurrentIndex();
     this.updateNavigation();
+    this.announceSlide();
   }
   // Arrow function so `this` is stable for add/removeEventListener pairing.
   // Handles ArrowLeft/ArrowRight for keyboard slide navigation. Skips form
@@ -3395,6 +3023,11 @@ class Carousel extends Controller {
     this._autoplayTimer = null;
   }
   autoplayAdvance() {
+    if (this.fadeValue) {
+      const nextIndex = (this._currentIndex + 1) % this.slides.length;
+      this.activateSlide(nextIndex);
+      return;
+    }
     const atEnd = this._currentIndex >= this.slides.length - 1;
     if (atEnd) {
       const firstSlide = this.slides[0];
@@ -3406,6 +3039,53 @@ class Carousel extends Controller {
   get slides() {
     return Array.from(this.trackTarget.children);
   }
+  // Sets up the fade mode initial state. Marks the first slide active, hides
+  // all others from the accessibility tree, and adds .fade-ready so CSS hands
+  // control over to .is-active.
+  initFade() {
+    this.slides.forEach((slide, i) => {
+      const active = i === 0;
+      slide.classList.toggle("is-active", active);
+      slide.toggleAttribute("inert", !active);
+      slide.setAttribute("aria-hidden", String(!active));
+    });
+    this.element.classList.add("fade-ready");
+    this.syncPagerDots();
+  }
+  // Transitions to the slide at `index` in fade mode by swapping .is-active and
+  // hiding non-active slides from the accessibility tree.
+  activateSlide(index) {
+    this.slides.forEach((slide, i) => {
+      const active = i === index;
+      slide.classList.toggle("is-active", active);
+      slide.toggleAttribute("inert", !active);
+      slide.setAttribute("aria-hidden", String(!active));
+    });
+    this._currentIndex = index;
+    this.updateNavigation();
+    this.syncPagerDots();
+    this.announceSlide();
+  }
+  // Syncs pager dot active state from _currentIndex. Used in fade mode where
+  // IntersectionObserver is not set up (the track doesn't scroll).
+  syncPagerDots() {
+    if (!this.hasDotTarget)
+      return;
+    this.dotTargets.forEach((dot, i) => {
+      dot.classList.toggle("active", i === this._currentIndex);
+      if (i === this._currentIndex) {
+        dot.setAttribute("aria-current", "true");
+      } else {
+        dot.removeAttribute("aria-current");
+      }
+    });
+  }
+  // Updates the sr-only live region so screen readers announce the new slide.
+  announceSlide() {
+    if (!this.hasStatusTarget)
+      return;
+    this.statusTarget.textContent = `Slide ${this._currentIndex + 1} of ${this.slides.length}`;
+  }
   // Snaps scroll position back to the frontier if the user somehow scrolled
   // past it (e.g. momentum after a partially-blocked gesture).
   clampToFrontier() {
@@ -3458,15 +3138,35 @@ class Carousel extends Controller {
     this.slides.forEach((slide) => this.observer?.observe(slide));
   }
   updateNavigation() {
+    if (this.fadeValue) {
+      const atStart2 = this._currentIndex <= 0;
+      const atEnd2 = this._currentIndex >= this.slides.length - 1;
+      if (this.hasPrevTarget) {
+        const hide = atStart2 && !this.loopValue;
+        this.prevTarget.classList.toggle("hide", hide);
+        this.prevTarget.disabled = hide;
+      }
+      if (this.hasNextTarget) {
+        const hide = atEnd2 && !this.loopValue;
+        this.nextTarget.classList.toggle("hide", hide);
+        this.nextTarget.disabled = hide;
+      }
+      return;
+    }
     const track = this.trackTarget;
     const atStart = track.scrollLeft <= 0;
     const atEnd = track.scrollLeft >= track.scrollWidth - track.clientWidth - 1;
-    if (this.hasPrevTarget)
-      this.prevTarget.classList.toggle("hide", atStart && !this.loopValue);
+    if (this.hasPrevTarget) {
+      const hide = atStart && !this.loopValue;
+      this.prevTarget.classList.toggle("hide", hide);
+      this.prevTarget.disabled = hide;
+    }
     if (this.hasNextTarget) {
       const atLastSlide = this._currentIndex >= this.slides.length - 1;
       const frontierReached = this.wizardValue && this._currentIndex >= this._maxUnlocked;
-      this.nextTarget.classList.toggle("hide", (atEnd || atLastSlide || frontierReached) && !this.loopValue);
+      const hide = (atEnd || atLastSlide || frontierReached) && !this.loopValue;
+      this.nextTarget.classList.toggle("hide", hide);
+      this.nextTarget.disabled = hide;
     }
     if (this.wizardValue && this.hasDotTarget) {
       this.dotTargets.forEach((dot, i) => {
@@ -3492,11 +3192,13 @@ class FormLiveSummary extends Controller {
     this.form?.addEventListener("input", this.render);
     this.form?.addEventListener("change", this.render);
     this.form?.addEventListener("midwest-autocomplete:change", this.render);
+    this.form?.addEventListener("midwest-color-picker:update", this.render);
   }
   disconnect() {
     this.form?.removeEventListener("input", this.render);
     this.form?.removeEventListener("change", this.render);
     this.form?.removeEventListener("midwest-autocomplete:change", this.render);
+    this.form?.removeEventListener("midwest-color-picker:update", this.render);
   }
   get form() {
     return this.element.closest("form");
@@ -3514,15 +3216,18 @@ class FormLiveSummary extends Controller {
     }
     const dl = document.createElement("dl");
     dl.className = "midwest-form-live-summary-list";
-    fields.forEach(({ label, value }) => {
+    fields.forEach(({ label, value, swatchColor }) => {
       const dt = Object.assign(document.createElement("dt"), {
         className: "midwest-form-live-summary-term",
         textContent: label
       });
-      const dd = Object.assign(document.createElement("dd"), {
-        className: "midwest-form-live-summary-definition",
-        textContent: value || "\u2014"
-      });
+      const dd = document.createElement("dd");
+      dd.className = "midwest-form-live-summary-definition";
+      if (swatchColor !== void 0) {
+        dd.append(this.buildSwatch(swatchColor), value || "\u2014");
+      } else {
+        dd.textContent = value || "\u2014";
+      }
       dl.append(dt, dd);
     });
     this.listTarget.replaceChildren(dl);
@@ -3579,6 +3284,18 @@ class FormLiveSummary extends Controller {
         value: element.value
       });
     });
+    form.querySelectorAll('[data-midwest-color-picker-target="input"]').forEach((input) => {
+      if (this.element.contains(input))
+        return;
+      if (!input.name)
+        return;
+      const picker = input.closest(".midwest-color-picker");
+      const labelEl = picker?.querySelector(".midwest-form-group__top label") ?? this.form?.querySelector(`label[for="${CSS.escape(input.id)}"]`);
+      const label = labelEl?.textContent?.trim() || this.prettifyName(input.name.replace(/\[.*\]$/, ""));
+      const value = input.value;
+      const display = value.startsWith("#") ? value : value ? value.charAt(0).toUpperCase() + value.slice(1) : "\u2014";
+      fields.push({ label, value: display, swatchColor: value || void 0 });
+    });
     form.querySelectorAll(".midwest-autocomplete").forEach((ac) => {
       if (this.element.contains(ac))
         return;
@@ -3591,6 +3308,22 @@ class FormLiveSummary extends Controller {
     });
     return fields;
   }
+  // Builds a small inline colour swatch to display alongside a colour value.
+  // Hex values are applied as an inline background-color; named theme colours
+  // use a scoped theme-{color} class so the CSS variable cascade does the work.
+  // An empty/transparent value renders a diagonal-stripe placeholder.
+  buildSwatch(color) {
+    const swatch = document.createElement("span");
+    swatch.className = "midwest-form-live-summary-swatch";
+    if (color.startsWith("#")) {
+      swatch.style.backgroundColor = color;
+    } else if (color && color !== "transparent") {
+      swatch.classList.add(`theme-${color}`, "bg-theme-6");
+    } else {
+      swatch.classList.add("is-transparent");
+    }
+    return swatch;
+  }
   // Finds the label associated with a specific element via `for` attribute,
   // wrapping label, or falls back to a prettified version of the element name.
   labelFor(el) {
@@ -3656,16 +3389,37 @@ class CountdownTimer extends Controller {
     seconds: { type: Number, default: 5 }
   };
   timer = null;
+  remaining = 0;
+  startTime = 0;
   connect() {
-    this.timer = setTimeout(() => {
-      this.dispatch("complete", { bubbles: true });
-    }, this.secondsValue * 1e3);
+    this.remaining = this.secondsValue * 1e3;
+    this.resume();
   }
   disconnect() {
-    if (this.timer !== null) {
-      clearTimeout(this.timer);
+    this.pause();
+  }
+  pause() {
+    if (this.timer === null)
+      return;
+    clearTimeout(this.timer);
+    this.timer = null;
+    this.remaining = Math.max(0, this.remaining - (Date.now() - this.startTime));
+    this.setPlayState("paused");
+  }
+  resume() {
+    if (this.timer !== null)
+      return;
+    this.startTime = Date.now();
+    this.timer = setTimeout(() => {
       this.timer = null;
-    }
+      this.dispatch("complete", { bubbles: true });
+    }, this.remaining);
+    this.setPlayState("running");
+  }
+  setPlayState(state) {
+    const progress = this.element.querySelector(".midwest-countdown-timer__progress");
+    if (progress)
+      progress.style.animationPlayState = state;
   }
 }
 
@@ -3858,19 +3612,30 @@ class Rating extends Controller {
 }
 
 class Autocomplete extends Controller {
-  static targets = ["input", "dropdown", "list", "tokens", "multipleTokenTemplate", "singleTokenTemplate", "status", "turboList", "loader"];
+  static targets = [
+    "input",
+    "dropdown",
+    "list",
+    "tokens",
+    "multipleTokenTemplate",
+    "singleTokenTemplate",
+    "status",
+    "turboList",
+    "loader",
+    "freeFormHintList",
+    "freeFormHintValue"
+  ];
   static values = {
     options: { type: Array, default: [] },
     url: { type: String, default: "" },
     multiple: { type: Boolean, default: true },
-    turboFrameUrl: { type: String, default: "" }
+    turboFrameUrl: { type: String, default: "" },
+    freeForm: { type: Boolean, default: false }
   };
   highlightedIndex = -1;
   fetchAbort = null;
   searchTimer;
   // ── Named handlers ─────────────────────────────────────────────────────────
-  // Arrow-function class properties preserve `this` and produce a stable
-  // reference so addEventListener/removeEventListener pairs always match.
   onFrameLoad = () => {
     this.syncSelectedState();
     this.loading = false;
@@ -3905,9 +3670,6 @@ class Autocomplete extends Controller {
     clearTimeout(this.searchTimer);
     this.element.removeEventListener("focusout", this.onFocusOut);
   }
-  // Target callbacks — Stimulus calls these automatically when targets connect
-  // or disconnect, including after the initial connect(). This replaces manual
-  // hasTurboListTarget guards and addEventListener calls inside connect().
   dropdownTargetConnected(el) {
     el.addEventListener("toggle", this.onToggle);
   }
@@ -3932,13 +3694,27 @@ class Autocomplete extends Controller {
     this.open();
   }
   open() {
+    if (!this.hasDropdownTarget)
+      return;
     if (this.dropdownTarget.matches(":popover-open"))
       return;
+    const query = this.inputTarget.value.trim();
+    if (this.freeFormValue && !this.hasListTarget && !this.hasTurboListTarget) {
+      if (query) {
+        this.updateFreeFormHint(query);
+        this.showDropdown();
+      }
+      return;
+    }
     clearTimeout(this.searchTimer);
-    this.resolve(this.inputTarget.value.trim());
+    this.resolve(query);
   }
   search() {
     const query = this.inputTarget.value.trim();
+    if (this.freeFormValue)
+      this.updateFreeFormHint(query);
+    if (!this.hasListTarget && !this.hasTurboListTarget)
+      return;
     if (!this.hasTurboListTarget && !this.urlValue) {
       this.renderOptions(this.filteredOptions(query));
       return;
@@ -3953,6 +3729,8 @@ class Autocomplete extends Controller {
     switch (event.key) {
       case "ArrowDown": {
         event.preventDefault();
+        if (!this.hasDropdownTarget)
+          break;
         if (!this.dropdownTarget.matches(":popover-open"))
           this.open();
         const items = this.visibleOptions();
@@ -3962,7 +3740,7 @@ class Autocomplete extends Controller {
       }
       case "ArrowUp": {
         event.preventDefault();
-        if (!this.dropdownTarget.matches(":popover-open"))
+        if (!this.hasDropdownTarget || !this.dropdownTarget.matches(":popover-open"))
           break;
         const items = this.visibleOptions();
         this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
@@ -3971,11 +3749,22 @@ class Autocomplete extends Controller {
       }
       case "Enter": {
         event.preventDefault();
-        if (!this.dropdownTarget.matches(":popover-open"))
-          break;
-        const items = this.visibleOptions();
-        if (this.highlightedIndex >= 0 && items[this.highlightedIndex]) {
-          this.pickItem(items[this.highlightedIndex]);
+        if (this.hasDropdownTarget && this.dropdownTarget.matches(":popover-open") && (this.hasListTarget || this.hasTurboListTarget)) {
+          const items = this.visibleOptions();
+          if (this.highlightedIndex >= 0 && items[this.highlightedIndex]) {
+            this.pickItem(items[this.highlightedIndex]);
+            break;
+          }
+        }
+        if (this.freeFormValue) {
+          this.commitFreeFormTag();
+        }
+        break;
+      }
+      case ",": {
+        if (this.freeFormValue && this.inputTarget.value.trim()) {
+          event.preventDefault();
+          this.commitFreeFormTag();
         }
         break;
       }
@@ -3992,6 +3781,22 @@ class Autocomplete extends Controller {
         break;
     }
   }
+  // Splits pasted text on commas and newlines into individual tags (free-form mode only).
+  pasteTag(event) {
+    if (!this.freeFormValue)
+      return;
+    const text = event.clipboardData?.getData("text") ?? "";
+    const tags = text.split(/[\n,]+/).map((t) => t.trim()).filter(Boolean);
+    if (tags.length === 0)
+      return;
+    event.preventDefault();
+    tags.forEach((tag) => this.addFreeFormTag(tag));
+  }
+  // Mousedown on the "Hit Enter to add 'X'" hint row.
+  addFreeFormTagFromHint(event) {
+    event.preventDefault();
+    this.commitFreeFormTag();
+  }
   removeToken(event) {
     event.stopPropagation();
     const btn = event.currentTarget;
@@ -3999,9 +3804,6 @@ class Autocomplete extends Controller {
     if (value)
       this.deselect(value);
   }
-  // Public action used by turbo-frame option items via data-action.
-  // Each server-rendered <li> should have:
-  //   data-action="mousedown->midwest-autocomplete#selectOption"
   selectOption(event) {
     event.preventDefault();
     this.pickItem(event.currentTarget);
@@ -4013,7 +3815,6 @@ class Autocomplete extends Controller {
   isSelected(value) {
     return !!this.tokensTarget.querySelector(`[data-value="${CSS.escape(value)}"]`);
   }
-  // Routes to the correct data source. Shared by open() and the debounced search path.
   resolve(query) {
     if (this.hasTurboListTarget) {
       this.navigateFrame(query);
@@ -4042,9 +3843,6 @@ class Autocomplete extends Controller {
     this.turboListTarget.setAttribute("src", url.toString());
     this.showDropdown();
   }
-  // After a turbo frame loads, mark already-selected items and update the live region.
-  // The empty state element is always present in the frame and CSS shows/hides it
-  // based on whether any non-selected options exist.
   syncSelectedState() {
     const options = this.turboListTarget.querySelectorAll(".midwest-autocomplete-option");
     options.forEach((option) => {
@@ -4080,6 +3878,7 @@ class Autocomplete extends Controller {
   select(option) {
     this.appendToken(option);
     this.hideDropdown();
+    this.hideFreeFormHint();
     this.inputTarget.value = "";
     this.inputTarget.focus();
     this.announce(`${option.label} selected`);
@@ -4151,11 +3950,19 @@ class Autocomplete extends Controller {
       this.renderEmpty("No more options");
       return;
     }
+    this.hideFreeFormHint();
     this.loading = false;
     this.announce(`${availableCount} option${availableCount === 1 ? "" : "s"} available`);
     this.showDropdown();
   }
   renderEmpty(message = "No results") {
+    if (this.freeFormValue && this.inputTarget.value.trim()) {
+      if (this.hasListTarget)
+        this.listTarget.replaceChildren();
+      this.loading = false;
+      this.updateFreeFormHint(this.inputTarget.value.trim());
+      return;
+    }
     const li = document.createElement("li");
     li.className = "midwest-autocomplete-empty";
     li.setAttribute("aria-hidden", "true");
@@ -4165,15 +3972,39 @@ class Autocomplete extends Controller {
     this.announce(message);
     this.showDropdown();
   }
+  // Shows or hides the "Hit Enter to add 'X'" hint based on the current query.
+  updateFreeFormHint(query) {
+    if (!this.hasFreeFormHintListTarget)
+      return;
+    if (query && !this.isSelected(query)) {
+      if (this.hasFreeFormHintValueTarget) {
+        this.freeFormHintValueTarget.textContent = `"${query}"`;
+      }
+      this.freeFormHintListTarget.hidden = false;
+      this.showDropdown();
+    } else {
+      this.hideFreeFormHint();
+      if (!this.hasListTarget && !this.hasTurboListTarget)
+        this.hideDropdown();
+    }
+  }
+  hideFreeFormHint() {
+    if (this.hasFreeFormHintListTarget)
+      this.freeFormHintListTarget.hidden = true;
+  }
   set loading(on) {
     if (this.hasLoaderTarget)
       this.loaderTarget.hidden = !on;
   }
   showDropdown() {
+    if (!this.hasDropdownTarget)
+      return;
     if (!this.dropdownTarget.matches(":popover-open"))
       this.dropdownTarget.showPopover();
   }
   hideDropdown() {
+    if (!this.hasDropdownTarget)
+      return;
     if (this.dropdownTarget.matches(":popover-open"))
       this.dropdownTarget.hidePopover();
   }
@@ -4197,6 +4028,17 @@ class Autocomplete extends Controller {
     const support = item.querySelector(".midwest-autocomplete-option-support")?.textContent?.trim();
     this.select({ value, label, support });
   }
+  commitFreeFormTag() {
+    const value = this.inputTarget.value.trim();
+    this.addFreeFormTag(value);
+  }
+  addFreeFormTag(value) {
+    if (!value)
+      return;
+    if (this.isSelected(value))
+      return;
+    this.select({ value, label: value });
+  }
   announce(message) {
     if (this.hasStatusTarget)
       this.statusTarget.textContent = message;
@@ -4733,6 +4575,289 @@ class Image extends Controller {
   }
 }
 
+class ColorPicker extends Controller {
+  static targets = ["input", "swatch", "customSwatch", "colorInput"];
+  onCustomColorChange = null;
+  get scaleTarget() {
+    return this.element.dataset.scaleTarget ?? "theme";
+  }
+  connect() {
+    if (this.hasColorInputTarget) {
+      this.onCustomColorChange = (e) => this.handleCustomColor(e);
+      this.colorInputTarget.addEventListener("input", this.onCustomColorChange);
+    }
+    if (this.hasInputTarget && this.inputTarget.value.startsWith("#")) {
+      this.restoreCustom(this.inputTarget.value);
+    }
+  }
+  disconnect() {
+    if (this.hasColorInputTarget && this.onCustomColorChange) {
+      this.colorInputTarget.removeEventListener("input", this.onCustomColorChange);
+      this.onCustomColorChange = null;
+    }
+  }
+  select(e) {
+    const button = e.currentTarget;
+    const color = button.dataset.color ?? "";
+    this.applySelection(color);
+    this.dispatch("update", { detail: { color, scaleTarget: this.scaleTarget } });
+  }
+  openCustom(e) {
+    e.preventDefault();
+    this.colorInputTarget.click();
+  }
+  handleCustomColor(e) {
+    const hex = e.target.value;
+    if (this.hasCustomSwatchTarget) {
+      this.customSwatchTarget.dataset.color = hex;
+      this.customSwatchTarget.style.background = hex;
+    }
+    const scale = this.generateScale(hex);
+    this.applyScale(scale);
+    this.applySelection(hex);
+    this.dispatch("update", { detail: { color: hex, scale, scaleTarget: this.scaleTarget } });
+  }
+  restoreCustom(hex) {
+    if (this.hasColorInputTarget) {
+      this.colorInputTarget.value = hex;
+    }
+    if (this.hasCustomSwatchTarget) {
+      this.customSwatchTarget.style.background = hex;
+    }
+    const scale = this.generateScale(hex);
+    this.applyScale(scale);
+  }
+  applySelection(color) {
+    if (this.hasInputTarget) {
+      this.inputTarget.value = color;
+    }
+    this.swatchTargets.forEach((swatch) => {
+      const isSelected = swatch.dataset.color === color;
+      swatch.classList.toggle("is-selected", isSelected);
+      swatch.setAttribute("aria-pressed", String(isSelected));
+    });
+  }
+  // Generates 13 RGB channel strings (space-separated, matching --{color}-{n}-channels format)
+  // from a hex color by fixing the hue/saturation and distributing lightness across the scale.
+  generateScale(hex) {
+    const [h, s] = this.hexToHsl(hex);
+    const lightnessSteps = [97, 90, 82, 74, 65, 56, 48, 40, 33, 26, 18, 10, 3];
+    return Object.fromEntries(
+      lightnessSteps.map((l, i) => {
+        const [r, g, b] = this.hslToRgb(h, s, l);
+        return [String(i), `${r} ${g} ${b}`];
+      })
+    );
+  }
+  applyScale(scale) {
+    const el = this.element;
+    Object.entries(scale).forEach(([step, channels]) => {
+      el.style.setProperty(`--${this.scaleTarget}-${step}-channels`, channels);
+    });
+  }
+  hexToHsl(hex) {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (max === min)
+      return [0, 0, l * 100];
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    const h = max === r ? ((g - b) / d + (g < b ? 6 : 0)) / 6 : max === g ? ((b - r) / d + 2) / 6 : ((r - g) / d + 4) / 6;
+    return [h * 360, s * 100, l * 100];
+  }
+  hslToRgb(h, s, l) {
+    h /= 360;
+    s /= 100;
+    l /= 100;
+    if (s === 0) {
+      const v = Math.round(l * 255);
+      return [v, v, v];
+    }
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    return [
+      Math.round(this.hue2rgb(p, q, h + 1 / 3) * 255),
+      Math.round(this.hue2rgb(p, q, h) * 255),
+      Math.round(this.hue2rgb(p, q, h - 1 / 3) * 255)
+    ];
+  }
+  hue2rgb(p, q, t) {
+    if (t < 0)
+      t += 1;
+    if (t > 1)
+      t -= 1;
+    if (t < 1 / 6)
+      return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+      return q;
+    if (t < 2 / 3)
+      return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  }
+}
+
+class Notification extends Controller {
+  container = null;
+  observer = null;
+  connect() {
+    this.container = this.element.closest("[popover]");
+    this.container?.showPopover?.();
+    requestAnimationFrame(() => {
+      this.element.classList.add("visible");
+    });
+    const frame = this.element.parentElement;
+    if (frame) {
+      this.observer = new MutationObserver(() => this.syncCountdown());
+      this.observer.observe(frame, { childList: true });
+      setTimeout(() => this.syncCountdown());
+    }
+  }
+  disconnect() {
+    this.observer?.disconnect();
+    this.observer = null;
+    if (this.container) {
+      const frame = this.container.querySelector("turbo-frame");
+      if (frame?.children.length === 0 && this.container.matches(":popover-open")) {
+        this.container.hidePopover?.();
+      }
+      this.container = null;
+    }
+  }
+  close() {
+    if (!this.element.classList.contains("animated")) {
+      this.element.remove();
+      return;
+    }
+    this.element.classList.add("closing");
+    setTimeout(() => {
+      this.element.remove();
+    }, 350);
+  }
+  syncCountdown() {
+    const timerEl = this.element.querySelector('[data-controller~="midwest-countdown-timer"]');
+    if (!timerEl)
+      return;
+    const timer = this.application.getControllerForElementAndIdentifier(
+      timerEl,
+      "midwest-countdown-timer"
+    );
+    if (!timer)
+      return;
+    const isTop = this.element === this.element.parentElement?.firstElementChild;
+    if (isTop) {
+      timer.resume();
+    } else {
+      timer.pause();
+    }
+  }
+}
+
+class HorizontalScroll extends Controller {
+  resizeObserver = null;
+  connect() {
+    this.updateOverflow();
+    this.element.addEventListener("scroll", this.updateOverflow);
+    this.resizeObserver = new ResizeObserver(this.updateOverflow);
+    this.resizeObserver.observe(this.element);
+  }
+  disconnect() {
+    this.element.removeEventListener("scroll", this.updateOverflow);
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+  updateOverflow = () => {
+    const el = this.element;
+    el.classList.toggle("can-scroll-left", el.scrollLeft > 0);
+    el.classList.toggle("can-scroll-right", el.scrollLeft < el.scrollWidth - el.clientWidth - 1);
+  };
+}
+
+class Table extends Controller {
+  static targets = ["selectAll", "rowCheckbox"];
+  toggleAll() {
+    const checked = this.selectAllTarget.checked;
+    this.rowCheckboxTargets.forEach((cb) => {
+      cb.checked = checked;
+    });
+  }
+  updateSelectAll() {
+    if (!this.hasSelectAllTarget)
+      return;
+    const total = this.rowCheckboxTargets.length;
+    const checkedCount = this.rowCheckboxTargets.filter((cb) => cb.checked).length;
+    if (checkedCount === 0) {
+      this.selectAllTarget.checked = false;
+      this.selectAllTarget.indeterminate = false;
+    } else if (checkedCount === total) {
+      this.selectAllTarget.checked = true;
+      this.selectAllTarget.indeterminate = false;
+    } else {
+      this.selectAllTarget.checked = false;
+      this.selectAllTarget.indeterminate = true;
+    }
+  }
+}
+
+class LoadMore extends Controller {
+  static values = {
+    url: String,
+    tbodyId: String
+  };
+  observer = null;
+  loading = false;
+  connect() {
+    if (!this.urlValue)
+      return;
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting)
+          this.load();
+      },
+      // Start fetching 300px before the sentinel enters the viewport so rows
+      // appear before the user actually reaches the bottom.
+      { rootMargin: "0px 0px 300px 0px" }
+    );
+    this.observer.observe(this.element);
+  }
+  disconnect() {
+    this.observer?.disconnect();
+    this.observer = null;
+  }
+  async load() {
+    if (this.loading)
+      return;
+    this.loading = true;
+    this.observer?.disconnect();
+    try {
+      const response = await fetch(this.urlValue, {
+        headers: {
+          Accept: "text/html",
+          "X-Requested-With": "XMLHttpRequest"
+        },
+        credentials: "same-origin"
+      });
+      if (!response.ok)
+        return;
+      const html = await response.text();
+      const doc = new DOMParser().parseFromString(html, "text/html");
+      const tbody = document.getElementById(this.tbodyIdValue);
+      const newRows = Array.from(
+        doc.querySelectorAll(".midwest-table-body tr")
+      );
+      if (!tbody || newRows.length === 0)
+        return;
+      this.element.remove();
+      newRows.forEach((row) => tbody.appendChild(document.importNode(row, true)));
+    } catch {
+      this.loading = false;
+    }
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -4755,6 +4880,11 @@ function registerMidwestControllers(application) {
   application.register("midwest-rating", Rating);
   application.register("midwest-autocomplete", Autocomplete);
   application.register("midwest-image", Image);
+  application.register("midwest-color-picker", ColorPicker);
+  application.register("midwest-notification", Notification);
+  application.register("midwest-horizontal-scroll", HorizontalScroll);
+  application.register("midwest-table", Table);
+  application.register("midwest-load-more", LoadMore);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };