CngxChip

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/common/display/chip/chip.component.ts

Import#

import { CngxChip } from '@cngx/common/display'

Description#

Chip / tag molecule - a small, self-contained pill rendering projected content plus an optional close affordance.

Why this exists. Multi-value triggers (CngxMultiSelect today; CngxMultiCombobox, CngxTagInput, toolbar filter-chips tomorrow) all want the same pill surface and the same remove interaction. Inlining <span>/<button> pairs per consumer (a) duplicates ARIA wiring and (b) defeats atomic-decompose: ejecting a parent component drags a block of raw markup into the consumer's source instead of a clean molecule.

Responsibilities (intentionally narrow).

Render projected <ng-content> as the chip label.
Render a close button when removable() is true, emit (remove) on click.
Provide a stable DOM id for ARIA wiring (auto-generated or consumer-supplied).

Non-responsibilities.

Selection state - parent tracks which value(s) are picked.
Commit/async behaviour - remove simply fires an event; the parent decides whether to write state directly or route through a commit flow. This keeps the chip usable from any level of the stack.

Metadata#

Selector: cngx-chip
Export as: cngxChip
Change detection: ChangeDetectionStrategy.OnPush
Encapsulation: ViewEncapsulation.None
Style URLs: ./chip.component.css

Host#

Class: cngx-chip
Static attributes: [attr.id]resolvedId()

Relationships

Used by6

componentCngxActionMultiSelectMulti-value combobox with inline quick-create.

componentCngxComboboxTag-input style multi-value combobox.

componentCngxFilterChipsBridge that connects a multi-select chip strip to a `CngxFilter` predicate via Pillar-1 derivation - no `effect()` wr…

componentCngxMultiSelectMulti-select sibling of {@link CngxSelect}.

componentCngxReorderableMultiSelectMulti-select with pointer-drag and keyboard reorder of selected values (modifier + arrow, Home/End).

componentCngxTreeSelectTree-structured multi-select.

Index#

Inputs#

id#string | null

input()

Optional DOM id. When unset, a stable auto-id (cngx-chip-N) is applied so aria-describedby / aria-labelledby hooks from the parent can reference the chip.

default null

removable#boolean

input()

Whether the close button is rendered. Typed as boolean - bind a signal getter ([removable]="!select.disabled()") if the flag needs to react to upstream state.

default false

removeAriaLabel#string

input()

A11y label for the close button. Defaults to a generic "Remove"; consumers with option labels on hand should supply something more specific (e.g. "Remove Red") so screen readers know which chip the button removes.

default 'Remove'

Outputs#

remove#MouseEvent

output()

Fires when the user clicks the close button.

HostBindings#

Binding	Expression
`[attr.id]`	`resolvedId()`

Default visuals for CngxChip - a single pill. The host carries .cngx-chip and renders a prefix / label / optional remove button in an inline-flex row. The unkeyed surface carries a primary-tinted fill so a plain chip reads as accented out of the box. Layout for a CONTAINER of multiple chips (gap, flex-wrap) lives on the consumer wrapper, not here.

State modifiers

Interactive treatment only activates on selectable / removable chips - a static label chip stays cursor-default:

[role="button"] / [tabindex] / :has(.cngx-chip__remove)
- hover wash, cursor: pointer
:focus-visible - brand-primary outline ring
[aria-selected="true"] / [aria-pressed="true"] - darker primary-tinted fill
[aria-disabled="true"] / :disabled - opacity 0.38, no pointer events

Color variants

Selected via [data-color="..."] so consumers can add their own keys on top of the four built-ins:

[data-color="info"] - blue-band tinted surface + text
[data-color="success"] - success-coded
[data-color="warning"] - warning-coded
[data-color="danger"] - danger-coded

Slots

.cngx-chip__label - the text, ellipsis-truncates
.cngx-chip__remove - inline button, fades in / out via --cngx-chip-remove-opacity + :focus-visible ring

Inheritance

--cngx-chip-inner-gap -> --cngx-space-xs
--cngx-chip-padding-inline -> --cngx-space-sm
--cngx-chip-radius -> --cngx-radius-pill
--cngx-chip-font-size -> --cngx-font-size-sm
--cngx-chip-focus-outline color -> --cngx-color-primary
--cngx-chip-remove-radius -> --cngx-radius-sm
--cngx-chip-remove-focus-color -> --cngx-color-primary
Variant surfaces use alpha-tints that mix correctly on either light or dark backgrounds; only the text colors swap in dark

Dark mode

Three hooks flip only the four variant text colors from dark hues to light hues so they stay legible against the dark-mixed variant background - the alpha-tinted surfaces ride straight through unchanged:

prefers-color-scheme: dark
[data-color-scheme="dark"] / .dark class
[data-color-scheme="light"] / .light class (explicit pin)

Index#

Layout

--cngx-chip-inner-gap --cngx-chip-padding-block --cngx-chip-padding-inline --cngx-chip-radius

Surface

--cngx-chip-bg --cngx-chip-color --cngx-chip-border

Typography

--cngx-chip-font-size

Motion

--cngx-chip-transition

State / Hover

--cngx-chip-hover-bg --cngx-chip-hover-color

State / Focus

--cngx-chip-focus-outline --cngx-chip-focus-outline-offset

State / Disabled

--cngx-chip-disabled-opacity

State / Selected

--cngx-chip-selected-bg --cngx-chip-selected-color

Variant / Info

--cngx-chip-info-bg --cngx-chip-info-color

Variant / Success

--cngx-chip-success-bg --cngx-chip-success-color

Variant / Warning

--cngx-chip-warning-bg --cngx-chip-warning-color

Variant / Danger

--cngx-chip-danger-bg --cngx-chip-danger-color

State / Remove

--cngx-chip-remove-opacity --cngx-chip-remove-opacity-hover --cngx-chip-remove-radius --cngx-chip-remove-focus-width --cngx-chip-remove-focus-color --cngx-chip-remove-focus-offset

Layout

--cngx-chip-inner-gap#<length>

Default value 4px

Gap between the chip's internal slots (prefix / label / remove). Falls back to --cngx-space-xs.

--cngx-chip-padding-block#<length>

Default value 2px

Block-axis padding of the pill.

--cngx-chip-padding-inline#<length>

Default value 8px

Inline-axis padding of the pill.

--cngx-chip-radius#<length>

Default value 999px

Corner radius. Defaults to a full pill via --cngx-radius-pill.

Surface

--cngx-chip-bg#<color>

Default value oklch(0.66 0.19 50 / 0.12)

Background of the default (unkeyed) chip. Primary-tinted at low alpha so the chip reads as accented without competing with stronger surfaces.

See: [[--cngx-color-primary]]

--cngx-chip-color#*

Default value currentColor

Text color. Defaults to currentColor so the chip inherits the container's text color.

--cngx-chip-border#*

Default value 0 solid transparent

Border shorthand. Zero-width by default - pillows fill the box.

Typography

--cngx-chip-font-size#*

Default value 0.875em

Font-size of the chip label.

Motion

--cngx-chip-transition#*

Default value

background-color 150ms ease,
      color 150ms ease,
      border-color 150ms ease

Transition shorthand for background / color / border-color changes on hover, selected, and disabled states.

State / Hover

--cngx-chip-hover-bg#<color>

Default value oklch(0.66 0.19 50 / 0.2)

Background of the hover state for interactive chips ([role=button], [tabindex], or a chip with a remove button).

--cngx-chip-hover-color#*

Default value currentColor

Text color of the hover state.

State / Focus

--cngx-chip-focus-outline#*

Default value 2px solid oklch(0.66 0.19 50)

Focus-ring shorthand applied via outline on :focus-visible. Defaults to the brand primary so the ring contrasts with the chip's own tinted fill (selected or unkeyed) instead of inheriting currentColor, which would render the ring in the text color and read as a generic dark border on top of the orange fill.

See: [[--cngx-color-primary]]

--cngx-chip-focus-outline-offset#<length>

Default value 2px

Outline offset of the focus ring.

State / Disabled

--cngx-chip-disabled-opacity#<number>

Default value 0.38

Opacity multiplier applied by [aria-disabled=true] and :disabled.

State / Selected

--cngx-chip-selected-bg#<color>

Default value oklch(0.66 0.19 50 / 0.32)

Background of the selected state ([aria-selected=true] / [aria-pressed=true]).

--cngx-chip-selected-color#*

Default value currentColor

Text color of the selected state.

Variant / Info

--cngx-chip-info-bg#<color>

Default value oklch(0.65 0.12 240 / 0.16)

Background of the [data-color=info] variant.

See: [[--cngx-color-info]]

--cngx-chip-info-color#<color>

Default value oklch(0.45 0.12 240)

Text color of the [data-color=info] variant.

Variant / Success

--cngx-chip-success-bg#<color>

Default value oklch(0.65 0.15 145 / 0.16)

Background of the [data-color=success] variant.

See: [[--cngx-color-success]]

--cngx-chip-success-color#<color>

Default value oklch(0.45 0.15 145)

Text color of the [data-color=success] variant.

Variant / Warning

--cngx-chip-warning-bg#<color>

Default value oklch(0.72 0.15 75 / 0.18)

Background of the [data-color=warning] variant.

See: [[--cngx-color-warning]]

--cngx-chip-warning-color#<color>

Default value oklch(0.5 0.15 75)

Text color of the [data-color=warning] variant.

Variant / Danger

--cngx-chip-danger-bg#<color>

Default value oklch(0.65 0.22 25 / 0.18)

Background of the [data-color=danger] variant.

See: [[--cngx-color-danger]]

--cngx-chip-danger-color#<color>

Default value oklch(0.5 0.2 25)

Text color of the [data-color=danger] variant.

State / Remove

--cngx-chip-remove-opacity#<number>

Default value 0.7

Resting opacity of the inline remove button.

--cngx-chip-remove-opacity-hover#<number>

Default value 1

Hover opacity of the inline remove button.

--cngx-chip-remove-radius#<length>

Default value 2px

Corner radius of the inline remove button.

--cngx-chip-remove-focus-width#<length>

Default value 2px

Focus-ring width of the inline remove button.

--cngx-chip-remove-focus-color#<color>

Default value oklch(0.66 0.19 50)

Focus-ring color of the inline remove button. Falls back to --cngx-color-primary.

--cngx-chip-remove-focus-offset#<length>

Default value 1px

Focus-ring offset of the inline remove button.

CngxChip

Import#

Description#

Related#

Metadata#

Host#

Relationships

Used by6

Index#

Inputs

Outputs

HostBindings

Inputs#

Outputs#

HostBindings#

Index#

Layout

Surface

Typography

Motion

State / Hover

State / Focus

State / Disabled

State / Selected

Variant / Info

Variant / Success

Variant / Warning

Variant / Danger

State / Remove

Layout

Surface

Typography

Motion

State / Hover

State / Focus

State / Disabled

State / Selected

Variant / Info

Variant / Success

Variant / Warning

Variant / Danger

State / Remove