# Multiselect — Figma Assembly Rules

<!-- figma-assembly.v2
{ "schemaVersion":"figma-assembly.v2", "id":"component.multiselect", "level":"molecule", "kind":"published", "aliases":["🟣 🚛 Input Multiselect/Text","🟣 🚛 Input Multiselect/Tag","Multiselect","wbl-multiselect"], "uxSpec":"specs/ux/components/molecules/wbl-multiselect.md", "inventoryTarget":"multiselect", "componentKeys":["0c9c4ccfe5ce1b19a675d8a20f3510b548d5416c","587335caa9157deb513708bd1bc218eb947f82ab"], "dependencies":[], "optionalDependencies":["component.icon"], "coveredBy":[] }
-->

Status: active Figma assembly contract.

## Source evidence

- Published `🟣 🚛 Input Multiselect/Text` component set
  [`17867:14645`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=17867-14645),
  key `0c9c4ccfe5ce1b19a675d8a20f3510b548d5416c`.
- Published `🟣 🚛 Input Multiselect/Tag` component set
  [`21874:11775`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=21874-11775),
  key `587335caa9157deb513708bd1bc218eb947f82ab`.
- Text summary private assembly `_FieldValue`
  [`17867:15072`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=17867-15072),
  key `926cbfa63ff38de19d6267f17d1c41020dcb72ee`.

## Shared parent properties

Use the generated property keys exactly. Both parent sets expose the following
properties: `Size` (`L – 56`, `M – 44`, `S – 32`), `State` (`Default`,
`Active`, `Disable`), and `Filled` (`on`, `off`); plus `Chevron`, `Right Icon`,
the right-icon instance swap, `Description`, `✸ Required`, `Label`,
`Placeholder`, `Focused`, `→ RightContent`, `Clear`, `Cursor`, and the
`label`, `description`, and `placeholder` text properties.

`Text` additionally exposes `Value layout` on the parent component set:
`Fixed / truncate` is its default and `Growing / wrap` is the wrapping,
height-growing alternative. `Tag` always retains its native wrapped growth.

- `Focused` is a visual preview only; runtime focus belongs to the component
  contract.
- `→ RightContent` and the icon swap are Figma anatomy, not new Angular slots.
- Preserve library-bound fills, strokes, radius, focus ring, typography, clear
  control, and chevron. Do not detach the field to imitate a state.

## Text assembly

- Place `🟣 🚛 Input Multiselect/Text` for a label summary. It contains the
  private `_FieldValue` component; do not rebuild the summary with a detached
  text layer.
- `_FieldValue` owns the private `More` and `Truncate` mechanics.
  `Truncate=on` is one 260px-wide ellipsized line and may show `, ещё N`;
  `Truncate=off` wraps the summary and hides that suffix.
- Use the parent `Value layout` property instead of editing the nested
  instance: `Fixed / truncate` maps to `_FieldValue.Truncate=on`, while
  `Growing / wrap` maps to `_FieldValue.Truncate=off`. The parent set has 36
  combinations (size × state × filled × value layout). Both layouts retain the
  same parent content insets and label position as `Fixed / truncate`; only
  the private value line may wrap and increase the field height when it needs
  an additional line. `More` remains private assembly rather than a public
  parent control.

## Tag assembly

- Place `🟣 🚛 Input Multiselect/Tag` for wrapped selections. Its filled Tag
  group has 4px gaps and verified two-row heights of 80px (`L`), 68px (`M`),
  and 56px (`S`). Keep Auto Layout capable of further vertical growth.
- In the active runtime state, the filter follows the selected Tags in the same
  wrapping flow, taking the remaining row space or the next row without
  overlaying a Tag.
- The visible nested `🟢 🚛 Tag` instance is the source for each selection.
  Its selected-value visual maps to the local semantic `appearance="selected"`.
  `component.tag` has no Figma-sidecar yet, so it is intentionally not declared
  as a graph dependency in this constrained sidecar; add that sidecar before a
  Figma assembly run marks Tag as `Used`.

## Dependencies

- `component.icon` is optional: it is present only when the right-icon or
  chevron anatomy is visible. The Text summary and Tag group are private
  anatomy of their respective parent sets, not public local component edges.

## Verification checklist

- Rule ID: `multiselect.published-parent` — the Text or Tag instance resolves to one of the two recorded component keys.
- Rule ID: `multiselect.published-properties` — `Size`, `State`, and `Filled` use the published variants; parent booleans and
  text use their exact generated keys.
- Rule ID: `multiselect.text-value-layout` — Text uses the parent `Value layout` property and its nested `_FieldValue`
  behavior rather than an approximation.
- Rule ID: `multiselect.text-growth` — for equal one-line content, `Fixed / truncate` and `Growing / wrap` have the
  same top/bottom content insets, label position, and field height; extra
  height is allowed only from an additional wrapped value line.
- Rule ID: `multiselect.tag-wrap` — Tag selections remain nested library Tag instances and wrap instead of being
  clipped.
- No Code Connect mapping is created or implied by this assembly contract.