settings-wc

Compact settings panel with gear trigger, details accordion sections, and theme/accessibility/layout/effects controls.

Overview

A compact settings panel triggered by a gear icon. Uses native <details name="settings"> for exclusive accordion sections with theme selection, accessibility toggles, layout options, and effects controls.

Runs in parallel with <theme-wc> — both share state through ThemeManager and localStorage events. Changes in one component are reflected in the other.

<settings-wc></settings-wc>

Attributes

Attribute Type Default Description
data-open boolean — Reflected attribute indicating the panel is open.

Panel Sections

The panel contains four collapsible <details> sections with exclusive accordion behavior (one open at a time).

Appearance

  • Color Mode — Segmented control: Auto / Light / Dark
  • Theme — <select> with optgroups: Base (Default), Personality (Modern, Minimal, Classic), and Extreme (Swiss, Brutalist, Cyber, Terminal, Organic, Editorial, Kawaii, 8-Bit, NES, Win9x, Rough)
  • Accent Color — Row of circular swatches, only visible when "Default" theme is selected. The 10 color themes (Ocean, Forest, Sunset, etc.) are hue variants of Default and are presented here instead of as separate top-level themes.

Accessibility

Toggle switches (input[data-switch="sm"]) for:

  • High Contrast
  • Large Text
  • Dyslexia-Friendly

Layout

  • Fluid Scaling — Toggle switch (on/off). When off, static token values are used.
  • Density — Segmented control (Compact / Default / Spacious), only visible when fluid scaling is enabled.

Effects

Toggle switches for:

  • Motion Effects (default: on)
  • Sound Effects (default: off)

A Reset to Defaults button in the footer clears all preferences.

Custom Trigger

Provide your own trigger button as a child element with data-trigger. If no trigger is found, a gear icon is auto-generated.

<settings-wc> <button data-trigger> <x-icon name="settings" label="Settings"></x-icon> Settings </button> </settings-wc>

Footer Integration

The typical placement is inline with footer legal links. The panel opens upward from the trigger.

<footer> <p class="footer-legal"> <span>&copy; 2026 Your Name</span> <a href="/about">About</a> <settings-wc></settings-wc> </p> </footer>

JavaScript API

Method Returns Description
open() void Open the settings panel.
close() void Close the settings panel.
toggle() void Toggle the panel open/closed.
const settings = document.querySelector('settings-wc'); // Open/close programmatically settings.open(); settings.close(); settings.toggle();

State Sharing

Both <settings-wc> and <theme-wc> share state through three channels:

Channel Storage Key Window Event
Theme (mode, brand, fluid) vb-theme theme-change
Extensions (motion, sound) vb-extensions extensions-change
Accessibility themes vb-a11y-themes a11y-themes-change

Keyboard Navigation

Key Action
Escape Close panel, return focus to trigger
Tab Navigate through controls within the panel
Space / Enter Toggle trigger, activate controls

Accessibility

  • Panel uses role="dialog" with aria-label="Site settings".
  • Trigger has aria-haspopup="dialog" and aria-expanded reflecting state.
  • Color mode uses a radio group with role="radiogroup".
  • Accent swatches use a radio group with descriptive title on each swatch.
  • Toggle switches use native <input type="checkbox" data-switch="sm">.
  • Focus trap: Escape closes panel and returns focus to trigger.

Related

  • <theme-wc> — Full theme picker with swatch grid (runs in parallel)
  • Themes — Available theme documentation