@unabridged/midwest 0.18.0 → 0.19.1

package/dist/javascript/midwest.js

@@ -548,17 +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", "capsLockWarning"];
+  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) {
@@ -579,6 +610,24 @@ class Input extends Controller {
       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;
@@ -673,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 {
@@ -798,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);
@@ -1092,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 => {
@@ -1277,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,
@@ -1479,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
@@ -1774,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';
@@ -2791,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.
@@ -2814,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.
@@ -3290,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;
@@ -3302,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) {
@@ -3316,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() {
@@ -3324,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" });
@@ -3338,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];
@@ -3349,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" });
   }
@@ -3368,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
@@ -3444,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];
@@ -3455,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() {
@@ -3507,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) => {
@@ -5105,6 +4756,108 @@ class Notification extends Controller {
   }
 }
 
+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);
@@ -5129,6 +4882,9 @@ function registerMidwestControllers(application) {
   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 };