fix: hide the clear button differently depending on if JS rendered vs HTML-rendered; minor styling updates to account for the new nested <bolt-autosuggest> sub-component

Author: sghoweri

packages/components/bolt-typeahead/typeahead.scoped.scss

@@ -19,6 +19,15 @@ bolt-typeahead {
   display: flex;
   align-self: stretch;
   text-align: start;
+  position: relative;
+}
+
+:host {
+  position: relative;
+}
+
+bolt-autosuggest {
+  width: 100%;
 }
 
 .c-bolt-typeahead {
@@ -238,7 +247,7 @@ bolt-typeahead {
   font-size: 1rem; // needed for icon SSR rendering
 }
 
-.c-bolt-typeahead__input:valid ~ .c-bolt-typeahead__button--clear,
+.c-bolt-typeahead__input[required]:valid ~ .c-bolt-typeahead__button--clear,
 .c-bolt-typeahead__button--clear.is-visible {
   visibility: visible;
   opacity: 1;