# Tag

Level: atom.

## Purpose and use

Show an assigned label or selected value, optionally removable. Use Badge for status and a dedicated selection control when the whole element should toggle.

## Anatomy and behavior

A static span contains an optional leading icon, label and native close button. `closable` exposes that button; clicking it emits `closed` but does not remove the component. The parent removes the corresponding item. Hiding the label enables the icon-only presentation; there is no disabled or loading state.

## Accessibility and content

The close button is named `Удалить тег ` plus `tagText`; provide meaningful text even when label is hidden. Keyboard activation belongs to the close button, not the whole tag. Do not attach a second conflicting removal action to the outer span.

## Local component contract

This is the current owned contract for `component.tag`. Behavior above was checked
against the local implementation, template and focused tests listed below.
Historical migration evidence does not override these current sources.

### Public type values

`WblTagSize`: `L | M | S`; `WblTagAppearance`: `default | primary | selected | accent-secondary`. `label` is a visibility boolean; actual content is `tagText`. `closed` emits void. `WblIconName` in [the local Icon source](../../../../src/app/design-system/primitives/icon/icon.component.ts) includes `string`: the type accepts any name and does not check resource existence. Choose an existing inline icon or `/icons/<name>.svg` asset.

### Classes and selectors

- `WblTagComponent` — `wbl-tag` (src/app/design-system/primitives/tag/tag.component.ts).

### Inputs

- `WblTagComponent.size = input<WblTagSize>('L')`
- `WblTagComponent.appearance = input<WblTagAppearance>('default')`, where
  `WblTagAppearance = 'default' | 'primary' | 'selected' | 'accent-secondary'`
- `WblTagComponent.leftIcon = input(false)`
- `WblTagComponent.icon = input<WblIconName>('check')`
- `WblTagComponent.label = input(true)`
- `WblTagComponent.tagText = input('Tag')`
- `WblTagComponent.closable = input(false)`
- `WblTagComponent.actionIcon = input<WblIconName | null>(null)` (A-005)
- `WblTagComponent.actionLabel = input('')` (A-005)

### Models

- None.

### Outputs

- `WblTagComponent.closed = output<void>()`
- `WblTagComponent.actionClick = output<void>()` (A-005)

### Slots and projection markers

- The exact template has no Angular content-projection slot.

## Selected appearance

`selected` is the semantic appearance for a selected value represented as a
compact Tag inside `wbl-multiselect`. It uses
`--color-background-dropdown-active` for the background, with primary text and
the existing secondary close-icon treatment. It is not a replacement for the
generic `default` or `primary` Tag appearances.

This maps the verified `🟢 🚛 Tag` visual nested in the Multiselect Tag Figma
set to a local semantic API without changing generic Tag consumers.

## Accent-secondary appearance

`accent-secondary` (A-003) is the lilac counter tag on tender lot cards — «7 ТС»
next to the tender type and «+2» between route points in Figma
`jwmCEMZZjn9cieKYqxI6FL` (`🚛 lot-customer`, fill `bg/accent-sec`). It uses
`--color-background-accent-secondary` with primary text and the secondary
close-icon treatment. Existing consumers keep their appearance.

## Trailing action

A-005: a tag that is not `closable` may carry a trailing icon action — the
customer documents «Документ 1.pdf ⤓» on the outer-customer tender page, Figma
`jwmCEMZZjn9cieKYqxI6FL`, node `20303:136205` (the Tag's close slot holds the
`download` icon). `actionIcon` names the owned icon; the native button reuses
the close-button geometry, is named by `actionLabel` (or `tagText` when blank)
and emits `actionClick`. `closable` wins when both are set. The host and the
tag are capped at the container width, so a long label truncates with an
ellipsis instead of widening the parent.

### Local evidence

- Behavior/template: `src/app/design-system/primitives/tag/tag.component.html` (reviewed in D-025, 2026-09-05).

- Code: `src/app/design-system/primitives/tag/tag.component.ts`.
- Focused test: `src/app/design-system/primitives/tag/tag.component.spec.ts`.
- Public export: `export * from './primitives/tag/tag.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/tag.stories.ts` (`Design System/Primitives/wbl-tag`).

## Figma status

The nested Tag evidence is recorded by the Multiselect assembly contract. A
standalone Tag assembly sidecar has not yet been authored, so this contract does
not claim an independent Figma owner.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.