Add search variant to form block (Find Your Cruise bar)

blocks/form/form.css

@@ -235,3 +235,114 @@
     width: max-content;
   }
 }
+
+/* search variant: horizontal "find your cruise" style search bar.
+   The band background (e.g. navy) is provided at the section/page level,
+   for example via Section Metadata Style "dark". The block owns its own
+   vertical padding so the pill always has breathing room in the band;
+   horizontal insets come from the section's content column. */
+.form.search {
+  padding: 24px 0;
+}
+
+.form.search form {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+  border-radius: 16px;
+  background-color: var(--background-color);
+}
+
+/* hide the field labels; the placeholder option carries the field name */
+.form.search .form-field > label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.form.search .form-field {
+  display: flex;
+  flex: 1;
+  margin: 0;
+}
+
+.form.search .form-field + .form-field {
+  margin-top: 0;
+  border-top: 1px solid var(--border-color);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.form.search select {
+  width: 100%;
+  height: 100%;
+  padding: 1em 3em 1em 1.5em;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23022658" stroke-width="2"><path d="M4 6l4 4 4-4"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 1.25em center;
+  background-size: 1em;
+  appearance: none;
+  color: var(--brand-navy);
+  font-weight: 700;
+  font-size: var(--body-font-size-m);
+  cursor: pointer;
+}
+
+.form.search select:hover {
+  border-color: transparent;
+  background-color: var(--light-color);
+}
+
+.form.search select:focus {
+  outline: 2px solid var(--brand-blue);
+  outline-offset: -2px;
+}
+
+.form.search .button-wrapper {
+  display: flex;
+  margin: 0;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.form.search .button-wrapper button.button {
+  width: 100%;
+  height: 100%;
+  padding: 1em 2em;
+  border: 0;
+  border-radius: 0;
+  background-color: var(--cta-color);
+  color: #fff;
+  font-weight: 700;
+  font-size: var(--body-font-size-m);
+  white-space: nowrap;
+}
+
+.form.search .button-wrapper button.button:hover {
+  background-color: var(--cta-hover-color);
+}
+
+@media (width >= 900px) {
+  .form.search form {
+    flex-direction: row;
+    align-items: stretch;
+    border-radius: 999px;
+  }
+
+  .form.search .form-field + .form-field {
+    border-top: 0;
+    border-left: 1px solid var(--border-color);
+  }
+
+  .form.search .button-wrapper button.button {
+    width: max-content;
+  }
+}

blocks/form/form.js

@@ -657,6 +657,18 @@ export default function decorate(block) {
             const form = buildForm(data, submit);
             block.replaceChildren(form);
             block.removeAttribute('style');
+            // search variant has no submit endpoint yet; preview the query for now
+            if (block.classList.contains('search') && !submit) {
+              form.addEventListener('submit', (e) => {
+                e.preventDefault();
+                const payload = generatePayload(form);
+                const summary = Object.entries(payload)
+                  .map(([key, value]) => `${key}: ${value || '(any)'}`)
+                  .join('\n');
+                // eslint-disable-next-line no-alert
+                window.alert(`Find Your Cruise\n\n${summary}`);
+              });
+            }
           } catch (error) {
             // eslint-disable-next-line no-console
             console.error('Could not build form from', source, error);