feat(side-nav): support rail variant

docs/src/COMPONENT_API.json

@@ -8477,6 +8477,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "rail",
+          "kind": "let",
+          "description": "Set to `true` to use the rail variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "ariaLabel",
           "kind": "let",

docs/src/pages/components/UIShell.svx

@@ -36,6 +36,12 @@ The hamburger menu will automatically be rendered if the `SideNav` component is
 
 <FileSource src="/framed/UIShell/HeaderNav" />
 
+### Header with side navigation (rail)
+
+Set `rail` to `true` on `SideNav` to use the rail variant.
+
+<FileSource src="/framed/UIShell/HeaderNav" />
+
 ### Header with app switcher
 
 The `HeaderAction` component uses the [transition:slide API](https://svelte.dev/docs#slide); you can customize the transition duration, delay, and easing with the `transition` prop.

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

@@ -0,0 +1,65 @@
+<script>
+  import {
+    Header,
+    HeaderNav,
+    HeaderNavItem,
+    HeaderNavMenu,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SideNavDivider,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "carbon-components-svelte";
+  import Fade16 from "carbon-icons-svelte/lib/Fade16";
+
+  let isSideNavOpen = false;
+</script>
+
+<Header 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>
+    <HeaderNavItem href="/" text="Link 4" />
+  </HeaderNav>
+</Header>
+
+<SideNav bind:isOpen="{isSideNavOpen}" rail>
+  <SideNavItems>
+    <SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
+    <SideNavLink icon="{Fade16}" text="Link 2" href="/" />
+    <SideNavLink icon="{Fade16}" text="Link 3" href="/" />
+    <SideNavMenu icon="{Fade16}" text="Menu">
+      <SideNavMenuItem href="/" text="Link 1" />
+      <SideNavMenuItem href="/" text="Link 2" />
+      <SideNavMenuItem href="/" text="Link 3" />
+    </SideNavMenu>
+    <SideNavDivider />
+    <SideNavLink icon="{Fade16}" text="Link 4" href="/" />
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>