Label Badges

Features

• Five simultaneous labeled groups following the badge-family showcase pattern (.lb-group sections with mono overline labels and hairline rules): Collections (tint), Workspace (frame), Signals (solid), Tallies (tally dot), and Marks (icon-only)
• Chamfered freight-tag plate geometry with design-system-aware board shape and elevation
• Curated nine-hue industrial signal spectrum (scarlet, magenta, plum, indigo, cobalt, steel, forest, citron, graphite) emitted by the Freight Citron design system as --color-lb-* / --color-lb-*-dark pairs and aliased per theme in css/variables.css
• Every label badge carries a Space Mono count chip from js/data.js counts; tally plates lead with an accent dot instead of an icon
• Selectable badges everywhere: the Tabler icon cross-morphs into a check (transform and opacity only), the frame layer fills with the accent, and a dashed summary strip reports "N selected" with a Clear all action
• Inline label management scoped to the Collections group: a dashed "New label" ghost swaps into a citron chamfered editor plate — Space Mono uppercase input with citron caret, confirm (check) and cancel (x) icon buttons, Enter commits, Escape cancels, empty submits flash the error frame — new labels take the next accent in rotation, chips expose a hover/focus remove button, and Reset restores the stock set, all persisted in localStorage
• js/api.js exposes a swap-for-fetch API seam; chamfered shimmer skeletons fill every group while loading
• Roving arrow-key navigation across all groups (Left/Right/Home/End) with Delete removing the focused Collections badge
• Contrast-safe nine-hue roles, localized counts, guarded persistence, visible async errors, and robust action targets

Accessibility

Badge selection

Badges are <button> elements with aria-pressed and a descriptive aria-label including the count

Remove buttons

Each editable chip's remove button carries aria-label="Remove {label}", appears on hover or focus-within, and shifts to an error-tinted fill on its own hover/focus-visible — clip-path clips the outline, so the fill shift is the focus affordance

Summary strip

The "N selected" text region uses aria-live="polite"

Group structure

Each style family is a <section> with a visible group label

Roving tabindex

One tab stop across the whole board; arrows, Home and End move focus

Focus indicators

Global :focus-visible outline using the contrast-safe --focus-ink token

Reduced motion

prefers-reduced-motion: reduce collapses all motion

Customise it with AI

Open Label Badges in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the badge is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.