createOrganismScrollSync

Description#

Scroll-into-view effect for any strip-based organism (tabs, stepper headers, future scrolling lists).
Tracks activeId and scrolls the matching [id="<itemId>-header"] into view.

The DOM call sits in untracked() (only activeId is tracked).
scrollIntoView is missing in jsdom - guarded with optional chain.

UX / a11y#

• The active tab is never stranded off-screen: when activation moves to a tab clipped by overflow (keyboard arrow, deep link, programmatic select), its header scrolls into view, so the focused and selected tab is always visible (WCAG 2.4.7 Focus Visible).
• Pairs with the overflow surface: picking a hidden tab from the "More" popover scrolls it back into the strip, and the overflow recompute then self-trims - keyboard navigation and the overflow list stay in sync.
• Motion is overridable for reduced motion: the default is smooth-center along the inline axis; pass scrollOptions (e.g. behavior: 'auto') to honour prefers-reduced-motion or to scroll vertically.

// Install once from the organism's field-init (needs an injection context).
createOrganismScrollSync({
  activeId: this.presenter.activeId, // Signal<string | null>
  hostElement: this.hostElement,     // holds the [id="<tabId>-header"] buttons
  injector: this.injector,
  // scrollOptions omitted -> smooth-center; override for reduced motion:
  // scrollOptions: { behavior: 'auto' },
});