On this page

Choices

Chips released

A row of chosen values the reader can take back, one cross at a time.

Source

Import@pacit/components/chips
Selectorspct-chips, pct-chip

No APG pattern applies, and none is invented — the reasoning is under Accessibility ↓

status: open

assignee: me

label: bug

import { Component, signal } from '@angular/core';
import { PctChip, PctChips } from '@pacit/components/chips';

/** Removal is an announcement — the application answers by shortening its own array. */
@Component({
  selector: 'demo-chips',
  imports: [PctChip, PctChips],
  template: `
    <pct-chips ariaLabel="Active filters">
      @for (filter of filters(); track filter) {
        <pct-chip removable (removed)="drop(filter)">{{ filter }}</pct-chip>
      }
    </pct-chips>
  `,
})
export class ChipsDemo {
  readonly filters = signal(['status: open', 'assignee: me', 'label: bug']);

  drop(filter: string): void {
    this.filters.update((all) => all.filter((kept) => kept !== filter));
  }
}

chips.demo.ts — the same file runs here and is highlighted under Code

Start here

Usage

One import per component, and the shortest possible use — the package itself is installed once, on the start page.

Import this component

import { PctChips, PctChip } from '@pacit/components/chips';

Exported	What it is
`PctChips`component`pct-chips`	A row of chosen values the user can take back: the active filters above a table, the recipients of a message.
`PctChip`component`pct-chip`	One chosen value in a `pct-chips` row. Its content is the application's — projected, never generated — and the one thing the chip may add to it is the control that takes the value back.

<pct-chips ariaLabel="Filters">
  <pct-chip removable (removed)="drop('Angular')">Angular</pct-chip>
</pct-chips>

Examples

Every state, running

Each example is the component itself, not a screenshot. Open the code under any of them.

Sizes, and chips that stay

size rides the shared axis. A chip without removable is a plain word — a tag the reader cannot take back — and never draws the button it would not act on.

Angular

Signals

Tokens

Open

Assigned to me

This week

API

What it reads, and what it writes back

Read from the source at build time — the types, the defaults and the lines of documentation are the library's own.

`PctChips`component · `pct-chips`

A row of chosen values the user can take back: the active filters above a table, the recipients of a message.

Inputs

Name	Type	What it does
`ariaLabel`default `''`	`string`	The accessible name of the list. Optional, and deliberately without a text key behind it: a list is allowed to be nameless, and a library default would have to guess what the list holds — "Chips" names the paint, not the content (0051). Two rows on one page ("recipients", "active filters") are told apart here.
`size`default `config.defaultSize`	`PctSize`	Size of every pill in the row; taken from the global configuration by default.

Outputs

None of its own. The native events — (click), (focus), the form's submit — are the platform's, and two-way models above carry the rest.

What it writes on the element

The hooks a stylesheet or a test can hold. Stable by contract — the parts inventory gate fails the build when one disappears.

Attribute	Bound to	Note
`class`	`pct-chips`
`role`	`list`	The role is static, and that is measured rather than assumed: a `role="list"` with zero items raises nothing in any engine's audit (0051 quotes the probe), so an empty row needs no machinery — unlike the listbox, whose empty panel is a critical violation and taught the select to keep its role conditional.
`aria-label`	`ariaLabel() \|\| null`
`data-pct-size`	`size()`

`PctChip`component · `pct-chip`

One chosen value in a pct-chips row. Its content is the application's — projected, never generated — and the one thing the chip may add to it is the control that takes the value back.

Inputs

Name	Type	What it does
`removable`default `false`	`boolean`	Whether the chip draws the control that takes it back — off by default. A mixed row is ordinary: the one filter the view cannot stand without keeps its `removable` off and shows no button, and the focus repair steps over it.

Outputs

Name	Payload	When it fires
`removed`	`void`	Said when the user presses remove. The collection is the application's, so this is an announcement and not an act: the consumer shortens their own array and the row follows on the next render — or does not, and the chip is correct to stand still.

What it writes on the element

The hooks a stylesheet or a test can hold. Stable by contract — the parts inventory gate fails the build when one disappears.

Attribute	Bound to	Note
`class`	`pct-chip`
`role`	`listitem`	The platform's own name for "one of these" — `pct-tab`'s move with `tabpanel`: the native `<li>` is out of reach on a custom element, so the role is declared on the element that is actually there (`req-a11y-built-in`).

Styling

Parts to select, tokens to override

Two ways in, both stable. No class names to depend on.

Parts

In a test, PctChipsHarness, PctChipHarness from @pacit/components/testing read a part by the name below and a state by its attribute — the harness gate holds the names to the package.

Part	Selector	What it is
`label`	`[data-pct-part="label"]`	a chip's text
`remove`	`[data-pct-part="remove"]`	the button that takes the chip back

Tokens

Every value the component reads, with the light and the dark default. Override a token at any scope and it cascades like any custom property.

Token	Styles
`--pct-chips-item-bg{pct.surface-100}`#f1f5f9 · #1e293b	Background of an item.
`--pct-chips-item-border{pct.border}`#e2e8f0 · #334155	Edge colour of an item.
`--pct-chips-item-fg{pct.text}`#0f172a · #ffffff	Text colour of an item.
`--pct-chips-item-font-size{pct.font.size.md}`14px	Font size of an item.
`--pct-chips-item-font-size-lg{pct.font.size.lg}`16px	Font size of an item at size lg.
`--pct-chips-item-font-size-sm{pct.font.size.sm}`13px	Font size of an item at size sm.
`--pct-chips-item-gap{pct.space.2}`4px	Gap between a chip's label and its remove button.
`--pct-chips-item-height{pct.control.height.md}`36px	Height of an item.
`--pct-chips-item-height-lg{pct.control.height.lg}`44px	Height of an item at size lg.
`--pct-chips-item-height-sm{pct.control.height.sm}`28px	Height of an item at size sm.
`--pct-chips-item-padding-x{pct.space.3}`8px	Horizontal padding of an item.
`--pct-chips-item-padding-x-lg{pct.space.4}`12px	Horizontal padding of an item at size lg.
`--pct-chips-item-padding-x-sm{pct.space.2}`4px	Horizontal padding of an item at size sm.
`--pct-chips-item-radius`999px	Corner radius of an item.
`--pct-chips-list-gap{pct.space.2}`4px	Gap between chips.
`--pct-chips-remove-bg-hover{pct.surface}`#ffffff · #0f172a	Background of the remove button on hover.
`--pct-chips-remove-fg{pct.text-muted}`#334155 · #e2e8f0	Text colour of the remove button.
`--pct-chips-remove-fg-hover{pct.text}`#0f172a · #ffffff	Text colour of the remove button on hover.
`--pct-chips-remove-radius`999px	Corner radius of the remove button.
`--pct-chips-remove-target-min{pct.target.min}`24px	Touch-target floor of the remove button.

Theming

A brand override in a few declarations. Scope it to a theme attribute, a page or one container — the component never notices.

[data-theme='brand'] {
  --pct-chips-item-bg: #ccfbf1;
  --pct-chips-item-fg: #134e4a;
  --pct-chips-item-border: #99f6e4;
}

status: open

assignee: me

label: bug

Accessibility

Measured, not assumed

Pattern: none — there is no APG pattern for chips, and this component does not invent one (0051). What there is: list / listitem for the count a screen reader owes its user first, and a real <button> for every removal. Named in the class JSDoc.

Keyboard

key	effect	test
`Tab` / `Shift+Tab`	moves between the remove buttons, document order	`apps/sandbox-e2e/src/chips.spec.ts` — the pinned chip costs nothing to step over, because there is nothing in it to stop at
`Enter` / `Space`	presses the remove button	`apps/sandbox-e2e/src/chips.spec.ts` — and focus lands on the next cross, in three engines

Both rows are the platform's: the component ships zero key handlers — no Delete, no arrows, no roving tabindex (req-api-platform). The serial-removal behaviour Material builds a grid pattern for is delivered here by the repair alone.

Evidence

What the repository holds for this component

Read at build time from the tracked snapshots, not typed here.

89.47%mutation score51 of 57 mutants killed

12 × 3e2e cases × enginesplus the shared audits: axe, forced colors, preferences, size, hydration

4colour pairs measuredlight and dark, at every token build

2visual baselinesChromium, the sandbox's own pictures

22elements in the preview6 listeners · 1 render to settle · 4971 µs in jsdom, held exactly but for the clock

Why it is built this way

The whole component is one addition to the platform: where focus goes when the button under it disappears. Removing the focused control drops activeElement on <body> in all three engines — measured before anything was written — so the row repairs it: the next chip's cross, the previous ones as a fallback, and Enter, Enter, Enter empties the row with no Tab between them.

Known limitations

No focus placement when the row empties. The last removal has no surviving cross to land on, and the component cannot know what the page wants focused then — the heading above the list, the input beside it. The consumer who removed the last value is the one who knows what stands next to the row.
The repair stands for one render. A removal the consumer performs seconds later, behind a confirmation, moves no focus: the user has navigated away, and yanking focus back would be the repair causing the defect it exists to prevent.
A wrapped chip is outside the repair's map. The row holds only its own children — a chip inside an extra element is a listitem whose list is not directly above it, which is broken ARIA before it is a repair problem. A dev-mode warning names it at first render.
No Delete, no arrows, no roving tabindex. There is no APG pattern for chips, and the library does not invent keyboard grammars; Tab and Enter reach everything, and the repair makes serial removal cheap.
No input-chips. Values typed into a combobox and kept as tokens are the select family's road; this component renders values chosen elsewhere.

pacit

Usage

Every state, running

Sizes, and chips that stay

What it reads, and what it writes back

PctChipscomponent · pct-chips

Inputs

Outputs

What it writes on the element

PctChipcomponent · pct-chip

Inputs

Outputs

What it writes on the element

Parts to select, tokens to override

Parts

Tokens

Theming

Measured, not assumed

Keyboard

What is measured, and what is not yet

What the repository holds for this component

Why it is built this way

Known limitations

`PctChips`component · `pct-chips`

`PctChip`component · `pct-chip`