Overflow List Count Alpha Light DOM & Tailwind

Usage

Overflow List Count is the declarative count-only companion to Overflow List. Nest it inside the list’s consumer-owned slot="overflow" Badge or another suitable affordance. It derives the count from the nearest Overflow List and does not require an event listener or setup script.

import "@nordhealth/components/lib/OverflowListCount"

Use this helper for non-interactive, nonessential tags or metadata when a summary count is sufficient. It does not expose individual hidden content or actions; use Overflow List Menu whenever overflowed items must remain actionable.

Composition

Overflow List Count reads hidden-item state from its nearest Overflow List and renders consumer-owned count text inside the list's overflow affordance. It has no interactive state of its own and follows the semantics of the enclosing slot="overflow" element.

Examples

Labels and formatting

The default visual label is +N more. Add compact to show +N, as in the Badge Tags example. Counts use Intl.NumberFormat with the active document language.

Set singular-label and plural-label to identify the hidden content. For example, singular-label="tag" plural-label="tags" exposes an accessible phrase such as “1 more tag” or “2 more tags”.

Accessibility

• Treat the helper as text inside its enclosing overflow affordance; it is not an interactive control by itself.
• Do not use a count alone as an equivalent replacement for hidden actions.
• Keep the enclosing slot="overflow" element at the logical collapse edge in DOM order.