Filter Container

Preview

Compose a dropdown, the active-filter pills, and the clear button inside one container. It owns spacing and wrapping; the children own their own behavior.

<FilterContainer>
  <esa-filter-dropdown name="status" label="Status" multiple></esa-filter-dropdown>
  <FilterPills filters={filters} />
  <FilterClearButton />
</FilterContainer>

Spacing

Tune the column and row gaps with spacing-token steps via gap and rowGap.

<FilterContainer gap="500" rowGap="300">
  <esa-filter-dropdown name="priority" label="Priority"></esa-filter-dropdown>
  <FilterClearButton label="Reset" />
</FilterContainer>

API

Accessibility

• A presentational <div> wrapper — it adds no roles or ARIA of its own; each child carries its own semantics.
• Children flow left-to-right and wrap, preserving a natural reading and tab order.
• Token-driven gaps keep targets visually separated without relying on color alone.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.