Merge branch 'master' into rewrite-tyepscript-definitions

docs/src/components/ComponentApi.svelte

@@ -138,7 +138,7 @@
             <StructuredListCell>
               {#if prop.description}
                 {#each prop.description.split('\n') as line}
-                  <div class="description">{line}.</div>
+                  <div class="description">{@html line.replace(/`(.*?)`/g, '<code>$1</code>')}.</div>
                 {/each}
               {:else}
                 <div class="description">No description available.</div>

docs/src/pages/components/UIShell.svx

@@ -37,3 +37,7 @@ components: ["Header",
 ### Header with utilities
 
 <FileSource src="/framed/UIShell/HeaderUtilities" />
+
+### Header with persisted hamburger menu
+
+<FileSource src="/framed/UIShell/PersistedHamburgerMenu" />

docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte

@@ -0,0 +1,65 @@
+<script>
+  import {
+    Header,
+    HeaderNav,
+    HeaderNavItem,
+    HeaderNavMenu,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "carbon-components-svelte";
+
+  let isSideNavOpen = false;
+</script>
+
+<Header
+  persistentHamburgerMenu="{true}"
+  company="IBM"
+  platformName="Carbon Svelte"
+  bind:isSideNavOpen
+>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+
+  <HeaderNav>
+    <HeaderNavItem href="/" text="Link 1" />
+    <HeaderNavItem href="/" text="Link 2" />
+    <HeaderNavItem href="/" text="Link 3" />
+    <HeaderNavMenu text="Menu">
+      <HeaderNavItem href="/" text="Link 1" />
+      <HeaderNavItem href="/" text="Link 2" />
+      <HeaderNavItem href="/" text="Link 3" />
+    </HeaderNavMenu>
+  </HeaderNav>
+</Header>
+
+<SideNav bind:isOpen="{isSideNavOpen}">
+  <SideNavItems>
+    <SideNavLink text="Link 1" />
+    <SideNavLink text="Link 2" />
+    <SideNavLink text="Link 3" />
+    <SideNavMenu text="Menu">
+      <SideNavMenuItem href="/" text="Link 1" />
+      <SideNavMenuItem href="/" text="Link 2" />
+      <SideNavMenuItem href="/" text="Link 3" />
+    </SideNavMenu>
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>

src/ComposedModal/ComposedModal.svelte

@@ -51,6 +51,9 @@
   });
 
   function focus(element) {
+    if(selectorPrimaryFocus == null) {
+      return
+    }
     const node =
       (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
     if (node != null) node.focus();

src/UIShell/GlobalHeader/Header.svelte

@@ -29,6 +29,9 @@
    */
   export let platformName = "";
 
+  /** Set to `true` to persist the hamburger menu */
+  export let persistentHamburgerMenu = false;
+
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
@@ -36,7 +39,8 @@
 
   let winWidth = undefined;
 
-  $: isSideNavOpen = expandedByDefault && winWidth >= 1056;
+  $: isSideNavOpen =
+    expandedByDefault && winWidth >= 1056 && !persistentHamburgerMenu;
   $: ariaLabel = company
     ? `${company} `
     : "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
@@ -46,7 +50,7 @@
 
 <header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
   <slot name="skip-to-content" />
-  {#if winWidth < 1056}
+  {#if winWidth < 1056 || persistentHamburgerMenu}
     <HamburgerMenu bind:isOpen="{isSideNavOpen}" />
   {/if}
   <a

src/UIShell/SideNav/SideNav.svelte

@@ -27,7 +27,7 @@
   class:bx--side-nav="{true}"
   class:bx--side-nav--ux="{true}"
   class:bx--side-nav--expanded="{isOpen}"
-  class:bx--side-nav--collapsed="{!isOpen && fixed}"
+  class:bx--side-nav--collapsed="{!isOpen}"
   {...$$restProps}
 >
   <slot />