Showing off Spicy Sections

This demo shows different designed affordances at different screen sizes (view the source too)… It uses a programatic API to set the current affordances element.setActiveAffordance('collapse' /* or 'tab-bar' or 'exclusive-collapse' */)

Tabs

The tab-bar affordance can use shadow-dom to establish a styleable tab-bar and panels. The required parts can be exposed for styling with consistent pseudo-elements.

In a tab state, we likely want to style:

The outer box
The tab bar
The tabs themselves
The selected tab
The tab panel area

Test link 1

Collapse

The accordion-like collapse affordance also uses shadow-dom to establish summary-details like behavior for each section, with an option to make the toggle-states exclusive-collapse.

In an accordion state, we likely want to style:

The outer box
The section headings/buttons
The open/closed marker
Open and closed heading styles
Open and closed content styles

Test link 2

Structured Content

The fallback state is simply structured HTML, without any show/hide affordances. This does not require any special styling.

Test link 3