Style the Search in the Header

Problem/Motivation

The approved Varbase header design renders the header search as a flat inline bar on one hairline-underlined line: a leading magnifier icon, a subtle "Search by keyword" placeholder, and a trailing close control. From lg up the bar is 720px wide, sits inside the header row aligned to where the search icon was, and covers the main menu while open. Below lg it becomes a full-width band directly under the header. The Icon Toggle component added in issue #3614492 only renders a boxed popover panel (bordered, rounded, shadowed, 24rem), so a header search built from it cannot match the design at any breakpoint.

Two defects were also found while building this:

1. The trigger's transition resolves to Bootstrap's all .2s ease-in-out. visibility is a discrete transitionable property, so after the panel closes the trigger keeps reporting visibility: hidden for the whole transition duration. A focus() call on it is silently ignored and focus lands on the document body instead of returning to the trigger (fails after both the close button and Escape).
2. postcss-rtlcss flips a JS-measured physical left offset into right in the generated [dir="rtl"] block, which mis-positions the mobile band in RTL.

Steps to reproduce

1. Build a Varbase 11 site with Vartheme BS5 as the default theme.
2. In Drupal Canvas, edit the global Header region and place the Icon Toggle at the end of the header group, with the "Exposed form: search-page" block in its content slot.
3. View the front end at 1440px and at 375px, and open the search.

Result: a boxed popover drops below the icon at every width, instead of the designed inline bar / full-width band. Closing with Escape leaves focus on the document body.

Proposed resolution

• Add a panel prop to the component: popover (default, current behaviour unchanged) or bar.
• In bar mode render a leading icon and the panel's own close button inside the bar, and hand the trigger's job over to that close button while the bar is open (the trigger keeps its space so the header row does not reflow).
• Style the bar from Bootstrap tokens: 2.625rem tall, 1px --bs-border-color bottom border, 1rem inline-start padding, 0.875rem text in --bs-secondary-color, no box/radius/shadow, 45rem max width.
• Publish the geometry CSS cannot know (where the header band starts, ends and bottoms out; the room left beside the brand) as --icon-toggle-bar-* custom properties measured in the component JS, re-measured on resize and scroll so a sticky header keeps the bar attached. This avoids a 100vw breakout, which would ignore the admin toolbar offset and the scrollbar.
• Narrow the trigger and close button transition-property to background-color, color so visibility is not animated, and restore focus to the trigger after the close button and Escape.
• Mark the measured mobile rule /* rtl:ignore */ so the physical left is not flipped.
• Place the Icon Toggle on the brand's line below lg in the theme's header layout (scss/base/vartheme.base.scss), beside the existing pinned hamburger, instead of letting it claim a row of its own below the logo.

AI-Generated: Yes

Remaining tasks

• ✅ File an issue about this project
• ❌ Addition/Change/Update/Fix to this project
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ❌ Code review from 1 Varbase core team member
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ✅ Release

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• New "Panel style" option on the Icon Toggle component (Boxed popover / Inline bar); defaults to Boxed popover so existing placements are unchanged. Below lg the header's icon toggle now shares the brand's line with the hamburger.

API changes

• No (additive prop only).

Data model changes

• No.

Release notes snippet

• The Icon Toggle component gains a "Panel style" option. Choose "Inline bar" for a header search bar that matches the Varbase header design at every breakpoint. Focus now returns to the trigger when the panel is closed with Escape or the close button.