DSCatalyst design system
TenantRexall
Design system/Components/Search control
molecule ยท normalize candidate

Search control

Input plus submit affordance for product, site, flyer, and store searches.

4consumers1evidence10tokens
Rendered primitiveSearch control variants and statesdeterministic source context state extraction
Brand 0 search submit controlNormalize as icon/control atom separate from text search input.
source observed
Empty query
search.search-control-6.emptysource observed
Typed query
search.search-control-6.typedagent inferred
Input focus
search.search-control-6.focusrequired derived
Submitted
search.search-control-6.submittedrequired derived

Semantic token resolution

Input surfacevar(--wl-surface)surfacebackgroundFocus ringvar(--wl-accent)Search controlmolecule API

Used by

Global navigation shellHeader site search.directPreferred store finderStore lookup query.inferredWeekly flyer location toolbarFlyer product/category search.inferredPrescription transfer formReceiving pharmacy lookup.inferred

Proposed contract

valueplaceholdersubmitLabelscoperesultsHrefonSubmit

Token contract

Input surfacevar(--wl-surface)Input textvar(--wl-ink)Placeholdervar(--wl-muted)Bordervar(--wl-primary-soft)Iconvar(--wl-primary-strong)Focus ringvar(--wl-accent)Radiusvar(--wl-control-radius)Heightvar(--wl-control-height)2 moresemantic slots
  • Keep the button atom separate from the input so store search and site search can share behavior but differ in copy.
Evidence1 source clusters
search controlRexall.ca homepage fidelity audit
Go to search results