<form class="csb-expand" role="search">
  <label class="csb-sr" for="csb-expand-i">Search</label>
  <button type="button" class="csb-expand-toggle" aria-label="Open search">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
  </button>
  <input id="csb-expand-i" type="search" name="q" placeholder="Type to search..." />
</form>

.csb-expand {
  display: inline-flex; align-items: center;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 4px;
  transition: border-color 0.2s;
}
.csb-expand:focus-within, .csb-expand.is-open { border-color: #7c6cff; }
.csb-expand-toggle {
  width: 36px; height: 36px;
  border: 0; cursor: pointer; background: transparent;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.csb-expand-toggle svg { width: 16px; height: 16px; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; }
.csb-expand input {
  width: 0; padding: 0; border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  transition: width 0.35s cubic-bezier(0.65,0,0.35,1), padding 0.35s;
}
.csb-expand input::placeholder { color: #b8b6d4; }
.csb-expand.is-open input { width: 200px; padding: 0 14px; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

document.querySelectorAll('.csb-expand').forEach(function(form) {
  var toggle = form.querySelector('.csb-expand-toggle');
  var input  = form.querySelector('input');
  toggle.addEventListener('click', function() {
    form.classList.add('is-open');
    setTimeout(function() { input.focus(); }, 200);
  });
  input.addEventListener('blur', function() {
    if (!input.value) form.classList.remove('is-open');
  });
});