feat(UIShell): export ref for all UIShell components

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}"