Tabs that change into an Accordion in small spaces

Keyboard accessible tabs Web Component that animates the part below it when changing tabs. Changes to Accordion in narrow spaces.

Options

Base Color (--st-color)

Information

Uses:

Container Queries to change between tabs and accordion at 600px.
View Transitions to animate elements that follow the tabs in the DOM.
Declarative Shadow DOM to isolate the tab styles.

Notes:

Keyboard accessible: the ← and → keys (as well as ↑/↓) can be used after keyboard-navigating into the tabs.
JavaScript is only used to add the view-transition-name's that enable the View Transitions.
The Declarative Shadow DOM, particularly the isolated CSS inside the component's <template>, works without JavaScript.

`<simple-tabs>`

Declarative Shadow DOM Web Component

View on CodePen. View on GitHub.