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, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. 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.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

No other component reads these — re-point them and esa-filter-container is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.