Mark Teekman

Refactor Navigation component to use `Popover` and `Anchor Positioning` API and reduce client-side JavaScript

1

Note: wait for proper browser support.

Example: ```css .pricing-tables { &__content { display: flex; flex-direction: column; align-items: center; margin-block-end: var(--spacing-6); text-align: center; @include breakpoint(medium) { h2 { max-inline-size: 20ch; } } } &__tables { display: grid;...

Similar to tabs displayed here: https://color-contrast.incluud.dev/design-tokens/?fg=ffffff&bg=9200ff

```css table { border-collapse: collapse; width: 100%; display: table; @include breakpoint(medium) { display: block; } th, td { padding: var(--table-cell-padding); text-align: left; @include breakpoint(medium) { padding-inline: 0; } } td...

- Use a `dialog` for native accessibility features (focus trap, return focus to button, inert, etc.) - Option for right (default), bottom, left, top slide-out - Several slots for content...

- Using Popover and Anchor Position API's - Option for placement - Option for position-try if necessary