Level: atom.
Purpose and use
Collect a search query with a leading search icon and optional clear action. Search execution, debouncing, result loading and result announcements belong to the screen.
Anatomy and behavior
The composition wraps Input without a floating label. placeholderText supplies both prompt and accessible name. Edits and clearing emit valueChange. filled=true seeds the literal demo value Value; changing filled resets internal text. There is no public value input, search-submit output or controlled query model.
Accessibility and content
Native typing and Escape-to-blur come from Input. Disabled and validation are forwarded. Keep placeholderText descriptive because it is the accessible name; a placeholder is not a results status. The base clear-button label is not separately configurable here.
Open Questions
Externally controlled query restoration and localized clear-action naming require an explicit component or integration change; do not document them as available.
Local component contract
This is the current owned contract for component.input-search. Behavior above was checked
against the local implementation, template and focused tests listed below.
Historical migration evidence does not override these current sources.
Public type values
WblInputSearchSize aliases WblInputSize: L | M | S. Validation: default | warning | error. disabled/filled/clearable/description are booleans; valueChange emits string.
Classes and selectors
WblInputSearchComponent—wbl-input-search(src/app/design-system/primitives/input-search/input-search.component.ts).
Inputs
WblInputSearchComponent.size = input<WblInputSearchSize>('L')WblInputSearchComponent.disabled = input(false)WblInputSearchComponent.validation = input<WblInputValidation>('default')WblInputSearchComponent.filled = input(false)WblInputSearchComponent.clearable = input(false)WblInputSearchComponent.placeholderText = input('Search')WblInputSearchComponent.description = input(false)WblInputSearchComponent.descriptionText = input('Description')
Models
- None.
Outputs
WblInputSearchComponent.valueChange = output<string>()
Slots and projection markers
- The exact template has no Angular content-projection slot.
Local evidence
Behavior/template:
src/app/design-system/primitives/input-search/input-search.component.html(reviewed in D-025, 2026-09-05).Code:
src/app/design-system/primitives/input-search/input-search.component.ts.Focused test:
src/app/design-system/primitives/input-search/input-search.component.spec.ts.Public export:
export * from './primitives/input-search/input-search.component';insrc/app/design-system/index.ts.Storybook:
storybook/stories/input-search.stories.ts(Design System/Primitives/wbl-input-search).
Figma status
This runtime contract does not infer a Figma owner. Assembly evidence, when verified, is maintained separately through the inventory-linked sidecar.
Provenance
The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.