Chip Full Spec Module (v3.4.9)
The first Component Full-Spec Module. Unlike interaction
modules, the chip module does not extract runtime from a benchmark source;
it expands the baseline chip primitive into full M3 §14 spec coverage,
measurement audit, and WordPress mapping. The components.css §11
Chip baseline (L1626–L1743) is UNCHANGED at v3.4.9.
See docs/CHIP-SPEC-AUDIT.md, docs/CHIP-MEASUREMENT-AUDIT.md,
docs/CHIP-WP-MAPPING.md.
1 · Four-variant matrix
The four M3 §14 baseline variants. Each is rendered with the
principle-compliant semantic for its role. Compare to baseline at
style-guide.html#components-chip for representative specimens.
Measurements (per CHIP-MEASUREMENT-AUDIT.md §3):
height 32px · corner-radius 8px (corner-small token) · label
typography label-large · outline 1px outline-variant (assist) /
flat (suggestion). Filter and Input variants are demonstrated
separately below since they have richer state behavior.
2 · Filter chip — multi-select (native checkboxes)
Per Principle 2: native form semantics over JS-emulated state.
Each filter chip is a <label> wrapping styling, paired with
a hidden <input type="checkbox"> via for=.
Clicking the chip toggles the input natively; CSS reads
:checked to render the selected state. No JS required.
Selected state styling matches baseline §11 L1709–L1715 exactly —
outline removed, secondary-container fill, on-secondary-container text. The
.chip__control:checked + .chip--filter selector in
lab-chip.css §1 mirrors the baseline button-based filter selected state.
3 · Filter chip — single-select (native radios)
M3 §14.3 supports both multi-select (toolbar pattern, aria-pressed)
and single-select (radiogroup, aria-checked). The native radio
group expresses one-of-N exactly: exactly one chip is selected at a time,
arrow keys move focus within the group, and the group has a legend.
4 · Input chip — avatar leading + button close
Phase 2 decision: input chip close affordance uses Option B
(real <button class="chip__close"> with aria-label)
plus Option A-lite (24×24 button container, hit area
expanded to ≥44×44 on coarse pointer via ::before pseudo).
Visible close glyph stays 18px to match --_chip-icon baseline.
WCAG target-size compliance: SC 2.5.8 Level AA (24×24 CSS px)
is met on all pointer types by the button container. SC 2.5.5 Level AAA
(44×44 CSS px) and the Material touch-friendly convention are met on coarse
pointer via the ::before expansion. Option C (Backspace/Delete
keyboard dismiss) is deferred — requires JS.
Per CHIP-MEASUREMENT-AUDIT.md §4.4: avatar 24px (preserved
via .ax-avatar.is-size-xs selector skip), close visible icon
18px, close button container 24×24, hit area expansion 44×44 (touch),
aria-label per chip ("Remove Apple", etc.).
5 · Disabled states
Baseline Pattern A (10% surface fill + 38% text + 12% outline) applies to
assist/filter/input. Suggestion chip keeps transparent background per
baseline §11 L1739–L1742 exception. The
has-state-layer overlay is explicitly suppressed on disabled
chips per lab-chip.css §3, preventing fake hover feedback on
non-interactive surfaces.
Three disabled markers all resolve identically:
.chip:disabled (assist/suggestion buttons),
.chip__control:disabled + .chip (filter native form pattern),
.chip[aria-disabled="true"] (input chip span).
The chip__close inside a disabled input chip is also disabled
(pointer-events: none + opacity 0.38).