Search Expand

<!-- Search Expand — search icon that expands into input on click -->
<div class="nuda-search-expand" role="search">
  <input class="nuda-search-expand__input" type="search"
         placeholder="Search..." aria-label="Search" />
  <button class="nuda-search-expand__btn" type="button" aria-label="Toggle search">
    <!-- Magnifying glass SVG -->
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round"
         stroke-linejoin="round" aria-hidden="true">
      <circle cx="11" cy="11" r="8"/>
      <line x1="21" y1="21" x2="16.65" y2="16.65"/>
    </svg>
  </button>
</div>

/* ── Search Expand ───────────────────────────────────────────
   Customize:
     --nuda-se-clr       : accent color
     --nuda-se-bg        : input background when expanded
     --nuda-se-width     : expanded input width
     --nuda-se-speed     : expand/collapse speed
   ──────────────────────────────────────────────────────────── */
.nuda-search-expand {
  --nuda-se-clr: #6366f1;
  --nuda-se-bg: transparent;
  --nuda-se-width: 240px;
  --nuda-se-speed: 0.35s;

  position: relative;
  display: inline-flex;
  align-items: center;
}

.nuda-search-expand__input {
  width: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 20px;
  font-size: 0.95rem;
  background: var(--nuda-se-bg);
  outline: none;
  opacity: 0;
  transition:
    width var(--nuda-se-speed) ease,
    padding var(--nuda-se-speed) ease,
    opacity var(--nuda-se-speed) ease,
    border-color var(--nuda-se-speed) ease;
}

.nuda-search-expand.is-open .nuda-search-expand__input {
  width: var(--nuda-se-width);
  padding: 8px 40px 8px 16px;
  opacity: 1;
  border-color: var(--nuda-se-clr);
}

.nuda-search-expand__btn {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--nuda-se-clr);
  border-radius: 50%;
  background: transparent;
  color: var(--nuda-se-clr);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  z-index: 1;
}

.nuda-search-expand.is-open .nuda-search-expand__btn {
  border-color: transparent;
}

.nuda-search-expand__btn:hover {
  background: var(--nuda-se-clr);
  color: #fff;
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-search-expand__input {
    transition: none;
  }
}

/* ── Search Expand — vanilla JS ──────────────────────────────
   Toggles the .is-open class and manages focus.
   Respects prefers-reduced-motion (animation is CSS-only).
   ──────────────────────────────────────────────────────────── */
;(function () {
  document.querySelectorAll(".nuda-search-expand").forEach(function (wrapper) {
    var btn   = wrapper.querySelector(".nuda-search-expand__btn");
    var input = wrapper.querySelector(".nuda-search-expand__input");
    if (!btn || !input) return;

    btn.addEventListener("click", function () {
      var isOpen = wrapper.classList.toggle("is-open");
      if (isOpen) {
        input.focus();
      } else {
        input.value = "";
        input.blur();
      }
    });

    /* Close when clicking outside */
    document.addEventListener("click", function (e) {
      if (!wrapper.contains(e.target)) {
        wrapper.classList.remove("is-open");
      }
    });

    /* Close on Escape */
    input.addEventListener("keydown", function (e) {
      if (e.key === "Escape") {
        wrapper.classList.remove("is-open");
        btn.focus();
      }
    });
  });
})();