j3w1 / theme

j3w1 / theme4.0.0

j3w1 / command

  • SPEC Overview
  • SPEC Foundations
  • SPEC Components
  • SPEC Patterns
  • SPEC Tokens
  • SPEC Tools
  • SPEC Workbench
  • SPEC Form builder
  • SPEC Task kit
  • SPEC Recipes
  • SPEC Figma bridge
  • SPEC Report an issue
  • SPEC Implement
  • SPEC For agents
  • SPEC Ports
  • SPEC Releases
  • SPEC Specification
  • DEMO Vue application demo

Settings panel

A two-column settings screen composed from the sidebar-nav, fieldset, switch, select, radio-group, text-field, checkbox and button components; below 600px the sidebar becomes a tab strip.

stable · light DOM · 4.0.0. Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.

Standalone example ↗Copy file manifestCanonical JSONVue gallery ↗Prepare an agent kit →

Live variants

default

Appearance

Bar, gaps and labels of the workstation. Changes apply to new windows.

Bar and gaps
Hide the bar
Smart gaps

Shown only where no window is.

✕ Choose a wallpaper.

Bar labels

✕ Choose a language.

Pixels between windows; the outer gap follows.

✕ Between 0 and 64.

Bar modules

✕ Choose at least one module.

Example destination: sp keyboard

Example destination: sp notifications

Example destination: sp advanced

Markup
<j3w1-settings-panel id="example-settings-panel-default"><form><div class="settings-panel" role="region" aria-labelledby="example-settings-panel-default-sp-title">
  <div class="settings-panel-nav">
    <nav class="sidebar-nav" aria-label="Settings sections">
      <ul class="sidebar-nav-list">
        <li class="sidebar-nav-item"><a class="sidebar-nav-link sidebar-nav-current" href="#example-settings-panel-default-sp-appearance" aria-current="page"><span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><rect x="2.5" y="2.5" width="11" height="11"></rect></svg></span><span class="sidebar-nav-label">Appearance</span></a></li>
        <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#example-settings-panel-default-sp-keyboard"><span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><rect x="2.5" y="4.5" width="11" height="7"></rect><path d="M5 8h6"></path></svg></span><span class="sidebar-nav-label">Keyboard</span></a></li>
        <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#example-settings-panel-default-sp-notifications"><span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><path d="M4 11V7a4 4 0 0 1 8 0v4l1 1H3z"></path><path d="M6.5 13.5h3"></path></svg></span><span class="sidebar-nav-label">Notifications</span></a></li>
        <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#example-settings-panel-default-sp-advanced"><span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><path d="M2.5 4h11M2.5 8h11M2.5 12h11"></path></svg></span><span class="sidebar-nav-label">Advanced</span></a></li>
      </ul>
    </nav>
  </div>
  <div class="settings-panel-content" role="form" aria-labelledby="example-settings-panel-default-sp-title" id="example-settings-panel-default-sp-appearance">
    <h2 class="settings-panel-title" id="example-settings-panel-default-sp-title">Appearance</h2>
    <p class="settings-panel-lead">Bar, gaps and labels of the workstation. Changes apply to new windows.</p>
    <fieldset class="fieldset settings-panel-group">
      <legend class="fieldset-legend">Bar and gaps</legend>
      <div class="fieldset-body">
        <div class="switch-row">
          <span class="switch-name" id="example-settings-panel-default-sp-hide-bar-name">Hide the bar</span>
          <j3w1-switch><button class="switch settings-panel-demo-target" type="button" role="switch" aria-checked="false" aria-labelledby="example-settings-panel-default-sp-hide-bar-name">
            <span class="switch-track"><span class="switch-thumb"></span></span>
            <span class="switch-state" aria-hidden="true"><span class="switch-state-off">Off</span><span class="switch-state-on">On</span></span>
          </button></j3w1-switch>
        </div>
        <div class="switch-row">
          <span class="switch-name" id="example-settings-panel-default-sp-smart-gaps-name">Smart gaps</span>
          <j3w1-switch><button class="switch" type="button" role="switch" aria-checked="true" aria-labelledby="example-settings-panel-default-sp-smart-gaps-name">
            <span class="switch-track"><span class="switch-thumb"></span></span>
            <span class="switch-state" aria-hidden="true"><span class="switch-state-off">Off</span><span class="switch-state-on">On</span></span>
          </button></j3w1-switch>
        </div>
        <div class="select">
          <label class="select-label" for="example-settings-panel-default-sp-wallpaper">Wallpaper</label>
          <div class="select-root">
            <select class="select-control" id="example-settings-panel-default-sp-wallpaper" aria-describedby="example-settings-panel-default-sp-wallpaper-help example-settings-panel-default-sp-wallpaper-message" name="example-settings-panel-default-sp-wallpaper">
              <option value="black" selected="">black</option>
              <option value="ember">ember</option>
              <option value="ridge">ridge</option>
            </select>
            <svg class="select-chevron" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 6.5l4 4 4-4"></path></svg>
          </div>
          <p class="select-help" id="example-settings-panel-default-sp-wallpaper-help">Shown only where no window is.</p>
          <p class="select-message" id="example-settings-panel-default-sp-wallpaper-message">✕ Choose a wallpaper.</p>
        </div>
        <fieldset class="radio-group radio-group-horizontal" aria-describedby="example-settings-panel-default-sp-labels-message">
          <legend class="radio-group-legend">Bar labels</legend>
          <div class="radio-group-options">
            <label class="radio-group-option">
              <span class="radio-group-control">
                <input class="radio-group-input" type="radio" name="example-settings-panel-default-sp-labels" value="zh" checked="">
                <span class="radio-group-dot" aria-hidden="true"></span>
              </span>
              <span class="radio-group-text" lang="zh">中文</span>
            </label>
            <label class="radio-group-option">
              <span class="radio-group-control">
                <input class="radio-group-input" type="radio" name="example-settings-panel-default-sp-labels" value="en">
                <span class="radio-group-dot" aria-hidden="true"></span>
              </span>
              <span class="radio-group-text">English</span>
            </label>
          </div>
          <p class="radio-group-message" id="example-settings-panel-default-sp-labels-message">✕ Choose a language.</p>
        </fieldset>
        <div class="text-field">
          <label class="text-field-label" for="example-settings-panel-default-sp-inner-gap">Inner gap</label>
          <div class="text-field-root">
            <input class="text-field-input text-field-input-numeric" id="example-settings-panel-default-sp-inner-gap" type="number" value="14" min="0" max="64" step="1" placeholder="0" aria-describedby="example-settings-panel-default-sp-inner-gap-help example-settings-panel-default-sp-inner-gap-message" name="example-settings-panel-default-sp-inner-gap">
            <span class="text-field-affix" aria-hidden="true">px</span>
            <span class="text-field-loading" aria-hidden="true">⋯</span>
          </div>
          <p class="text-field-help" id="example-settings-panel-default-sp-inner-gap-help">Pixels between windows; the outer gap follows.</p>
          <p class="text-field-message" id="example-settings-panel-default-sp-inner-gap-message">✕ Between 0 and 64.</p>
        </div>
        <fieldset class="checkbox checkbox-group" aria-describedby="example-settings-panel-default-sp-modules-message">
          <legend class="checkbox-legend">Bar modules</legend>
          <label class="checkbox-option">
            <span class="checkbox-control">
              <input class="checkbox-input" type="checkbox" name="example-settings-panel-default-sp-modules" value="cpu" checked="">
              <svg class="checkbox-check" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3.5 8.5l3 3 6-6"></path></svg>
              <svg class="checkbox-dash" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 8h8"></path></svg>
            </span>
            <span class="checkbox-text">CPU load</span>
          </label>
          <label class="checkbox-option">
            <span class="checkbox-control">
              <input class="checkbox-input" type="checkbox" name="example-settings-panel-default-sp-modules" value="memory" checked="">
              <svg class="checkbox-check" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3.5 8.5l3 3 6-6"></path></svg>
              <svg class="checkbox-dash" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 8h8"></path></svg>
            </span>
            <span class="checkbox-text">Memory</span>
          </label>
          <label class="checkbox-option">
            <span class="checkbox-control">
              <input class="checkbox-input" type="checkbox" name="example-settings-panel-default-sp-modules" value="battery">
              <svg class="checkbox-check" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3.5 8.5l3 3 6-6"></path></svg>
              <svg class="checkbox-dash" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 8h8"></path></svg>
            </span>
            <span class="checkbox-text">Battery</span>
          </label>
          <p class="checkbox-message" id="example-settings-panel-default-sp-modules-message">✕ Choose at least one module.</p>
        </fieldset>
      </div>
    </fieldset>
    <div class="settings-panel-footer">
      <button class="button settings-panel-apply" type="submit"><span class="button-loading" aria-hidden="true">⋯</span><span class="button-label">Apply</span></button>
      <button class="button button-secondary" type="button"><span class="button-loading" aria-hidden="true">⋯</span><span class="button-label">Reset</span></button>
    </div>
  </div>
</div></form><p role="status" data-form-status=""></p><p id="example-settings-panel-default-sp-keyboard" tabindex="-1" class="j3w1-example-target">Example destination: sp keyboard</p><p id="example-settings-panel-default-sp-notifications" tabindex="-1" class="j3w1-example-target">Example destination: sp notifications</p><p id="example-settings-panel-default-sp-advanced" tabindex="-1" class="j3w1-example-target">Example destination: sp advanced</p></j3w1-settings-panel>

narrow

Appearance

Bar, gaps and labels of the workstation. Changes apply to new windows.

Bar and gaps
Hide the bar
Smart gaps

Shown only where no window is.

✕ Choose a wallpaper.

Bar labels

✕ Choose a language.

Pixels between windows; the outer gap follows.

✕ Between 0 and 64.

Bar modules

✕ Choose at least one module.

Example destination: sp keyboard

Example destination: sp notifications

Example destination: sp advanced

Markup
<j3w1-settings-panel id="example-settings-panel-narrow"><form><div class="settings-panel settings-panel-narrow" role="region" aria-labelledby="example-settings-panel-narrow-sp-title">
  <div class="settings-panel-nav">
    <nav class="sidebar-nav" aria-label="Settings sections">
      <ul class="sidebar-nav-list">
        <li class="sidebar-nav-item"><a class="sidebar-nav-link sidebar-nav-current" href="#example-settings-panel-narrow-sp-appearance" aria-current="page"><span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><rect x="2.5" y="2.5" width="11" height="11"></rect></svg></span><span class="sidebar-nav-label">Appearance</span></a></li>
        <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#example-settings-panel-narrow-sp-keyboard"><span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><rect x="2.5" y="4.5" width="11" height="7"></rect><path d="M5 8h6"></path></svg></span><span class="sidebar-nav-label">Keyboard</span></a></li>
        <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#example-settings-panel-narrow-sp-notifications"><span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><path d="M4 11V7a4 4 0 0 1 8 0v4l1 1H3z"></path><path d="M6.5 13.5h3"></path></svg></span><span class="sidebar-nav-label">Notifications</span></a></li>
        <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#example-settings-panel-narrow-sp-advanced"><span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><path d="M2.5 4h11M2.5 8h11M2.5 12h11"></path></svg></span><span class="sidebar-nav-label">Advanced</span></a></li>
      </ul>
    </nav>
  </div>
  <div class="settings-panel-content" role="form" aria-labelledby="example-settings-panel-narrow-sp-title" id="example-settings-panel-narrow-sp-appearance">
    <h2 class="settings-panel-title" id="example-settings-panel-narrow-sp-title">Appearance</h2>
    <p class="settings-panel-lead">Bar, gaps and labels of the workstation. Changes apply to new windows.</p>
    <fieldset class="fieldset settings-panel-group">
      <legend class="fieldset-legend">Bar and gaps</legend>
      <div class="fieldset-body">
        <div class="switch-row">
          <span class="switch-name" id="example-settings-panel-narrow-sp-hide-bar-name">Hide the bar</span>
          <j3w1-switch><button class="switch settings-panel-demo-target" type="button" role="switch" aria-checked="false" aria-labelledby="example-settings-panel-narrow-sp-hide-bar-name">
            <span class="switch-track"><span class="switch-thumb"></span></span>
            <span class="switch-state" aria-hidden="true"><span class="switch-state-off">Off</span><span class="switch-state-on">On</span></span>
          </button></j3w1-switch>
        </div>
        <div class="switch-row">
          <span class="switch-name" id="example-settings-panel-narrow-sp-smart-gaps-name">Smart gaps</span>
          <j3w1-switch><button class="switch" type="button" role="switch" aria-checked="true" aria-labelledby="example-settings-panel-narrow-sp-smart-gaps-name">
            <span class="switch-track"><span class="switch-thumb"></span></span>
            <span class="switch-state" aria-hidden="true"><span class="switch-state-off">Off</span><span class="switch-state-on">On</span></span>
          </button></j3w1-switch>
        </div>
        <div class="select">
          <label class="select-label" for="example-settings-panel-narrow-sp-wallpaper">Wallpaper</label>
          <div class="select-root">
            <select class="select-control" id="example-settings-panel-narrow-sp-wallpaper" aria-describedby="example-settings-panel-narrow-sp-wallpaper-help example-settings-panel-narrow-sp-wallpaper-message" name="example-settings-panel-narrow-sp-wallpaper">
              <option value="black" selected="">black</option>
              <option value="ember">ember</option>
              <option value="ridge">ridge</option>
            </select>
            <svg class="select-chevron" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 6.5l4 4 4-4"></path></svg>
          </div>
          <p class="select-help" id="example-settings-panel-narrow-sp-wallpaper-help">Shown only where no window is.</p>
          <p class="select-message" id="example-settings-panel-narrow-sp-wallpaper-message">✕ Choose a wallpaper.</p>
        </div>
        <fieldset class="radio-group radio-group-horizontal" aria-describedby="example-settings-panel-narrow-sp-labels-message">
          <legend class="radio-group-legend">Bar labels</legend>
          <div class="radio-group-options">
            <label class="radio-group-option">
              <span class="radio-group-control">
                <input class="radio-group-input" type="radio" name="example-settings-panel-narrow-sp-labels" value="zh" checked="">
                <span class="radio-group-dot" aria-hidden="true"></span>
              </span>
              <span class="radio-group-text" lang="zh">中文</span>
            </label>
            <label class="radio-group-option">
              <span class="radio-group-control">
                <input class="radio-group-input" type="radio" name="example-settings-panel-narrow-sp-labels" value="en">
                <span class="radio-group-dot" aria-hidden="true"></span>
              </span>
              <span class="radio-group-text">English</span>
            </label>
          </div>
          <p class="radio-group-message" id="example-settings-panel-narrow-sp-labels-message">✕ Choose a language.</p>
        </fieldset>
        <div class="text-field">
          <label class="text-field-label" for="example-settings-panel-narrow-sp-inner-gap">Inner gap</label>
          <div class="text-field-root">
            <input class="text-field-input text-field-input-numeric" id="example-settings-panel-narrow-sp-inner-gap" type="number" value="14" min="0" max="64" step="1" placeholder="0" aria-describedby="example-settings-panel-narrow-sp-inner-gap-help example-settings-panel-narrow-sp-inner-gap-message" name="example-settings-panel-narrow-sp-inner-gap">
            <span class="text-field-affix" aria-hidden="true">px</span>
            <span class="text-field-loading" aria-hidden="true">⋯</span>
          </div>
          <p class="text-field-help" id="example-settings-panel-narrow-sp-inner-gap-help">Pixels between windows; the outer gap follows.</p>
          <p class="text-field-message" id="example-settings-panel-narrow-sp-inner-gap-message">✕ Between 0 and 64.</p>
        </div>
        <fieldset class="checkbox checkbox-group" aria-describedby="example-settings-panel-narrow-sp-modules-message">
          <legend class="checkbox-legend">Bar modules</legend>
          <label class="checkbox-option">
            <span class="checkbox-control">
              <input class="checkbox-input" type="checkbox" name="example-settings-panel-narrow-sp-modules" value="cpu" checked="">
              <svg class="checkbox-check" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3.5 8.5l3 3 6-6"></path></svg>
              <svg class="checkbox-dash" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 8h8"></path></svg>
            </span>
            <span class="checkbox-text">CPU load</span>
          </label>
          <label class="checkbox-option">
            <span class="checkbox-control">
              <input class="checkbox-input" type="checkbox" name="example-settings-panel-narrow-sp-modules" value="memory" checked="">
              <svg class="checkbox-check" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3.5 8.5l3 3 6-6"></path></svg>
              <svg class="checkbox-dash" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 8h8"></path></svg>
            </span>
            <span class="checkbox-text">Memory</span>
          </label>
          <label class="checkbox-option">
            <span class="checkbox-control">
              <input class="checkbox-input" type="checkbox" name="example-settings-panel-narrow-sp-modules" value="battery">
              <svg class="checkbox-check" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3.5 8.5l3 3 6-6"></path></svg>
              <svg class="checkbox-dash" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 8h8"></path></svg>
            </span>
            <span class="checkbox-text">Battery</span>
          </label>
          <p class="checkbox-message" id="example-settings-panel-narrow-sp-modules-message">✕ Choose at least one module.</p>
        </fieldset>
      </div>
    </fieldset>
    <div class="settings-panel-footer">
      <button class="button settings-panel-apply" type="submit"><span class="button-loading" aria-hidden="true">⋯</span><span class="button-label">Apply</span></button>
      <button class="button button-secondary" type="button"><span class="button-loading" aria-hidden="true">⋯</span><span class="button-label">Reset</span></button>
    </div>
  </div>
</div></form><p role="status" data-form-status=""></p><p id="example-settings-panel-narrow-sp-keyboard" tabindex="-1" class="j3w1-example-target">Example destination: sp keyboard</p><p id="example-settings-panel-narrow-sp-notifications" tabindex="-1" class="j3w1-example-target">Example destination: sp notifications</p><p id="example-settings-panel-narrow-sp-advanced" tabindex="-1" class="j3w1-example-target">Example destination: sp advanced</p></j3w1-settings-panel>

Install and register

Use the exact version. If npm publication is pending, install the release tarball from the installation guide.

npm install --save-exact @j3w1/ui@4.0.0
import '@j3w1/ui/tokens.css';
import '@j3w1/ui/styles/settings-panel.css';
import '@j3w1/ui/register/settings-panel';

Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.

Vue SFC, React, Astro and plain HTML integration →

Copy the complete implementation

npx --package=@j3w1/ui@4.0.0 j3w1-ui copy settings-panel --out ./vendor/j3w1/settings-panel

The CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open index.html. Keep its modules, CSS, tokens and licence notices together.

Public API

attributes

NameType / signatureMeaning
disabledCustomEventDisable the native controls owned by this instance.
loadingCustomEventMark the primary control busy and prevent duplicate activation.

properties

NameType / signatureMeaning
disabledbooleanDelegates disabled state to native children.
namestringNative control name; application form keys remain explicit.

methods

NameType / signatureMeaning
refresh(): voidReconnect behavior after replacing native child structure.
focus(options?: FocusOptions): voidFocus the first usable native control.

events

NameType / signatureMeaning
j3w1-submitCustomEventValidated local native form values; the host owns saving.

Dependencies and verification

Registered components: switch. Style dependencies: button, field, text-field, checkbox, radio-group, select, switch, sidebar-nav, fieldset.

Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. Read specification execution evidence; read packed-consumer evidence; inspect the complete state matrix.

Full implementation manifest, API and token dependency closure

Canonical specification

Settings panel settings-panel

  • Family: Composed specimens
  • Maturity: stable
  • Priority: R1
  • Since: 0.1.0
  • Native control: region landmark named by the h2; a nav landmark for the sections with aria-current on the open one; a form landmark holding native controls in one fieldset; aria-busy on the form while applying — APG pattern
  • specified
  • demonstrated

A two-column settings screen composed from the sidebar-nav, fieldset, switch, select, radio-group, text-field, checkbox and button components; below 600px the sidebar becomes a tab strip.

Report an issue with this component

Tokens

Focus a role to inspect its values; follow its link for persistent usage and source details.

PartRoleValueUse
root.bgcolor.surface.defaultapproveduse#0d0707D-041 surface.default: color.primitive.modern.panel.
root.bordercolor.border.defaultapproveduse#482b2bD-041 border.default: color.primitive.modern.divider.
nav.bgcolor.surface.defaultapproveduse#0d0707D-041 surface.default: color.primitive.modern.panel.
nav.bordercolor.border.dividerapproveduse#482b2bD-041 border.divider: color.primitive.modern.divider.
nav.textcolor.text.defaultapproveduse#e99499D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
nav.current-textcolor.text.brightapproveduse#ffa2a7D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
nav.current-indicatorcolor.border.selected-indicatorobserveduse#e539352px indicator bar on the selected tab or nav item.
nav.bg-hovercolor.interaction.hover.bgapproveduse#1c1010D-041 interaction.hover.bg: color.primitive.modern.hover.
title.textcolor.text.brightapproveduse#ffa2a7D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
lead.textcolor.text.mutedapproveduse#d4868bD-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
group.bordercolor.border.dividerapproveduse#482b2bD-041 border.divider: color.primitive.modern.divider.
group.legendcolor.text.brightapproveduse#ffa2a7D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
control.bgcolor.surface.inputapproveduse#000000Form-control fill.
control.bordercolor.border.controlapproveduse#c81a1aD-041 owner correction: red control and floating-frame borders, distinct from rose text.
control.textcolor.text.defaultapproveduse#e99499D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
control.ringcolor.interaction.focus.ringobserveduse#e539351px dashed focus ring on controls and rows.
control.checked-bgcolor.action.primary.bgapproveduse#7d1310Primary button fill; D-026 darkened it off color12, which stays fixed as heritage ANSI 12.
control.checked-glyphcolor.action.primary.textapproveduse#ffa2a7Primary action labels: bright rose across rest, hover and pressed states (D-033).
invalid.bordercolor.status.danger.borderobserveduse#e53935Danger border, 2px on invalid inputs.
invalid.messagecolor.status.danger.textobserveduse#f07178D-041 readable error text on neutral surfaces and native warning tints.
footer.bordercolor.border.dividerapproveduse#482b2bD-041 border.divider: color.primitive.modern.divider.
apply.bgcolor.action.primary.bgapproveduse#7d1310Primary button fill; D-026 darkened it off color12, which stays fixed as heritage ANSI 12.
apply.textcolor.action.primary.textapproveduse#ffa2a7Primary action labels: bright rose across rest, hover and pressed states (D-033).
apply.busy-glyphcolor.action.primary.textapproveduse#ffa2a7Primary action labels: bright rose across rest, hover and pressed states (D-033).
reset.textcolor.action.secondary.textapproveduse#ffa2a7D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
reset.bordercolor.action.secondary.borderapproveduse#986f72D-041 action.secondary.border: color.primitive.modern.control.

State matrix

Every declared state and combination, statically rendered; the default cell is live. Sizes: compact, comfortable (switch with the density control above).

StateTwo columnsNarrow (360px)
default

Appearance

Bar, gaps and labels of the workstation. Changes apply to new windows.

Bar and gaps
Hide the bar
Smart gaps

Shown only where no window is.

✕ Choose a wallpaper.

Bar labels

✕ Choose a language.

Pixels between windows; the outer gap follows.

✕ Between 0 and 64.

Bar modules

✕ Choose at least one module.

Appearance

Bar, gaps and labels of the workstation. Changes apply to new windows.

Bar and gaps
Hide the bar
Smart gaps

Shown only where no window is.

✕ Choose a wallpaper.

Bar labels

✕ Choose a language.

Pixels between windows; the outer gap follows.

✕ Between 0 and 64.

Bar modules

✕ Choose at least one module.

focus-visible
invalid
busy

Purpose

Proves the form components compose without new tokens, in every state and at every width; it prescribes no product.

Anatomy

Parts as listed in the anatomy; each uses its component’s own markup and classes.

States

StateVisualNon-colour channel
defaultevery component’s rest tokens on color.surface.default; the open section carries the indicator bararia-current
focus-visiblethe dashed color.interaction.focus.ring on the focused control (shown on the first switch); others at restthe ring
invalidthe inner-gap field takes the 2px color.status.danger.border and its ✕ message; others at restborder width 1 → 2px; glyph; aria-invalid
busyApply shows the static ⋯ glyph in color.action.primary.text; the form carries aria-busy; nothing shrinks or animatesglyph; aria-busy; cursor: progress

The composed components keep their own hover, checked, disabled and read-only treatments; only the states the screen adds are declared here.

Keyboard

As in the key table. Nothing traps focus and nothing changes on hover alone.

Accessibility

The nav has its own label, so two navigation landmarks on a page stay distinguishable; the open section is aria-current="page". aria-busy on the form announces the pending Apply without a live region. Every control has a programmatic label; every message is linked by aria-describedby. Text meets 4.5:1; control boundaries, the indicator bar and the danger border 3:1.

Portability

The sidebar width is specimen layout too, not a rule. Toolkits port each contained component through its own mapping and place them with their native layout.

Non-examples

A rounded, shadowed settings card. A Material-style app bar above the form. Pill switches or animated thumbs. Section links as filled tabs instead of the indicator bar. A red form background for invalid. Dimming the controls with opacity while applying. A spinner replacing the Apply label.

Contrast report

15 declared pairs measured on resolved sRGB values with the WCAG 2.x formula; 0 waived (decorative only), 0 failing. A pass is a design target for the named role, not an application-wide conformance claim.

PairStateKindForegroundBackgroundRatioMinResult
settings-panel default textdefaulttextcolor.text.default #e99499color.surface.default #0d07078.724.5pass
settings-panel focus-visible textfocus-visibletextcolor.text.default #e99499color.surface.input #0000009.164.5pass
settings-panel focus-visible borderfocus-visibleuicolor.border.control #c81a1acolor.surface.input #0000003.623pass
settings-panel focus-visible outlinefocus-visibleuicolor.interaction.focus.ring #e53935color.surface.input #0000004.973pass
settings-panel invalid textinvalidtextcolor.text.default #e99499color.surface.input #0000009.164.5pass
settings-panel invalid borderinvaliduicolor.status.danger.border #e53935color.surface.input #0000004.973pass
settings-panel busy textbusytextcolor.action.primary.text #ffa2a7color.action.primary.bg #7d13105.574.5pass
title, legend and the current section on the panel surface—textcolor.text.bright #ffa2a7color.surface.default #0d070710.454.5pass
lead and help text on the panel surface—textcolor.text.muted #d4868bcolor.surface.default #0d07077.224.5pass
validation message on the panel surfaceinvalidtextcolor.status.danger.text #f07178color.surface.default #0d07076.984.5pass
current-section indicator bar—uicolor.border.selected-indicator #e53935color.surface.default #0d07074.733pass
control boundaries on the panel surface—uicolor.border.control #c81a1acolor.surface.default #0d07073.443pass
Reset button boundary—uicolor.action.secondary.border #986f72color.surface.default #0d07074.623pass
panel edge (decorative)—uicolor.border.default #482b2bcolor.surface.default #0d07071.581pass
sidebar, group and footer rules (decorative)—uicolor.border.divider #482b2bcolor.surface.default #0d07071.581pass

Keys

KeyAction
Tab / Shift+TabWalks the section links, then the controls in reading order, then Apply and Reset; nothing inside is a composite widget, so every control is its own stop.
Enter / SpaceEnter follows a section link; Space toggles a switch or native checkbox; Enter or Space opens the select.
Arrow keysMove within the radio-group and the select's options; step the numeric field.
EscapeNothing; the panel is not a dialog and nothing is dismissed.

For agents

Component JSON ·Implementation brief ·Build a task kit ·

Related: sidebar-nav fieldset switch select radio-group text-field checkbox button tabs

Stress fixtures: FX-STATE-MATRIX FX-320 FX-360 FX-ZOOM-200 FX-RM FX-HC FX-I18N FX-RTL FX-DENSITY