Counter

Numeric notification pill, hosted by tabs, accordions, calendar cells, and buttons. Single component (.lb-counter) reused across all four hosts so the shape, sizing, and contrast guarantees stay consistent. Auto-hides when empty, so consumers can blank textContent to remove the pill without rebuilding the DOM. For a labelled status pill (success / warning / danger with text), use Badge instead.

a11y (built in): the pill is plain text in a <span> and is deliberately not aria-hidden, so its digits join the host's accessible name — the button below reads as “Inbox 8” — and .lb-counter:empty { display: none } means blanking textContent leaves that name clean rather than trailing an empty node. Where a bare number would be ambiguous the host passes a spelled-out name instead: Calendar renders its count pill with aria-label="3 slots available". Colour is always a bg/fg token pair, never a background alone — --on-btn inherits the host button variant's pair, and the theme editor re-picks action.fg-primary-* against a 4.5:1 threshold whenever the user changes brand colour.

Usage: <span class="lb-counter">5</span> — default is brand-themed and contrast-safe in both light and dark themes (bg routes through action.bg-primary-default, digit through action.fg-primary-default, which the theme editor re-points to whichever of fg.inverse / fg.default reads better on the chosen brand). Add --small for a 16px pill, --subtle for a quiet/dimmed variant, or --on-btn when nesting inside a button so the pill inherits the button variant's colour pair.

Default — brand-themed

Standalone pill that sits anywhere on the page. Used by Tabs, Accordion, and Calendar for "N items / events / open" affordances. Brand bg with its paired digit colour — white in the shipped themes, re-picked against the brand colour when the user overrides it in the theme editor — so the pair keeps its contrast in light and dark.

Small

Compact 16px pill for dense rows — calendar month cells, small buttons, tight tab strips. Same colour treatment as the default; only the box shrinks and the type drops to caption-s.

Subtle — dimmed

Quiet variant for low-priority counters: items in past calendar days, archived rows, "+N more" chips, stale notifications. Bg routes through bg.disabled, digit through fg.disabled — reads as "activity gone" rather than "current attention". Available at both sizes.

On a button

Nest .lb-counter--on-btn inside a button to flip the colour treatment: bg becomes the button's text colour, digit becomes the button's bg colour. Each button variant scopes its own colour pair, so the counter inverts correctly on primary, secondary, danger, and ghost buttons. Auto-downsizes when the host button is --small.

Auto-hide when empty

A counter with no text content collapses to display: none. Useful for live updates — set textContent = '' to remove the pill without touching the surrounding markup.