fix: Header search bar opens and closes with no motion

Problem/Motivation

The header search bar opens and closes instantly — Bootstrap toggles display, so the band jumps in and out and the main menu is simply covered. The design prototype crossfades: the menu links and the "Search" label fade out while the bar and its close X fade in on the same line, with a small vertical settle, and the close is the exact mirror. Sampled in the prototype: about 20% at 45ms, 70% at 145ms, settled by 220ms.

Opening.

Closing.

Both recorded with the transition slowed to 1100ms (about 5x) so the curve is legible frame by frame; the shipped duration is 220ms.

See the attached GIFs, and the geometry fix in fix: Header search bar does not follow the design — geometry, background and mobile band, which this builds on and should land first.

Steps to reproduce

1. Install the Educare site template on Varbase 11 and open the front page at 1440px.
2. Click the header search icon, then the close X.
3. Both happen instantly, with no crossfade.

Proposed resolution

In components/organisms/icon-toggle:

• Crossfade the panel on opacity over 220ms with a 4px settle on the translate property (transform is already used for centring), plus transition-behavior: allow-discrete and @starting-style to animate across Bootstrap's display toggle; without support the panel appears as before.
• Add is-search-open to the measured band from icon-toggle.js on show.bs.dropdown / hide.bs.dropdown so the main menu fades over the same 220ms.
• Guard both with prefers-reduced-motion: reduce.

Files: icon-toggle.scss, icon-toggle.css (built), icon-toggle.js.

Merge request: !31.

AI-Generated: Yes

Remaining tasks

• ✅ File an issue
• ✅ Addition/Change/Update/Fix
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ❌ UX/UI designer responsibilities
• ❌ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ✅ Update Release Notes
• ✅ Release

User interface changes

• Yes — the search bar now crossfades with the main menu instead of appearing instantly.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Added the design's open and close motion to the header search bar.