fix(navigation): ensure dropdown can be rendered in a semantically correct way

Author: giamir

.changeset/new-bees-grab.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-svelte": patch
+---
+
+Navigation: ensure dropdown items can be rendered in a semantically correct way

packages/stacks-svelte/src/components/Navigation/Navigation.stories.svelte

@@ -68,7 +68,6 @@
             text: "Settings",
             icon: IconSettings,
             iconSelected: IconSettingsFill,
-            dropdown: true,
         },
     ];
 
@@ -194,7 +193,6 @@
                 icon={item.icon}
                 iconSelected={item.iconSelected}
                 text={item.text}
-                dropdown={item.dropdown}
                 selected={horizontal === item.text}
                 onclick={() => (horizontal = item.text)}
             />
@@ -260,19 +258,23 @@
 <Story name="Dropdown" asChild>
     <Navigation class="hs1" label="Dropdown">
         {#each ["Label 1", "Label 2", "Label 3"] as label (label)}
-            <Popover id={`dropdown-${label}`} placement="bottom-start">
-                <PopoverReference>
-                    <NavigationItem
-                        text={label}
-                        selected={base === label}
-                        onclick={() => (base = label)}
-                        dropdown
-                    />
-                </PopoverReference>
-                <PopoverContent>
-                    <p>Content here</p>
-                </PopoverContent>
-            </Popover>
+            <NavigationItem
+                id={`dropdown-reference-${label}`}
+                text={label}
+                selected={base === label}
+                onclick={() => (base = label)}
+            >
+                {#snippet dropdown()}
+                    <Popover id={`dropdown-${label}`} placement="bottom-start">
+                        <PopoverReference
+                            elementId={`dropdown-reference-${label}`}
+                        />
+                        <PopoverContent>
+                            <p>Content here</p>
+                        </PopoverContent>
+                    </Popover>
+                {/snippet}
+            </NavigationItem>
         {/each}
     </Navigation>
 </Story>

packages/stacks-svelte/src/components/Navigation/Navigation.test.ts

@@ -1,5 +1,5 @@
 import { expect } from "@open-wc/testing";
-import { render, screen } from "@testing-library/svelte";
+import { render, screen, within } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { createRawSnippet } from "svelte";
 import sinon from "sinon";
@@ -192,7 +192,10 @@ describe("Navigation", () => {
                             text: "Settings",
                             icon: IconSettings,
                             iconSelected: IconSettingsFill,
-                            dropdown: true,
+                            dropdown: createRawSnippet(() => ({
+                                render: () =>
+                                    `<div>popover component goes in here</div>`,
+                            })),
                         },
                     },
                 ]),
@@ -213,6 +216,9 @@ describe("Navigation", () => {
         expect(contentButton).not.to.have.class("s-navigation--item__dropdown");
         expect(topicsButton).not.to.have.class("s-navigation--item__dropdown");
         expect(settingsButton).to.have.class("s-navigation--item__dropdown");
+
+        expect(within(list).getByText("popover component goes in here")).to
+            .exist;
     });
 
     it("should render navigation with title sections separating groups", () => {

packages/stacks-svelte/src/components/Navigation/NavigationItem.svelte

@@ -25,10 +25,6 @@
          * Indicates if the navigation item is selected
          */
         selected?: boolean;
-        /**
-         * Indicates if the navigation item is a dropdown. Use in horizontal navigations.
-         */
-        dropdown?: boolean;
         /**
          * The icon source to display before the navigation item text
          */
@@ -49,6 +45,10 @@
          * If true, applies a slide animation to the navigation item.
          */
         animate?: boolean;
+        /**
+         * Optional snippet for the dropdown content. Use in horizontal navigations.
+         */
+        dropdown?: Snippet;
         /**
          * Optional content rendered at the end of the navigation item.
          */
@@ -58,12 +58,12 @@
         text,
         href = undefined,
         selected = false,
-        dropdown = false,
         icon = undefined,
         iconSelected = undefined,
         avatar = undefined,
         class: className = "",
         animate = false,
+        dropdown,
         trailing,
         ...restProps
     }: Props = $props();
@@ -85,7 +85,7 @@
         }
         return classes;
     };
-    const classes = $derived(getClasses(className, selected, dropdown));
+    const classes = $derived(getClasses(className, selected, !!dropdown));
 
     const maybeslide = (node: Element) => (animate ? slide(node) : {});
 </script>
@@ -113,4 +113,5 @@
             {@render trailing?.()}
         </div>
     </svelte:element>
+    {@render dropdown?.()}
 </li>