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>

src/UIShell/HeaderGlobalAction.svelte

@@ -20,7 +20,7 @@
 
 <button
   type="button"
-  ref="{ref}"
+  bind:this="{ref}"
   class:bx--header__action="{true}"
   class:bx--header__action--active="{isActive}"
   {...$$restProps}

src/UIShell/SideNav/HamburgerMenu.svelte

@@ -11,6 +11,12 @@
    */
   export let isOpen = false;
 
+  /**
+   * Obtain a reference to the HTML button element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
+  export let ref = null;
+
   import { fly } from "svelte/transition";
   import Close20 from "carbon-icons-svelte/lib/Close20";
   import Menu20 from "carbon-icons-svelte/lib/Menu20";
@@ -19,6 +25,7 @@
 
 <button
   type="button"
+  bind:this="{ref}"
   title="Open menu"
   aria-label="{ariaLabel}"
   class:bx--header__action="{true}"

src/UIShell/SideNav/SideNav.svelte

@@ -16,6 +16,12 @@
    * @type {boolean} [isOpen=false]
    */
   export let isOpen = false;
+
+  /**
+   * Obtain a reference to the HTML button element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
+  export let ref = null;
 </script>
 
 {#if fixed}
@@ -28,6 +34,7 @@
   ></div>
 {/if}
 <nav
+  bind:this="{ref}"
   aria-label="{ariaLabel}"
   class:bx--side-nav__navigation="{true}"
   class:bx--side-nav="{true}"

src/UIShell/SideNav/SideNavLink.svelte

@@ -23,11 +23,18 @@
    */
   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>
 
 <li class:bx--side-nav__item="{true}">
   <a
+    bind:this="{ref}"
     aria-current="{isSelected ? 'page' : undefined}"
     href="{href}"
     class:bx--side-nav__link="{true}"

src/UIShell/SideNav/SideNavMenu.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 ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
   import { Icon } from "../../Icon";
 </script>
@@ -24,6 +30,7 @@
 <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
   <button
     type="button"
+    bind:this="{ref}"
     aria-expanded="{expanded}"
     class:bx--side-nav__submenu="{true}"
     {...$$restProps}

src/UIShell/SideNav/SideNavMenuItem.svelte

@@ -16,10 +16,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 class:bx--side-nav__menu-item="{true}">
   <a
+    bind:this="{ref}"
     aria-current="{isSelected ? 'page' : undefined}"
     href="{href}"
     class:bx--side-nav__link="{true}"