feat(ui-shell): make SideNavMenuItem text slottable

COMPONENT_INDEX.md

@@ -3086,7 +3086,9 @@ None.
 
 ### Slots
 
-None.
+| Slot name | Default | Props | Fallback            |
+| :-------- | :------ | :---- | :------------------ |
+| --        | Yes     | --    | <code>{text}</code> |
 
 ### Events
 

docs/src/COMPONENT_API.json

@@ -7979,7 +7979,14 @@
           "reactive": true
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "__default__",
+          "default": true,
+          "fallback": "{text}",
+          "slot_props": "{}"
+        }
+      ],
       "events": [{ "type": "forwarded", "name": "click", "element": "a" }],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "a" }

docs/src/pages/_layout.svelte

@@ -13,11 +13,14 @@
     SideNavItems,
     SideNavMenu,
     SideNavMenuItem,
+    Tag,
   } from "carbon-components-svelte";
   import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
   import Theme from "../components/Theme.svelte";
   import Footer from "../components/Footer.svelte";
 
+  const deprecated = ["ToggleSmall", "Icon"];
+
   let isOpen = false;
   let isSideNavOpen = true;
   let innerWidth = 2048;
@@ -98,16 +101,22 @@
             text="{child.title}"
             href="{$url(child.path)}"
             isSelected="{$isActive($url(child.path))}"
-          />
+          >
+            {child.title}
+            {#if deprecated.includes(child.title)}
+              <Tag size="sm" type="red">Deprecated</Tag>
+            {/if}
+          </SideNavMenuItem>
         {/each}
       </SideNavMenu>
       <SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
         {#each recipes.children as child, i (child.path)}
           <SideNavMenuItem
-            text="{child.title}"
             href="{$url(child.path)}"
             isSelected="{$isActive($url(child.path))}"
-          />
+          >
+            {child.title}
+          </SideNavMenuItem>
         {/each}
       </SideNavMenu>
     </SideNavItems>

docs/src/pages/components/ToggleSmall.svx

@@ -7,7 +7,7 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
   <div>
     This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
   </div>

src/UIShell/SideNav/SideNavMenuItem.svelte

@@ -30,6 +30,6 @@
     {...$$restProps}
     on:click
   >
-    <span class:bx--side-nav__link-text="{true}">{text}</span>
+    <span class:bx--side-nav__link-text="{true}"><slot>{text}</slot></span>
   </a>
 </li>

types/UIShell/SideNav/SideNavMenuItem.d.ts

@@ -28,5 +28,5 @@ export interface SideNavMenuItemProps
 export default class SideNavMenuItem extends SvelteComponentTyped<
   SideNavMenuItemProps,
   { click: WindowEventMap["click"] },
-  {}
+  { default: {} }
 > {}