<s-button href> in <s-page> primary-action slot triggers full page load (no shopify:navigate event)

Polaris
1

When an <s-button> with an href attribute is placed inside the primary-action slot, clicking it triggers a full page navigation instead of a SPA transition. The shopify:navigate event is never dispatched in this case.

Steps to reproduce:

Place an <s-button> with variant="primary" and href inside the primary-action slot and listen for the shopify:navigate event on the document:

export function Component() {
  useEffect(() => {
    const handleNavigate = (event) => {
      console.log(event);
    };
    document.addEventListener('shopify:navigate', handleNavigate);
    return () => document.removeEventListener('shopify:navigate', handleNavigate);
  }, []);

  return (
    <s-page heading="Test Page">
      <s-button slot="primary-action" variant="primary" href="/test">
        Test button
      </s-button>
    </s-page>
  );
}

Expected behavior: Clicking the button dispatches a shopify:navigate event and navigates within the SPA without a full page reload.

Actual behavior: No shopify:navigate event is dispatched. The browser performs a full page load instead.

Is this a known limitation/bug with the primary-action slot rendering, or is there a recommended pattern to ensure SPA navigation for primary actions?