Skip to content

Work / Trunk / Wiki / Surfaces

component-sets

Surfacecanonicalverified 2026-10-21

SURFACE.WEB.COMPONENTS-SETS.COMPONENT-SETS

Summary

A component in Edit as a component set: every variant in one dashed frame, State down and the author's variant properties across, with its interactions.

Raw wireframe

  • .context/designs/web/components-sets/set-button.html
  • .context/designs/web/components-sets/set-switch.html
  • .context/designs/web/components-sets/set-checkbox.html
  • .context/designs/web/components-sets/set-checkbox-group.html
  • .context/designs/web/components-sets/set-radio.html
  • .context/designs/web/components-sets/set-radio-group.html
  • .context/designs/web/components-sets/set-select.html
  • .context/designs/web/components-sets/set-date-picker.html
  • .context/designs/web/components-sets-display/set-accordion.html
  • .context/designs/web/components-sets-display/set-toast.html
  • .context/designs/web/components-sets-display/set-modal.html
  • .context/designs/web/components-sets-display/set-table.html
  • .context/designs/web/components-sets-display/set-tabs.html

Why it is drawn this way

Moment 6. Main is v1.5. Ritesh's draft has 13 changes: ten components added from Trunk Kit (Switch, Checkbox, CheckboxGroup, Radio, RadioGroup, Select, DatePicker, Table, Tabs, Accordion) and three captured ones given properties and interactions (Button, Toast, Modal). Components lists 23. See demo-tenants.

Two folders, by kind: controls (components-sets/) and what shows things (components-sets-display/), so each folder stays under ten.

State runs down, the author's variant properties across. A state a component does not make is not drawn; the set's label says "not made". A cell that does not depend on a property spans it (Select's Empty and Loading span Open; Tabs' Loading spans Selected). Size is the viewport. Button, Toast and Modal are turned (State across) because they read better that way.

The harder kinds use the same model. Select and DatePicker draw their open overlay inside the Open · yes variant. Modal lists what holds while it is open: focus stays inside and returns to the opener, the page does not scroll, it reads as a dialog. Table's sort and selection are a Set property and a part's event. Tabs changes to the tab clicked.

Interactions tab, one card per layer: the variants it runs in, then trigger → actions. An arrow on the canvas is a Change to or Set property between two variants; a bolt marks a variant with interactions. Emit names the event as code (onChange).

Where a component goes is not here. Open page is set on the instance in Pages; Show component (Toast) is set there too, and Toast lists who shows it.

Get code is at the top of the tab; it writes the props and handlers (components-get-code). Toast's tone is now Danger, not Error, so it never reads as the State.

Related

Sources

  • .context/designs/web/components-sets/set-button.html
  • .context/designs/web/components-sets/set-switch.html
  • .context/designs/web/components-sets/set-checkbox.html
  • .context/designs/web/components-sets/set-checkbox-group.html
  • .context/designs/web/components-sets/set-radio.html
  • .context/designs/web/components-sets/set-radio-group.html
  • .context/designs/web/components-sets/set-select.html
  • .context/designs/web/components-sets/set-date-picker.html
  • .context/designs/web/components-sets-display/set-accordion.html
  • .context/designs/web/components-sets-display/set-toast.html
  • .context/designs/web/components-sets-display/set-modal.html
  • .context/designs/web/components-sets-display/set-table.html
  • .context/designs/web/components-sets-display/set-tabs.html
  • 2026-10-21-components-like-figma