Components › States & feedback › Status › Project label

Project label

canon

Pill that names the project a piece of communication belongs to: the canonical `.acrm-pill sm` with the project’s own icon, coloured by the project’s tone (the icon carries the tone instead of the dot).

Owner-approved prototype proto/komunikace-karta@649b8eca2 (8 Oct 2026, variant A; docs/ZADANI-komunikace-karta.md R8/R13/R14), implemented in the K-4 MR of acrm/acrm. Not a new pill variant and no CSS of its own (AD FA258-re): it is `.acrm-pill sm` + a leading `<Icon>` + the project name, and the general rule `.acrm-pill > .ti { color: var(--pill-dot) }` (see Pill) colours the icon. Icon and colour are set on the project detail with the same picker as a segment (`SegmentIconPicker`, `noun="projektu"`); default when unset = `briefcase` + `grey`. Tone from the palette = tone class on the pill, own colour (`#rrggbb`) goes into `--pill-dot` directly. An AI-suggested project (not yet confirmed by a person) shows a `?` after the name. Always placed in the `tags` slot of Item list. Paths verified against acrm/acrm main after K-4 (acrm !4953): ProjectPill.tsx and the rule in ds.css; no project-pill.css exists. AD 11 Oct 2026: beta until checked on dev with data (company card Komunikace had no data). AD 12 Oct 2026: promoted to canon — verified on crm.dev.atsl.cz with data (e2e round 5, Chromium 1440 + 390): project with `rocket` + `purple` assigned to a manual entry; project detail › Komunikace shows the picker and preview, icon rgb(142, 78, 198); company card › Komunikace shows `.acrm-pill.sm.purple > .ti` before the date, right edge 1341 px in every row, phone 390 on its own line, 0 console errors, 0× 5xx. Report: https://crm.dev.atsl.cz/reports/acrm/komunikace-karta-e2e/kolo-5/. Open: Ladle stories per section (DoD) still empty.

Used in 1 file · 1 area · 1× — components/communication

apps/web <ProjectPill>.acrm-pill .acrm-pill.sm .acrm-pill > .tiSource
ExamplesCodeUsageAccessibilityChangelog

Keyboard

  • A plain span, not focusable — it is a label, not a control. Changing the project is a row action (Projekt) with its own keyboard path.

ARIA

  • No role. The leading <Icon> is aria-hidden; the accessible name is the project name.
  • Colour and icon are never announced: the project name alone must identify the project. An unconfirmed AI suggestion adds ? to the text and a title that says it is a suggestion.

Focus

  • Nothing to focus. If a pill is ever made clickable, it becomes a real button inside the pill and takes the foundation focus ring.

Contrast

  • Label text is --fg on the canvas, the same as Pill (17.59:1 light, 14.53:1 dark).
  • The tinted icon uses the saturated --ic-* set (or the project’s own colour). It is decoration on top of the name, never the only carrier of meaning. An own #rrggbb colour is not checked against the canvas — acceptable only because the icon is not information.

Known limits

  • Two projects with the same icon and colour differ only by their names; keep names distinct.
  • A very light own colour can nearly vanish on the light canvas; the name still reads at full contrast.

Source: docs/status/project-label.a11y.md · GitLab