feat(navigation): update to new SHINE visuals

[giamir]

SPARK-105

Figma

Consult the new stacks classic component in the preview docs.
And the new stacks svelte component in storybook

Unresolved minor points (for another ticket potentially):

• Svelte component does not support yet the role tablist and tab, we could iterate on it once there is a concrete use case for. It is also a purely accessibility matter.
• We might benefit from a decorative-only version of the avatar component to prevent screen readers from reading text twice (in the context of navigation the avatar could be considered decorative I believe similarly to what we do for icons)

Complex example using Svelte in Storybook (inspired by the new SHINE sidebar)
I spent some time putting this example together because it saved us few ping pongs with the engineers trying to implement it and realize things were missing. @CGuindon could you confirm that this is the desired animation behavior we want in the new SHINE sidebar?

Screen.Recording.2025-11-20.at.13.33.59.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: 29efe57

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	29efe57
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/692030aef1e9470008e86534
😎 Deploy Preview	https://deploy-preview-2043--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	29efe57
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/692030ae69c66100089350f4
😎 Deploy Preview	https://deploy-preview-2043--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[CGuindon]

Looking really good! A couple of things that jump out at me seeing this nav in the Stacks docs (small nitpick stuff)

1.Documentation improvements optional
These aren't necessary but would be nice to have I think — these could also live in a different type of page I know @phoebe-leung was exploring around showing examples of "larger components" using all the pieces together. We could skip these for now and I'll document below or my own purposes later:

• Including a popover with the Dropdown example (feels weird to click the dropdown menu button and nothing happens.
• Including a button on the right of the dropdown example (like in the Figma with the "Today" button right aligned) — common top bar pattern

---

2. New badge We would still want to support the option to have the "New" badge that we do sometimes now. I haven't done badges yet but we should still keep an example (maybe with this one?) that has a "new" badge like the activity indicator and it would update once that component gets completed. I didn't have an example of that in Figma — my fault.

---

[giamir]

Including a button on the right of the dropdown example (like in the Figma with the "Today" button right aligned) — common top bar pattern

I added a tonal button in one of the horizontal examples but it won't look great until the button PR is merged in beta.

New badge We would still want to support the option to have the "New" badge that we do sometimes now. I haven't done badges yet but we should still keep an example (maybe with this one?) that has a "new" badge like the activity indicator and it would update once that component gets completed. I didn't have an example of that in Figma — my fault.

I have added the badge in one of the examples but similarly it won't look good until the badge PR is merged. At the moment the height of the small badge is enough to mess up the 42px overall height of the navigation item containing it. This should not be a problem though with the new badge design that has considerably less height.

Including a popover with the Dropdown example (feels weird to click the dropdown menu button and nothing happens.

I left this out for now since it was working this way also in the previous version of the docs. We can always add it at a later stage

[CGuindon]

3. PADDING CHANGE on the selected/hover states
   Can we reduce the padding on the no icons variant (default) to be 6px top/bottom (instead of 8px) but keep the 8px for right/left — that makes a full list of no icon items fit closer together but still gives the selected state some breathing room.

[CGuindon]

Forgot to add my comment through the request change — see above

[giamir]

Forgot to add my comment through the request change — see above

@CGuindon Addressed in 3aaf689

[giamir]

@dancormier for the caret I think I found a solution that could be slightly more elegant (unless I am missing something).
See this commit and let me know your thoughts: 05685a2 🙂

[dancormier]

Great work here @giamir!

[CGuindon]

The only thing I noticed was that the background on this bottom part of the documentation example should be white (not grey?) but I'm going to approve anyway since the actual component looks great!