feat(UIShell): export ref for all UIShell components

src/UIShell/GlobalHeader/Header.svelte

@@ -36,6 +36,12 @@
    */
   export let platformName = undefined;
 
+  /**
+   * Obtain a reference to the HTML button element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
+  export let ref = null;
+
   import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
 
   let winWidth = undefined;
@@ -53,7 +59,13 @@
   {#if winWidth < 1056}
     <HamburgerMenu bind:isOpen="{isSideNavOpen}" />
   {/if}
-  <a href="{href}" class:bx--header__name="{true}" {...$$restProps} on:click>
+  <a
+    href="{href}"
+    class:bx--header__name="{true}"
+    bind:this="{ref}"
+    {...$$restProps}
+    on:click
+  >
     {#if company}
       <span class:bx--header__name--prefix="{true}">{company}&nbsp;</span>
     {/if}

src/UIShell/GlobalHeader/HeaderActionLink.svelte

@@ -17,6 +17,12 @@
    */
   export let icon = undefined;
 
+  /**
+   * Obtain a reference to the HTML button element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
+  export let ref = null;
+
   import { Icon } from "../../Icon";
 </script>
 
@@ -31,6 +37,7 @@
 </style>
 
 <a
+  bind:this="{ref}"
   class:bx--header__action="{true}"
   class:bx--header__action--active="{linkIsActive}"
   class:action-link="{true}"

src/UIShell/GlobalHeader/HeaderNavItem.svelte

@@ -10,10 +10,17 @@
    * @type {string} [text]
    */
   export let text = undefined;
+
+  /**
+   * Obtain a reference to the HTML button element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
+  export let ref = null;
 </script>
 
 <li>
   <a
+    bind:this="{ref}"
     role="menuitem"
     tabindex="0"
     href="{href}"

src/UIShell/GlobalHeader/HeaderNavMenu.svelte

@@ -17,6 +17,12 @@
    */
   export let text = undefined;
 
+  /**
+   * Obtain a reference to the HTML button element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
+  export let ref = null;
+
   /**
    * Specify the ARIA label for the chevron icon
    * @type {string} [iconDescription="Expand/Collapse"]
@@ -24,8 +30,6 @@
   export let iconDescription = "Expand/Collapse";
 
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
-
-  let ref = null;
 </script>
 
 <svelte:window

src/UIShell/GlobalHeader/HeaderPanelLink.svelte

@@ -4,10 +4,22 @@
    * @type {string} [href]
    */
   export let href = undefined;
+
+  /**
+   * Obtain a reference to the HTML button element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
+  export let ref = null;
 </script>
 
 <li class:bx--switcher__item="{true}">
-  <a href="{href}" class:bx--switcher__item-link="{true}" {...$$restProps} on:click>
+  <a
+    bind:this="{ref}"
+    href="{href}"
+    class:bx--switcher__item-link="{true}"
+    {...$$restProps}
+    on:click
+  >
     <slot />
   </a>
 </li>