feat(ui-shell): support button tooltip in HeaderGlobalAction (#1894)

Closes #1893

src/UIShell/HeaderGlobalAction.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @extends {"../Button/Button.svelte"} ButtonProps
+   */
+
   /** Set to `true` to use the active variant */
   export let isActive = false;
 
@@ -8,19 +12,22 @@
    */
   export let icon = undefined;
 
-  /** Obtain a reference to the HTML button element */
+  /** Obtain a reference to the HTML button element
+   * @type {HTMLButtonElement}
+   */
   export let ref = null;
+
+  import Button from "../Button/Button.svelte";
+
+  $: buttonClass = [
+    "bx--header__action",
+    isActive && " bx--header__action--active",
+    $$restProps.class,
+  ]
+    .filter(Boolean)
+    .join(" ");
 </script>
 
-<button
-  type="button"
-  bind:this="{ref}"
-  class:bx--header__action="{true}"
-  class:bx--header__action--active="{isActive}"
-  {...$$restProps}
-  on:click
->
-  <slot>
-    <svelte:component this="{icon}" size="{20}" />
-  </slot>
-</button>
+<Button bind:ref {...$$restProps} class="{buttonClass}" on:click>
+  <svelte:component this="{icon}" slot="icon" size="{20}" />
+</Button>