Demos /Applications

Settings application

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.

On this page

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

Acme Workspace

Settings

AL Ada Lovelace

Change email… Export account data

---

Delete account…

Account

Profile Security Notifications

Display name

Email

ada@example.com Change email…

Language EnglishDeutschTürkçePortuguês

Timezone ?

Used for digest emails and for the times shown in the sessions table.

Europe/BerlinEurope/IstanbulEurope/LisbonAmerica/New_YorkAsia/Tokyo

Public profile

Your name and avatar are visible to people outside the workspace.

Save changes Reset

Active sessions

Devices signed in to this account. Revoking a session signs that device out.

Device	Location	Last active	Actions
MacBook Pro This device Chrome on macOS	Berlin, Germany	Now	Actions
iPhone Safari on iOS	Berlin, Germany	Today, 08:41	Actions
ThinkPad X1 Firefox on Windows	Ankara, Türkiye	Yesterday, 19:05	Actions
iPad Safari on iPadOS	Lisbon, Portugal	Three days ago	Actions

Show details Revoke session…

What counts as a session

A session starts at sign-in on one browser and ends at sign-out, at revocation, or after thirty days without activity.

Danger zone

Deleting the account removes its workspaces, documents and sessions. This cannot be undone.

Delete account…

Change email

The address you sign in with. A confirmation link goes to the new address.

New email

Enter an address such as name@example.com.

Delete account

Your workspaces, documents and sessions are removed. This cannot be undone.

Revoke session

The selected device is signed out and has to sign in again.

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

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/.

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.

Notes

• Native select is the default primitive (blueprint §16.8): 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