Toggle search field in header comp as a popover

Author: JoelCDL

package-lock.json

@@ -37,6 +37,7 @@
     "@faker-js/faker": "^9.3.0",
     "@fortawesome/fontawesome-pro": "^6.7.2",
     "@marcotss/parcel-transformer-handlebars-json": "^1.0.0",
+    "@oddbird/css-anchor-positioning": "^0.6.1",
     "@parcel/optimizer-data-url": "^2.15.2",
     "@parcel/resolver-glob": "^2.15.2",
     "@parcel/transformer-inline-string": "^2.15.2",

package.json

@@ -1,4 +1,7 @@
-<form class="c-search" role="search" action="/">
-  <input type="search" name="s" aria-label="Search the California Digital Library">
-  <button>Search</button>
-</form>
+<div class="c-search">
+  <form popover id="search-form" class="c-search-form" role="search" action="/">
+    <input type="search" name="s" aria-label="Search the California Digital Library">
+    <button>Search</button>
+  </form>
+  <button popovertarget="search-form" class="c-search-toggle" aria-label="Toggle search field"></button>
+</div>

src/components/search.hbs

@@ -7,6 +7,10 @@
   padding: var(--uc3-space-lg);
   gap: var(--uc3-space-base);
   backdrop-filter: var(--text-backdrop-filter);
+
+  .c-search {
+    justify-self: end;
+  }
 }
 
 .c-headernav {
@@ -18,11 +22,6 @@
     grid-template-columns: 15rem auto;
     grid-template-rows: 2.1rem auto;
     gap: var(--uc3-space-base) 4rem;
-
-    .c-search {
-      justify-self: end;
-      inline-size: 20rem;
-    }
   }
 
   .c-header__logo {

src/css/components/header.css

@@ -2,19 +2,94 @@
 
 .c-search {
   display: flex;
+  justify-content: flex-end;
+
+  &:focus-within { /* #1 */
+    outline: 5px auto blue;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+}
+
+.c-search-form {
+  position-anchor: --my-anchor;
+  inset: auto;
+  right: anchor(left);
+  align-self: anchor-center;
+  width: 0; /* #2 */
+  height: anchor-size(height); /* #3 */
+  margin: 0;
+  margin-inline-end: var(--uc3-space-base);
+  padding: unset;
+  transition-property: opacity, display, width, overlay;
+  transition-duration: 0.3s;
+  transition-behavior: allow-discrete;
   border: 1px solid black;
+  opacity: 0; /* #2 */
 
   input {
-    flex: 1 1 auto;
     inline-size: 100%;
     padding: 0.3rem 0.6rem;
-    border: none;
+    border-style: none;
   }
 
   button {
     padding-inline: 0.8rem;
-    border: none;
+    border-style: none;
     background-color: black;
     color: white;
+
+    &:focus {
+      margin: 1px;
+      background-color: white;
+      color: black;
+    }
+  }
+
+  &:popover-open {
+    display: flex;
+    width: 45vw;
+    opacity: 1;
+  
+    @starting-style {
+      width: 0;
+      opacity: 0;
+    }
+  }
+}
+
+.c-search-toggle {
+  anchor-name: --my-anchor;
+  block-size: 1.9rem;
+  inline-size: 1.9rem;
+  padding: unset;
+  border-style: none;
+  background-color: var(--uc3-color-dark-blue);
+  mask: url('data-url:npm:fa-solid/magnifying-glass.svg') center / contain;
+}
+
+@media (width > 45rem) {
+  .c-search-form {
+    &:popover-open {
+      width: 35vw;
+
+      @starting-style { /* #4, 5 */
+        width: 0;
+        opacity: 0;
+      }
+    }
   }
 }
+
+/*
+#1: Search toggle loses it's focus ring with mask style, so reapply
+focus ring to the component container when toggle is focused.
+
+#2: Final state of the exit animation.
+
+#3: Set the popover height to that of the anchor (c-search-toggle).
+
+#4: Starting state for the animiation.
+
+#5: When using this media query, the starting styles before
+the query are reset for some reason, so duplicate them here.
+*/

src/css/components/search.css

@@ -8,6 +8,10 @@
 /* Global Variables */
 
 :root {
+  /* Enables transition of width or height to max-content or auto: */
+
+  interpolate-size: allow-keywords;
+
   /* Spacing: */
 
   --uc3-space-base: 1rem;

src/css/main.css

@@ -0,0 +1,17 @@
+// ***** Anchor Positioning Polyfill ***** //
+
+// Required for positioning elements that use the popover API. See https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file#configuration
+
+const anchorPositioningPolyfill = async () => {
+  const { default: polyfill } = await import('@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js')
+
+  polyfill({
+    elements: undefined,
+    excludeInlineStyles: false,
+    useAnimationFrame: false
+  })
+}
+
+if (!('anchorName' in document.documentElement.style)) {
+  anchorPositioningPolyfill()
+}