@unabridged/midwest 0.8.1 → 0.9.0

package/app/assets/javascript/midwest.js

@@ -494,9 +494,16 @@ class Card extends Controller {
     originalHeight: { type: Number, default: 0 },
     backHeight: { type: Number, default: 0 }
   };
+  resizeHandler = null;
   connect() {
     this.applyReady();
   }
+  disconnect() {
+    if (this.resizeHandler) {
+      window.removeEventListener("resize", this.resizeHandler);
+      this.resizeHandler = null;
+    }
+  }
   get flippable() {
     return this.element.classList.contains("flippable");
   }
@@ -505,10 +512,11 @@ class Card extends Controller {
       this.originalHeightValue = this.frontTarget.offsetHeight;
       this.backHeightValue = this.backTarget.offsetHeight;
       this.element.classList.add("flip-ready");
-      window.addEventListener("resize", () => {
+      this.resizeHandler = () => {
         this.originalHeightValue = this.frontTarget.offsetHeight;
         this.backHeightValue = this.backTarget.offsetHeight;
-      });
+      };
+      window.addEventListener("resize", this.resizeHandler);
     }
   }
   originalHeightValueChanged() {
@@ -535,16 +543,18 @@ class Banner extends Controller {
   }
 }
 
-class Callout extends Controller {
-  connect() {
-    console.log("Hello from Callout!");
-  }
-}
-
 class Input extends Controller {
   static targets = ["input"];
+  updateClearButton = null;
   connect() {
     this.applyColor();
+    this.applySearchClear();
+  }
+  disconnect() {
+    if (this.updateClearButton) {
+      this.inputTarget.removeEventListener("input", this.updateClearButton);
+      this.updateClearButton = null;
+    }
   }
   applyColor() {
     if (this.inputTarget.type !== "color") {
@@ -554,36 +564,103 @@ class Input extends Controller {
       this.inputTarget.setAttribute("value", this.inputTarget.value);
     });
   }
+  applySearchClear() {
+    if (this.inputTarget.type !== "search")
+      return;
+    if (CSS.supports("selector(::-webkit-search-cancel-button)"))
+      return;
+    const button = document.createElement("button");
+    button.type = "button";
+    button.setAttribute("aria-label", "Clear search");
+    button.classList.add("midwest-input-search-clear");
+    button.hidden = this.inputTarget.value.length === 0;
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("width", "16");
+    svg.setAttribute("height", "16");
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("stroke-linejoin", "round");
+    path.setAttribute("d", "M6 18L18 6M6 6l12 12");
+    svg.appendChild(path);
+    button.appendChild(svg);
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("midwest-input-search-wrapper");
+    this.inputTarget.parentElement?.insertBefore(wrapper, this.inputTarget);
+    wrapper.appendChild(this.inputTarget);
+    wrapper.appendChild(button);
+    this.updateClearButton = () => {
+      button.hidden = this.inputTarget.value.length === 0;
+    };
+    this.inputTarget.addEventListener("input", this.updateClearButton);
+    button.addEventListener("click", () => {
+      this.inputTarget.value = "";
+      button.hidden = true;
+      this.inputTarget.dispatchEvent(new Event("input", { bubbles: true }));
+      this.inputTarget.focus();
+    });
+  }
 }
 
 class File extends Controller {
   static targets = ["input", "output"];
+  // Arrow function so `this` is stable for add/removeEventListener pairing.
+  handleChange = () => {
+    this.renderPreviews();
+  };
   connect() {
-    this.inputTarget.addEventListener("change", () => {
-      console.log("words words words");
-      this.outputTarget.innerHTML = this.previewHTML;
+    this.inputTarget.addEventListener("change", this.handleChange);
+  }
+  disconnect() {
+    this.inputTarget.removeEventListener("change", this.handleChange);
+  }
+  renderPreviews() {
+    this.outputTarget.innerHTML = "";
+    this.files.forEach((file) => {
+      this.outputTarget.appendChild(this.buildPreview(file));
     });
   }
-  get previewHTML() {
-    return this.files.map(
-      (file) => `<div class="file-preview file-preview-${file.type} layer-children">
-        <span class='midwest-badge size-default theme-primary'><span class='value'>${file.type}</span></span>
-        <span class='midwest-badge size-default theme-gray ml-auto'><span class='value'>${new Intl.NumberFormat(
-        void 0,
-        {
-          notation: "compact",
-          style: "unit",
-          unit: "byte",
-          unitDisplay: "narrow"
-        }
-      ).format(file.size)}</span></span>
-
-        ${file.type.includes("image") ? `<img src="${window.URL.createObjectURL(file)}" />` : ""}
-        ${!file.type.includes("image") ? `<div class="placeholder-file">${file.name}</div>` : ""}
-        
-      </div>`
-    ).join("");
+  buildPreview(file) {
+    const safeType = file.type ? file.type.replace("/", "-") : "unknown";
+    const div = document.createElement("div");
+    div.className = `file-preview file-preview-${safeType} layer-children`;
+    const typeBadge = document.createElement("span");
+    typeBadge.className = "midwest-badge size-default theme-primary";
+    const typeValue = document.createElement("span");
+    typeValue.className = "value";
+    typeValue.textContent = file.type || "Unknown";
+    typeBadge.appendChild(typeValue);
+    div.appendChild(typeBadge);
+    const sizeBadge = document.createElement("span");
+    sizeBadge.className = "midwest-badge size-default theme-gray ml-auto";
+    const sizeValue = document.createElement("span");
+    sizeValue.className = "value";
+    sizeValue.textContent = new Intl.NumberFormat(void 0, {
+      notation: "compact",
+      style: "unit",
+      unit: "byte",
+      unitDisplay: "narrow"
+    }).format(file.size);
+    sizeBadge.appendChild(sizeValue);
+    div.appendChild(sizeBadge);
+    if (file.type.startsWith("image/")) {
+      const img = document.createElement("img");
+      img.src = window.URL.createObjectURL(file);
+      div.appendChild(img);
+    } else {
+      const placeholder = document.createElement("div");
+      placeholder.className = "placeholder-file";
+      placeholder.innerHTML = file.type.startsWith("video/") ? this.videoIcon : this.fileIcon;
+      div.appendChild(placeholder);
+    }
+    return div;
   }
+  fileIcon = '<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" aria-hidden="true"><path d="M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path d="M256 56v120a32 32 0 0032 32h120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>';
+  videoIcon = '<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" aria-hidden="true"><path d="M374.79 308.78L457.5 367a16 16 0 0022.5-14.62V159.62A16 16 0 00457.5 145l-82.71 58.22A16 16 0 00368 216.3v79.4a16 16 0 006.79 13.08z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M268 384H84a52.15 52.15 0 01-52-52V180a52.15 52.15 0 0152-52h184.48A51.68 51.68 0 01320 179.52V332a52.15 52.15 0 01-52 52z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/></svg>';
   get files() {
     if (this.inputTarget.files == null) {
       return [];
@@ -592,12 +669,6 @@ class File extends Controller {
   }
 }
 
-class Switch extends Controller {
-  connect() {
-    console.log("Hello from Switch!");
-  }
-}
-
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
@@ -2740,7 +2811,9 @@ class Dropdown extends Controller {
     }
     this.buttonEl.removeEventListener("click", this.unsupportedClickCB);
     this.element.removeEventListener("toggle", this.addOpenedClass);
+    this.element.removeEventListener("keydown", this.handleKeydown);
     this.element.removeEventListener("turbo:click", this.closeIfOpen);
+    this.element.removeEventListener("popover:close", this.closeIfOpen);
   }
   unsupportedClickCB = (event) => {
     event.preventDefault();
@@ -2756,8 +2829,61 @@ class Dropdown extends Controller {
     return this.computedValue || !this.supportedValue;
   }
   addOpenedClass = (event) => {
-    this.buttonEl.classList.toggle("opened", event.newState === "open");
+    const isOpen = event.newState === "open";
+    this.buttonEl.classList.toggle("opened", isOpen);
+    this.buttonEl.setAttribute("aria-expanded", String(isOpen));
+    if (isOpen) {
+      this.element.addEventListener("keydown", this.handleKeydown);
+      requestAnimationFrame(() => this.menuItems[0]?.focus());
+    } else {
+      this.element.removeEventListener("keydown", this.handleKeydown);
+    }
+  };
+  handleKeydown = (event) => {
+    const items = this.menuItems;
+    if (items.length === 0)
+      return;
+    const currentIndex = items.findIndex((item) => item === document.activeElement);
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        items[next].focus();
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        items[prev].focus();
+        break;
+      }
+      case "Home":
+        event.preventDefault();
+        items[0].focus();
+        break;
+      case "End":
+        event.preventDefault();
+        items[items.length - 1].focus();
+        break;
+      case "Escape":
+        event.preventDefault();
+        this.element.hidePopover();
+        this.buttonEl.focus();
+        break;
+      case "Tab":
+        this.element.hidePopover();
+        break;
+      default:
+        return;
+    }
   };
+  get menuItems() {
+    return Array.from(
+      this.element.querySelectorAll(
+        '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])'
+      )
+    );
+  }
   computedCB(entries) {
     entries.forEach(async () => {
       this.computation();
@@ -2801,12 +2927,6 @@ class Dropdown extends Controller {
   }
 }
 
-class Avatar extends Controller {
-  connect() {
-    console.log("Hello from Avatar!");
-  }
-}
-
 class Prose extends Controller {
   static values = {
     initial: { type: Number, default: 1 },
@@ -2816,7 +2936,8 @@ class Prose extends Controller {
     if (!this.element.classList.contains("clamp")) {
       return;
     }
-    this.initialValue = parseInt(getComputedStyle(this.element).getPropertyValue("--clamp"));
+    const clamp = parseInt(getComputedStyle(this.element).getPropertyValue("--clamp"), 10);
+    this.initialValue = isNaN(clamp) ? 1 : clamp;
     this.element.addEventListener("click", () => {
       this.toggle();
     });
@@ -2836,9 +2957,19 @@ class Dialog extends Controller {
   static values = {
     resetFrame: { type: Boolean, default: false }
   };
+  _previousFocus = null;
   connect() {
-    document.addEventListener("turbo:frame-load", this.setupDialogListeners.bind(this));
-    this.setupDialogListeners();
+    document.addEventListener("turbo:frame-load", this.bindToggleEls);
+    document.addEventListener("turbo:before-visit", this.dismiss);
+    document.addEventListener("click", this.handleClickOutside);
+    this.dialog.addEventListener("close", this.onClose);
+    this.bindToggleEls();
+  }
+  disconnect() {
+    document.removeEventListener("turbo:frame-load", this.bindToggleEls);
+    document.removeEventListener("turbo:before-visit", this.dismiss);
+    document.removeEventListener("click", this.handleClickOutside);
+    this.dialog.removeEventListener("close", this.onClose);
   }
   get dialog() {
     return this.element;
@@ -2852,20 +2983,18 @@ class Dialog extends Controller {
   get frameEl() {
     return this.dialog.querySelector("turbo-frame");
   }
-  setupDialogListeners() {
-    document.addEventListener("click", (event) => {
-      if (event?.target instanceof Element) {
-        if (!event?.target?.contains(this.dialog))
-          return;
-        this.dismiss();
-      }
-    });
-    document.addEventListener("turbo:before-visit", this.dismiss.bind(this));
+  // Arrow function so `this` is stable for add/removeEventListener pairing.
+  handleClickOutside = (event) => {
+    if (event.target !== this.dialog)
+      return;
+    this.dismiss();
+  };
+  // Arrow function so `this` is stable for add/removeEventListener pairing.
+  bindToggleEls = () => {
     this.toggleEls.forEach((el) => {
       el.addEventListener("click", this.toggle.bind(this));
     });
-    this.dialog.addEventListener("close", this.onClose.bind(this));
-  }
+  };
   remoteContentTargetConnected() {
     this.show();
   }
@@ -2876,32 +3005,65 @@ class Dialog extends Controller {
     if (this.dialog.open) {
       this.dialog.close();
     } else {
+      this._previousFocus = document.activeElement;
       this.dialog.showModal();
+      this.dialog.addEventListener("keydown", this.handleFocusTrap);
     }
   }
   show(e = void 0) {
     if (e instanceof Event)
       e.preventDefault();
     this.htmlEl.classList.toggle("overflow-hidden", true);
+    this._previousFocus = document.activeElement;
     this.dialog.showModal();
+    this.dialog.addEventListener("keydown", this.handleFocusTrap);
   }
   hide({ detail }) {
     if (!detail.success)
       return;
     this.dismiss();
   }
-  dismiss() {
+  // Arrow function so `this` is stable for add/removeEventListener pairing.
+  dismiss = () => {
     this.dialog.close();
-  }
+  };
   reloadPage() {
     window.location.reload();
   }
-  async onClose() {
+  handleFocusTrap = (event) => {
+    if (event.key !== "Tab")
+      return;
+    const focusable = Array.from(
+      this.dialog.querySelectorAll(
+        'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((el) => !el.closest("[inert]"));
+    if (focusable.length === 0)
+      return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey) {
+      if (document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  // Arrow function so `this` is stable for add/removeEventListener pairing.
+  onClose = async () => {
+    this.dialog.removeEventListener("keydown", this.handleFocusTrap);
+    this._previousFocus?.focus();
+    this._previousFocus = null;
     this.htmlEl.classList.toggle("overflow-hidden", false);
     await this.delay(500);
     this.resetForm();
     this.resetFrame();
-  }
+  };
   resetFrame() {
     if (!this.resetFrameValue || this.frameEl == null)
       return;
@@ -2920,18 +3082,6 @@ class Dialog extends Controller {
   }
 }
 
-class Video extends Controller {
-  connect() {
-    console.log("Hello from Video!");
-  }
-}
-
-class DropdownItem extends Controller {
-  connect() {
-    console.log("Hello from DropdownItem!");
-  }
-}
-
 class Tabs extends Controller {
   static targets = ["tab", "panel"];
   connect() {
@@ -2939,6 +3089,10 @@ class Tabs extends Controller {
       (tab) => tab.getAttribute("aria-selected") === "true"
     );
     this.activateTab(activeIndex >= 0 ? activeIndex : 0);
+    this.element.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnect() {
+    this.element.removeEventListener("keydown", this.handleKeydown);
   }
   select(event) {
     const tab = event.currentTarget;
@@ -2946,6 +3100,34 @@ class Tabs extends Controller {
     if (index >= 0)
       this.activateTab(index);
   }
+  handleKeydown = (event) => {
+    const tabs = this.tabTargets;
+    if (tabs.length === 0)
+      return;
+    const currentIndex = tabs.findIndex((t) => t === document.activeElement);
+    if (currentIndex < 0)
+      return;
+    let nextIndex;
+    switch (event.key) {
+      case "ArrowLeft":
+        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        break;
+      case "ArrowRight":
+        nextIndex = (currentIndex + 1) % tabs.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = tabs.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    this.activateTab(nextIndex);
+    tabs[nextIndex].focus();
+  };
   activateTab(index) {
     this.tabTargets.forEach((tab, i) => {
       const active = i === index;
@@ -2965,12 +3147,26 @@ class Tabs extends Controller {
 
 class Tooltip extends Controller {
   static targets = ["popover"];
+  connect() {
+    document.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnect() {
+    document.removeEventListener("keydown", this.handleKeydown);
+  }
   show() {
     this.popoverTarget.showPopover();
   }
   hide() {
-    this.popoverTarget.hidePopover();
+    try {
+      this.popoverTarget.hidePopover();
+    } catch {
+    }
   }
+  handleKeydown = (event) => {
+    if (event.key !== "Escape")
+      return;
+    this.hide();
+  };
 }
 
 const NON_SUBMITTING_INPUT_TYPES = /* @__PURE__ */ new Set([
@@ -2993,16 +3189,24 @@ class Carousel extends Controller {
   observer = null;
   _currentIndex = 0;
   _maxUnlocked = 0;
+  _lastTouchX = 0;
   connect() {
     this.setupObserver();
     this.updateNavigation();
     if (this.wizardValue) {
       this.element.addEventListener("keydown", this.handleKeydown);
+      this.trackTarget.addEventListener("wheel", this.handleWheel, { passive: false });
+      this.trackTarget.addEventListener("touchstart", this.handleTouchStart, { passive: true });
+      this.trackTarget.addEventListener("touchmove", this.handleTouchMove, { passive: false });
+      this.updateSlideAccessibility();
     }
   }
   disconnect() {
     this.observer?.disconnect();
     this.element.removeEventListener("keydown", this.handleKeydown);
+    this.trackTarget.removeEventListener("wheel", this.handleWheel);
+    this.trackTarget.removeEventListener("touchstart", this.handleTouchStart);
+    this.trackTarget.removeEventListener("touchmove", this.handleTouchMove);
   }
   next() {
     this.trackTarget.scrollBy({ left: this.trackTarget.clientWidth, behavior: "smooth" });
@@ -3027,10 +3231,13 @@ class Carousel extends Controller {
     const nextIndex = this._currentIndex + 1;
     if (nextIndex > this._maxUnlocked) {
       this._maxUnlocked = nextIndex;
+      this.updateSlideAccessibility();
     }
     this.next();
   }
   scrolled() {
+    if (this.wizardValue)
+      this.clampToFrontier();
     this.updateCurrentIndex();
     this.updateNavigation();
   }
@@ -3048,9 +3255,49 @@ class Carousel extends Controller {
     event.preventDefault();
     this.unlockNext();
   };
+  // Blocks wheel-based horizontal scrolling past the wizard frontier.
+  handleWheel = (event) => {
+    const maxLeft = this._maxUnlocked * this.trackTarget.clientWidth;
+    if (event.deltaX > 0 && this.trackTarget.scrollLeft >= maxLeft - 2) {
+      event.preventDefault();
+    }
+  };
+  handleTouchStart = (event) => {
+    this._lastTouchX = event.touches[0].clientX;
+  };
+  // Blocks touch-swipe scrolling past the wizard frontier. Tracks incremental
+  // delta per move event so direction is accurate mid-gesture.
+  handleTouchMove = (event) => {
+    const currentX = event.touches[0].clientX;
+    const delta = currentX - this._lastTouchX;
+    this._lastTouchX = currentX;
+    const maxLeft = this._maxUnlocked * this.trackTarget.clientWidth;
+    if (delta < 0 && this.trackTarget.scrollLeft >= maxLeft - 2) {
+      event.preventDefault();
+    }
+  };
   get slides() {
     return Array.from(this.trackTarget.children);
   }
+  // Snaps scroll position back to the frontier if the user somehow scrolled
+  // past it (e.g. momentum after a partially-blocked gesture).
+  clampToFrontier() {
+    const maxLeft = this._maxUnlocked * this.trackTarget.clientWidth;
+    if (this.trackTarget.scrollLeft > maxLeft + 2) {
+      this.trackTarget.scrollLeft = maxLeft;
+    }
+  }
+  // Applies/removes `inert` on each slide based on the wizard frontier,
+  // removing locked slides from the tab order and accessibility tree.
+  updateSlideAccessibility() {
+    this.slides.forEach((slide, i) => {
+      if (i > this._maxUnlocked) {
+        slide.setAttribute("inert", "");
+      } else {
+        slide.removeAttribute("inert");
+      }
+    });
+  }
   updateCurrentIndex() {
     const track = this.trackTarget;
     if (track.clientWidth > 0) {
@@ -3067,7 +3314,15 @@ class Carousel extends Controller {
         entries.forEach((entry) => {
           const index = this.slides.indexOf(entry.target);
           if (index >= 0) {
-            this.dotTargets[index]?.classList.toggle("active", entry.isIntersecting);
+            const dot = this.dotTargets[index];
+            if (!dot)
+              return;
+            dot.classList.toggle("active", entry.isIntersecting);
+            if (entry.isIntersecting) {
+              dot.setAttribute("aria-current", "true");
+            } else {
+              dot.removeAttribute("aria-current");
+            }
           }
         });
       },
@@ -3082,8 +3337,9 @@ class Carousel extends Controller {
     if (this.hasPrevTarget)
       this.prevTarget.classList.toggle("hide", atStart);
     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 || frontierReached);
+      this.nextTarget.classList.toggle("hide", atEnd || atLastSlide || frontierReached);
     }
     if (this.wizardValue && this.hasDotTarget) {
       this.dotTargets.forEach((dot, i) => {
@@ -3224,23 +3480,51 @@ class FormLiveSummary extends Controller {
   }
 }
 
+class Form extends Controller {
+  connect() {
+    this.element.addEventListener("submit", this.handleSubmit);
+    this.element.addEventListener("turbo:submit-end", this.handleTurboEnd);
+  }
+  disconnect() {
+    this.element.removeEventListener("submit", this.handleSubmit);
+    this.element.removeEventListener("turbo:submit-end", this.handleTurboEnd);
+  }
+  handleSubmit = () => {
+    this.submitButtons.forEach((btn) => {
+      btn.classList.add("loading");
+      btn.disabled = true;
+    });
+  };
+  // Restore buttons if the submission fails (e.g. a Turbo Frame validation
+  // error that re-renders the form without a full page transition).
+  handleTurboEnd = (event) => {
+    if (!event.detail?.success) {
+      this.submitButtons.forEach((btn) => {
+        btn.classList.remove("loading");
+        btn.disabled = false;
+      });
+    }
+  };
+  get submitButtons() {
+    return Array.from(
+      this.element.querySelectorAll('button[type="submit"], button:not([type])')
+    );
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
-  application.register("midwest-callout", Callout);
   application.register("midwest-input", Input);
   application.register("midwest-file", File);
-  application.register("midwest-switch", Switch);
   application.register("midwest-dropdown", Dropdown);
-  application.register("midwest-avatar", Avatar);
   application.register("midwest-prose", Prose);
   application.register("midwest-dialog", Dialog);
-  application.register("midwest-video", Video);
-  application.register("midwest-dropdown-item", DropdownItem);
   application.register("midwest-tabs", Tabs);
   application.register("midwest-tooltip", Tooltip);
   application.register("midwest-carousel", Carousel);
   application.register("midwest-form-live-summary", FormLiveSummary);
+  application.register("midwest-form", Form);
 }
 
 export { Banner, Card, registerMidwestControllers };