Bar List

Ranked horizontal bar list — top countries, top pages, top referrers. Each row shows a label with a proportional bar layer behind it and a value flush right — the bar fills the label column only, so it never sits under the number. Pure HTML/CSS; the only JS is a tiny init pass that computes each row's width as a percentage of the list's max value. Drop inside Card for a stand-alone widget, or pair with charts for richer breakdowns.

a11y (built in): the list stays a real ul/li — the initialiser only adds classes and a --bar-width custom property, injects no roles or ARIA, and every value is literal text, so a screen reader reads label and number without help. The bar is a ::before layer with pointer-events: none — decoration, never content. Flag labels pair an alt="" image with a visible code or name, and --interactive is hover styling only: put a real <a> or <button> in the label to make a row keyboard-reachable.

Usage: Add data-lb-bar-list to a <ul>. Each <li data-lb-bar-list-row data-lb-value="N"> gets a .lb-bar-list__label and .lb-bar-list__value. Add lb-bar-list--interactive for hover state. Color via style="--color: var(--lb-data-N)".

Default — top countries

Plain ranked bars, no surface around them. Largest value fills its row; everything else is proportional. Country labels use the .lb-flag component for compact representation — flag image plus 2-letter ISO code, same flag set the Phone input uses.

Flag + full name

Pair the flag with the country name when there's room. The .lb-flag__label span carries the name; both align baseline-flush with the flag.

In a Card — labelled widget

Wrap in a Card with a heading and caption for a stand-alone dashboard widget.

Color variants

Color the bars per list via the --color custom property — useful when you have multiple Bar Lists side by side and want each to read distinctly.

Interactive — clickable rows

Add lb-bar-list--interactive for hover state + pointer cursor. Wrap labels in <a> tags for navigation, or attach a click listener to each row.