fix: Click events on disabled fast-button bubble up the parent hierarchy

[skaempfer]

🐛 Bug Report

When a fast button is in disabled state click events on it are still propagated up the parent hierarchy.

This may be releated to #4698 and #4137, but since the observed behaviour does not affect the event listeners on the fast element, but the event propagation I am creating this separate issue.

The issue propably affects other input elements as well, but I only tested this on fast button for now.

💻 Repro or Code Sample

See https://skaempfer.github.io/fast-button-click/ for a behaviour comparison between native button element and fast-button element

🤔 Expected Behavior

Fast button element behaves like native button element: When in disabled state, fast-button elements do not propagate click events up their parent hierarchy. This should be in accordance with the HTML spec: "A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element." (Source)

😯 Current Behavior

When you click on an disabled fast button any click listener on the element is not triggered, but the click event bubbles up the parent hierarchy.

💁 Possible Solution

The fast button element wraps a native button element. To behave like its native counterpart the fast button should make a descision on blocking or allowing event propagation based on the disabled state of the wrapped button element.

[prudepixie]

The bubbling is triggered by the of the html button in the shadow root, originally I thought it came from the fast-button wrapper (putting event propagation would not work)
the issue lies in how the fast-button template is defined:

<button>
     ...
     <span>
        <slot></slot>
      </span>
     ...
</button>

clicking on the span causes events to bubble up and because our shadow root is open by default, it continues to bubble to the container outside of the fast-button.

This is how a native button behaves as well, if it's written this way, in the example provided in the ticket:

<div id="container>
    <button>Regular Button</button>
    <button>
         <span>Regular with span wrapper</span>
     </button>
</div>

clicking on the first button wouldn't trigger container to be clicked, but clicking on second one would

[prudepixie]

As discussed with @nicholasrice, the expectations are as follows:
we have a parallel behavior with the platform in the first scenario. Imagine we have a
<fast-button disabled></fast-button> - this would not emit (we need to stop propagation).
Now imagine we have <fast-button disabled><span>foobar</span></fast-button>- clicking that span would emit the event