Component catalog

Start with the component that serves the task. Every catalog entry works as a standalone web element. Semantic binding is available where the host has a registered adapter; automatic adaptation is limited to standard recipes with compatible task, data, bindings, and policy.

Each component page shows these three integration levels alongside its live example and generated API facts.

Foundation#

• ButtonTrigger one explicit action; native button semantics; disabled and pending never double-submit.Semantic binding
• IconButtonNamed compact action with minimum target area; icon alone is never its accessible name.Semantic binding
• LinkNavigate to an application-approved destination; preserve browser open-in-new-tab behavior.Semantic binding
• TextRender trusted/plain text with locale and wrapping; no untrusted HTML interpolation.Semantic binding
• HeadingPreserve logical document hierarchy independent of visual size.Semantic binding
• BadgePresent a category/status with text as well as color.Semantic binding
• AvatarDisplay optional identity image; fallback initials and privacy-safe alt policy.Semantic binding
• SeparatorExpress visual or semantic separation without polluting keyboard order.Semantic binding
• SurfaceProvide consistent bounded chrome; never impose dashboard cards on every control.Semantic binding
• StackArrange children in logical reading order with tokenized spacing.Semantic binding
• GridArrange responsive regions without changing semantic/focus order.Semantic binding
• SplitPaneResize adjacent regions by pointer and keyboard while respecting minimum task requirements.Semantic binding
• ScrollAreaPreserve native scrolling, focus visibility, zoom and platform affordances.Semantic binding

Input#

• TextFieldLabel, description, validation, autocomplete and an IME-safe local value draft.Semantic binding
• TextAreaMultiline editing preserves draft, selection and composition across unrelated updates.Semantic binding
• NumberFieldLocale-aware editing separates display text from exact numeric value; do not silently round money.Semantic binding
• CheckboxNative checked/indeterminate state; group ownership and submitted value are explicit.Semantic binding
• RadioGroupOne selected option; native semantics or APG-equivalent keyboard behavior.Semantic binding
• SwitchBinary setting with visible label; changing setting is not implicit business submission.Semantic binding
• SelectBounded enumerated choice with native-first semantics; empty and unknown value are distinct.Semantic binding
• ComboboxSearchable choice with APG behavior; stale remote options cannot overwrite current input.Semantic binding
• DateFieldCalendar date rather than timezone-shifted timestamp; typed entry and picker agree.Semantic binding
• DateRangeExplicit inclusive/exclusive boundaries, timezone/calendar policy and keyboard operation.Semantic binding
• SliderBounded quantity with keyboard and text alternative; steps and units are declared.Semantic binding
• SearchFieldExplicit/debounced query policy; composition input is not submitted mid-IME.Semantic binding
• FileInputNative file selection; host owns upload and validation; no file bytes enter agent by default.Semantic binding
• FieldGroupGroup related controls with legend, descriptions and coordinated validation.Semantic binding
• FormNative submission semantics, draft validation, error summary and explicit host action; rerender never submits.Standard adaptive recipe

Navigation#

• TabsNamed panels with stable selection; automatic activation only when latency permits.Semantic binding
• BreadcrumbReversible context path; approved routes and current-location semantics.Semantic binding
• PaginationStable cursor/page scope; loaded rows are not misrepresented as global selection.Semantic binding
• MenuAction menu with focus return and keyboard behavior; no layout-generated business actions.Semantic binding
• TreeNavHierarchical navigation with stable node identities, expansion and keyboard semantics.Semantic binding

Feedback#

• TooltipSupplemental nonessential information; works on focus, dismisses, not the sole label.Semantic binding
• PopoverContextual nonmodal surface with explicit focus/dismiss behavior and viewport containment.Semantic binding
• DialogNative-first modal semantics, focus containment/return and escape policy.Semantic binding
• DrawerInline or modal detail according to an explicit mode; do not mix the two focus models.Semantic binding
• ToastBounded transient feedback; essential errors remain persistently available elsewhere.Semantic binding
• AlertPersistent status/error with severity semantics and actionable recovery.Semantic binding
• ProgressDeterminate or unknown progress honestly; no invented completion percentages.Semantic binding
• SkeletonStable reserved geometry with reduced motion and a named loading state.Semantic binding
• EmptyStateDistinguish no records, no matches, forbidden data, loading and failure.Semantic binding

Data#

• MetricOne validated value or aggregate with units, scope and unavailable state.Semantic binding
• DeltaExplicit compatible baseline; zero denominator and percentage-point versus relative change distinguished.Semantic binding
• KeyValueLabeled facts with stable ordering, wrapping and semantic links.Semantic binding
• DetailSelected entity facts including missing fields; identity visibility is explicit.Standard adaptive recipe
• RecordListScannable records with identity-based selection and reachable additional fields.Standard adaptive recipe
• CardCollectionRepeated compact records; preserve reading order, headings and bounded loading.Standard adaptive recipe
• TableNative table first; separate interactive-grid mode; sorting, paging, selection, virtualization and precise values.Standard adaptive recipe
• FilterBuilderTyped predicates, AND/OR/null handling, visible inherited scope and explicit query application.Semantic binding
• SelectionSummaryDisclose selected identities or server predicate scope; never imply unobserved global selection.Semantic binding

Visualization#

• TrendTemporal metric series, declared grain, gaps and exact accessible summaries.Semantic binding
• BarComparable quantitative categories; baseline and negative values correctly represented.Standard adaptive recipe
• AreaTemporal area/stack with compatible additive measures; reject misleading nonadditive stacking.Semantic binding
• ScatterTwo quantitative axes, declared units, stable point selection and noncausal interpretation.Semantic binding
• HistogramDeclared binning, count/density labeling and missing-population disclosure.Semantic binding
• HeatmapTwo dimensions and one measure; accessible exact cell values and readable color key.Semantic binding
• MatrixEntity-feature comparison preserving row/column association and useful comparison at narrow width.Semantic binding
• RelationshipDeclared edges/cardinality only; deterministic bounded layout with accessible adjacency view.Semantic binding
• TreeExplicit hierarchy, cycle validation, stable expansion and equivalent text navigation.Semantic binding
• TreemapNonnegative additive hierarchy; area meaning and tiny-node access preserved.Semantic binding
• TimelineDated events/intervals with timezone semantics, explicit overlaps and chronological alternative.Semantic binding
• CalendarGridCalendar-aligned values/events with an explicit week start and exact values beyond color.Semantic binding

Compound#

• ExplorerFilter plus collection plus selected detail using shared parameter/selection state.No built-in semantic binding
• ComparisonA stable compare-set with compatible metrics and simultaneous comparison affordances.No built-in semantic binding
• BreakdownDisplay host-prepared group metrics and contributing records; group selection is a host request.No built-in semantic binding
• InvestigationTrend, baseline, event timeline and detail; associations never imply causes.No built-in semantic binding
• SearchResultsQuery state, collection, scoped result count and details with stale-result protection.No built-in semantic binding
• RecordEditorExisting primitive form over a host-owned action with entity revision and explicit save/cancel.No built-in semantic binding
• FormFlowTask-based steps, draft continuity, validation and reversible navigation before commit.No built-in semantic binding
• QualityPanelSource, freshness, completeness, provenance and unsupported claims displayed honestly.No built-in semantic binding