Chip
Compact, toggle-able tag — interactive by definition (pointer cursor, hover, selected state). For read-only descriptors that just label a thing, use Badge instead. Unselected chips take the neutral secondary-action style: per the accent principle, violet signals primary actions, links and state only. Selected chips take the quiet selection contract — action-bg/fg/border-selected, an accent-muted fill with accent text and border — the same reading as selected rows, tabs and date ranges. Clicking or pressing Enter/Space toggles selection; a leading check appears while selected — the × removal idiom lives only on Multi-Select field pills. Use for filter lists, tag selection, and multi-choice interfaces. Not for primary navigation.
a11y (built in): toggle chips ship as <span>s, so init gives every non-button chip role="button", tabindex="0" and a keydown handler that fires on Enter / Space; selection is conveyed programmatically via aria-pressed, written on init and re-synced on every toggle, because the quiet selected styling carries less weight than a filled one. The leading check is aria-hidden decoration, disabled chips return before any of that (no role, no tab stop, pointer-events: none), and focus draws the system :focus-visible outline.
Usage: Load js/lb.js and every .lb-chip auto-inits at LB.init() (self-runs on DOMContentLoaded) — no data attribute, no constructor; author <span class="lb-chip">Label</span> and add .lb-chip--selected to pre-select. Never author the check yourself: init injects and removes .lb-chip__check as selection changes, and strips any legacy .lb-chip__remove button. Every toggle dispatches a bubbling lb-chip-toggle CustomEvent with detail.selected (boolean) — listen once on a container; there is no instance handle or method API, so state reads from the class. Chips inside [data-lb-multi-select] or .lb-filter-bar are deliberately skipped — those are removal pills owned by their field — as are --disabled chips.