Angular Badges Library | ng-hub-ui-badges

Version 22.6.1 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.6.0 - 7/7/26, 12:00 AM

added: hub-badge-theme(...) mixin — one-call token theming for <hub-badge> / <hub-chip>: accent (drives the shared role family) plus the shell tokens (bg, color, border-color, border-radius, border-width, padding-x/-y, gap, font-size, font-weight). Null-defaulted and additive; the existing variant-registration API (hub-badge-variant-rules / hub-badge-color-rules) stays for registering new named accents. @use 'ng-hub-ui-badges/styles' as *;.

changed: <hub-badge> / <hub-chip> [color] accepts ANY colour. On top of the built-in semantic accents, the input now also accepts a registered custom accent and a literal colour (#ff0000, rgb(...), oklch(...), a CSS named colour), resolved through the shared resolveHubAccent helper (imported from ng-hub-ui-utils): a bareword becomes var(--hub-sys-color-<name>, <name>); a literal is used as-is. The single --hub-<comp>-accent slot derives the rest of the family, so built-in colours are unchanged.

changed: Internal — host bindings moved to the host metadata object. @HostBinding / @HostListener decorators were replaced by the host object in the component/directive metadata (Angular style guide). No public API or behaviour change.

changed: Added ng-hub-ui-utils (>=22.7.0) as a peer dependency (already used at runtime; now declared).

Version 22.5.0 - 7/6/26, 12:00 AM

removed: BREAKING — HubBadgeGroupComponent (<hub-badge-group>) removed. It was a purely presentational flex wrapper whose four inputs (direction / align / gap / wrap) mapped 1:1 to CSS, redundant with the standard flex utilities the library already ships. Arrange badges with <div class="d-flex flex-wrap gap-2"> (add flex-column / align-items-* as needed). The HubBadgeGroupDirection / HubBadgeGroupAlign types and the internal --hub-badge-group-gap / --hub-badge-group-align tokens are gone too.

added: hub-chip + hub-chip-set — interactive filter-chip primitives. hub-chip is a togglable, optionally removable tag that reuses the badge accent contract for its colours (it points the shared --hub-badge-accent slot from its color input and derives every surface from that family via the new hub-badge-accent-family mixin). It exposes selected (two-way model), value, color, disabled, removable, removeLabel inputs and selectedChange / removed / chipClick outputs, projects a leading icon/avatar through [hubChipLeading], and behaves as a role="button" toggle with aria-pressed and Space/Enter support. hub-chip-set groups chips with selectionMode ('single' | 'multiple') and a two-way value model, deselecting siblings in single mode. New tokens: --hub-chip-bg, --hub-chip-color, --hub-chip-border-color, --hub-chip-selected-bg, --hub-chip-selected-color, --hub-chip-hover-bg, --hub-chip-gap, --hub-chip-focus-ring (plus the shell tokens --hub-chip-font-family/-size/-weight, --hub-chip-padding-x/-y, --hub-chip-border-width/-radius, --hub-chip-focus-ring-width, --hub-chip-transition and --hub-chip-set-gap).

added: Interactive badges. New interactive input turns a badge into a role="button" toggle with a keyboard tab stop that emits the new selected output on click / Enter / Space, and an active input toggles the pressed state (.hub-badge--active, aria-pressed) reading the new --hub-badge-active-bg slot. All default-off and additive.

added: Overlay status dot. New dotOverlay input renders the status dot absolutely positioned at a badge corner (distinct from the existing inline leading dot), with a dotPlacement input ('top-end' | 'top-start' | 'bottom-end' | 'bottom-start') and the new --hub-badge-overlay-offset token controlling the corner inset.

added: neutral, light and dark documented as built-in colours. HubBadgeBuiltinColor now lists all nine canonical accents the stylesheet already registers, so the type matches the runtime.

added: Designed bg/fg pair registration. hub-badge-variant-rules($type, $accent, $bg, $fg, $border, $subtle) gained optional $bg / $fg / $border / $subtle overrides: pass any of them to pin the corresponding final slot for a variant; omit them to keep today's runtime derivation. Fully backward compatible.

added: hub-badge-accent-family mixin. Exposes the runtime-derived accent role family (-emphasis / -subtle / -border / -on) as a single shared mixin, now included by both hub-badge and hub-chip so the colour derivation lives in one place.

Version 22.4.1 - 7/2/26, 12:00 AM

fixed: CSS variable fallbacks realigned to the ds light defaults (--hub-ref-font-family-base: inherit → system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); fallbacks only apply when ng-hub-ui-ds is not loaded.

fixed: Docs: docs/css-variables-reference.md default values resynchronized with the actual code declarations (now guarded by the repo-level tokens-parity check F).

Version 22.4.0 - 6/29/26, 12:00 AM

added: Text truncation with ellipsis, bounded by the new `--hub-badge-max-width` CSS variable.

added: `tooltip` input plus auto tooltip on truncated content (native `title` by default).

added: Optional hub-ui tooltip integration via `provideHubBadgeTooltip(hubTooltipAdapter)` (from ng-hub-ui-utils).

Version 22.0.0 - 6/24/26, 12:00 AM

added: `HubBadgeComponent` with semantic variants, status dots and dismissible mode.

added: `HubBadgeGroupComponent` for wrapped and stacked badge layouts.

added: Public SCSS mixins at `ng-hub-ui-badges/styles` for registering custom semantic colour families.