# Settings application

> An account-settings screen built from Tabs, Dialog, Popover, Menu, checkboxes and switches, a radio group, fields, native selects, badges and a DataTable of sessions, with a live runtime panel and a without-JavaScript checklist under it.

Page: https://svelte-lean.vercel.app/demos/settings · Markdown: https://svelte-lean.vercel.app/demos/settings.md · Index: https://svelte-lean.vercel.app/llms.txt

An account-settings screen built from the primitives and the table with the package styles, the way an application would build it. The runtime panel under it reads the page you are looking at.

The screen has a section rail, an account menu, three tabs of forms, a table of active sessions with a row menu, and three dialogs. Every control is the real primitive: the dialogs and popovers are native elements opened by invoker attributes, the tabs and menus are Tier 1 behaviors discovered from the static markers in the component, and Svelte owns only what the application owns.

## Application

## Runtime

Read from the page after it loads: the primitives in the document by tier, the behaviors registered on the document runtime, the shared listeners counted by the runtime and, separately, by `static/instrument.js`, the router-sourced listeners on elements (a per-instance listener would show up there), and the scoped controllers in development builds. The counts cover the whole document; the roots inside the application are the "in examples" part.

- **Runtime**: Read from the page after it loads; requires JavaScript.

### Primitives by tier

The primitives the application uses, with their declared tier and measured behavior JavaScript

| Primitive | Tier | Shared listeners | Registration module | Behavior JS (brotli) |
| --- | --- | --- | --- | --- |
| `button` | 0 | none | none (native) | 0 B |
| `dialog` | 0 | none | none (native) | 0 B |
| `popover` | 0 | none | none (native) | 0 B |
| `accordion` | 0 | none | none (native) | 0 B |
| `checkbox` | 0 | none | none (native) | 0 B |
| `radio-group` | 0 | none | none (native) | 0 B |
| `tabs` | 1 | click, keydown | @svelte-lean/primitives/tabs/register | 1839 B |
| `menu` | 1 | click, keydown, beforetoggle, toggle | @svelte-lean/primitives/menu/register | 2773 B |

### Behaviors loaded by this build

`@svelte-lean/vite` scanned the demo's files for static `data-slean` markers and injected the matching registration modules; native primitives have none. This is what the manifest of the build you are looking at recorded for `src/routes/demos/settings/`.

Markers found in the demo's files and the module injected for each, from `node_modules/.svelte-lean/manifest.json`

| Behavior | Registration module | Found in |
| --- | --- | --- |
| `accordion` | none (native) | SettingsApp.svelte |
| `avatar` | none (native) | SettingsApp.svelte |
| `badge` | none (native) | SettingsApp.svelte |
| `button` | none (native) | SettingsApp.svelte |
| `checkbox` | none (native) | SettingsApp.svelte |
| `dialog` | none (native) | SettingsApp.svelte |
| `field` | none (native) | SettingsApp.svelte |
| `menu` | @svelte-lean/primitives/menu/register | SettingsApp.svelte |
| `popover` | none (native) | SettingsApp.svelte |
| `radio-group` | none (native) | SettingsApp.svelte |
| `tabs` | @svelte-lean/primitives/tabs/register | SettingsApp.svelte |

## Without JavaScript

What keeps working with scripting disabled, and where each statement is tested. A statement is called tested only when a spec runs the same markup with JavaScript disabled or before any script has arrived; everything else is expected from the platform and marked as not tested on this page.

Parts of the application with JavaScript disabled

| Part | With JavaScript disabled | Evidence |
| --- | --- | --- |
| Dialogs: Change email, Delete account, Revoke session | Open through command="show-modal" on the buttons and on the menu items, close through command="close", Escape and the method="dialog" forms; focus returns to the invoker. | native.spec.ts, the same markup with JavaScript disabled demos.spec.ts, this page with JavaScript disabled |
| Popovers: the two help hints | Open and close through popovertarget, with light dismiss and Escape. | native.spec.ts, the same markup with JavaScript disabled demos.spec.ts, this page with JavaScript disabled |
| Menus: account, session actions | Open and close as plain popovers, and the items that carry commandfor open their dialog. Arrow keys, Home, End and typeahead need the behavior. | demos.spec.ts, this page with JavaScript disabled |
| Accordions: Recovery codes, What counts as a session | Open and close. | native.spec.ts, the same markup with JavaScript disabled |
| Checkboxes, switches, radio group | Toggle and select; the state is the native checked state. | native.spec.ts, the same markup with JavaScript disabled |
| Change-email form | required and type="email" keep the dialog open and show the message while the address is invalid (:user-invalid). | demos.spec.ts, this page with JavaScript disabled |
| Native selects and text inputs | Work; nothing on this page depends on script for them. | expected from the platform, not tested on this page |
| Tabs | The Profile panel stays visible; Security and Notifications cannot be shown until the behavior is registered. | hydration.spec.ts, before any script arrives demos.spec.ts, this page with JavaScript disabled |
| Sessions table | The rows are in the prerendered document. Sorting, Show details and removing a revoked row need JavaScript. | expected from the platform, not tested on this page |
| Profile form | Save submits a GET request and reloads the page; with JavaScript the demo intercepts the submit. | expected from the platform, not tested on this page |

## Notes

- Native select is the default primitive (blueprint §10): Language and Timezone are `<select>` elements. A custom listbox would have to provide focus management, keyboard interaction, typeahead, positioning, mobile behavior and assistive technology behavior that the browser already provides.
- One menu per table, not per row: the session actions menu is a single popover. Each row's button invokes it through `popovertarget`, the invoker becomes the menu's anchor, and the table's `onAction` tells the application which row asked. Every row shares that one menu and the behavior's shared listeners; a row adds a button, not a menu.
- Menu items that open a dialog carry `command="show-modal"`. The behavior hides the menu during the click, the platform returns focus to the menu button, and the command then opens the dialog from that button, so closing the dialog puts focus back where the user started.
- Application state (Tier 3) is limited to what the application owns: the email shown after a change, the session list after a revoke, the status line. Open, checked and selected states stay in the DOM and are never mirrored into Svelte state.
- Nothing is sent anywhere: there is no server. Saving, exporting and deleting write a status line; revoking removes the row.

## Source

- SettingsApp.svelte, the application
- +page.svelte, this page and its technical panel
- demos.spec.ts, the keyboard-only walkthrough, the narrow-viewport check and the JavaScript-disabled context