# Settings panel A column of settings beside what they change: a choice at the top, groups that open and close, and a footer to count and reset changes. A block: a ready-made arrangement of components, to copy into a project. Its own classes carry the `site-` prefix; rename it to your project's own. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Built from: Card, Button, Icon, Segmented control, Accordion, Field, Label, Input, Divider, Link. ## Examples ### Usage Which theme the settings change, then two groups of them, the first open, and a footer that counts the changes and resets them. ```html

Light Dark

Starting colors

The colors every other one is worked out from.

Brand

Accent

Action colors

The colors of buttons and links as they are pressed.

Hover

Pressed

``` ```tsx import { Card, CardHeader, CardFooter, CardBody } from './design-system/components/card/card.js'; import { Button } from './design-system/components/button/button.js'; import { Link } from './design-system/components/link/link.js'; import { SegmentedControl } from './design-system/components/segmented-control/segmented-control.js'; import { Accordion } from './design-system/components/accordion/accordion.js'; import { Field } from './design-system/components/field/field.js'; import { Input } from './design-system/components/input/input.js'; } />} footer={3 changes on color} end={} />}>

The colors every other one is worked out from.

}, { title: "Action colors", children:

The colors of buttons and links as they are pressed.

}]} /> ``` ### Three groups Three groups of a page's settings, the first open. Nothing has changed yet, so the reset button is off. ```html

Desktop Phone

Layout

Columns

Gap

Header

Title

Search engines

Description

``` ```tsx import { Card, CardHeader, CardFooter, CardBody } from './design-system/components/card/card.js'; import { Button } from './design-system/components/button/button.js'; import { SegmentedControl } from './design-system/components/segmented-control/segmented-control.js'; import { Accordion } from './design-system/components/accordion/accordion.js'; import { Field } from './design-system/components/field/field.js'; import { Input } from './design-system/components/input/input.js'; } />} footer={Reset page} />}> }, { title: "Header", children:

}, { title: "Search engines", children:

}]} /> ``` ## Purpose Holds the settings of what sits beside it, such as a theme, a page or a chart: which version the settings change, the settings in groups that open and close, and a footer that says how many have changed and resets them. ## Anatomy - The panel, the Card component in its outline surface and panel layout: the header on a band, the body padded, the divider over the footer. - The header: the panel's title in the small header size, and a menu button at its end. - The choice, the Segmented control component at its small size: which version the settings below change, such as light or dark. - The groups, the Accordion component, flat and small: each a title that opens and closes, and inside it a line saying what the group is for and its settings. The line after the last group is hidden, since the panel's divider already runs there. - Each setting, the Field component side by side, its label beside a small Input. - The footer, the card's link and actions kind: a link to the changes, and a quiet button that resets them. ## When to use - In a column beside a canvas, a preview or a page, where each change shows at once. ## When not to use - For a long form a reader fills in once. Use a page of fields with one button to send them. - For two or three settings. Use a popover from the thing they change. ## Behavior Each group opens and closes on its own. Settings change what they set as they are edited, so the panel has no button to send them; the footer counts what changed and resets it. With nothing changed, the reset button is off. ## Accessibility ### What it does for you - The choice is a radio group, moved through with the arrow keys. - Each group's title is a button that says whether it is open. - Every setting keeps its label; a required one says so. ### What you must do - Name the panel by its title, and make its title a heading at the level the page needs. - Name the choice for what it chooses, such as "Theme to edit". - Name the menu button for what it holds, such as "More settings". ### How to test - Tab to the choice and move it with the arrow keys; Tab to a group's title and open or close it with Enter or Space. - With a screen reader, the choice is read by its name, each group's title as a button that says whether it is open, and each setting by its label, a required one as required. ### Keyboard | Key | What it does | |---|---| | Tab | Moves focus through the choice, each group's title, the settings of the open groups and the footer. | | Down Arrow or Right Arrow | In the choice, moves the choice to the next item. | | Up Arrow or Left Arrow | In the choice, moves the choice to the previous item. | | Enter or Space | On a group's title, opens the group, or closes it when it is open. | ## Usage rules ### Do - Open the group a reader needs first. - Say in each group's first line what its settings change. ### Don't - Put a button to save in the footer: every change already shows. - Nest a group inside another. ## Stylesheet ```css /* site-settings-panel — Settings panel, a block: a column of settings beside what they change, its choice at the * top, its groups that open and close, and a footer that counts the changes and resets them. Copy it into your * project and rename site- to your project's own prefix. The frame is the Card component, outline surface, in its * panel layout; the segmented control, accordion, fields and inputs are the system's own. The block draws only the * room inside a group, and hides the line after the last group, where the panel's own divider already runs. */ .site-settings-panel__group { display: flex; flex-direction: column; gap: var(--smbk-space-stack-md); } .site-settings-panel__hint { margin: 0; } /* The flat accordion ends every group with a divider; the last one would double the line over the footer. */ .site-settings-panel__groups > :last-child:not(details) { display: none; } ```