@unabridged/midwest 0.8.2 → 0.10.0

package/dist/javascript/collection/app/components/midwest/form/file_component/file_component_controller.js

@@ -2,32 +2,59 @@ import { Controller } from '@hotwired/stimulus';
 
 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 [];

package/dist/javascript/collection/app/components/midwest/form/file_component/file_component_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"file_component_controller.js","sources":["../../../../../../../../app/components/midwest/form/file_component/file_component_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class File extends Controller<HTMLFormElement> {\n  static targets = ['input', 'output']\n\n  declare readonly hasInputTarget: boolean\n  declare readonly inputTarget: HTMLInputElement\n  declare readonly inputTargets: HTMLInputElement[]\n\n  declare readonly hasOutputTarget: boolean\n  declare readonly outputTarget: HTMLInputElement\n  declare readonly outputTargets: HTMLInputElement[]\n\n  connect () {\n    this.inputTarget.addEventListener('change', () => {\n      console.log('words words words')\n      this.outputTarget.innerHTML = this.previewHTML\n    })\n  }\n\n  get previewHTML () {\n    return this.files\n      .map(\n        (file) => `<div class=\"file-preview file-preview-${file.type} layer-children\">\n        <span class='midwest-badge size-default theme-primary'><span class='value'>${\n          file.type\n        }</span></span>\n        <span class='midwest-badge size-default theme-gray ml-auto'><span class='value'>${new Intl.NumberFormat(\n          undefined,\n          {\n            notation: 'compact',\n            style: 'unit',\n            unit: 'byte',\n            unitDisplay: 'narrow'\n          }\n        ).format(file.size)}</span></span>\n\n        ${file.type.includes('image') ? `<img src=\"${window.URL.createObjectURL(file)}\" />` : ''}\n        ${!file.type.includes('image') ? `<div class=\"placeholder-file\">${file.name}</div>` : ''}\n        \n      </div>`\n      )\n      .join('')\n  }\n\n  get files () {\n    if (this.inputTarget.files == null) {\n      return []\n    }\n    return Array.from(this.inputTarget.files)\n  }\n}\n"],"names":[],"mappings":";;AAGA,MAAqB,aAAa,UAA4B,CAAA;AAAA,EAC5D,OAAO,OAAA,GAAU,CAAC,OAAA,EAAS,QAAQ,CAAA,CAAA;AAAA,EAUnC,OAAW,GAAA;AACT,IAAK,IAAA,CAAA,WAAA,CAAY,gBAAiB,CAAA,QAAA,EAAU,MAAM;AAChD,MAAA,OAAA,CAAQ,IAAI,mBAAmB,CAAA,CAAA;AAC/B,MAAK,IAAA,CAAA,YAAA,CAAa,YAAY,IAAK,CAAA,WAAA,CAAA;AAAA,KACpC,CAAA,CAAA;AAAA,GACH;AAAA,EAEA,IAAI,WAAe,GAAA;AACjB,IAAA,OAAO,KAAK,KACT,CAAA,GAAA;AAAA,MACC,CAAC,IAAS,KAAA,CAAA,sCAAA,EAAyC,IAAK,CAAA,IAAA,CAAA;AAAA,mFAAA,EAEtD,IAAK,CAAA,IAAA,CAAA;AAAA,wFAAA,EAE2E,IAAI,IAAK,CAAA,YAAA;AAAA,QACzF,KAAA,CAAA;AAAA,QACA;AAAA,UACE,QAAU,EAAA,SAAA;AAAA,UACV,KAAO,EAAA,MAAA;AAAA,UACP,IAAM,EAAA,MAAA;AAAA,UACN,WAAa,EAAA,QAAA;AAAA,SACf;AAAA,OACF,CAAE,MAAO,CAAA,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA;AAAA,QAEhB,EAAA,IAAA,CAAK,IAAK,CAAA,QAAA,CAAS,OAAO,CAAA,GAAI,aAAa,MAAO,CAAA,GAAA,CAAI,eAAgB,CAAA,IAAI,CAAU,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA;AAAA,QACpF,EAAA,CAAC,KAAK,IAAK,CAAA,QAAA,CAAS,OAAO,CAAI,GAAA,CAAA,8BAAA,EAAiC,KAAK,IAAe,CAAA,MAAA,CAAA,GAAA,EAAA,CAAA;AAAA;AAAA,YAAA,CAAA;AAAA,KAGxF,CACC,KAAK,EAAE,CAAA,CAAA;AAAA,GACZ;AAAA,EAEA,IAAI,KAAS,GAAA;AACX,IAAI,IAAA,IAAA,CAAK,WAAY,CAAA,KAAA,IAAS,IAAM,EAAA;AAClC,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AACA,IAAA,OAAO,KAAM,CAAA,IAAA,CAAK,IAAK,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,GAC1C;AACF;;;;"}
+{"version":3,"file":"file_component_controller.js","sources":["../../../../../../../../app/components/midwest/form/file_component/file_component_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class File extends Controller<HTMLFormElement> {\n  static targets = ['input', 'output']\n\n  declare readonly hasInputTarget: boolean\n  declare readonly inputTarget: HTMLInputElement\n  declare readonly inputTargets: HTMLInputElement[]\n\n  declare readonly hasOutputTarget: boolean\n  declare readonly outputTarget: HTMLInputElement\n  declare readonly outputTargets: HTMLInputElement[]\n\n  // Arrow function so `this` is stable for add/removeEventListener pairing.\n  private handleChange = () => {\n    this.renderPreviews()\n  }\n\n  connect () {\n    this.inputTarget.addEventListener('change', this.handleChange)\n  }\n\n  disconnect () {\n    this.inputTarget.removeEventListener('change', this.handleChange)\n  }\n\n  private renderPreviews () {\n    this.outputTarget.innerHTML = ''\n    this.files.forEach(file => {\n      this.outputTarget.appendChild(this.buildPreview(file))\n    })\n  }\n\n  private buildPreview (file: globalThis.File): HTMLElement {\n    // Replace slash in MIME type (e.g. \"image/png\") with dash for a valid CSS class name.\n    const safeType = file.type ? file.type.replace('/', '-') : 'unknown'\n\n    const div = document.createElement('div')\n    div.className = `file-preview file-preview-${safeType} layer-children`\n\n    const typeBadge = document.createElement('span')\n    typeBadge.className = 'midwest-badge size-default theme-primary'\n    const typeValue = document.createElement('span')\n    typeValue.className = 'value'\n    typeValue.textContent = file.type || 'Unknown'\n    typeBadge.appendChild(typeValue)\n    div.appendChild(typeBadge)\n\n    const sizeBadge = document.createElement('span')\n    sizeBadge.className = 'midwest-badge size-default theme-gray ml-auto'\n    const sizeValue = document.createElement('span')\n    sizeValue.className = 'value'\n    sizeValue.textContent = new Intl.NumberFormat(undefined, {\n      notation: 'compact',\n      style: 'unit',\n      unit: 'byte',\n      unitDisplay: 'narrow'\n    }).format(file.size)\n    sizeBadge.appendChild(sizeValue)\n    div.appendChild(sizeBadge)\n\n    if (file.type.startsWith('image/')) {\n      const img = document.createElement('img')\n      img.src = window.URL.createObjectURL(file)\n      div.appendChild(img)\n    } else {\n      const placeholder = document.createElement('div')\n      placeholder.className = 'placeholder-file'\n      placeholder.innerHTML = file.type.startsWith('video/') ? this.videoIcon : this.fileIcon\n      div.appendChild(placeholder)\n    }\n\n    return div\n  }\n\n  private readonly 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>'\n\n  private readonly 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>'\n\n  get files () {\n    if (this.inputTarget.files == null) {\n      return []\n    }\n    return Array.from(this.inputTarget.files)\n  }\n}\n"],"names":[],"mappings":";;AAGA,MAAqB,aAAa,UAA4B,CAAA;AAAA,EAC5D,OAAO,OAAA,GAAU,CAAC,OAAA,EAAS,QAAQ,CAAA,CAAA;AAAA;AAAA,EAW3B,eAAe,MAAM;AAC3B,IAAA,IAAA,CAAK,cAAe,EAAA,CAAA;AAAA,GACtB,CAAA;AAAA,EAEA,OAAW,GAAA;AACT,IAAA,IAAA,CAAK,WAAY,CAAA,gBAAA,CAAiB,QAAU,EAAA,IAAA,CAAK,YAAY,CAAA,CAAA;AAAA,GAC/D;AAAA,EAEA,UAAc,GAAA;AACZ,IAAA,IAAA,CAAK,WAAY,CAAA,mBAAA,CAAoB,QAAU,EAAA,IAAA,CAAK,YAAY,CAAA,CAAA;AAAA,GAClE;AAAA,EAEQ,cAAkB,GAAA;AACxB,IAAA,IAAA,CAAK,aAAa,SAAY,GAAA,EAAA,CAAA;AAC9B,IAAK,IAAA,CAAA,KAAA,CAAM,QAAQ,CAAQ,IAAA,KAAA;AACzB,MAAA,IAAA,CAAK,YAAa,CAAA,WAAA,CAAY,IAAK,CAAA,YAAA,CAAa,IAAI,CAAC,CAAA,CAAA;AAAA,KACtD,CAAA,CAAA;AAAA,GACH;AAAA,EAEQ,aAAc,IAAoC,EAAA;AAExD,IAAM,MAAA,QAAA,GAAW,KAAK,IAAO,GAAA,IAAA,CAAK,KAAK,OAAQ,CAAA,GAAA,EAAK,GAAG,CAAI,GAAA,SAAA,CAAA;AAE3D,IAAM,MAAA,GAAA,GAAM,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACxC,IAAA,GAAA,CAAI,YAAY,CAA6B,0BAAA,EAAA,QAAA,CAAA,eAAA,CAAA,CAAA;AAE7C,IAAM,MAAA,SAAA,GAAY,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC/C,IAAA,SAAA,CAAU,SAAY,GAAA,0CAAA,CAAA;AACtB,IAAM,MAAA,SAAA,GAAY,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC/C,IAAA,SAAA,CAAU,SAAY,GAAA,OAAA,CAAA;AACtB,IAAU,SAAA,CAAA,WAAA,GAAc,KAAK,IAAQ,IAAA,SAAA,CAAA;AACrC,IAAA,SAAA,CAAU,YAAY,SAAS,CAAA,CAAA;AAC/B,IAAA,GAAA,CAAI,YAAY,SAAS,CAAA,CAAA;AAEzB,IAAM,MAAA,SAAA,GAAY,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC/C,IAAA,SAAA,CAAU,SAAY,GAAA,+CAAA,CAAA;AACtB,IAAM,MAAA,SAAA,GAAY,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC/C,IAAA,SAAA,CAAU,SAAY,GAAA,OAAA,CAAA;AACtB,IAAA,SAAA,CAAU,WAAc,GAAA,IAAI,IAAK,CAAA,YAAA,CAAa,KAAW,CAAA,EAAA;AAAA,MACvD,QAAU,EAAA,SAAA;AAAA,MACV,KAAO,EAAA,MAAA;AAAA,MACP,IAAM,EAAA,MAAA;AAAA,MACN,WAAa,EAAA,QAAA;AAAA,KACd,CAAA,CAAE,MAAO,CAAA,IAAA,CAAK,IAAI,CAAA,CAAA;AACnB,IAAA,SAAA,CAAU,YAAY,SAAS,CAAA,CAAA;AAC/B,IAAA,GAAA,CAAI,YAAY,SAAS,CAAA,CAAA;AAEzB,IAAA,IAAI,IAAK,CAAA,IAAA,CAAK,UAAW,CAAA,QAAQ,CAAG,EAAA;AAClC,MAAM,MAAA,GAAA,GAAM,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACxC,MAAA,GAAA,CAAI,GAAM,GAAA,MAAA,CAAO,GAAI,CAAA,eAAA,CAAgB,IAAI,CAAA,CAAA;AACzC,MAAA,GAAA,CAAI,YAAY,GAAG,CAAA,CAAA;AAAA,KACd,MAAA;AACL,MAAM,MAAA,WAAA,GAAc,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAChD,MAAA,WAAA,CAAY,SAAY,GAAA,kBAAA,CAAA;AACxB,MAAY,WAAA,CAAA,SAAA,GAAY,KAAK,IAAK,CAAA,UAAA,CAAW,QAAQ,CAAI,GAAA,IAAA,CAAK,YAAY,IAAK,CAAA,QAAA,CAAA;AAC/E,MAAA,GAAA,CAAI,YAAY,WAAW,CAAA,CAAA;AAAA,KAC7B;AAEA,IAAO,OAAA,GAAA,CAAA;AAAA,GACT;AAAA,EAEiB,QAAW,GAAA,sdAAA,CAAA;AAAA,EAEX,SAAY,GAAA,6iBAAA,CAAA;AAAA,EAE7B,IAAI,KAAS,GAAA;AACX,IAAI,IAAA,IAAA,CAAK,WAAY,CAAA,KAAA,IAAS,IAAM,EAAA;AAClC,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AACA,IAAA,OAAO,KAAM,CAAA,IAAA,CAAK,IAAK,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,GAC1C;AACF;;;;"}

package/dist/javascript/collection/app/components/midwest/form/form_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from '@hotwired/stimulus';
+
+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])')
+    );
+  }
+}
+
+export { Form as default };
+//# sourceMappingURL=form_controller.js.map

package/dist/javascript/collection/app/components/midwest/form/form_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form_controller.js","sources":["../../../../../../../app/components/midwest/form/form_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class Form extends Controller<HTMLFormElement> {\n  connect () {\n    this.element.addEventListener('submit', this.handleSubmit)\n    this.element.addEventListener('turbo:submit-end', this.handleTurboEnd)\n  }\n\n  disconnect () {\n    this.element.removeEventListener('submit', this.handleSubmit)\n    this.element.removeEventListener('turbo:submit-end', this.handleTurboEnd)\n  }\n\n  private handleSubmit = () => {\n    this.submitButtons.forEach(btn => {\n      btn.classList.add('loading')\n      btn.disabled = true\n    })\n  }\n\n  // Restore buttons if the submission fails (e.g. a Turbo Frame validation\n  // error that re-renders the form without a full page transition).\n  private handleTurboEnd = (event: Event) => {\n    if (!(event as CustomEvent).detail?.success) {\n      this.submitButtons.forEach(btn => {\n        btn.classList.remove('loading')\n        btn.disabled = false\n      })\n    }\n  }\n\n  private get submitButtons (): HTMLButtonElement[] {\n    return Array.from(\n      this.element.querySelectorAll<HTMLButtonElement>('button[type=\"submit\"], button:not([type])')\n    )\n  }\n}\n"],"names":[],"mappings":";;AAGA,MAAqB,aAAa,UAA4B,CAAA;AAAA,EAC5D,OAAW,GAAA;AACT,IAAA,IAAA,CAAK,OAAQ,CAAA,gBAAA,CAAiB,QAAU,EAAA,IAAA,CAAK,YAAY,CAAA,CAAA;AACzD,IAAA,IAAA,CAAK,OAAQ,CAAA,gBAAA,CAAiB,kBAAoB,EAAA,IAAA,CAAK,cAAc,CAAA,CAAA;AAAA,GACvE;AAAA,EAEA,UAAc,GAAA;AACZ,IAAA,IAAA,CAAK,OAAQ,CAAA,mBAAA,CAAoB,QAAU,EAAA,IAAA,CAAK,YAAY,CAAA,CAAA;AAC5D,IAAA,IAAA,CAAK,OAAQ,CAAA,mBAAA,CAAoB,kBAAoB,EAAA,IAAA,CAAK,cAAc,CAAA,CAAA;AAAA,GAC1E;AAAA,EAEQ,eAAe,MAAM;AAC3B,IAAK,IAAA,CAAA,aAAA,CAAc,QAAQ,CAAO,GAAA,KAAA;AAChC,MAAI,GAAA,CAAA,SAAA,CAAU,IAAI,SAAS,CAAA,CAAA;AAC3B,MAAA,GAAA,CAAI,QAAW,GAAA,IAAA,CAAA;AAAA,KAChB,CAAA,CAAA;AAAA,GACH,CAAA;AAAA;AAAA;AAAA,EAIQ,cAAA,GAAiB,CAAC,KAAiB,KAAA;AACzC,IAAI,IAAA,CAAE,KAAsB,CAAA,MAAA,EAAQ,OAAS,EAAA;AAC3C,MAAK,IAAA,CAAA,aAAA,CAAc,QAAQ,CAAO,GAAA,KAAA;AAChC,QAAI,GAAA,CAAA,SAAA,CAAU,OAAO,SAAS,CAAA,CAAA;AAC9B,QAAA,GAAA,CAAI,QAAW,GAAA,KAAA,CAAA;AAAA,OAChB,CAAA,CAAA;AAAA,KACH;AAAA,GACF,CAAA;AAAA,EAEA,IAAY,aAAsC,GAAA;AAChD,IAAA,OAAO,KAAM,CAAA,IAAA;AAAA,MACX,IAAA,CAAK,OAAQ,CAAA,gBAAA,CAAoC,2CAA2C,CAAA;AAAA,KAC9F,CAAA;AAAA,GACF;AACF;;;;"}

package/dist/javascript/collection/app/components/midwest/form/input_component/input_component_controller.js

@@ -2,8 +2,16 @@ import { Controller } from '@hotwired/stimulus';
 
 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") {
@@ -13,6 +21,46 @@ 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();
+    });
+  }
 }
 
 export { Input as default };

package/dist/javascript/collection/app/components/midwest/form/input_component/input_component_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"input_component_controller.js","sources":["../../../../../../../../app/components/midwest/form/input_component/input_component_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class Input extends Controller<HTMLFormElement> {\n  static targets = ['input']\n\n  declare readonly hasInputTarget: boolean\n  declare readonly inputTarget: HTMLInputElement\n  declare readonly inputTargets: HTMLInputElement[]\n\n  connect () {\n    this.applyColor()\n  }\n\n  applyColor () {\n    if (this.inputTarget.type !== 'color') {\n      return\n    }\n\n    this.inputTarget.addEventListener('input', () => {\n      this.inputTarget.setAttribute('value', this.inputTarget.value)\n    })\n  }\n}\n"],"names":[],"mappings":";;AAGA,MAAqB,cAAc,UAA4B,CAAA;AAAA,EAC7D,OAAO,OAAU,GAAA,CAAC,OAAO,CAAA,CAAA;AAAA,EAMzB,OAAW,GAAA;AACT,IAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAAA,GAClB;AAAA,EAEA,UAAc,GAAA;AACZ,IAAI,IAAA,IAAA,CAAK,WAAY,CAAA,IAAA,KAAS,OAAS,EAAA;AACrC,MAAA,OAAA;AAAA,KACF;AAEA,IAAK,IAAA,CAAA,WAAA,CAAY,gBAAiB,CAAA,OAAA,EAAS,MAAM;AAC/C,MAAA,IAAA,CAAK,WAAY,CAAA,YAAA,CAAa,OAAS,EAAA,IAAA,CAAK,YAAY,KAAK,CAAA,CAAA;AAAA,KAC9D,CAAA,CAAA;AAAA,GACH;AACF;;;;"}
+{"version":3,"file":"input_component_controller.js","sources":["../../../../../../../../app/components/midwest/form/input_component/input_component_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class Input extends Controller<HTMLFormElement> {\n  static targets = ['input']\n\n  declare readonly hasInputTarget: boolean\n  declare readonly inputTarget: HTMLInputElement\n  declare readonly inputTargets: HTMLInputElement[]\n\n  private updateClearButton: (() => void) | null = null\n\n  connect () {\n    this.applyColor()\n    this.applySearchClear()\n  }\n\n  disconnect () {\n    if (this.updateClearButton) {\n      this.inputTarget.removeEventListener('input', this.updateClearButton)\n      this.updateClearButton = null\n    }\n  }\n\n  applyColor () {\n    if (this.inputTarget.type !== 'color') {\n      return\n    }\n\n    this.inputTarget.addEventListener('input', () => {\n      this.inputTarget.setAttribute('value', this.inputTarget.value)\n    })\n  }\n\n  private applySearchClear () {\n    if (this.inputTarget.type !== 'search') return\n    // Browsers that natively render a cancel button (Chrome, Safari, Edge)\n    // already handle clearing. Only inject for browsers that don't (Firefox).\n    if (CSS.supports('selector(::-webkit-search-cancel-button)')) return\n\n    const button = document.createElement('button')\n    button.type = 'button'\n    button.setAttribute('aria-label', 'Clear search')\n    button.classList.add('midwest-input-search-clear')\n    button.hidden = this.inputTarget.value.length === 0\n\n    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n    svg.setAttribute('viewBox', '0 0 24 24')\n    svg.setAttribute('fill', 'none')\n    svg.setAttribute('stroke', 'currentColor')\n    svg.setAttribute('stroke-width', '2')\n    svg.setAttribute('aria-hidden', 'true')\n    svg.setAttribute('width', '16')\n    svg.setAttribute('height', '16')\n\n    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n    path.setAttribute('stroke-linecap', 'round')\n    path.setAttribute('stroke-linejoin', 'round')\n    path.setAttribute('d', 'M6 18L18 6M6 6l12 12')\n    svg.appendChild(path)\n    button.appendChild(svg)\n\n    const wrapper = document.createElement('div')\n    wrapper.classList.add('midwest-input-search-wrapper')\n    this.inputTarget.parentElement?.insertBefore(wrapper, this.inputTarget)\n    wrapper.appendChild(this.inputTarget)\n    wrapper.appendChild(button)\n\n    this.updateClearButton = () => {\n      button.hidden = this.inputTarget.value.length === 0\n    }\n\n    this.inputTarget.addEventListener('input', this.updateClearButton)\n\n    button.addEventListener('click', () => {\n      this.inputTarget.value = ''\n      button.hidden = true\n      this.inputTarget.dispatchEvent(new Event('input', { bubbles: true }))\n      this.inputTarget.focus()\n    })\n  }\n}\n"],"names":[],"mappings":";;AAGA,MAAqB,cAAc,UAA4B,CAAA;AAAA,EAC7D,OAAO,OAAU,GAAA,CAAC,OAAO,CAAA,CAAA;AAAA,EAMjB,iBAAyC,GAAA,IAAA,CAAA;AAAA,EAEjD,OAAW,GAAA;AACT,IAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAChB,IAAA,IAAA,CAAK,gBAAiB,EAAA,CAAA;AAAA,GACxB;AAAA,EAEA,UAAc,GAAA;AACZ,IAAA,IAAI,KAAK,iBAAmB,EAAA;AAC1B,MAAA,IAAA,CAAK,WAAY,CAAA,mBAAA,CAAoB,OAAS,EAAA,IAAA,CAAK,iBAAiB,CAAA,CAAA;AACpE,MAAA,IAAA,CAAK,iBAAoB,GAAA,IAAA,CAAA;AAAA,KAC3B;AAAA,GACF;AAAA,EAEA,UAAc,GAAA;AACZ,IAAI,IAAA,IAAA,CAAK,WAAY,CAAA,IAAA,KAAS,OAAS,EAAA;AACrC,MAAA,OAAA;AAAA,KACF;AAEA,IAAK,IAAA,CAAA,WAAA,CAAY,gBAAiB,CAAA,OAAA,EAAS,MAAM;AAC/C,MAAA,IAAA,CAAK,WAAY,CAAA,YAAA,CAAa,OAAS,EAAA,IAAA,CAAK,YAAY,KAAK,CAAA,CAAA;AAAA,KAC9D,CAAA,CAAA;AAAA,GACH;AAAA,EAEQ,gBAAoB,GAAA;AAC1B,IAAI,IAAA,IAAA,CAAK,YAAY,IAAS,KAAA,QAAA;AAAU,MAAA,OAAA;AAGxC,IAAI,IAAA,GAAA,CAAI,SAAS,0CAA0C,CAAA;AAAG,MAAA,OAAA;AAE9D,IAAM,MAAA,MAAA,GAAS,QAAS,CAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AAC9C,IAAA,MAAA,CAAO,IAAO,GAAA,QAAA,CAAA;AACd,IAAO,MAAA,CAAA,YAAA,CAAa,cAAc,cAAc,CAAA,CAAA;AAChD,IAAO,MAAA,CAAA,SAAA,CAAU,IAAI,4BAA4B,CAAA,CAAA;AACjD,IAAA,MAAA,CAAO,MAAS,GAAA,IAAA,CAAK,WAAY,CAAA,KAAA,CAAM,MAAW,KAAA,CAAA,CAAA;AAElD,IAAA,MAAM,GAAM,GAAA,QAAA,CAAS,eAAgB,CAAA,4BAAA,EAA8B,KAAK,CAAA,CAAA;AACxE,IAAI,GAAA,CAAA,YAAA,CAAa,WAAW,WAAW,CAAA,CAAA;AACvC,IAAI,GAAA,CAAA,YAAA,CAAa,QAAQ,MAAM,CAAA,CAAA;AAC/B,IAAI,GAAA,CAAA,YAAA,CAAa,UAAU,cAAc,CAAA,CAAA;AACzC,IAAI,GAAA,CAAA,YAAA,CAAa,gBAAgB,GAAG,CAAA,CAAA;AACpC,IAAI,GAAA,CAAA,YAAA,CAAa,eAAe,MAAM,CAAA,CAAA;AACtC,IAAI,GAAA,CAAA,YAAA,CAAa,SAAS,IAAI,CAAA,CAAA;AAC9B,IAAI,GAAA,CAAA,YAAA,CAAa,UAAU,IAAI,CAAA,CAAA;AAE/B,IAAA,MAAM,IAAO,GAAA,QAAA,CAAS,eAAgB,CAAA,4BAAA,EAA8B,MAAM,CAAA,CAAA;AAC1E,IAAK,IAAA,CAAA,YAAA,CAAa,kBAAkB,OAAO,CAAA,CAAA;AAC3C,IAAK,IAAA,CAAA,YAAA,CAAa,mBAAmB,OAAO,CAAA,CAAA;AAC5C,IAAK,IAAA,CAAA,YAAA,CAAa,KAAK,sBAAsB,CAAA,CAAA;AAC7C,IAAA,GAAA,CAAI,YAAY,IAAI,CAAA,CAAA;AACpB,IAAA,MAAA,CAAO,YAAY,GAAG,CAAA,CAAA;AAEtB,IAAM,MAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAC5C,IAAQ,OAAA,CAAA,SAAA,CAAU,IAAI,8BAA8B,CAAA,CAAA;AACpD,IAAA,IAAA,CAAK,WAAY,CAAA,aAAA,EAAe,YAAa,CAAA,OAAA,EAAS,KAAK,WAAW,CAAA,CAAA;AACtE,IAAQ,OAAA,CAAA,WAAA,CAAY,KAAK,WAAW,CAAA,CAAA;AACpC,IAAA,OAAA,CAAQ,YAAY,MAAM,CAAA,CAAA;AAE1B,IAAA,IAAA,CAAK,oBAAoB,MAAM;AAC7B,MAAA,MAAA,CAAO,MAAS,GAAA,IAAA,CAAK,WAAY,CAAA,KAAA,CAAM,MAAW,KAAA,CAAA,CAAA;AAAA,KACpD,CAAA;AAEA,IAAA,IAAA,CAAK,WAAY,CAAA,gBAAA,CAAiB,OAAS,EAAA,IAAA,CAAK,iBAAiB,CAAA,CAAA;AAEjE,IAAO,MAAA,CAAA,gBAAA,CAAiB,SAAS,MAAM;AACrC,MAAA,IAAA,CAAK,YAAY,KAAQ,GAAA,EAAA,CAAA;AACzB,MAAA,MAAA,CAAO,MAAS,GAAA,IAAA,CAAA;AAChB,MAAK,IAAA,CAAA,WAAA,CAAY,cAAc,IAAI,KAAA,CAAM,SAAS,EAAE,OAAA,EAAS,IAAK,EAAC,CAAC,CAAA,CAAA;AACpE,MAAA,IAAA,CAAK,YAAY,KAAM,EAAA,CAAA;AAAA,KACxB,CAAA,CAAA;AAAA,GACH;AACF;;;;"}

package/dist/javascript/collection/app/components/midwest/prose_component/prose_component_controller.js

@@ -9,7 +9,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();
     });

package/dist/javascript/collection/app/components/midwest/prose_component/prose_component_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"prose_component_controller.js","sources":["../../../../../../../app/components/midwest/prose_component/prose_component_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class Prose extends Controller<HTMLFormElement> {\n  static values = {\n    initial: { type: Number, default: 1 },\n    open: Boolean\n  }\n\n  declare openValue: boolean\n  declare initialValue: number\n  declare readonly hasOpenValue: boolean\n  declare readonly hasInitialValue: boolean\n\n  connect () {\n    if (!this.element.classList.contains('clamp')) {\n      return\n    }\n\n    this.initialValue = parseInt(getComputedStyle(this.element).getPropertyValue('--clamp'))\n\n    this.element.addEventListener('click', () => {\n      this.toggle()\n    })\n  }\n\n  toggle () {\n    if (this.openValue) {\n      this.element.style.setProperty('--clamp', `${this.initialValue}`)\n    } else {\n      this.element.style.setProperty('--clamp', '0')\n    }\n\n    this.openValue = !this.openValue\n  }\n}\n"],"names":[],"mappings":";;AAGA,MAAqB,cAAc,UAA4B,CAAA;AAAA,EAC7D,OAAO,MAAS,GAAA;AAAA,IACd,OAAS,EAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,CAAE,EAAA;AAAA,IACpC,IAAM,EAAA,OAAA;AAAA,GACR,CAAA;AAAA,EAOA,OAAW,GAAA;AACT,IAAA,IAAI,CAAC,IAAK,CAAA,OAAA,CAAQ,SAAU,CAAA,QAAA,CAAS,OAAO,CAAG,EAAA;AAC7C,MAAA,OAAA;AAAA,KACF;AAEA,IAAK,IAAA,CAAA,YAAA,GAAe,SAAS,gBAAiB,CAAA,IAAA,CAAK,OAAO,CAAE,CAAA,gBAAA,CAAiB,SAAS,CAAC,CAAA,CAAA;AAEvF,IAAK,IAAA,CAAA,OAAA,CAAQ,gBAAiB,CAAA,OAAA,EAAS,MAAM;AAC3C,MAAA,IAAA,CAAK,MAAO,EAAA,CAAA;AAAA,KACb,CAAA,CAAA;AAAA,GACH;AAAA,EAEA,MAAU,GAAA;AACR,IAAA,IAAI,KAAK,SAAW,EAAA;AAClB,MAAA,IAAA,CAAK,QAAQ,KAAM,CAAA,WAAA,CAAY,SAAW,EAAA,CAAA,EAAG,KAAK,YAAc,CAAA,CAAA,CAAA,CAAA;AAAA,KAC3D,MAAA;AACL,MAAA,IAAA,CAAK,OAAQ,CAAA,KAAA,CAAM,WAAY,CAAA,SAAA,EAAW,GAAG,CAAA,CAAA;AAAA,KAC/C;AAEA,IAAK,IAAA,CAAA,SAAA,GAAY,CAAC,IAAK,CAAA,SAAA,CAAA;AAAA,GACzB;AACF;;;;"}
+{"version":3,"file":"prose_component_controller.js","sources":["../../../../../../../app/components/midwest/prose_component/prose_component_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class Prose extends Controller<HTMLFormElement> {\n  static values = {\n    initial: { type: Number, default: 1 },\n    open: Boolean\n  }\n\n  declare openValue: boolean\n  declare initialValue: number\n  declare readonly hasOpenValue: boolean\n  declare readonly hasInitialValue: boolean\n\n  connect () {\n    if (!this.element.classList.contains('clamp')) {\n      return\n    }\n\n    const clamp = parseInt(getComputedStyle(this.element).getPropertyValue('--clamp'), 10)\n    this.initialValue = isNaN(clamp) ? 1 : clamp\n\n    this.element.addEventListener('click', () => {\n      this.toggle()\n    })\n  }\n\n  toggle () {\n    if (this.openValue) {\n      this.element.style.setProperty('--clamp', `${this.initialValue}`)\n    } else {\n      this.element.style.setProperty('--clamp', '0')\n    }\n\n    this.openValue = !this.openValue\n  }\n}\n"],"names":[],"mappings":";;AAGA,MAAqB,cAAc,UAA4B,CAAA;AAAA,EAC7D,OAAO,MAAS,GAAA;AAAA,IACd,OAAS,EAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,CAAE,EAAA;AAAA,IACpC,IAAM,EAAA,OAAA;AAAA,GACR,CAAA;AAAA,EAOA,OAAW,GAAA;AACT,IAAA,IAAI,CAAC,IAAK,CAAA,OAAA,CAAQ,SAAU,CAAA,QAAA,CAAS,OAAO,CAAG,EAAA;AAC7C,MAAA,OAAA;AAAA,KACF;AAEA,IAAM,MAAA,KAAA,GAAQ,SAAS,gBAAiB,CAAA,IAAA,CAAK,OAAO,CAAE,CAAA,gBAAA,CAAiB,SAAS,CAAA,EAAG,EAAE,CAAA,CAAA;AACrF,IAAA,IAAA,CAAK,YAAe,GAAA,KAAA,CAAM,KAAK,CAAA,GAAI,CAAI,GAAA,KAAA,CAAA;AAEvC,IAAK,IAAA,CAAA,OAAA,CAAQ,gBAAiB,CAAA,OAAA,EAAS,MAAM;AAC3C,MAAA,IAAA,CAAK,MAAO,EAAA,CAAA;AAAA,KACb,CAAA,CAAA;AAAA,GACH;AAAA,EAEA,MAAU,GAAA;AACR,IAAA,IAAI,KAAK,SAAW,EAAA;AAClB,MAAA,IAAA,CAAK,QAAQ,KAAM,CAAA,WAAA,CAAY,SAAW,EAAA,CAAA,EAAG,KAAK,YAAc,CAAA,CAAA,CAAA,CAAA;AAAA,KAC3D,MAAA;AACL,MAAA,IAAA,CAAK,OAAQ,CAAA,KAAA,CAAM,WAAY,CAAA,SAAA,EAAW,GAAG,CAAA,CAAA;AAAA,KAC/C;AAEA,IAAK,IAAA,CAAA,SAAA,GAAY,CAAC,IAAK,CAAA,SAAA,CAAA;AAAA,GACzB;AACF;;;;"}

package/dist/javascript/collection/app/components/midwest/tabs_component/tabs_component_controller.js

@@ -7,6 +7,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;
@@ -14,6 +18,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;

package/dist/javascript/collection/app/components/midwest/tabs_component/tabs_component_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs_component_controller.js","sources":["../../../../../../../app/components/midwest/tabs_component/tabs_component_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class Tabs extends Controller<HTMLElement> {\n  static targets = ['tab', 'panel']\n\n  declare readonly tabTargets: HTMLButtonElement[]\n  declare readonly panelTargets: HTMLElement[]\n\n  connect () {\n    const activeIndex = this.tabTargets.findIndex(\n      tab => tab.getAttribute('aria-selected') === 'true'\n    )\n    this.activateTab(activeIndex >= 0 ? activeIndex : 0)\n  }\n\n  select (event: Event) {\n    const tab = event.currentTarget as HTMLButtonElement\n    const index = this.tabTargets.indexOf(tab)\n    if (index >= 0) this.activateTab(index)\n  }\n\n  private activateTab (index: number) {\n    this.tabTargets.forEach((tab, i) => {\n      const active = i === index\n      tab.setAttribute('aria-selected', String(active))\n      tab.setAttribute('tabindex', active ? '0' : '-1')\n      tab.classList.toggle('active', active)\n    })\n\n    this.panelTargets.forEach((panel, i) => {\n      if (i === index) {\n        panel.removeAttribute('hidden')\n      } else {\n        panel.setAttribute('hidden', '')\n      }\n    })\n  }\n}\n"],"names":[],"mappings":";;AAGA,MAAqB,aAAa,UAAwB,CAAA;AAAA,EACxD,OAAO,OAAA,GAAU,CAAC,KAAA,EAAO,OAAO,CAAA,CAAA;AAAA,EAKhC,OAAW,GAAA;AACT,IAAM,MAAA,WAAA,GAAc,KAAK,UAAW,CAAA,SAAA;AAAA,MAClC,CAAO,GAAA,KAAA,GAAA,CAAI,YAAa,CAAA,eAAe,CAAM,KAAA,MAAA;AAAA,KAC/C,CAAA;AACA,IAAA,IAAA,CAAK,WAAY,CAAA,WAAA,IAAe,CAAI,GAAA,WAAA,GAAc,CAAC,CAAA,CAAA;AAAA,GACrD;AAAA,EAEA,OAAQ,KAAc,EAAA;AACpB,IAAA,MAAM,MAAM,KAAM,CAAA,aAAA,CAAA;AAClB,IAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,UAAW,CAAA,OAAA,CAAQ,GAAG,CAAA,CAAA;AACzC,IAAA,IAAI,KAAS,IAAA,CAAA;AAAG,MAAA,IAAA,CAAK,YAAY,KAAK,CAAA,CAAA;AAAA,GACxC;AAAA,EAEQ,YAAa,KAAe,EAAA;AAClC,IAAA,IAAA,CAAK,UAAW,CAAA,OAAA,CAAQ,CAAC,GAAA,EAAK,CAAM,KAAA;AAClC,MAAA,MAAM,SAAS,CAAM,KAAA,KAAA,CAAA;AACrB,MAAA,GAAA,CAAI,YAAa,CAAA,eAAA,EAAiB,MAAO,CAAA,MAAM,CAAC,CAAA,CAAA;AAChD,MAAA,GAAA,CAAI,YAAa,CAAA,UAAA,EAAY,MAAS,GAAA,GAAA,GAAM,IAAI,CAAA,CAAA;AAChD,MAAI,GAAA,CAAA,SAAA,CAAU,MAAO,CAAA,QAAA,EAAU,MAAM,CAAA,CAAA;AAAA,KACtC,CAAA,CAAA;AAED,IAAA,IAAA,CAAK,YAAa,CAAA,OAAA,CAAQ,CAAC,KAAA,EAAO,CAAM,KAAA;AACtC,MAAA,IAAI,MAAM,KAAO,EAAA;AACf,QAAA,KAAA,CAAM,gBAAgB,QAAQ,CAAA,CAAA;AAAA,OACzB,MAAA;AACL,QAAM,KAAA,CAAA,YAAA,CAAa,UAAU,EAAE,CAAA,CAAA;AAAA,OACjC;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AACF;;;;"}
+{"version":3,"file":"tabs_component_controller.js","sources":["../../../../../../../app/components/midwest/tabs_component/tabs_component_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class Tabs extends Controller<HTMLElement> {\n  static targets = ['tab', 'panel']\n\n  declare readonly tabTargets: HTMLButtonElement[]\n  declare readonly panelTargets: HTMLElement[]\n\n  connect () {\n    const activeIndex = this.tabTargets.findIndex(\n      tab => tab.getAttribute('aria-selected') === 'true'\n    )\n    this.activateTab(activeIndex >= 0 ? activeIndex : 0)\n    this.element.addEventListener('keydown', this.handleKeydown)\n  }\n\n  disconnect () {\n    this.element.removeEventListener('keydown', this.handleKeydown)\n  }\n\n  select (event: Event) {\n    const tab = event.currentTarget as HTMLButtonElement\n    const index = this.tabTargets.indexOf(tab)\n    if (index >= 0) this.activateTab(index)\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    const tabs = this.tabTargets\n    if (tabs.length === 0) return\n\n    const currentIndex = tabs.findIndex(t => t === document.activeElement)\n    if (currentIndex < 0) return\n\n    let nextIndex: number\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length\n        break\n      case 'ArrowRight':\n        nextIndex = (currentIndex + 1) % tabs.length\n        break\n      case 'Home':\n        nextIndex = 0\n        break\n      case 'End':\n        nextIndex = tabs.length - 1\n        break\n      default:\n        return\n    }\n\n    event.preventDefault()\n    this.activateTab(nextIndex)\n    tabs[nextIndex].focus()\n  }\n\n  private activateTab (index: number) {\n    this.tabTargets.forEach((tab, i) => {\n      const active = i === index\n      tab.setAttribute('aria-selected', String(active))\n      tab.setAttribute('tabindex', active ? '0' : '-1')\n      tab.classList.toggle('active', active)\n    })\n\n    this.panelTargets.forEach((panel, i) => {\n      if (i === index) {\n        panel.removeAttribute('hidden')\n      } else {\n        panel.setAttribute('hidden', '')\n      }\n    })\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/javascript/collection/app/components/midwest/tooltip_component/tooltip_component_controller.js

@@ -2,12 +2,26 @@ import { Controller } from '@hotwired/stimulus';
 
 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();
+  };
 }
 
 export { Tooltip as default };

package/dist/javascript/collection/app/components/midwest/tooltip_component/tooltip_component_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip_component_controller.js","sources":["../../../../../../../app/components/midwest/tooltip_component/tooltip_component_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\nexport default class Tooltip extends Controller<HTMLElement> {\n  static targets = ['popover']\n\n  declare readonly popoverTarget: HTMLElement\n\n  show () {\n    this.popoverTarget.showPopover()\n  }\n\n  hide () {\n    this.popoverTarget.hidePopover()\n  }\n}\n"],"names":[],"mappings":";;AAEA,MAAqB,gBAAgB,UAAwB,CAAA;AAAA,EAC3D,OAAO,OAAU,GAAA,CAAC,SAAS,CAAA,CAAA;AAAA,EAI3B,IAAQ,GAAA;AACN,IAAA,IAAA,CAAK,cAAc,WAAY,EAAA,CAAA;AAAA,GACjC;AAAA,EAEA,IAAQ,GAAA;AACN,IAAA,IAAA,CAAK,cAAc,WAAY,EAAA,CAAA;AAAA,GACjC;AACF;;;;"}
+{"version":3,"file":"tooltip_component_controller.js","sources":["../../../../../../../app/components/midwest/tooltip_component/tooltip_component_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\nexport default class Tooltip extends Controller<HTMLElement> {\n  static targets = ['popover']\n\n  declare readonly popoverTarget: HTMLElement\n\n  connect () {\n    document.addEventListener('keydown', this.handleKeydown)\n  }\n\n  disconnect () {\n    document.removeEventListener('keydown', this.handleKeydown)\n  }\n\n  show () {\n    this.popoverTarget.showPopover()\n  }\n\n  hide () {\n    try {\n      this.popoverTarget.hidePopover()\n    } catch {\n      // already hidden\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape') return\n    this.hide()\n  }\n}\n"],"names":[],"mappings":";;AAEA,MAAqB,gBAAgB,UAAwB,CAAA;AAAA,EAC3D,OAAO,OAAU,GAAA,CAAC,SAAS,CAAA,CAAA;AAAA,EAI3B,OAAW,GAAA;AACT,IAAS,QAAA,CAAA,gBAAA,CAAiB,SAAW,EAAA,IAAA,CAAK,aAAa,CAAA,CAAA;AAAA,GACzD;AAAA,EAEA,UAAc,GAAA;AACZ,IAAS,QAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,IAAA,CAAK,aAAa,CAAA,CAAA;AAAA,GAC5D;AAAA,EAEA,IAAQ,GAAA;AACN,IAAA,IAAA,CAAK,cAAc,WAAY,EAAA,CAAA;AAAA,GACjC;AAAA,EAEA,IAAQ,GAAA;AACN,IAAI,IAAA;AACF,MAAA,IAAA,CAAK,cAAc,WAAY,EAAA,CAAA;AAAA,KAC/B,CAAA,MAAA;AAAA,KAEF;AAAA,GACF;AAAA,EAEQ,aAAA,GAAgB,CAAC,KAAyB,KAAA;AAChD,IAAA,IAAI,MAAM,GAAQ,KAAA,QAAA;AAAU,MAAA,OAAA;AAC5B,IAAA,IAAA,CAAK,IAAK,EAAA,CAAA;AAAA,GACZ,CAAA;AACF;;;;"}

package/dist/javascript/midwest.d.ts

@@ -22,7 +22,9 @@ declare class Card extends Controller<HTMLFormElement> {
     backHeightValue: number;
     readonly hasOriginalHeightValue: boolean;
     readonly hasBackHeightValue: boolean;
+    private resizeHandler;
     connect(): void;
+    disconnect(): void;
     get flippable(): boolean;
     applyReady(): Promise<void>;
     originalHeightValueChanged(): void;