Ground Controls

Use the <input-control> and <toggle-control> web components to control attributes and properties from UI input/select or toggle buttons. Or extend the <ground-control> base class to create other control types that need to broadcast a value to surrounding elements.

Input-Control: Range

data-prop: --hue
Control the --hue CSS custom property
data-session: hue
Save the setting to sessionStorage as hue
data-event: input
Listen for the input event, rather than the default change event

Since no data-for is provided, the property is applied to the :root element. This example also includes an <output for="hue"> element, which is updated with the active value of the <input id="hue">.

Input-Control: Select

data-for: h1, h2, h3
Provide values to three levels of heading elements
data-prop: font-family
Control the font-family CSS property on those elements
data-local: title-font
Save the setting to localStorage as title-font

Toggle-Control: Multi-Button

Color Scheme
id: color-scheme
Provide an id for toggle groups, in order to reference them with a reset button or output display
data-prop: color-scheme
Control the color-scheme CSS property
data-local: color-scheme
Save the setting to localStorage as color-scheme
data-off: light dark
Provide a value when all toggles are un-pressed. By using one of the toggle values, we set that one as the default.

On the nested buttons, we also have…

aria-pressed: true
Set one of the buttons as default-on (all toggle controls are exclusive)
data-value: light dark
Set an explicit value that is different from the button text of auto

Toggle-Control: Single Button (switch)

Layout
id: layout
Provide an id for toggles, in order to reference them with a reset button or output display
data-for: main
Control the main element
data-attr: data-layout
Set the data-layout attribute
data-off: narrow
Set the narrow value when toggled off

Switch-Control: Basics

A single-button toggle-control works a bit like a switch, but the switch-control component is more specialized to the use-case.

id: layout
Provide an id for toggles, in order to reference them with a reset button or output display
data-session: blackout
Save the setting to sessionStorage as blackout
data-attr: data-blackout
Set the data-blackout attribute

Switch Control: Extended

This CSS toggle switch extends the switch control base class, using the onPress() and onUnPress() methods to turn site styles on and off. In this case there is no attribute or property being set on a target element.

data-session: site-styles
Save the setting to sessionStorage as site-styles
aria-pressed: true
By default, the site styles are turned on.

Outputs & Resets

We can setup <output for="id"> elements to display the value of a given control, or use <button data-reset="list of ids"> to reset controls back to their initial value.

Current Hue
Current Title Font
Current Color Scheme

ToDo