Librería de badges para Angular | ng-hub-ui-badges

Version 22.6.3 - 9/6/26, 12:00 AM

fixed: A disabled interactive <hub-badge> now exposes aria-disabled="true". With interactive the host takes role="button", and disabled pulled it out of the tab order while silently swallowing every activation, so a screen-reader user landing on it by any other route (a virtual cursor, the rotor, a scripted focus) met a button that announced no state and did nothing when pressed. The host now reflects that state the way <hub-chip> already did. A non-interactive badge carries nothing new: it has no role to be disabled, and its dismiss button keeps announcing itself through the native disabled attribute.

fixed: The SCSS entry point the README teaches is now declared in the manifest. styles/ shipped in the published package, but the exports map ng-packagr writes listed only . and ./package.json, so @use 'ng-hub-ui-badges/styles' rested on a resolver willing to ignore the map and walk into node_modules by hand. The manifest now declares the ./styles entry, making the documented import part of the package contract instead of an accident of the consumer's tooling.

fixed: The documentation now describes the library that shipped. Both READMEs still promised six built-in colours where the type and the stylesheet register nine, named only HubBadgeComponent in the feature list although hub-chip and hub-chip-set have been public since 22.5.0, and said nothing about hub-badge-theme or about [color] taking a literal colour. The Spanish README was additionally missing the tooltip-synergy section and the chip snippets its English twin carries. A reader had no way to tell the gap from a deliberate omission.

fixed: BREAKING_CHANGES.md records the two breaking releases it had skipped. The file claimed the only entry worth making was the 22.0.0 initial release, while 22.5.0 removed HubBadgeGroupComponent and 22.3.0 changed the hub-badge-variant-rules signature and dropped the --hub-badge-accent-contrast token. Since the major of this package tracks the Angular major, the version number can never warn about a breaking change, so that file is the only notice a consumer gets.

added: FUNCTIONALITIES.md, the feature-versus-example coverage table the other libraries publish. It is the honest answer to whether a feature can be seen running anywhere, and it marks what has no example (the interactive badge, the overlay dot, disabled) rather than implying even coverage.

Version 22.6.2 - 9/1/26, 12:00 AM

changed: The homepage in the manifest points at this library's own documentation page rather than at the site root. It is the link a registry shows beside the package and the one a reader clicks from it, and landing on a front page they then have to search is a worse answer than landing on the reference for the package they were already looking at. Metadata only — no code, no types, no styles change, and nothing a consumer imports is affected.

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.3.0 - 6/26/26, 12:00 AM

added: New on-accent contrast pair --hub-badge-accent-on: a grayscale contrast flip of the accent that picks white or near-black text automatically from the accent's own lightness. Replaces the hard-coded per-colour --hub-badge-accent-contrast (and the $hub-badge-light-accents / hub-badge-on-accent() helper that listed warning/info by hand).

added: Open-set theming at runtime: any new accent (e.g. brand) works with a single CSS rule that points the slot at a colour — .hub-badge[data-variant='brand'] { --hub-badge-accent: var(--hub-sys-color-brand); } — and emphasis / subtle / border / on derive themselves. The open path no longer depends on the @each or on recompiling the library.

changed: The local accent slot --hub-badge-accent now derives its whole role family at runtime from the slot itself (recomputed live whenever the accent changes), instead of reading per-type --hub-sys-color-{type}-* tokens.

changed: Known-variant loop expanded from 6 to the 9 canonical accents — primary, secondary, success, danger, warning, info, neutral, light, dark — where each [data-variant] only points --hub-badge-accent at its --hub-sys-color-{variant}.

changed: hub-badge-variant-rules($type, $accent) simplified: it now only sets the local accent slot for a variant (no role/contrast parameters); the role family is derived in the component.

changed: Migrated every color-mix(in srgb, …) to in oklch (soft/subtle borders and the remove-button hover overlay).

removed: Hard-coded --hub-badge-accent-contrast token and the $hub-badge-light-accents list / hub-badge-on-accent() helper; on-accent text is now derived from the accent via --hub-badge-accent-on.

removed: Duplicated per-[data-variant] role derivations (previously re-declared in srgb); the single slot-derived family now covers every variant.

Version 22.2.1 - 6/25/26, 12:00 AM

fixed: Design-token consistency pass: aligned inline fallback defaults with the canonical ng-hub-ui-ds values and routed hardcoded literals (z-index, font-weight, line-height, radii and theme-aware colours) through their --hub-sys-* / --hub-ref-* tokens, so they follow the active theme. No visual change when the ds tokens are loaded.

Version 22.2.0 - 6/25/26, 12:00 AM

changed: Consolidated every badge dimension token onto the shared --hub-ref-* reference scale (a compact mapping that keeps the badge chip-sized), so sizing resolves through the design-system tokens instead of hand-tuned rem literals — matching the Figma ff/badge variable layer. Base: --hub-badge-padding-x 0.625rem → var(--hub-ref-space-2), --hub-badge-padding-y 0.375rem → var(--hub-ref-space-1), --hub-badge-gap 0.375rem → var(--hub-ref-space-1), --hub-badge-dot-size 0.5rem → var(--hub-ref-space-2). The size ramp xs / sm / md / lg now references --hub-ref-space-* and --hub-ref-font-size-*.

changed: Visual note: md padding tightens (10→8px / 6→4px) so the chip stays compact; the other steps land on the nearest reference token. Behaviour is unchanged.

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

changed: Lower peerDependencies for @angular/core and @angular/common to >=21.0.0. The library now supports Angular 21 and later.

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

changed: Generate the built-in semantic colour rules (primary, secondary, success, danger, warning, info) with a single @each loop over the public hub-badge-variant-rules mixin, instead of hand-written per-colour blocks. A hub-badge-on-accent() helper standardises the on-accent text to black or white per colour (light accents like warning/info get black). Built-ins now share the exact selector shape and token contract used by consumer-registered colours.

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.