docs

Supported contract

Style the wrapper from its host and style projected chip markup directly in your template. No ::ng-deep is needed because the chip body belongs to you.

Selector or token	Applied on	Purpose
`.your-wrapper-class`	Wrapper host	Apply semantic background, border, and foreground tokens for the root shell.
`[data-slot="chips"]`	Projected root	Stable hook for the primitive list root when you want additional layout or state-driven tweaks.
`[data-slot="chip"]`	Projected chip item	Stable hook for the pill shell when you prefer attribute selectors over explicit classes.
`[data-slot="chip-remove"]`	Projected remove control	Stable hook for remove-button layout, hover, and focus styling.
`[data-disabled]`	Root, chip, remove control	Shared disabled-state hook reflected from the primitive contracts.
`[data-focused]`	Remove control	Focus hook on the remove button so you can draw a local ring without extra scripting.

Host tokens

The wrapper shell consumes semantic tokens from the host. Style the pills themselves with your own classes or the stable primitive state hooks.

.docs-component-chips-styling-shell {
  /* Optional brand tuning while inheriting semantic surface colors. */
  --tng-semantic-accent-brand: var(--tng-semantic-accent-brand);
  --tng-semantic-focus-ring: var(--tng-semantic-focus-ring);
}

.docs-component-chips-styling-chip {
  border: 1px solid color-mix(in srgb, var(--tng-semantic-accent-brand) 38%, var(--tng-semantic-border-subtle));
  border-radius: 999px;
  background: color-mix(in srgb, var(--tng-semantic-accent-brand) 12%, var(--tng-semantic-background-base));
  color: var(--tng-semantic-foreground-primary);
}

.docs-component-chips-styling-chip-remove[data-focused] {
  outline: 2px solid color-mix(in srgb, var(--tng-semantic-focus-ring) 38%, transparent);
  outline-offset: 2px;
}

Release owner shell

The wrapper shell stays quiet while your projected chip classes carry the visible presentation.

Release owner shell (Plain-CSS)

Release owners

Theme the wrapper at the host, then own the projected pill styling directly in your component stylesheet.

Mina LeeSanjay PatelOmar Aziz

Selected: Mina Lee, Sanjay Patel, Omar Aziz

Supported contract

Host tokens

chips.tokens.css

Release owner shell

Release owner shell (Plain-CSS)

Release owner shell (Tailwind CSS)