# Filter Chip — Figma Assembly Rules

<!-- figma-assembly.v2
{ "schemaVersion":"figma-assembly.v2", "id":"component.filter-chip", "level":"molecule", "kind":"local-composition", "aliases":["Filter Chip","filter-chip","wbl-filter-chip"], "uxSpec":"specs/ux/components/molecules/wbl-filter-chip.md", "inventoryTarget":"filter-chip", "componentKeys":[], "dependencies":["component.icon"], "optionalDependencies":["component.badge","component.tooltip"], "coveredBy":["filter-chip"] }
-->

Status: active Figma assembly contract; local composition.

## Scope

Use this contract for the Filter Chip's verified internal composition. It owns
the Chip anatomy and Figma state previews, not a filter overlay, applied data,
or Angular API.

## Source Evidence

- The exact Chip gallery was verified read-only at node `14713:33911`; the
  behavior specification was verified read-only at `12367:83559`.
- The gallery exposes `Clear` and `Selected` variants; `Selected` has `None`,
  `1`, and `Many` values. Its state previews are `Default`, `Hover-remove`,
  `Hover-edit`, `Active`, `Disabled`, `Error`, and `Error-hover`.
- The current read did not expose a Figma main component key for Filter Chip.
  This sidecar therefore records a local composition and intentionally has no
  component key; it does not assert or manufacture a published owner.

## Required Assembly

- Dependency classification: `component.icon` is required because the chevron
  and cross are part of the verified Chip anatomy. `component.badge` is optional
  only for `Selected=Many`; `component.tooltip` is optional only for
  `Error-hover`.
- Rule ID: `filter-chip.local-composition` — compose the verified Chip anatomy
  locally; do not present this composition as a published Filter Chip instance
  or redraw the chevron/cross as loose vectors.
- Use a 32px-high horizontal composition, no wider than 440px, with
  `--radius-s`. Keep the label at 13px/16px regular and the selected value at
  13px/16px medium.
- Keep the label/value/chevron body distinct from the trailing remove zone.
  The remove zone retains its divider and cross rather than merging the action
  into the editable body.
- Map default, selected, hover, active, disabled, error, and error-hover to
  existing semantic background, text-icon, and stroke tokens. On red error
  backgrounds use `--color-text-icon-black-contrast` for foreground contrast;
  retain `--color-stroke-danger` and the danger action semantics for the error
  treatment.
- Figma variant and state names are assembly evidence only. They do not define
  local Angular inputs or filter lifecycle behavior.

## Verification Checklist

- `filter-chip.local-composition`: the composition remains 32px high, has the
  separate body and remove zones, and uses canonical Icon instances for the
  chevron and cross.
- `Selected=Many` adds the published Badge only when that anatomy is visible.
  `Error-hover` adds the published Tooltip only when the error overlay is
  visible.
- The three selected values and all seven verified state previews remain
  available without detached icon, badge, or tooltip lookalikes.
- The foreground remains `--color-text-icon-black-contrast` over red error
  backgrounds while the error stroke and action remain danger-semantic.

## Open Question

The Figma main component key is unavailable in the verified read. Revalidate it
before changing this sidecar to `published`; the absent key does not block this
local-composition contract.