fix: #3618070 Add the design's open and close motion to the header search bar

Issue: https://www.drupal.org/project/vartheme_bs5_educare/issues/3618070

Adds the design's open and close motion to the header search bar of the Vartheme BS5 Educare theme (Icon Toggle component).

What changed

• The bar crossfades with the header menu over 220ms ease, with a 4px vertical settle, matching the design prototype.
• Uses the translate property, not transform, so the inline bar's existing translateY(-50%) centring survives.
• transition-behavior: allow-discrete + @starting-style animate across Bootstrap's display toggle; without browser support the panel simply appears, as before.
• icon-toggle.js marks the header region is-search-open while the bar is open, so the menu can fade in step.
• Guarded by prefers-reduced-motion: reduce.

Ordering — please read

This branch was cut from 1.0.x and therefore also carries the geometry fix from https://www.drupal.org/project/vartheme_bs5_educare/issues/3618069. It should land AFTER that merge request merges, at which point this diff reduces to the motion alone.

Files

• components/organisms/icon-toggle/icon-toggle.scss
• components/organisms/icon-toggle/icon-toggle.css
• components/organisms/icon-toggle/icon-toggle.js

Testing

Local green gate with gitlab-ci-local before pushing: build, eslint, stylelint, cspell all PASS.

The two GIFs on the issue are recorded at 1100ms (~5x) for legibility; the shipped duration is 220ms.

AI-Generated: Yes

Checkpoints:

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