[POC] feat(navigation-secondary): poc for details summary

[zeroedin]

Proof of concept for navigation-secondary served as a DSD template

What this POC is

• This is a breaking change. Not an incremental update to navigation-secondary.
• Adds details > summary as the key mechanism for the hamburger menu of navigation-secondary and dropdowns
• Enables navigation-secondary to be used as a DSD fragment (or SSR'd) that can be hydrated on the client.
• Removes CLS from load as the initial load of the hamburger is closed due to usage of the details > summary standard mechanism.
• Enables navigation to function as a collapsed menu even under no JS scenarios, either through failure of proper load or user preference (not a condition to support but still works for).
• Shifts from @media queries to @container queries. Likely improvements can be made to the implementation of a resize observer in lieu of using Screensize controller which only works with matchMedia
• A proving ground for ideas on how to better support navigation-primary in the future as a mission critical component.

What this POC is not

• Intended (yet) to take the place of current rh-navigation-secondary instead creates a new component rh-navigation-secondary-dsd so they can be compared if necessary.
• Does not solve for every possible use/state, such as when used as standard component implementation and not the DSD artifact, if JS fails the details summary is not exposed therefore content ends up hidden for dropdowns. However such use case is deemed a choice by implementation for this POC. There maybe some workarounds we can do like a fallback slot for a link in case of NO JS scenarios, this hasn't been fully explored.
• Does not solve for the distribution of the DSD artifact.
• A pixel perfect 1:1 with current nav, likely some variance that needs attention.
• Does not currently support the dark variant

Demos

Example of artifacts being used in a no js state - Uncomment JS panel code to hydrate.

Deploy Preview - SSR'd and hydrated.

Known small caveats

• On load component will always load compact state as default, this causes a swap of styles between the hamburger compact style and desktop styles. Can maybe incorporate some animation which helps "hide" this jerky style swap.
• As stated in the what this poc is not, hidden content in nav when JS fails to load when used as a non dsd template, however that might be solved for in other ways.

Todo

• Improve lightdom css
• Fix missing close on escape key
• Get rid of the :marker on safari, need safari specific style
• Support dark variant

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5a5cca7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify]

✅ Deploy Preview for red-hat-design-system ready!

Name	Link
🔨 Latest commit	5a5cca7
🔍 Latest deploy log	https://app.netlify.com/sites/red-hat-design-system/deploys/674106b3d1172d00082201d0
😎 Deploy Preview	https://deploy-preview-2060--red-hat-design-system.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 site configuration.