Demonstrating "spicy-sections" a Design Affordance Controls experiment

This page has lots of good 'old HTML headings and content, wrapped in some <spicy-sections> custom elements. This decorator element allows us to engage different named ux control affordances to the sectioning content they wrap. A <spicy-sections> can present (and provide accessibility characteristics of) its sectioning content as:

• Normal HTML with no affordances (image example).
• collapse Each section is independently toggleable as collapsed or expanded (image example).
• exclusive-collapse Like a single-select accordion or 'responsive tabs' (image example).
• tab-bar An exclusive collapse mode which projects headings into a tab-bar (image example).

<spicy-sections> allows us to supply information about how to decide how it displays and what controls/affordances are provided via MediaQueries (MediaAffordances, here). The light DOM doesn't change, everything is stylable, mainly through your elements themselves. There are two affordance ::parts. It is possible to style the affordances employed differently as well.

Effectively, affordances can be thought of as selection managers (controllers that maintain state of the affordance). Managing selection of the affordance is similar to how checkboxes toggle independently (collapse) vs radio buttons are mutually exclusive choices (exclusive-collapse, tab-bar). Here, it is the selection managers that carry the state, and not the DOM elements. You'll note that if you bounce between them, their states exclusive and non-exclusive states can be maintained independently (You can see this in demo #2 which moves from radiobutton-like tabs to checkbox-like collapses)

Look at this page's content and then resize your window various ways to see how the affordances change...

All about Einstein: demo... #1

• If the media isn't screen, or if something went wrong - this displays as normal HTML.
• If it is screen and the viewport width is over 600px, it will present as collapse.
• If it is a screen and wider than 801px, it will present tab-bar.

Recipes demo #2

• If the media isn't screen or the viewport width is between 600-801px, or if something went wrong - this displays as normal HTML.
• If it is screen and the viewport width is smaller than 600px, it will present as collapses - (aka, fully collapseable/N-open accordion' - checkbox like - and function as/mean that).
• If it is a screen and wider than 801px, it will present as/mean/function as tabs.
• Note that it is the _affordances_ that have state, if you bounce between them, their states are maintained independently

Nutritional Information
Lentil Soup
Servings Per Recipe: 6
Amount Per Serving
Calories: 349
% Daily Value *
Total Fat: 10g
15 %
Saturated Fat: 1.0g
Cholesterol: 0mg
0 %
Sodium: 131mg
5 %
Potassium: 970mg
27 %
Total Carbohydrates: 48.2g
16 %
Dietary Fiber: 22.2g
89 %
Protein: 18.3g
37 %
Sugars: 3g
Vitamin A: 4230IU
Vitamin C: 13mg
Calcium: 98mg
Iron: 6mg
Thiamin: 0mg
Niacin: 6mg
Vitamin B6: 1mg
Magnesium: 104mg
Folate: 334mcg

Responsive Summary Details - demo #3

You can wrap the same element around a lone section and have it present summary/details like or as regular content too.

• If the media is not screen, or if something goes wrong, or if the viewport with is greater than 800px, the following section displays as normal content
• Otherwise it displays as a collapse, basically, summary/details.