App foundations

When to reach for it

Shared ideas

• State in the URLFilters, sort, view, range and the open record are search params written by GET forms and links, so a view is a link and Back undoes it.
• Preferences the server rendersThe sidebar's collapse and a split view's widths live in cookies (readAppShellCookie, readSplitViewLayout), so the first paint is right.
• One selection contractAny list that renders data-selection-item checkboxes works with SelectionBar; Table.Select and Table.SelectAll render them for you.
• Saving is a modelSettingsSection saves explicit or instant, never both; SaveStatus holds Saving… for 1s; OptimisticToggle flips at once and admits failure.
• Feedback by placeInline first, Banner for state that needs resolving, Toasts last: one region for server flashes and client toasts, three visible, Undo held 8s.
• Typed statesEmpty has kind first-run, no-results, cleared, permission and error; Skeleton presets keep the real row and card heights; aria-busy dims a refetching table.
• One keyboard layershortcutRegistry() ranks modal > sheet > page; data-shortcut registers keys from HTML; KeyboardHelp lists them; CommandPalette opens on ⌘K.
• No copy in the kitEvery string a part shows or announces is a labels prop, so an app translates them all.
• Names requiredTable, Tree, GridList, Menubar and the rest warn in development without aria-label.
• Series by slotcolor={n} picks --ui-chart-<n>, so a legend always matches its series.
• TargetsDrag handles, resize handles and toast close buttons grow to --ui-target-size.
• MotionThe rail peek, toast stack, save status and every transition stop under prefers-reduced-motion.

CSS variables

Every custom property the namespace reads or declares, with its default and what it controls.

Reads every role, brand, neutral, success, warning and danger, for fills, borders and toasts, and the raw scales through the chart slots. The roles are documented on Theming.