feat(side-nav): support rail variant

COMPONENT_INDEX.md

@@ -3216,6 +3216,7 @@ None.
 | :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ |
 | isOpen    | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
 | fixed     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the fixed variant     |
+| rail      | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the rail variant      |
 | ariaLabel | <code>let</code> | No       | <code>string</code>  | --                 | Specify the ARIA label for the nav         |
 
 ### Slots

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>

src/UIShell/SideNav/SideNav.svelte

@@ -8,6 +8,9 @@
   /** Set to `true` to use the fixed variant */
   export let fixed = false;
 
+  /** Set to `true` to use the rail variant */
+  export let rail = false;
+
   /**
    * Specify the ARIA label for the nav
    * @type {string}
@@ -46,8 +49,9 @@
   class:bx--side-nav__navigation="{true}"
   class:bx--side-nav="{true}"
   class:bx--side-nav--ux="{true}"
-  class:bx--side-nav--expanded="{isOpen}"
-  class:bx--side-nav--collapsed="{!isOpen}"
+  class:bx--side-nav--expanded="{isOpen && !rail}"
+  class:bx--side-nav--collapsed="{!isOpen && !rail}"
+  class:bx--side-nav--rail="{rail}"
   {...$$restProps}
 >
   <slot />

types/UIShell/SideNav/SideNav.d.ts

@@ -9,6 +9,12 @@ export interface SideNavProps
    */
   fixed?: boolean;
 
+  /**
+   * Set to `true` to use the rail variant
+   * @default false
+   */
+  rail?: boolean;
+
   /**
    * Specify the ARIA label for the nav
    */