Design System · Elements
Elements
The public, product-neutral catalog. Every element has one stable ID, export, root selector, private anatomy contract, accessibility contract, and deterministic responsive fixture.
01
Public contract catalog
The ID is the durable identity. Export names and root selectors are versioned adapters; internal data-slot anatomy remains private.
28 release-candidate elements are registered. Every row remains Proposed until its contract, accessibility, responsive, and visual evidence is explicitly approved for a stable release.
Actions
| Element | Status | Public adapters | Contract evidence |
|---|---|---|---|
Button button | proposed | .ss-btn components/Button.svelte | Open responsive fixture native button or link · minimum 240px |
Link link | proposed | .ss-link components/Link.svelte | Open responsive fixture native link · minimum 240px |
Forms
| Element | Status | Public adapters | Contract evidence |
|---|---|---|---|
TextField text-field | proposed | .ss-input components/TextField.svelte | Open responsive fixture native textbox or type-specific input · minimum 240px |
Textarea textarea | proposed | .ss-textarea components/Textarea.svelte | Open responsive fixture native textbox · minimum 240px |
FormField form-field | proposed | .ss-form-field components/FormField.svelte | Open responsive fixture native semantics · minimum 240px |
Select select | proposed | .ss-select-control components/Select.svelte | Open responsive fixture listbox-backed select · minimum 240px |
Combobox combobox | proposed | .ss-combobox components/Combobox.svelte | Open responsive fixture combobox with listbox · minimum 240px |
Checkbox checkbox | proposed | .ss-checkbox components/Checkbox.svelte | Open responsive fixture checkbox · minimum 240px |
RadioGroup radio-group | proposed | .ss-radio-group components/RadioGroup.svelte | Open responsive fixture radiogroup · minimum 240px |
Radio radio | proposed | .ss-radio components/Radio.svelte | Open responsive fixture radio · minimum 240px |
DatePicker date-picker | proposed | .ss-date-picker components/DatePicker.svelte | Open responsive fixture segmented date field and calendar grid · minimum 240px |
Dropdown dropdown | proposed | .ss-dropdown components/Dropdown.svelte | Open responsive fixture button and listbox · minimum 240px |
SegmentedControl segmented-control | proposed | .ss-seg components/SegmentedControl.svelte | Open responsive fixture group of pressed buttons · minimum 240px |
Status
| Element | Status | Public adapters | Contract evidence |
|---|---|---|---|
Chip chip | proposed | .ss-chip components/Chip.svelte | Open responsive fixture status text · minimum 240px |
Feedback
| Element | Status | Public adapters | Contract evidence |
|---|---|---|---|
Meter meter | proposed | .ss-meter components/Meter.svelte | Open responsive fixture progressbar · minimum 240px |
CountUp count-up | proposed | .ss-count-up components/CountUp.svelte | Open responsive fixture text · minimum 240px |
Skeleton skeleton | proposed | .ss-skeleton components/Skeleton.svelte | Open responsive fixture presentation · minimum 240px |
CheckDraw check-draw | proposed | .ss-checkdraw components/CheckDraw.svelte | Open responsive fixture image · minimum 240px |
Content
| Element | Status | Public adapters | Contract evidence |
|---|---|---|---|
Quote quote | proposed | .ss-quote components/Quote.svelte | Open responsive fixture figure and quotation · minimum 240px |
Icons
| Element | Status | Public adapters | Contract evidence |
|---|---|---|---|
Icon icon | proposed | .ss-icon components/Icon.svelte | Open responsive fixture presentation by default · minimum 240px |
Layout
| Element | Status | Public adapters | Contract evidence |
|---|---|---|---|
Stack stack | proposed | .ss-stack components/layout/Stack.svelte | Open responsive fixture native semantics · minimum 240px |
Cluster cluster | proposed | .ss-cluster components/layout/Cluster.svelte | Open responsive fixture native semantics · minimum 240px |
Grid grid | proposed | .ss-grid components/layout/Grid.svelte | Open responsive fixture native semantics · minimum 240px |
Center center | proposed | .ss-center components/layout/Center.svelte | Open responsive fixture native semantics · minimum 240px |
Sidebar sidebar | proposed | .ss-sidebar-layout components/layout/Sidebar.svelte | Open responsive fixture native semantics · minimum 240px |
Switcher switcher | proposed | .ss-switcher components/layout/Switcher.svelte | Open responsive fixture native semantics · minimum 240px |
Overlays
| Element | Status | Public adapters | Contract evidence |
|---|---|---|---|
Dialog dialog | proposed | .ss-dialog components/Dialog.svelte | Open responsive fixture modal dialog · minimum 240px |
Drawer drawer | proposed | .ss-drawer-stage components/Drawer.svelte | Open responsive fixture complementary drawer · minimum 240px |
02
Composition boundary
Elements are the smallest governed UI contracts. Client components are assemblies of these elements, never parallel replacements for them.
- Tokens hold all design-bearing values and semantic roles.
- Elements own native behavior, accessible states, and one
ss-*root. - Layout primitives respond to available container space with intrinsic CSS algorithms.
- Client components compose elements locally and may select color, spacing, density, and motion recipes.
- A missing primitive is added and versioned here first, then vendored into consumers through an observable release.
03
Responsive claim
The contract is constraint-based, not a phone/tablet/desktop breakpoint promise.
Each non-overlay fixture is exercised from 240px through 1600px in 16px increments plus its declared transition boundaries. Manager routes are swept from 320px through 2560px, including iPad widths, while overlays are checked at every sentinel width and low visual viewport heights. Chromium and WebKit run the same proof.